آشنایی با Core Web Vitals

۰۱Core Web Vitals چیست؟

Core Web Vitals زیرمجموعه‌ای از معیارهای «تجربه‌ی صفحه» هستند که گوگل برای سنجش کیفیت واقعی استفاده از یک وب‌سایت تعریف کرده است. این معیارها بر پایه‌ی داده‌ی بازدیدهای واقعی کاربران (گزارش تجربه‌ی کاربر کروم) اندازه‌گیری می‌شوند و در Search Console هم گزارش می‌شوند.

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

۰۲LCP؛ سرعت نمایش محتوای اصلی

Largest Contentful Paint زمانی را اندازه می‌گیرد که بزرگ‌ترین عنصر قابل‌مشاهده‌ی صفحه (معمولاً یک تصویر یا بلوک عنوان) نمایش داده می‌شود. مقدار مطلوب ۲٫۵ ثانیه یا کمتر است.

• تصویر اصلی را فشرده و با فرمت WebP یا AVIF ارائه دهید و ابعاد درست بدهید.
• برای تصویر اصلی از fetchpriority="high" استفاده کنید و آن را lazy-load نکنید.
• زمان پاسخ سرور (TTFB) را با کش و CDN کاهش دهید.
• CSS و جاوااسکریپت مسدودکننده‌ی رندر را کم یا به‌تعویق بیندازید.

برای راهکارهای عملی‌تر کاهش زمان بارگذاری، راهنمای بهینه‌سازی سرعت بارگذاری صفحه را ببینید.

۰۳INP؛ پاسخ‌گویی به تعامل کاربر

Interaction to Next Paint از سال ۲۰۲۴ جایگزین FID شده است. این معیار مدت میان یک تعامل (کلیک، لمس، فشردن کلید) تا نمایش نتیجه‌ی بصری آن را در تمام طول بازدید می‌سنجد. مقدار مطلوب ۲۰۰ میلی‌ثانیه یا کمتر است.

• وظایف طولانی جاوااسکریپت را به بخش‌های کوچک‌تر بشکنید.
• اسکریپت‌های شخص ثالث غیرضروری را حذف یا دیرتر بارگذاری کنید.
• از تغییرهای پرهزینه‌ی DOM و محاسبه‌ی مکرر چیدمان پرهیز کنید.

۰۴CLS؛ پایداری چیدمان

Cumulative Layout Shift جابه‌جایی‌های غیرمنتظره‌ی عناصر را جمع می‌زند؛ همان لحظه‌ای که درست قبل از کلیک، دکمه به پایین می‌رود. مقدار مطلوب ۰٫۱ یا کمتر است.

<img src="cover.webp" width="1200" height="630" alt="…">

• برای تصویر و ویدیو همیشه width و height یا aspect-ratio تعیین کنید.
• برای بنرها و تبلیغات از پیش جا رزرو کنید.
• فونت را با font-display: swap و بارگذاری اولیه‌ی مناسب مدیریت کنید.
• محتوا را بالای محتوای موجود وارد نکنید.

چیدمان‌های پایدار با ابعاد مشخص ساخته می‌شوند؛ نمونه‌اش در طراحی ریسپانسیو با CSS Grid آمده است.

۰۵چطور اندازه‌گیری کنیم؟

دو نوع داده وجود دارد. داده‌ی واقعی (field) نشان می‌دهد کاربران واقعی چه تجربه‌ای داشته‌اند و معیار قضاوت گوگل است. داده‌ی آزمایشگاهی (lab) در شرایط کنترل‌شده اجرا می‌شود و برای پیدا کردن علت مشکل مناسب است.

• PageSpeed Insights: هر دو نوع داده را برای یک نشانی نشان می‌دهد.
• گزارش Core Web Vitals در Search Console: وضعیت کل سایت و گروه صفحه‌ها.
• Lighthouse و پنل Performance در DevTools: عیب‌یابی دقیق.

داده‌ی واقعی را در Search Console و ابزار web.dev دنبال کنید و آن را کنار بقیه‌ی موارد سئوی تکنیکال بررسی کنید. برای اجرای این بهبودها می‌توانید از خدمات طراحی وب ما کمک بگیرید.