Core Web Vitals چیست؟ راهنمای کامل بهینه‌سازی سایت برای گوگل

در سال‌های اخیر، گوگل بیش از هر زمان دیگری بر تجربه واقعی کاربران در وب تمرکز کرده است. دیگر فقط داشتن محتوای خوب یا لینک‌های قدرتمند کافی نیست بلکه سرعت، پایداری و واکنش‌پذیری سایت به اندازه کیفیت محتوا اهمیت پیدا کرده‌اند. همین نگاه باعث شد مجموعه‌ای از معیارهای کلیدی با نام Core Web Vitals معرفی شود، شاخص‌هایی که به‌طور مستقیم نشان می‌دهند کاربران هنگام بارگذاری و تعامل با یک صفحه چه احساسی دارند.

Core Web Vitals در واقع تلاش گوگل برای استانداردسازی «تجربه کاربری قابل اندازه‌گیری» است. این معیارها کمک می‌کنند بفهمیم آیا صفحه به‌سرعت بارگذاری می‌شود، آیا عناصر صفحه بدون جابه‌جایی ناگهانی نمایش داده می‌شوند، و آیا تعامل با سایت روان و بدون تاخیر است. نتیجه این ارزیابی‌ها نه‌تنها بر رضایت کاربران اثر می‌گذارد، بلکه در رتبه‌بندی جستجو نیز نقش دارد.

در این مقاله، به‌صورت مرحله‌به‌مرحله بررسی می‌کنیم Core Web Vitals دقیقا چه هستند، چرا اهمیت دارند، و چطور می‌توان آن‌ها را بهینه کرد تا هم کاربران تجربه بهتری داشته باشند و هم سایت در نتایج جستجو عملکرد بهتری نشان دهد.

Core Web Vitals دقیقا چه هستند؟

Core Web Vitals مجموعه‌ای از سه معیار استاندارد است که گوگل برای سنجش کیفیت تجربه کاربری در صفحات وب معرفی کرده. این معیارها روی سه جنبه اصلی تمرکز دارند: سرعت بارگذاری بخش اصلی صفحه، سرعت واکنش سایت به تعامل کاربر، و پایداری چیدمان هنگام بارگذاری.

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

سه معیار اصلی عبارت‌اند از:

1. LCP – Largest Contentful Paint

زمانی که طول می‌کشد تا بزرگ‌ترین عنصر قابل مشاهده صفحه (مثل تصویر اصلی، بنر یا یک بلوک متن بزرگ) بارگذاری شود.

• خوب: کمتر از 2.5 ثانیه
• نیاز به بهبود: بین 2.5 تا 4 ثانیه
• ضعیف: بیشتر از 4 ثانیه

2. INP – Interaction to Next Paint

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

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

3. CLS – Cumulative Layout Shift

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

• خوب: کمتر از 0.1
• نیاز به بهبود: بین 0.1 تا 0.25
• ضعیف: بیشتر از 0.25

این سه معیار، ستون‌های اصلی تجربه کاربری از نگاه گوگل هستند. اگر سایتی در این شاخص‌ها عملکرد خوبی داشته باشد، کاربران تجربه‌ای سریع‌تر و قابل‌اعتمادتر خواهند داشت و همین موضوع می‌تواند به بهبود رتبه در نتایج جستجو کمک کند.

معیارهای تکمیلی (Non‑Core Metrics)

در کنار سه شاخص اصلی Core Web Vitals، مجموعه‌ای از معیارهای دیگر هم وجود دارد که اگرچه مستقیماً در این گروه قرار نمی‌گیرند، اما نقش مهمی در تحلیل عملکرد واقعی یک صفحه دارند. این معیارها در ابزارهایی مثل Lighthouse یا PageSpeed Insights گزارش می‌شوند و به شما کمک می‌کنند تصویر دقیق‌تری از وضعیت فنی سایت به دست بیاورید.

TTFB – Time To First Byte

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

FCP – First Contentful Paint

زمانی که اولین عنصر بصری صفحه (مثل متن یا تصویر کوچک) روی صفحه ظاهر می‌شود. FCP نشان می‌دهد کاربر چه زمانی اولین نشانه از بارگذاری صفحه را می‌بیند.

TTI – Time To Interactive

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

SI – Speed Index

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

این شاخص‌ها به‌تنهایی معیارهای اصلی تجربه کاربری نیستند، اما در تحلیل ریشه مشکلات Core Web Vitals نقش کلیدی دارند. برای مثال، TTFB بالا می‌تواند مستقیما روی LCP اثر بگذارد، یا TTI ضعیف معمولا نشانه‌ای از مشکلاتی است که در نهایت INP را هم تحت تاثیر قرار می‌دهد.

