گوگل یه سری معیار جدید معرفی کرده به اسم Core Web Vitals که مستقیم روی رتبه سایت تاثیر می‌ذارن. این معیارها بخشی از سیگنال‌های تجربه صفحه (Page Experience) گوگل هستن و از سال ۲۰۲۱ به‌عنوان فاکتور رتبه‌بندی رسمی تایید شدن. بیاید ببینیم چی هستن، چطور اندازه بگیریمشون، و چطور بهبودشون بدیم!

اهمیت Core Web Vitals فراتر از سئوست. این معیارها نشون می‌دن که آیا کاربران تجربه خوبی در سایت شما دارن یا نه. یه سایت با امتیاز Core Web Vitals بد، کاربران رو ناامید می‌کنه و نرخ پرش (Bounce Rate) بالاتری داره. هم رتبه گوگل پایین میاد، هم نرخ تبدیل.

سه معیار اصلی Core Web Vitals

LCP — Largest Contentful Paint

زمان لود بزرگ‌ترین محتوای قابل مشاهده صفحه. این معمولاً یه تصویر hero، ویدیو، یا بلوک متن بزرگه. هدف: زیر ۲.۵ ثانیه.

  • خوب: کمتر از ۲.۵ ثانیه
  • نیاز به بهبود: ۲.۵ تا ۴ ثانیه
  • ضعیف: بیشتر از ۴ ثانیه

چه عناصری برای LCP حساب می‌شن؟ تصاویر <img>، تصاویر پس‌زمینه CSS، ویدیوهای با poster، و بلوک‌های متنی بزرگ.

INP — Interaction to Next Paint

از مارس ۲۰۲۴، این معیار جایگزین FID (First Input Delay) شد. INP مدت زمانی رو اندازه می‌گیره که بین تعامل کاربر (کلیک، تاپ، فشار دکمه) و رنگ‌آمیزی مجدد صفحه طول می‌کشه. هدف: زیر ۲۰۰ میلی‌ثانیه.

  • خوب: کمتر از ۲۰۰ میلی‌ثانیه
  • نیاز به بهبود: ۲۰۰ تا ۵۰۰ میلی‌ثانیه
  • ضعیف: بیشتر از ۵۰۰ میلی‌ثانیه

FID فقط اولین تعامل رو اندازه می‌گرفت، ولی INP تمام تعاملات صفحه رو در نظر می‌گیره و بدترین مورد رو به‌عنوان امتیاز نهایی نشون می‌ده. این اندازه‌گیری دقیق‌تری از پاسخگویی کلی صفحه‌ست.

CLS — Cumulative Layout Shift

میزان جابجایی غیرمنتظره عناصر صفحه حین لود. این وقتی اتفاق می‌افته که تصاویر بدون ابعاد لود می‌شن، آگهی‌ها فضا اشغال می‌کنن، یا فونت‌های جایگزین بارگذاری می‌شن. هدف: زیر ۰.۱.

  • خوب: کمتر از ۰.۱
  • نیاز به بهبود: ۰.۱ تا ۰.۲۵
  • ضعیف: بیشتر از ۰.۲۵

چطور Core Web Vitals رو بسنجیم؟

ابزارهای مختلفی برای سنجش وجود داره:

  • Google PageSpeed Insights — داده لابراتواری + داده واقعی کاربران (CrUX)
  • Google Search Console — گزارش Core Web Vitals با داده واقعی از URLهای سایت
  • Chrome DevTools — تب Performance برای تحلیل دقیق
  • Web.dev/measure — ابزار گوگل برای اندازه‌گیری سریع
  • Lighthouse — ابزار آدیت مرورگر که مستقیم در Chrome داخلیه
  • WebPageTest.org — تست از لوکیشن‌های مختلف دنیا

تفاوت داده لابراتواری و میدانی مهمه: داده لابراتواری شرایط کنترل‌شده‌ست، داده میدانی (CrUX) از بازدیدهای واقعی کاربران گوگل جمع‌آوری می‌شه. گوگل در رتبه‌بندی بیشتر به داده میدانی تکیه می‌کنه.

چطور LCP رو بهبود بدیم؟

LCP معمولاً بزرگ‌ترین چالشه. دلایل اصلی کند بودن LCP:

۱. بهینه‌سازی تصاویر

تصویر Hero رو با فرمت WebP یا AVIF ارائه بدید. حجم تصاویر رو فشرده کنید. از attribute loading="eager" و fetchpriority="high" برای تصویر LCP استفاده کنید تا مرورگر اولویتش رو بدونه.

۲. سرور سریع‌تر و TTFB

