۱۲ راه کاربردی برای بالا بردن سرعت سایت.

کار روی سرعت وقتی ساده‌تره که اول بزرگ‌ترین تأخیر رو درست کنید. قبل از هر تغییری اندازه بگیرید، هر بار یه چیز رو عوض کنید و بعدش هم مانیتور رو روشن نگه دارید تا بهبود بی‌سروصدا با انتشار بعدی از بین نره.

نکته‌های کلیدی

• اول اندازه بگیرید: زمان سرور (TTFB) و حجم بخش جلویی راه‌حل‌های متفاوتی لازم دارن.
• کش (در CDN، سرور و دیتابیس) معمولاً بیشترین بهبود رو می‌ده.
• متن رو فشرده کنید، عکس‌ها رو کوچیک و مدرن کنید و اسکریپت‌ها رو بدون مسدود کردن رندر بارگذاری کنید.
• ریدایرکت و تگ ثالث کمتر به همه‌ی بازدیدکننده‌ها کمک می‌کنه.
• مانیتورینگ زمان پاسخ رو روشن نگه دارید تا پسرفت‌ها بعد از دیپلوی پیدا بشن.

با اندازه‌گیری شروع کنید

مشکل رو دو قسمت کنید:

• سمت سرور؛ چقدر طول می‌کشه تا اولین بایت برسه؟ TTFB رو در مانیتورینگ زمان پاسخ یا ابزار توسعه‌دهنده‌ی مرورگر ببینید.
• سمت کاربر؛ بعدش چقدر باید دانلود و اجرا بشه؟ نمودار آبشاری شبکه‌ی مرورگر و گزارش‌های سرعت صفحه رو نگاه کنید.

اگه TTFB بالای یه ثانیه است، دستکاری بخش جلویی نجاتتون نمی‌ده. اگه TTFB صد و پنجاه میلی‌ثانیه است ولی صفحه ۶ مگابایت وزن داره، مشکل سرور نیست.

بهبودهای سمت سرور

۱. هر جا می‌شه کل صفحه رو کش کنید

صفحه‌هایی که برای همه‌ی بازدیدکننده‌ها یکسان‌ان (صفحه‌ی اصلی، مقاله‌ها، صفحه‌ی محصول برای کاربر واردنشده) رو می‌شه چند دقیقه از کش ارائه داد و کلاً برنامه رو دور زد.

۲. داده‌های گرون رو کش کنید

نتیجه‌ی کوئری‌های کند یا تماس‌های API بیرونی رو در یه کش حافظه مثل Redis با زمان انقضای معقول نگه دارید.

۳. کوئری‌های کند دیتابیس رو درست کنید

لاگ کوئری‌های کند رو روشن کنید، برای فیلترها و مرتب‌سازی‌هایی که واقعاً استفاده می‌کنید ایندکس بذارید و الگوهای «N+1» رو که برای هر آیتم لیست یه کوئری اجرا می‌کنن حذف کنید.

۴. برای فایل‌های ایستا از CDN استفاده کنید

عکس، CSS، جاوااسکریپت و فونت رو از CDN نزدیک کاربرها، با عمر کش طولانی و اسم فایل نسخه‌دار ارائه بدید.

۵. HTTP/2 یا HTTP/3 و keep-alive رو فعال کنید

پروتکل‌های مدرن درخواست‌های زیادی رو روی یه اتصال چندگانه می‌کنن و بخش بزرگی از هزینه‌ی بارگذاری فایل‌های کوچیک زیاد رو حذف می‌کنن.

۶. پاسخ‌های متنی رو فشرده کنید

Brotli یا gzip رو برای HTML، CSS، جاوااسکریپت، JSON و SVG روشن کنید:

# nginx
gzip on;
gzip_types text/css application/javascript application/json image/svg+xml;

بهبودهای سمت کاربر

۷. عکس‌ها رو کوچیک و مدرن کنید

عکس‌ها معمولاً سنگین‌ترین بخش صفحه‌ان. اون‌ها رو به اندازه‌ی نمایش، در قالب WebP یا AVIF ارائه بدید و عکس‌های پایین صفحه رو با loading="lazy" با تأخیر بارگذاری کنید.

۸. اسکریپت‌ها رو بدون مسدود کردن بارگذاری کنید

به اسکریپت‌هایی که لازم نیست قبل از نمایش صفحه اجرا بشن defer اضافه کنید و بسته‌های بزرگ رو تقسیم کنید تا هر صفحه فقط چیزی که لازم داره رو بارگذاری کنه.

۹. با تگ‌های ثالث محتاط باشید

ویجت‌های چت، ردیاب‌ها و اسکریپت‌های تبلیغاتی هر کدوم درخواست و زمان CPU اضافه می‌کنن؛ گاهی از سرورهای کند خارجی. اون‌هایی که کسی استفاده نمی‌کنه رو حذف کنید و بقیه رو بعد از محتوای اصلی بارگذاری کنید.

۱۰. فونت‌ها رو بهینه کنید

فونت‌ها رو روی سرور خودتون میزبانی کنید، از قالب WOFF2 استفاده کنید، فقط وزن‌ها و مجموعه‌کاراکترهای لازم رو بذارید و از font-display: swap استفاده کنید تا متن فوراً نمایش داده بشه.

۱۱. زنجیره‌ی ریدایرکت رو حذف کنید

مستقیم به آدرس نهایی لینک بدید. هر ریدایرکت یه رفت‌وبرگشت کامل قبل از شروع هر کار دیگه‌ای اضافه می‌کنه.

۱۲. برای محتوا جا رزرو کنید

برای عکس‌ها و محتوای جاسازی‌شده عرض و ارتفاع تعیین کنید تا چیدمان موقع بارگذاری نپره؛ سریع‌تر حس می‌شه و از کلیک‌های اشتباه جلوگیری می‌کنه.

سریع نگهش دارید

سرعت بی‌صدا پسرفت می‌کنه: یه تگ جدید اینجا، یه کوئری بدون ایندکس اونجا. یه مانیتور زمان پاسخ با هشدار کندی روی صفحه‌های کلیدی بذارید و بعد از هر انتشار نمودار رو نگاه کنید.

پرسش‌های پرتکرار

• اول چی رو درست کنم؟

  +

  هر چیزی که اندازه‌گیری‌ها می‌گن بزرگ‌تره؛ معمولاً زمان سرور در سایت‌های پویا و عکس‌ها در سایت‌های پرمحتوا.

• سرور سریع‌تر همیشه یعنی سایت سریع‌تر؟

  +

  نه. یه سرور سریع می‌تونه صفحه‌ای تحویل بده که به خاطر عکس‌ها و اسکریپت‌های سنگین دیر رندر می‌شه. هر دو طرف رسیدگی لازم دارن.

• از کجا بفهمم یه تغییر جواب داده؟

  +

  همون اندازه‌گیری رو قبل و بعد، از همون لوکیشن‌ها و حداقل در طول یه روز مقایسه کنید تا الگوهای ترافیک عادی هم در نظر گرفته بشن.