LCP چیست و چطور بهبودش دهیم؟

LCP یا Largest Contentful Paint یکی از مهم‌ترین معیارهای Core Web Vitals است و نشان می‌دهد بزرگ‌ترین عنصر قابل مشاهده صفحه چه زمانی برای کاربر بارگذاری می‌شود. این عنصر معمولا شامل تصویر هدر، یک بنر بزرگ، ویدیو یا یک بلوک متن حجیم است. هرچه LCP سریع‌تر باشد، کاربر زودتر احساس می‌کند صفحه واقعا در حال بارگذاری است.

مقداردهی استاندارد LCP

• خوب: کمتر از 2.5 ثانیه
• نیاز به بهبود: بین 2.5 تا 4 ثانیه
• ضعیف: بیشتر از 4 ثانیه

چه چیزهایی معمولاً باعث LCP ضعیف می‌شوند؟

• تصاویر بزرگ و بهینه‌نشده
• سرور کند یا TTFB بالا
• فایل‌های CSS و جاوااسکریپت که رندر صفحه را مسدود می‌کنند
• استفاده از فونت‌های خارجی بدون preload
• نبود کشینگ مناسب یا CDN

روش‌های عملی برای بهبود LCP

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

• استفاده از فرمت‌های مدرن مثل WebP
• فشرده‌سازی بدون افت کیفیت
• تعیین ابعاد دقیق برای جلوگیری از رندر مجدد
• استفاده از lazy loading برای تصاویر غیرضروری

2. کاهش TTFB

• ارتقای هاست
• استفاده از CDN
• فعال‌سازی کشینگ سمت سرور
• بهینه‌سازی کوئری‌های دیتابیس

3. حذف یا کاهش رندر بلاکینگ‌ها

• کوچک‌سازی و ترکیب فایل‌های CSS
• استفاده از preload برای فایل‌های حیاتی
• بارگذاری جاوااسکریپت به‌صورت async یا defer

4. بهینه‌سازی فونت‌ها

• استفاده از font-display: swap
• preload کردن فونت‌های اصلی
• کاهش تعداد وزن‌های فونت

5. استفاده از کشینگ سمت مرورگر

• تنظیم صحیح Cache-Control
• استفاده از نسخه‌بندی فایل‌ها برای مدیریت کش

یک مثال ساده

فرض کنید صفحه اصلی یک سایت فروشگاهی یک تصویر بزرگ هدر دارد که 1.5 مگابایت است و با فرمت JPEG بارگذاری می‌شود. این تصویر معمولا LCP صفحه است. با تبدیل آن به WebP و کاهش حجم به 200 کیلوبایت، LCP به‌طور قابل‌توجهی کاهش پیدا می‌کند. اگر همزمان TTFB را با استفاده از CDN پایین بیاورید، نتیجه حتی بهتر می‌شود.

INP چیست و چطور بهبودش دهیم؟

INP یا Interaction to Next Paint معیار جدید گوگل برای سنجش واکنش‌پذیری واقعی صفحات وب است و جایگزین FID شده. برخلاف FID که فقط اولین تعامل کاربر را اندازه‌گیری می‌کرد، INP تمام تعاملات مهم صفحه را بررسی می‌کند و میانگین آن‌ها را به‌عنوان یک عدد نهایی ارائه می‌دهد. این یعنی اگر صفحه در برخی تعامل‌ها سریع باشد اما در برخی دیگر کند، INP این کندی را منعکس می‌کند.

مقداردهی استاندارد INP

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

چه چیزهایی باعث INP ضعیف می‌شوند؟

• اجرای طولانی و سنگین جاوااسکریپت
• event handlerهای پیچیده یا ناکارآمد
• عملیات هم‌زمان زیاد در thread اصلی
• رندرهای مکرر و غیرضروری
• بارگذاری اسکریپت‌های بزرگ یا بلااستفاده
• تعامل‌هایی که باعث layout یا style recalculation سنگین می‌شوند

روش‌های عملی برای بهبود INP

1. کاهش حجم و پیچیدگی جاوااسکریپت

• حذف کدهای بلااستفاده
• تقسیم کد (code splitting)
• کوچک‌سازی فایل‌ها
• بارگذاری اسکریپت‌های غیرضروری به‌صورت async یا defer

2. استفاده از Web Workers

وقتی عملیات سنگین مثل پردازش داده یا محاسبات پیچیده در thread اصلی اجرا شود، تعامل کاربر کند می‌شود. انتقال این کارها به Web Worker باعث آزاد شدن thread اصلی و بهبود INP می‌شود.