Time to First Byte یا TTFB (زمان دریافت اولین بایت از سرور) مستقیماً روی LCP تأثیر داره. سرور با پینگ پایین، استفاده از CDN، و کشینگ صحیح TTFB رو کاهش می‌دن. انتخاب یه هاست یا سرور مجازی با زیرساخت مناسب مثل آنچه صباهاست ارائه می‌ده، تأثیر مستقیمی روی این معیار داره.

۳. کش فعال

کش سمت سرور (مثل Varnish یا Redis) و کش مرورگر رو فعال کنید. در وردپرس افزونه‌هایی مثل WP Rocket یا W3 Total Cache کمک می‌کنن.

۴. Preload منابع مهم

برای تصویر LCP از <link rel="preload"> استفاده کنید:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

چطور INP رو بهبود بدیم؟

INP به کیفیت JavaScript سایت وابسته‌ست:

۱. JavaScript رو بهینه کنید

تسک‌های طولانی JavaScript (Long Tasks) که بیشتر از ۵۰ میلی‌ثانیه طول می‌کشن رو پیدا و کوتاه کنید. از Chrome DevTools تب Performance برای شناسایی Long Tasks استفاده کنید.

۲. کد سنگین رو Defer کنید

اسکریپت‌هایی که اولویت پایینی دارن رو با attribute defer یا async لود کنید. از requestIdleCallback برای کارهای غیر ضروری استفاده کنید.

۳. Event Handlerهای سنگین

در handler کلیک و تاپ، کارهای سنگین انجام ندید. محاسبات سنگین رو به Web Worker منتقل کنید.

چطور CLS رو بهبود بدیم؟

۱. ابعاد تصاویر رو مشخص کنید

همیشه width و height رو برای تصاویر تعیین کنید. این مرورگر رو قادر می‌کنه قبل از لود تصویر فضا رزرو کنه:

<img src="photo.jpg" width="800" height="600" alt="...">

۲. فونت رو Preload کنید

جابجایی ناشی از لود فونت (FOUT/FOIT) یکی از دلایل رایج CLS بالاست. از font-display: optional یا preload فونت استفاده کنید.

۳. فضا برای محتوای داینامیک رزرو کنید

برای بنرها، تبلیغات، و محتوای لود شده با AJAX، از CSS برای رزرو فضا قبل از لود استفاده کنید.

۴. از Animations بدون تأثیر Layout استفاده کنید

انیمیشن‌ها رو با transform و opacity انجام بدید، نه با تغییر top، left، margin که Layout Shift ایجاد می‌کنن.

ابزارهای مانیتورینگ مداوم

Core Web Vitals یه بار اندازه‌گیری نیست؛ باید مداوم مانیتور بشن چون تغییرات سایت می‌تونه اونا رو خراب کنه:

  • Google Search Console گزارش Core Web Vitals به‌صورت مداوم آپدیت می‌شه
  • سرویس‌هایی مثل Datadog، SpeedCurve، Calibre برای مانیتورینگ حرفه‌ای
  • کانارا Workflow در CI/CD که Lighthouse رو اجرا می‌کنه و از deployment جلوگیری می‌کنه اگه امتیاز بد باشه

Core Web Vitals و فریمورک‌های جاوااسکریپت

سایت‌هایی که از React، Vue، Angular یا فریمورک‌های مشابه استفاده می‌کنن، معمولاً با چالش‌های بیشتری در Core Web Vitals رو‌به‌رو هستن:

  • LCP: اگه محتوای اصلی با JavaScript رندر می‌شه (CSR)، LCP بالاتر می‌ره. راه‌حل: Server-Side Rendering (SSR) یا Static Site Generation (SSG).
  • INP: فریمورک‌های سنگین JavaScript می‌تونن Long Tasks زیادی ایجاد کنن. تقسیم کد (Code Splitting) و Lazy Loading کمک می‌کنه.
  • CLS: در سایت‌های SPA، وقتی کامپوننت‌ها از کجایی وارد می‌شن می‌تونن Layout Shift ایجاد کنن. باید ابعاد placeholder رو از قبل تعریف کنید.

ارتباط Core Web Vitals با هاستینگ

انتخاب هاستینگ تأثیر مستقیمی روی Core Web Vitals داره:

  • TTFB: زمان پاسخ سرور اولین و مهم‌ترین عاملیه که به هاستینگ مربوطه. هاست اشتراکی کند می‌تونه TTFB رو بالا ببره و LCP رو خراب کنه.
  • CDN: توزیع جغرافیایی محتوا از طریق CDN TTFB رو برای کاربران دور کاهش می‌ده.
  • سرور NVMe: دیسک‌های سریع‌تر زمان خواندن فایل‌ها رو کاهش می‌دن.

