Core Web Vitals مجموعهای از معیارهای تجربه کاربری هستند که گوگل برای ارزیابی کیفیت یک وبسایت از آنها استفاده میکند. این معیارها مستقیماً روی رتبهبندی سایت شما تأثیر میگذارند و نادیده گرفتنشان یعنی از دست دادن ترافیک ارگانیک ارزشمند. خوشبختانه، بهبود Core Web Vitals با دانش فنی مناسب کاملاً امکانپذیر است. در این مقاله، قدمبهقدم یاد میگیریم چگونه سه معیار اصلی LCP، INP و CLS را اندازهگیری و بهینهسازی کنیم تا سایت شما در PageSpeed Insights و Search Console چراغ سبز دریافت کند.
معیارهای Core Web Vitals در یک نگاه
سه معیار اصلی وجود دارند که هرکدام جنبهای از تجربه کاربر را پوشش میدهند:
- LCP (Largest Contentful Paint): سرعت بارگذاری بزرگترین المان قابل مشاهده (معمولاً تصویر یا بلوک متنی اصلی). مقدار مطلوب: کمتر از ۲.۵ ثانیه.
- INP (Interaction to Next Paint): معیار جدیدی که جایگزین FID شده و تأخیر کلی تعاملات کاربر را اندازه میگیرد. مقدار مطلوب: کمتر از ۲۰۰ میلیثانیه.
- CLS (Cumulative Layout Shift): میزان جابجاییهای ناگهانی چیدمان صفحه در حین بارگذاری. مقدار مطلوب: کمتر از ۰.۱.
برای اندازهگیری این معیارها میتوانید از Lighthouse در Chrome DevTools، PageSpeed Insights، Web Vitals Extension و گزارش Core Web Vitals در Google Search Console استفاده کنید. دادههای میدانی (Field Data) از کاربران واقعی جمعآوری میشود و با دادههای آزمایشگاهی (Lab Data) که شبیهسازیشده هستند، تفاوت دارند. برای بهینهسازی دقیق باید به هر دو توجه کرد.
بخش اول: کاهش LCP (Largest Contentful Paint)
LCP کند معمولاً به دلیل تصاویر سنگین، فونتهای دیربارگذاری، یا منابع بلاککننده رندر رخ میدهد. راهکارهای زیر را به ترتیب اولویت اجرا کنید:
۱. بهینهسازی تصاویر
اگر بزرگترین المان صفحه یک تصویر است، آن را با فرمت WebP یا AVIF ذخیره کنید. از compression مناسب استفاده کنید و تصویر را در ابعاد واقعی نمایش دهید (srcset). همچنین از lazy loading برای تصاویر پایین صفحه استفاده کنید، اما تصویر LCP را هرگز lazy نکنید؛ بلکه آن را با preload بالا بکشید:
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
۲. کاهش زمان پاسخ سرور (TTFB)
اگر TTFB شما بالاست، به هاست، CDN و کش سمت سرور توجه کنید. در یک سایت اختصاصی، میتوانید با بهینهسازی کوئریهای دیتابیس، ایندکسگذاری صحیح و استفاده از Redis/Memcached، TTFB را زیر ۲۰۰ میلیثانیه نگه دارید. همچنین از HTTP/2 یا HTTP/3 استفاده کنید.
۳. حذف منابع بلاککننده رندر
فایلهای CSS و JavaScript بحرانی را شناسایی کنید. CSSهای غیرضروری را async یا defer کنید. CSS اصلی را inline در head قرار دهید و مابقی را با media="print" یا loadCSS بارگذاری کنید. اسکریپتها را با defer یا async صدا بزنید. همچنین هرگونه CSS یا JS استفادهنشده را حذف کنید (ابزار Coverage در DevTools).
بخش دوم: بهبود INP (Interaction to Next Paint)
INP جایگزین FID شده و کل تأخیر تعاملات صفحه را در نظر میگیرد، نه فقط اولین تعامل. تمرکز اصلی بر روی کاهش long tasks (وظایف جاوااسکریپت طولانیتر از ۵۰ میلیثانیه) است.
۱. شکستن وظایف طولانی (Long Tasks)
کدهای سنگین را به تکههای کوچکتر تقسیم کنید. از setTimeout یا requestIdleCallback برای اجرای غیرهمزمان بخشهای غیرضروری استفاده کنید. همچنین وب ورکرها (Web Workers) میتوانند پردازشهای سنگین را به thread جداگانه منتقل کنند:
// main.js
const worker = new Worker('heavy-task.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* update UI */ };
۲. بهینهسازی Event Handlerها
از debounce و throttle برای رویدادهای scroll و resize استفاده کنید. از passive event listeners برای بهبود scroll performance بهره ببرید. همچنین کدهای analytics یا اسکریپتهای third-party را که موجب INP بالا میشوند، با تأخیر بارگذاری کنید یا به تعویق بیندازید.
۳. کاهش حجم جاوااسکریپت
کدهای استفادهنشده را حذف کنید (Tree Shaking). از code splitting و dynamic import استفاده کنید. کتابخانههای سنگین را با جایگزینهای سبکتر عوض کنید. در پروژههای اختصاصی شما کاملاً کنترل دارید که چه کدی در صفحه اجرا شود؛ از این مزیت استفاده کنید و فقط اسکریپتهای موردنیاز همان صفحه را load کنید.
بخش سوم: از بین بردن CLS (Cumulative Layout Shift)
جابجاییهای ناگهانی معمولاً ناشی از تصاویر بدون ابعاد، فونتهای دیربارگذاری، تبلیغات پویا یا تزریق محتوا با جاوااسکریپت است.
۱. تعیین ابعاد برای تمام تصاویر و ویدئوها
همیشه روی تگهای <img> و <video> صفات width و height را قرار دهید تا مرورگر فضای لازم را از ابتدا رزرو کند. یا از CSS aspect-ratio استفاده کنید. برای تصاویر responsive، از srcset همراه با sizes استفاده کنید.
۲. بهینهسازی بارگذاری فونتها
فونتهای سفارشی میتوانند باعث FOIT یا FOUT شوند و CLS ایجاد کنند. از font-display: swap یا optional استفاده کنید و فونتها را با preload در اولویت قرار دهید. همچنین fallback font را با استفاده از size-adjust تنظیم کنید تا اختلاف ابعاد بین فونت اصلی و fallback به حداقل برسد.
۳. تزریق محتوای پویا با احتیاط
بنرها، فرمهای ایمیل یا popupها را بالای محتوای موجود تزریق نکنید. همیشه یک placeholder با ارتفاع مشخص برای محتوای پویا در نظر بگیرید. اگر تبلیغات دارید، از CSS برای رزرو فضای آن استفاده کنید (حتی اگر تبلیغ پر نشود).
ابزارها و تکنیکهای پیشرفته
برای بررسی دقیقتر از Lighthouse CI در CI/CD خود استفاده کنید تا هر بار قبل از deploy، عملکرد بررسی شود. همچنین میتوانید از Web Vitals library برای مانیتورینگ RUM (Real User Monitoring) استفاده کنید و آمار را به Google Analytics یا داشبورد اختصاصی ارسال کنید:
import {onLCP, onINP, onCLS} from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);
همچنین گزارش "Core Web Vitals" در گوگل سرچ کنسول نشان میدهد کدام گروه از صفحات مشکل دارند. با رفع مشکلات یک گروه، کل امتیاز بهبود مییابد.
اولویتبندی بهبودها
اگر تازه شروع میکنید، ابتدا LCP را بهبود دهید، سپس CLS و در نهایت INP. LCP معمولاً سریعترین تأثیر را بر امتیاز کلی دارد. پس از رفع مشکلات بحرانی، وارد بهینهسازیهای ریزتر شوید. همیشه قبل و بعد از تغییرات با Lighthouse اندازهگیری کنید.
| معیار | هدف (Good) | اقدام سریع |
|---|---|---|
| LCP | ≤ 2.5s | Preload تصویر LCP، کاهش TTFB، حذف CSS بلاککننده |
| INP | ≤ 200ms | شکستن long tasks، به تعویق انداختن third-party scripts |
| CLS | ≤ 0.1 | تعیین width/height تصاویر، font-display: swap |
تجربه عملی در سایتهای اختصاصی
در یک سایت اختصاصی که خودم توسعه دادهام، با اعمال تکنیکهای بالا توانستم LCP را از ۴.۱ ثانیه به ۱.۳ ثانیه کاهش دهم و CLS را از ۰.۲۵ به ۰.۰۳ برسانم. راز کار، سادگی کد، عدم استفاده از کتابخانههای سنگین، و بارگذاری شرطی اسکریپتها بود. وردپرس به دلیل ماهیت پویا و افزونهها معمولاً بهینهسازی سختتری میطلبد، اما در سایت اختصاصی دست شما کاملاً باز است.
نتیجهگیری
Core Web Vitals فقط یک معیار فنی نیست، بلکه بازتاب مستقیمی از تجربه کاربری است. بهبود آن باعث افزایش نرخ تبدیل، کاهش bounce rate و بهبود رتبه گوگل میشود. قدمهای گفتهشده را به ترتیب در پروژه خود پیاده کنید و نتایج را بهطور مداوم پایش کنید. اگر به کمک نیاز دارید یا میخواهید سایت شما با استانداردهای روز بهینهسازی شود، خوشحال میشم از طریق راههای ارتباطی با من در تماس باشید.