3. بهینه‌سازی event handlerها

• جلوگیری از اجرای عملیات سنگین داخل رویدادهایی مثل scroll یا input
• استفاده از debounce یا throttle
• حذف event listenerهای غیرضروری

4. کاهش layout thrashing

• دسترسی‌های مکرر به layout (مثل offsetHeight) را گروه‌بندی کن
• تغییرات DOM را به‌صورت batch انجام بده
• از requestAnimationFrame برای تغییرات بصری استفاده کن

5. بهینه‌سازی تعاملات UI

• استفاده از کامپوننت‌های سبک‌تر
• کاهش re-renderهای غیرضروری در فریمورک‌هایی مثل React یا Vue
• استفاده از memoization در بخش‌های پرتکرار

یک مثال ساده

فرض کنید در یک فرم جستجو، هر بار که کاربر یک حرف تایپ می‌کند، یک درخواست API ارسال می‌شود و هم‌زمان چند عملیات DOM هم اجرا می‌شود. این رفتار باعث افزایش INP می‌شود. با استفاده از debounce و کاهش عملیات DOM، واکنش‌پذیری فرم به‌طور چشمگیری بهتر می‌شود.

CLS چیست و چطور بهبودش دهیم؟

CLS یا Cumulative Layout Shift معیاری است که میزان جابه‌جایی ناگهانی عناصر صفحه در هنگام بارگذاری را اندازه‌گیری می‌کند. این همان تجربه آزاردهنده‌ای است که کاربر می‌خواهد روی یک دکمه کلیک کند اما ناگهان صفحه جابه‌جا می‌شود و روی چیز دیگری کلیک می‌کند. CLS به‌طور مستقیم روی حس اعتماد و کنترل کاربر تأثیر می‌گذارد.

مقداردهی استاندارد CLS

• خوب: کمتر از 0.1
• نیاز به بهبود: بین 0.1 تا 0.25
• ضعیف: بیشتر از 0.25

چه چیزهایی باعث CLS ضعیف می‌شوند؟

• تصاویر بدون تعیین ابعاد
• تبلیغات یا iframeهایی که ناگهانی ظاهر می‌شوند
• بارگذاری فونت‌ها که باعث تغییر اندازه متن می‌شود
• عناصر UI که بعد از لود اولیه جابه‌جا می‌شوند
• اضافه شدن محتوا به بالای صفحه بدون پیش‌بینی فضا

روش‌های عملی برای بهبود CLS

1. تعیین ابعاد تصاویر و ویدیوها

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

2. استفاده از فضای رزرو (Placeholder)

برای تبلیغات، بنرها یا iframeها فضای مشخصی در نظر بگیر تا هنگام بارگذاری، صفحه تکان نخورد.

3. مدیریت صحیح فونت‌ها

• استفاده از font-display: swap
• preload کردن فونت‌های اصلی
• کاهش تعداد وزن‌های فونت
  این کارها از تغییر ناگهانی اندازه متن جلوگیری می‌کند.

4. جلوگیری از اضافه شدن ناگهانی عناصر

اگر قرار است یک بخش جدید به صفحه اضافه شود، آن را در پایین صفحه قرار بده یا از قبل فضای آن را مشخص کن.

5. بهینه‌سازی انیمیشن‌ها و ترنزیشن‌ها

انیمیشن‌هایی که باعث تغییر layout می‌شوند (مثل تغییر height) می‌توانند CLS را افزایش دهند. بهتر است از transform استفاده شود.

یک مثال ساده

فرض کنید در صفحه اصلی یک وبلاگ، تصویر شاخص مقاله بدون تعیین width و height بارگذاری می‌شود. مرورگر ابتدا فضای کمی برای آن در نظر می‌گیرد و بعد از لود کامل، تصویر بزرگ‌تر می‌شود و کل صفحه جابه‌جا می‌شود. با تعیین ابعاد دقیق، این مشکل کاملا برطرف می‌شود.

ابزارهای اندازه‌گیری Core Web Vitals

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

PageSpeed Insights

یکی از محبوب‌ترین ابزارهای گوگل که هم داده‌های آزمایشگاهی (Lab) و هم داده‌های واقعی کاربران (Field) را نمایش می‌دهد.

• نمایش وضعیت LCP، INP و CLS
• ارائه پیشنهادهای عملی برای بهبود
• مناسب برای بررسی سریع صفحات

Lighthouse

ابزاری داخلی در مرورگر Chrome که گزارش کامل‌تری از عملکرد صفحه ارائه می‌دهد.

