Core Web Vitals چیست و چرا مهم است؟
انتظار کاربران اینترنت از یک وب‌سایت هر روز بیشتر می‌شود. بازدیدکنندگان دیگر فقط محتوای باکیفیت نمی‌خواهند؛ بلکه صفحاتی روان می‌خواهند که فوراً باز شوند، به کلیک‌ها بدون تأخیر پاسخ دهند و از نظر تصویری جابه‌جا نشوند. Google برای مستند کردن تجربه‌ی کاربر بر پایه‌ی داده‌های واقعی، طرح Core Web Vitals (شاخص‌های حیاتی وب) را معرفی کرد. این معیارها، شاخص‌های کلیدی عملکردی هستند که نحوه‌ی تعامل کاربران واقعی با صفحات شما را اندازه‌گیری می‌کنند (Real User Monitoring - RUM).
از نظر سئو، Core Web Vitals یکی از پایه‌های سیگنال‌های رتبه‌بندی تجربه‌ی صفحه در Google است. زیرساخت سرعت سایت که به‌خوبی بهینه شده باشد، باعث می‌شود بازدیدکنندگان بیشتر در سایت بمانند، نرخ خروج را کاهش دهد و نرخ تبدیل را مستقیماً افزایش دهد. اگر از سیستم مدیریت محتوای پویایی مثل WordPress استفاده می‌کنید، کوئری‌های پایگاه داده، اسکریپت‌های خارجی و عناصر رسانه‌ای می‌توانند به مرور باعث افت عملکرد شوند. به همین دلیل شناخت دقیق این معیارها و اجرای مراحل درست بهینه‌سازی ضروری است.
معیارهای اصلی: LCP، CLS و INP یعنی چه؟
Google هنگام سنجش تجربه‌ی کاربر روی سه مرحله‌ی اصلی تمرکز می‌کند: سرعت بارگذاری، پایداری بصری و حساسیت به تعامل. این سه ستون امروزه با معیارهای LCP، CLS و INP پیگیری می‌شوند.
۱. Largest Contentful Paint (LCP) - سرعت بارگذاری درک‌شده
LCP مدت زمانی را می‌سنجد که محتوای اصلی صفحه (معمولاً یک تصویر بزرگ، کاور ویدیو یا بلوک عنوان پهن) روی صفحه نمایش داده می‌شود. این لحظه‌ای است که بازدیدکننده صفحه را «بارگذاری‌شده» تلقی می‌کند. برای تجربه‌ی کاربری ایده‌آل، هدف این است که مقدار LCP ۲٫۵ ثانیه یا کمتر باشد. زمان پاسخ کند سرور (TTFB)، فایل‌های CSS و JavaScript که مانع رندر می‌شوند و تصاویر بسیار بزرگ بدون بهینه‌سازی، از مهم‌ترین دلایل امتیاز ضعیف LCP هستند.
۲. Cumulative Layout Shift (CLS) - پایداری بصری
آیا شده که درست در لحظه‌ای که می‌خواستید روی دکمه‌ای کلیک کنید، محتوا ناگهان پایین رفته و روی لینک ناخواسته‌ای کلیک کرده‌اید؟ این آزاردهنده‌ترین حالت با CLS سنجیده می‌شود. CLS جابه‌جایی‌های غیرمنتظره‌ی عناصر را در مدت بارگذاری صفحه محاسبه می‌کند. مقدار ایده‌آل CLS باید کمتر از ۰٫۱ باشد. تصاویری که ابعاد آن‌ها از قبل مشخص نشده، بلوک‌های تبلیغاتی که دیرتر بارگذاری می‌شوند و ویجت‌های خارجی که به‌صورت پویا تزریق می‌شوند، منبع اصلی جابه‌جایی بصری هستند.
۳. Interaction to Next Paint (INP) - سرعت تعامل
INP که جایگزین معیار FID (First Input Delay) شده، میزان سرعت پاسخ بصری صفحه به تمام کلیک‌ها، لمس‌ها و فشردن کلیدهای کاربر را ارزیابی می‌کند. این معیار فقط اولین تعامل را بررسی نمی‌کند، بلکه تأخیر کلی همه‌ی کنش‌هایی را می‌سنجد که کاربر در طول حضورش در صفحه انجام می‌دهد. برای امتیاز خوب INP، تأخیر تعامل باید کمتر از ۲۰۰ میلی‌ثانیه باشد. پردازش‌های سنگین JavaScript و دستوراتی که رشته‌ی اصلی (main thread) را قفل می‌کنند، مستقیماً مقدار INP را خراب می‌کنند.
| معیار | مقدار هدف (خوب) | نیازمند بهبود | ضعیف |
|---|---|---|---|
| LCP | ≤ 2.5 ثانیه | 2.5 - 4.0 ثانیه | > 4.0 ثانیه |
| CLS | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |
| INP | ≤ 200 ms | 200 - 500 ms | > 500 ms |
بهبود Core Web Vitals در سایت‌های WordPress
در سایت‌های مبتنی بر WordPress برای پاک‌سازی بدهی‌های فنی و سبز کردن امتیازهای سرعت، باید مرحله‌به‌مرحله پیش رفت. با یک مکانیزم کش درست پیکربندی‌شده و ساختار کد سبک، نتایج در مدت کوتاهی قابل مشاهده است.
۱. تاکتیک‌های بهبود امتیاز LCP
در بهینه‌سازی LCP، اولویت اول بارگذاری سریع تصویر اصلی بالای صفحه (Hero image) است. برای این عنصر هرگز نباید «lazy load» (بارگذاری تنبل) فعال شود؛ برعکس، باید این تصویر را با ویژگی fetchpriority="high" به مرورگر معرفی کنید تا اولویت دریافت پیدا کند. همچنین:
- از فرمت‌های نسل جدید تصویر مانند WebP یا AVIF استفاده کنید.
- با درون‌خطی (inline) کردن فایل‌های CSS حیاتی، درخواست‌های مسدودکننده‌ی ابتدای صفحه را کاهش دهید.
- با یک افزونه‌ی کش باکیفیت و یک object cache مانند Redis یا Memcached، زمان پاسخ سرور را به حداقل برسانید.
- یک شبکه‌ی توزیع محتوای سریع (CDN) راه‌اندازی کنید تا دارایی‌ها از نزدیک‌ترین سرور به کاربر ارسال شوند.
۲. روش‌های نزدیک کردن CLS به صفر
جلوگیری از جابه‌جایی ناگهانی چیدمان صفحه، نیازمند نظم کامل در کدنویسی است. این روش‌ها را اجرا کنید:
- در تمام برچسب‌های
<img>و<video>حتماً مقادیرwidthوheightرا تعریف کنید. به این ترتیب مرورگر پیش از دانلود عنصر، فضای آن را در صفحه رزرو می‌کند. - برای بلوک‌های تبلیغاتی یا بنرهای پویا، با CSS حداقل ارتفاع ثابت (min-height) تعیین کنید.
- برای جلوگیری از ناپدید شدن متن یا تغییر اندازه‌اش هنگام بارگذاری فونت‌های وب، از قاعده‌ی CSS با مقدار
font-display: swap;استفاده کنید.
۳. بهینه‌سازی JavaScript برای کاهش INP
پرچالش‌ترین بخش در سایت‌های WordPress بهبود INP است، زیرا قالب‌ها و افزونه‌ها اغلب فایل‌های سنگین JavaScript اجرا می‌کنند. برای روان کردن تعامل صفحه:
- فایل‌های JavaScript استفاده‌نشده را حذف کنید یا آن‌ها را فقط در صفحاتی بارگذاری کنید که به آن‌ها نیاز است.
- شمارنده‌ها، انیمیشن‌ها و کدهای ردیابی خارجی غیرضروری را به تأخیر بیندازید (delay JS).
- مطمئن شوید قالب شما مدرن و تمیز کدنویسی شده است. با انتخاب افزونه و قالب WordPressهایی که متناسب با نیاز شما هستند و عملکردشان ثابت شده است، هم استانداردهای توسعه را حفظ می‌کنید و هم سایت را از بار اضافی افزونه‌ها رها می‌کنید.
ابزارهای سنجش و پیگیری Core Web Vitals
در بهینه‌سازی، حرکت بر اساس داده‌های واقعی حیاتی است. آزمون‌های لحظه‌ای مرورگر با داده‌های واقعی کاربران ممکن است متفاوت باشد. برای پیگیری می‌توانید از این ابزارها استفاده کنید:
Google PageSpeed Insights: هم شبیه‌سازی آزمایشگاهی انجام می‌دهد و هم داده‌های واقعی کاربران Chrome UX Report (CrUX) را برای ۲۸ روز گذشته نشان می‌دهد.
Google Search Console: با زبانه‌ی «Core Web Vitals» در منوی سمت چپ، فهرست گروهی صفحاتی را می‌بینید که وضعیت ضعیف یا خوب دارند.
افزونه‌ی Web Vitals برای Chrome: هنگام گشت‌وگذار در صفحه، مقادیر زنده‌ی LCP، CLS و INP را لحظه‌ای نشان می‌دهد.
سؤالات متداول
آیا Core Web Vitals مستقیماً یک عامل رتبه‌بندی Google است؟
بله، معیارهای Core Web Vitals بخش رسمی الگوریتم تجربه‌ی صفحه‌ی Google هستند. میان دو محتوا با کیفیت بسیار مشابه، Google تمایل دارد صفحه‌ای را که از نظر فنی عملکرد بهتری دارد و کاربر را منتظر نمی‌گذارد، در رتبه‌های بالاتر قرار دهد.
معیار INP که جای FID را گرفته دقیقاً چه چیزی را می‌سنجد؟
معیار قدیمی FID فقط تأخیر اولین کلیک صفحه را بررسی می‌کرد. اما INP که از مارس ۲۰۲۴ به‌طور رسمی جایگزین آن شده، میانگین تأخیر تمام تعامل‌هایی را می‌سنجد که کاربر در طول حضورش در صفحه انجام می‌دهد؛ از جمله کلیک‌ها، باز کردن منوها و فیلترها.
چرا امتیازهای Core Web Vitals در موبایل و دسکتاپ متفاوت است؟
دستگاه‌های موبایل معمولاً قدرت پردازشی محدودتری دارند و اتصال شبکه‌ی سلولی در مقایسه با اینترنت کابلی یا فیبر، تأخیر (latency) بیشتری ایجاد می‌کند. بنابراین زمان پردازش JavaScript در موبایل طولانی‌تر است و امتیازهای موبایل معمولاً پایین‌تر از دسکتاپ دیده می‌شوند.
