Core Web Vitals مجموعهای از معیارهای کلیدی هستند که گوگل برای ارزیابی تجربه واقعی کاربر از آنها استفاده میکند. از سال ۲۰۲۱ این معیارها بهعنوان فاکتور رتبهبندی معرفی شدند و در سال ۲۰۲۶ همچنان یکی از مهمترین سیگنالهای سئو فنی به شمار میروند.
گوگل سه معیار اصلی را در Core Web Vitals بررسی میکند:
- LCP (Largest Contentful Paint)
- INP (Interaction to Next Paint)
- CLS (Cumulative Layout Shift)
در ادامه هر کدام را بهطور کامل بررسی میکنیم و روشهای عملی بهبود آنها را آموزش میدهیم.
۱. LCP — بزرگترین محتوای رنگی (Largest Contentful Paint)
LCP زمان بارگذاری بزرگترین عنصر قابل مشاهده در صفحه را اندازهگیری میکند (معمولاً تصویر اصلی، ویدیو یا بلوک متنی بزرگ).
هدف ایدهآل:
- خوب: کمتر از ۲.۵ ثانیه
- نیاز به بهبود: بین ۲.۵ تا ۴ ثانیه
- ضعیف: بیشتر از ۴ ثانیه
مهمترین عوامل کندی LCP:
- تصاویر بزرگ و بهینهنشده
- فونتهای دیرلودشونده
- پاسخ کند سرور (TTFB بالا)
- منابع مسدودکننده رندر (CSS و JS سنگین)
- عدم استفاده از CDN
روشهای بهبود LCP:
- تصاویر را با فرمت WebP یا AVIF فشرده کنید.
- از
preloadبرای تصویر LCP استفاده کنید. - فونتها را preload کنید یا از فونتهای سیستمی بهره ببرید.
- TTFB را با هاستینگ قوی و CDN کاهش دهید.
- CSS حیاتی را بهصورت Inline قرار دهید.
- تصاویر را با ابعاد مشخص و
loading="eager"برای تصویر اصلی بارگذاری کنید.
۲. INP — تعامل تا رنگآمیزی بعدی (Interaction to Next Paint)
INP جایگزین FID شده و پاسخدهی صفحه به تعاملات کاربر را اندازهگیری میکند (کلیک، لمس، تایپ و غیره). این معیار تمام طول عمر صفحه را در نظر میگیرد، نه فقط اولین تعامل.
هدف ایدهآل:
- خوب: کمتر از ۲۰۰ میلیثانیه
- نیاز به بهبود: بین ۲۰۰ تا ۵۰۰ میلیثانیه
- ضعیف: بیشتر از ۵۰۰ میلیثانیه
دلایل اصلی INP ضعیف:
- اجرای سنگین JavaScript در thread اصلی
- event listenerهای ناکارآمد
- رندر مجدد زیاد و غیرضروری
- کتابخانههای سنگین و بهینهنشده
روشهای بهبود INP:
- کدهای JavaScript را تقسیم (code-splitting) و بهصورت تنبل (lazy) بارگذاری کنید.
- از
requestIdleCallbackو Web Workers برای کارهای سنگین استفاده کنید. - event listenerها را بهینه و در صورت امکان حذف کنید.
- از فریمورکهای سبکتر یا بهینهسازیشده استفاده کنید.
- Long Tasks را در Chrome DevTools شناسایی و رفع کنید.
۳. CLS — تغییر چیدمان تجمعی (Cumulative Layout Shift)
CLS میزان ناپایداری بصری صفحه را اندازهگیری میکند؛ یعنی چقدر عناصر صفحه هنگام بارگذاری جابهجا میشوند.
هدف ایدهآل:
- خوب: کمتر از ۰.۱
- نیاز به بهبود: بین ۰.۱ تا ۰.۲۵
- ضعیف: بیشتر از ۰.۲۵
دلایل رایج CLS بالا:
- تصاویر و ویدیوها بدون ابعاد مشخص
- تبلیغات و Embedها بدون فضای رزرو شده
- فونتهایی که باعث جابهجایی متن میشوند (FOIT/FOUT)
- محتوای داینامیک که دیر تزریق میشود
- انیمیشنهای نامناسب
روشهای بهبود CLS:
- همیشه برای تصاویر، ویدیوها و iframeها ویژگیهای
widthوheightتعریف کنید. - برای تبلیغات و محتوای شخص ثالث فضای رزرو (Placeholder) در نظر بگیرید.
- از
font-display: optionalیاswapبههمراه preload استفاده کنید. - محتوای داینامیک را در فضاهای از پیش تعیینشده بارگذاری کنید.
- از انیمیشنهایی که روی
transformوopacityکار میکنند استفاده کنید (نه رویtopیاleft).
ابزارهای اندازهگیری Core Web Vitals
برای بررسی دقیق وضعیت سایت خود از این ابزارها استفاده کنید:
| ابزار | نوع داده | کاربرد | لینک |
|---|---|---|---|
| PageSpeed Insights | Lab + Field | تحلیل کامل و پیشنهادهای بهبود | pagespeed.web.dev |
| Google Search Console | Field (CrUX) | دادههای واقعی کاربران سایت شما | search.google.com/search-console |
| Chrome DevTools | Lab | دیباگ در زمان توسعه | داخل مرورگر کروم |
| web.dev Measure | Lab + Field | بررسی جامع عملکرد | web.dev/measure |
| CrUX Dashboard | Field | تحلیل روند دادههای واقعی | crux-dashboard |
نکته مهم: همیشه دادههای Field Data (تجربه واقعی کاربران) را نسبت به Lab Data اولویت دهید، چون گوگل برای رتبهبندی از دادههای واقعی استفاده میکند.
برای مطالعه راهنمای کامل و رسمی گوگل میتوانید به صفحه Core Web Vitals در web.dev مراجعه کنید.
جمعبندی و اولویتبندی اقدامات
برای بهبود Core Web Vitals در سال ۲۰۲۶ این ترتیب را پیشنهاد میکنیم:
- ابتدا LCP را بهینه کنید (بیشترین تأثیر روی اولین برداشت کاربر).
- سپس CLS را رفع کنید (تأثیر مستقیم روی حس پایداری صفحه).
- در نهایت روی INP تمرکز کنید (پاسخدهی تعاملات).
بهینهسازی Core Web Vitals یک کار یکباره نیست. با هر تغییر در طراحی یا اضافه شدن قابلیت جدید، باید دوباره این معیارها را بررسی کنید.
سایتهایی که تجربه کاربری سریعی ارائه میدهند، نه تنها رتبه بهتری میگیرند، بلکه نرخ تبدیل و رضایت کاربران بالاتری هم خواهند داشت.