اگه Core Web Vitals سایتتون با وجود بهینه‌سازی‌های محتوایی هنوز پایینه، ارتقا به یه هاستینگ بهتر یا VPS می‌تونه تفاوت معناداری ایجاد کنه.

ابزار CrUX برای داده‌های واقعی

Chrome User Experience Report (CrUX) داده‌های Core Web Vitals رو از کاربران واقعی Chrome جمع‌آوری می‌کنه. این داده‌ها در Google Search Console و PageSpeed Insights قابل مشاهده‌ان. نکته مهم اینه که CrUX برای URL‌هایی که ترافیک کافی دارن داده داره؛ برای صفحات با ترافیک کم، باید به داده لابراتواری اکتفا کنید.

تأثیر هاستینگ بر Core Web Vitals

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

  • TTFB پایین = LCP بهتر: Time to First Byte مستقیم روی LCP تأثیر داره. یه سرور با پینگ پایین و پردازش سریع TTFB رو کاهش می‌ده.
  • SSD/NVMe: دیسک‌های سریع زمان خواندن فایل‌ها و کوئری‌های دیتابیس رو کاهش می‌دن.
  • PHP-FPM بهینه: تنظیمات صحیح PHP-FPM تعداد درخواست‌های همزمان قابل پردازش رو بالا می‌بره.
  • Object Cache: Redis یا Memcached برای کش کوئری‌های دیتابیس، بار سرور رو کم می‌کنه.

چک‌لیست بهبود Core Web Vitals

این فهرست رو گام‌به‌گام اجرا کنید:

  1. سرعت سرور رو با PageSpeed Insights اندازه بگیرید
  2. TTFB رو بررسی کنید — باید زیر ۶۰۰ms باشه
  3. تصویر LCP رو شناسایی و با WebP/AVIF بهینه کنید
  4. fetchpriority="high" به تصویر LCP اضافه کنید
  5. JavaScript سنگین رو Defer/Async کنید
  6. ابعاد همه تصاویر رو مشخص کنید
  7. فونت‌ها رو preload کنید
  8. Long Tasks رو در Chrome DevTools شناسایی کنید
  9. CDN فعال کنید
  10. امتیاز رو دوباره اندازه بگیرید

سوالات متداول

Core Web Vitals چقدر روی رتبه گوگل تأثیر داره؟

گوگل گفته که Core Web Vitals یه سیگنال تایبریکر (Tiebreaker) هست — یعنی وقتی دو صفحه از نظر محتوا و بک‌لینک مشابه هستن، صفحه با Core Web Vitals بهتر رتبه بالاتری می‌گیره. برای اغلب سایت‌ها تأثیر مستقیم بر ترافیک ارگانیک متوسطه، ولی برای UX و نرخ تبدیل خیلی مهم‌تره.

INP با FID چه فرقی داره؟

FID فقط تأخیر اولین تعامل رو اندازه می‌گرفت. INP تمام تعاملات صفحه رو (کلیک، تاپ، کیبورد) در نظر می‌گیره و بدترین مورد رو گزارش می‌ده. INP اندازه‌گیری دقیق‌تری از پاسخگویی کلی صفحه در طول جلسه کاری کاربر است.

Core Web Vitals برای موبایل و دسکتاپ فرق داره؟

بله. گوگل داده Core Web Vitals رو جداگانه برای موبایل و دسکتاپ جمع‌آوری می‌کنه. چون کاربران موبایل با شبکه‌های ضعیف‌تر و پردازنده‌های ضعیف‌تر سروکار دارن، معمولاً امتیاز موبایل پایین‌تره. گوگل برای رتبه‌بندی موبایل از داده موبایل استفاده می‌کنه.

آیا سایت من حتماً باید Core Web Vitals عالی داشته باشه؟

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

جمع‌بندی

Core Web Vitals سه معیار کلیدی LCP، INP و CLS هستن که تجربه بارگذاری صفحه رو می‌سنجن. این معیارها هم برای سئو و هم برای تجربه واقعی کاربران اهمیت دارن. با استفاده از ابزارهایی مثل PageSpeed Insights و Search Console می‌تونید وضعیت فعلی سایتتون رو بسنجید، و با بهینه‌سازی سرور، تصاویر، و JavaScript می‌تونید امتیازتون رو بهبود بدید. مهم‌تر از همه، این یه فرآیند مداومه — باید هر بار بعد از تغییرات سایت، Core Web Vitals رو مجدداً بررسی کنید.