چرا سایت کند است و چطور سریع میشود
سرعت سایت مسئلهای است که همه میدانند مهم است و کمتر کسی میداند از کجا شروع کند.
نتیجهاش این میشود که تیمها وقتشان را صرف بهینهسازیهایی میکنند که چند میلیثانیه اثر دارد، در حالی که یک تصویر ۴ مگابایتی در بالای صفحه نشسته است.
این مقاله ترتیب واقعی علتهاست — از پرتکرارترین و پراثرترین به بقیه.
چرا اصلاً مهم است
فراتر از رتبهٔ گوگل: کاربر ایرانی روی شبکهٔ همراه، صبر نمیکند. بخش بزرگی از ترافیک سایتهای فارسی از موبایل و شبکهٔ متغیر میآید، و صفحهای که چهار ثانیه سفید بماند، بخشی از بازدیدکنندگانش را پیش از دیده شدن از دست میدهد.
و در فروشگاه اینترنتی، این مستقیماً به نرخ تبدیل وصل است.
علت ۱: تصاویر
شایعترین علت کندی سایتهای فارسی، بدون رقیب.
چهار کاری که به ترتیب باید انجام شود:
اندازهٔ درست بدهید. تصویری که در صفحه ۶۰۰ پیکسل نمایش داده میشود، نباید ۳۰۰۰ پیکسل باشد. این تنها پرتکرارترین اشتباه است.
قالب مدرن. WebP معمولاً ۲۵ تا ۳۵ درصد کوچکتر از JPEG با همان کیفیت است و امروز همهجا پشتیبانی میشود.
بارگذاری تنبل برای تصاویر پایین صفحه — با صفت loading="lazy"، که یک
ویژگی مرورگر است و کتابخانه نمیخواهد.
ابعاد را در HTML بنویسید. بدون width و height، مرورگر جای تصویر را
نمیداند و صفحه هنگام بارگذاری میپرد. این هم تجربهٔ کاربر را خراب میکند و
هم یکی از سه معیار اصلی گوگل را — که در
معیارهای تجربهٔ صفحه توضیح دادهایم.
تصویر بالای صفحه را تنبل نکنید. اشتباه رایج معکوس: lazy روی تصویر اصلی
هدر، بارگذاریاش را عقب میاندازد و دقیقاً همان چیزی را کند میکند که باید
سریع باشد.
علت ۲: فونت فارسی
مسئلهای که در راهنماهای خارجی نیست و برای ما جدی است.
فونتهای فارسی معمولاً حجیماند و اگر درست بارگذاری نشوند، متن تا رسیدن فونت نامرئی میماند. کاربر صفحهای میبیند که ساختار دارد و متن ندارد.
سه کار:
font-display: swap — متن با فونت جایگزین نمایش داده شود تا فونت اصلی
برسد.
پیشبارگذاری فونت اصلی با <link rel="preload">.
فقط وزنهایی را که استفاده میکنید بارگذاری کنید. سایتی که پنج وزن فونت میآورد و از دو تا استفاده میکند، بیجهت سنگین است.
و فونت را خودمیزبان کنید، نه از سرویس بیرونی. هم سریعتر است و هم به سرویسی وابسته نیست که ممکن است در دسترس نباشد. تفصیل مسائل تایپوگرافی فارسی در وب فارسی.
علت ۳: اسکریپتهای شخص ثالث
ابزار تحلیل، چت آنلاین، پیکسل تبلیغاتی، نقشه، ویدیوی جاسازیشده، نماد اعتماد.
هرکدام کوچک به نظر میرسند. مجموعشان اغلب از کل کد خود سایت سنگینتر است — و بدتر: شما کنترلی روی سرعتشان ندارید. اگر سرور آن سرویس کند باشد، سایت شما کند است.
سه اقدام:
فهرست کنید. بیشتر سایتها اسکریپتهایی دارند که سالها پیش اضافه شده و دیگر استفاده نمیشوند.
با تأخیر بارگذاری کنید. ویجت چت لازم نیست در ثانیهٔ اول بیاید.
ویدیو را با تصویر جایگزین کنید تا کاربر کلیک کند. جاسازی مستقیم ویدیو، صدها کیلوبایت به هر صفحه اضافه میکند حتی اگر کسی پخشش نکند.
علت ۴: بدون فشردهسازی
بررسی سادهای که خیلی از سایتها رد میشوند: آیا سرور خروجی متنی را فشرده میفرستد؟
فشردهسازی brotli معمولاً ۷۰ تا ۸۵ درصد حجم HTML و CSS و JS را کم میکند. یک خط تنظیم در سرور، و بزرگترین برد بهازای کمترین کار در کل این فهرست.
علت ۵: کش نکردن
فایلهایی که تغییر نمیکنند — تصاویر، فونت، CSS — باید در مرورگر کش شوند تا در بازدید بعدی دوباره دانلود نشوند.
روش استاندارد: نام فایل شامل هش محتوا باشد و سرصفحهٔ کش طولانی بگیرد. وقتی فایل عوض شد، نامش عوض میشود و کش خودبهخود بیاعتبار میشود.
راهبرد کلی کش در سمت سرور، موضوع جدایی است: راهبرد کش.
علت ۶: کوئریهای سمت سرور
اگر خود HTML دیر میرسد، مشکل جای دیگری است.
شایعترینش الگوی «یک بهعلاوهٔ N» است: صفحهای که فهرست بیست محصول را نشان میدهد و برای هر محصول یک کوئری جدا میزند. با بیست محصول قابل تحمل است، با دویستتا نه.
نشانه: صفحهای که با دادهٔ کم سریع است و با دادهٔ واقعی کند.
علت ۷: جاوااسکریپت زیاد
سایتهایی که با فریمورکهای سنگین ساخته شدهاند، ممکن است برای نمایش یک صفحهٔ عمدتاً متنی، صدها کیلوبایت جاوااسکریپت بفرستند.
سؤالی که باید پرسید: این صفحه اصلاً چقدر تعامل دارد؟ صفحهٔ «دربارهٔ ما» یا مقالهٔ بلاگ، به هیچ جاوااسکریپتی نیاز ندارد. بحث کاملش در تکصفحهای یا چندصفحهای.
چطور اندازه بگیریم
نه روی لپتاپ خودتان با اینترنت اداری. آنجا همهچیز سریع است.
سه کار:
ابزار سنجش را روی موبایل و شبکهٔ کند اجرا کنید. ابزارهای رایگان مثل Lighthouse این حالت را شبیهسازی میکنند.
سه صفحهٔ متفاوت را بسنجید: صفحهٔ اصلی، صفحهٔ محصول یا مقاله، و صفحهٔ فهرست با دادهٔ زیاد. معمولاً سومی بدترین است.
دادهٔ کاربران واقعی را ببینید، نه فقط آزمایشگاهی. ابزار تحلیل شما احتمالاً زمان بارگذاری واقعی را ثبت میکند — و آن عدد، عدد واقعی است.
ترتیب کار، اگر وقت محدودی دارید
اگر یک روز وقت دارید، به این ترتیب:
۱. فشردهسازی سرور را روشن کنید. پنج دقیقه.
۲. تصاویر بزرگ را کوچک و به WebP تبدیل کنید. بیشترین برد.
۳. loading="lazy" و ابعاد برای تصاویر پایین صفحه.
۴. اسکریپتهای بیاستفاده را حذف و بقیه را با تأخیر بارگذاری کنید.
۵. کش فایلهای ثابت را تنظیم کنید.
۶. فونت را درست کنید.
این شش کار در بیشتر سایتهای فارسی، زمان بارگذاری را نصف میکند. بقیهٔ بهینهسازیها بعد از اینها معنا دارند.
و یک هشدار
زودهنگام بهینه نکنید. سایتی که هنوز کاربر ندارد، مسئلهٔ سرعت ندارد. اندازه بگیرید، بدترین را پیدا کنید، همان را درست کنید — و دوباره اندازه بگیرید.
بهینهسازی بدون اندازهگیری، حدس زدن است با کد.