چطور سرعت سایت را بالا ببریم؟ ۸ کار مؤثر (با معیارهای Core Web Vitals)

سرعت سایت هم روی تجربه‌ی کاربر و هم روی دیده‌شدن در جستجو اثر دارد. گوگل برای سنجش تجربه‌ی صفحه از چند معیار به نام Core Web Vitals استفاده می‌کند. قبل از هر بهینه‌سازی، باید بدانید چه چیزی را اندازه می‌گیرید.

معیارها

• LCP (Largest Contentful Paint): زمان نمایش بزرگ‌ترین بخش محتوای صفحه. هدف: کمتر از ۲٫۵ ثانیه.
• CLS (Cumulative Layout Shift): میزان جابه‌جا شدن ناگهانی محتوا هنگام لود. هدف: کمتر از ۰٫۱.
• INP (Interaction to Next Paint): تاخیر پاسخ صفحه به تعامل کاربر. هدف: کمتر از ۲۰۰ میلی‌ثانیه.

برای اندازه‌گیری از Lighthouse (داخل Chrome DevTools) یا PageSpeed Insights استفاده کنید؛ نتیجه را روی موبایل ببینید، چون معمولاً ضعیف‌تر است.

۸ کار مؤثر

۱. عکس‌ها را بهینه کنید. معمولاً بیشترین تاثیر را دارد: ابعاد درست، WebP، کیفیت مناسب، srcset. جزئیاتش در فشرده‌سازی عکس برای وب و WebP چیست؟ آمده است.

۲. عکس اصلی بالای صفحه را زود بارگذاری کنید. عنصر LCP را با fetchpriority="high" (و در صورت لزوم preload) علامت بزنید و عکس‌های زیر صفحه را lazy کنید.

۳. عرض و ارتفاع بدهید. برای عکس و ویدیو، تا فضا از قبل رزرو شود و CLS بالا نرود.

۴. فونت را سبک کنید. فقط وزن‌هایی که لازم است، فرمت woff2، font-display: swap، و در صورت امکان میزبانی روی همان دامنه.

۵. جاوااسکریپت را کم و با defer بارگذاری کنید. کتابخانه‌های سنگین (انیمیشن، اسلایدر) را فقط در صفحه‌هایی که لازم‌اند بارگذاری کنید. جاوااسکریپتِ مسدودکننده‌ی رندر یکی از دلایل رایج LCP بد است.

۶. کش را درست تنظیم کنید. فایل‌های ثابت (تصویر، فونت، CSS و JS دارای hash) با کش بلندمدت؛ و HTML با کش کوتاه یا بررسی مجدد. در Vercel یا Netlify از فایل تنظیمات هدرها استفاده کنید.

۷. فشرده‌سازی متن را فعال کنید. Gzip یا Brotli برای HTML، CSS، JS و JSON. هاست‌های استاتیک امروزی معمولاً خودکار انجام می‌دهند؛ ولی بررسی کنید.

۸. از CDN استفاده کنید. رساندن فایل‌ها از نزدیک‌ترین نقطه به کاربر، تاخیر شبکه را کم می‌کند. به یاد داشته باشید که برای کاربران ایران در دسترس بودن CDN انتخابی را هم تست کنید.

یک نکته درباره‌ی کتابخانه‌های CDN

اگر استایل‌دهی را با اسکریپت‌های ساخت‌در-مرورگر (مثل نسخه‌ی CDN تیلویند) انجام می‌دهید، این کار در مرورگر کاربر پردازش می‌کند. برای تولید بهتر است CSS را در زمان build بسازید و فقط کلاس‌های استفاده‌شده را بفرستید. ما هم این کار را برای همین سایت در فهرست کارها داریم.

بعد از بهینه‌سازی

دوباره اندازه بگیرید و تغییرات را ثبت کنید. بهبودهای کوچک در عکس و جاوااسکریپت اغلب بیشتر از «بهینه‌سازی‌های پیشرفته» اثر دارند.

چک‌لیست

عکس‌های WebP و کوچک؛ عنصر LCP با اولویت؛ width/height؛ فونت سبک؛ JS با defer و حداقلی؛ کش درست؛ Brotli/Gzip؛ CDN؛ و اندازه‌گیری مداوم روی موبایل.

سوالات رایج

نمره‌ی ۱۰۰ لازم است؟ نه؛ هدف تجربه‌ی روان است، نه عدد. معیارهای Core Web Vitals را در بازه‌ی «خوب» نگه دارید.

چرا سایتم روی موبایل کندتر است؟ CPU ضعیف‌تر و شبکه‌ی کندتر؛ Lighthouse هم عمداً موبایل را با محدودیت شبیه‌سازی می‌کند.