• تحلیل سرعت، دسترس‌پذیری، سئو و بهترین شیوه‌های توسعه
• مناسب برای بررسی جزئیات فنی
• اجرای تست در شرایط کنترل‌شده

Chrome DevTools

بخش Performance در DevTools امکان بررسی دقیق رفتار صفحه را فراهم می‌کند.

• مشاهده timeline بارگذاری
• تحلیل اسکریپت‌های سنگین
• بررسی layout shifts برای CLS
• مناسب برای توسعه‌دهندگان و تحلیل عمیق

Search Console – گزارش Core Web Vitals

این گزارش بر اساس داده‌های واقعی کاربران (Field Data) تهیه می‌شود.

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

Web Vitals Extension

افزونه‌ای سبک برای مرورگر Chrome که وضعیت Core Web Vitals را در لحظه نمایش می‌دهد.

• مناسب برای بررسی سریع صفحات در حال توسعه
• نمایش LCP، INP و CLS در لحظه

تفاوت داده‌های Lab و Field

• Lab Data: داده‌های شبیه‌سازی‌شده در محیط کنترل‌شده. مناسب برای تحلیل فنی.
• Field Data: داده‌های واقعی کاربران. معیار اصلی گوگل برای رتبه‌بندی.

برای تصمیم‌گیری درست، باید هر دو نوع داده را در کنار هم بررسی کرد. ممکن است صفحه در Lab عالی باشد اما در Field ضعیف عمل کند، چون کاربران واقعی دستگاه‌ها و اینترنت‌های متفاوتی دارند.

Core Web Vitals در سئو چه نقشی دارد؟

Core Web Vitals بخشی از سیگنال Page Experience هستند، مجموعه‌ای از معیارها که گوگل برای سنجش کیفیت تجربه کاربری در نظر می‌گیرد. اگرچه این معیارها به‌تنهایی تعیین‌کننده رتبه نیستند، اما در کنار محتوا، لینک‌ها و سایر فاکتورهای اصلی، می‌توانند تفاوت قابل‌توجهی ایجاد کنند، به‌ویژه در صفحاتی که رقابت نزدیک است.

چرا Core Web Vitals برای سئو مهم‌اند؟

• تجربه کاربری بهتر = نرخ تعامل بیشتر: صفحاتی که سریع‌تر بارگذاری می‌شوند و پایدارتر هستند، نرخ پرش کمتری دارند و کاربران زمان بیشتری در آن‌ها می‌مانند. این رفتارها برای گوگل سیگنال مثبت محسوب می‌شود.

• تأثیر مستقیم در Page Experience: گوگل به‌طور رسمی اعلام کرده که Core Web Vitals بخشی از سیگنال‌های تجربه کاربری هستند. این یعنی عملکرد ضعیف در این معیارها می‌تواند شانس دیده‌شدن صفحه را کاهش دهد.

• رقابت در نتایج جستجو: در شرایطی که چند صفحه محتوای مشابهی دارند، سایتی که تجربه کاربری بهتری ارائه دهد، احتمالاً شانس بیشتری برای رتبه بهتر خواهد داشت.

نقش غیرمستقیم Core Web Vitals در سئو

حتی اگر تأثیر مستقیم این معیارها محدود باشد، اثرات غیرمستقیم آن‌ها بسیار مهم است:

• افزایش رضایت کاربران
• کاهش نرخ خروج
• افزایش نرخ تبدیل
• افزایش احتمال بازگشت کاربران

این رفتارها در نهایت باعث تقویت سیگنال‌های رفتاری می‌شوند و به بهبود رتبه کمک می‌کنند.

آیا Core Web Vitals جایگزین محتوا یا لینک‌ها می‌شوند؟

خیر. گوگل بارها تأکید کرده که محتوای باکیفیت همچنان مهم‌ترین عامل رتبه‌بندی است. Core Web Vitals نقش «تقویتی» دارند، نه «جایگزینی».
به عبارت دیگر: اگر دو صفحه محتوای مشابهی داشته باشند، صفحه‌ای که تجربه کاربری بهتری ارائه دهد، احتمالاً برنده خواهد بود.

جمع‌بندی

Core Web Vitals معیاری برای سنجش کیفیت تجربه کاربری هستند و نشان می‌دهند یک صفحه چقدر سریع بارگذاری می‌شود، چقدر روان به تعاملات پاسخ می‌دهد و چقدر پایدار نمایش داده می‌شود. بهبود LCP ،INP و CLS نه‌تنها باعث افزایش رضایت کاربران می‌شود، بلکه می‌تواند در رقابت سئویی هم مزیت ایجاد کند.

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