درک Core Web Vitals

چرا Core Web Vitals اهمیت دارد؟

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

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

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

Core Web Vitals دقیقاً چیست؟

در حال حاضر گوگل سه معیار را به عنوان Core Web Vitals معرفی می‌کند:

• LCP – Largest Contentful Paint: سرعت دیده‌شدن بزرگ‌ترین بخش محتوایی صفحه
• INP – Interaction to Next Paint: سرعت واکنش صفحه به تعامل کاربر
• CLS – Cumulative Layout Shift: میزان پرش و جا‌به‌جایی غیرمنتظره چیدمان صفحه

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

۱. LCP – بزرگ‌ترین محتوای صفحه چقدر سریع دیده می‌شود؟

LCP می‌گوید کاربر چقدر منتظر می‌ماند تا «اصل ماجرا» را ببیند؛ آن تصویر بزرگ، بنر، یا بلوک متن اصلی که پیام صفحه را می‌رساند. حتی اگر بقیه چیزها در حال لود شدن باشند، کاربر وقتی احساس می‌کند سایت سریع است که این بخش زود ظاهر شود.

به‌صورت ساده:

• LCP خوب: تا حدود ۲٫۵ ثانیه یا کمتر
• LCP متوسط: بین ۲٫۵ تا ۴ ثانیه
• LCP بد: بالاتر از ۴ ثانیه

• تصاویر بزرگ بدون فشرده‌سازی درست
• سرور کند یا پاسخ‌گویی ضعیف
• فونت‌ها و اسکریپت‌هایی که قبل از نمایش محتوا بارگذاری می‌شوند
• لودشدن سنگین CSS و JS در بالای صفحه

چند راه‌حل عملی:

• فشرده‌سازی تصاویر و استفاده از فرمت‌های مدرن مثل WebP
• استفاده از CDN و بهبود TTFB سرور
• Preload کردن مهم‌ترین فونت‌ها و منابع حیاتی
• تفکیک CSS و JS حیاتی از بقیه و بارگذاری تنبل برای باقی کدها

۲. INP – وقتی کاربر کلیک می‌کند، چقدر منتظر می‌ماند؟

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

به‌صورت ساده:

• INP خوب: تا حدود ۲۰۰ میلی‌ثانیه یا کمتر
• INP متوسط: بین ۲۰۰ تا ۵۰۰ میلی‌ثانیه
• INP بد: بالاتر از ۵۰۰ میلی‌ثانیه

چه چیزهایی معمولاً INP را خراب می‌کنند؟

• جاوااسکریپت زیاد و سنگین
• تسک‌های طولانی که Thread اصلی را قفل می‌کنند
• لود شدن هم‌زمان اسکریپت‌های شخص‌ثالث (آنالیتیکس‌ها، چت آنلاین، تگ منیجرهای شلوغ)

چند راه‌حل عملی:

• خُرد کردن تسک‌های سنگین JS به بخش‌های کوچک‌تر
• Lazy load کردن اسکریپت‌های غیرضروری یا اجرای آن‌ها بعد از تعامل کاربر
• حذف کتابخانه‌های جاوااسکریپت بلااستفاده و وابستگی‌های تکراری
• استفاده از الگوهای تعاملی سبک‌تر (مثلاً به‌جای رندر دوباره کل صفحه، فقط بخش موردنیاز را به‌روزرسانی کن)

۳. CLS – پرش‌های آزاردهنده صفحه را کنترل کن

CLS همان چیزی است که وقتی در حال کلیک روی یک دکمه هستی و ناگهان صفحه می‌پرد پایین و روی چیز دیگری کلیک می‌کنی، به آن فحش می‌دهی! این معیار میزان جابه‌جایی غیرمنتظره عناصر صفحه را می‌سنجد.

به‌صورت ساده:

• CLS خوب: کمتر یا مساوی ۰٫۱
• CLS متوسط: بین ۰٫۱ تا ۰٫۲۵
• CLS بد: بالاتر از ۰٫۲۵

چه چیزهایی معمولاً CLS را خراب می‌کنند؟

• تصاویر بدون عرض و ارتفاع مشخص
• بنرها و تبلیغاتی که بدون رزرو فضا ظاهر می‌شوند
• لود شدن دیرهنگام فونت‌ها و تغییر اندازه متن بعد از لود
• المان‌هایی که با جاوااسکریپت بعداً به صفحه تزریق می‌شوند

چند راه‌حل عملی:

• برای همه تصاویر و ویدیوها ابعاد مشخص کن
• برای جای تبلیغات و بنرها از قبل فضا رزرو کن
• برای فونت‌ها از تکنیک‌هایی مثل font-display: swap استفاده کن
• از جابه‌جایی غیرضروری عناصر بالای صفحه پس از لود اولیه اجتناب کن

چطور Core Web Vitals اندازه‌گیری می‌شود؟

برای این‌که بدانی واقعاً اوضاع چطور است، باید هم داده آزمایشگاهی داشته باشی، هم داده واقعی کاربران:

• PageSpeed Insights: آدرس صفحه را وارد می‌کنی، هم داده آزمایشی می‌دهد، هم اگر ترافیک کافی داشته باشی، داده واقعی کاربران را نشان می‌دهد.
• Google Search Console / گزارش Core Web Vitals: اینجا تصویر کلی دامنه را می‌بینی؛ این‌که چند URL وضعیت خوب، نیازمند بهبود یا ضعیف دارند.
• Chrome DevTools + Lighthouse: برای دیباگ لحظه‌ای روی محیط توسعه عالی است؛ می‌توانی ببینی کدام منابع بیشترین فشار را می‌آورند.
• ابزارهای مانیتورینگ RUM: اگر سایت بزرگ‌تری داری، می‌توانی از ابزارهای مانیتورینگ کاربر واقعی استفاده کنی تا ببینی کاربران در دستگاه‌ها و شبکه‌های مختلف چه تجربه‌ای دارند.

نکته مهم این است که گوگل معمولاً به صدک ۷۵ داده‌ها نگاه می‌کند؛ یعنی تجربه اکثریت کاربران، نه فقط بهترین یا بدترین آن‌ها.

ارتباط Core Web Vitals و سئو

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

Core Web Vitals را می‌توان به عنوان یک «ضریب برنده‌شدن» در نظر گرفت: محتوای خوب و مرتبط پایه است؛ Core Web Vitals خوب به آن کمک می‌کند در میدان شلوغ دیده شود، نرخ پرش را پایین بیاورد، تعامل و تبدیل را بالا ببرد.

چطور Core Web Vitals را به زبان عملی بهبود بدهیم؟

برای این‌که کار را عملی کنی، بهتر است به‌جای نگاه متریک‌محور، به سه لایه فکر کنی:

۱. لایه سرور و زیرساخت

• سرور سریع‌تر یا هاست بهینه‌تر انتخاب کن
• از CDN برای کاربران چند منطقه‌ای استفاده کن
• فشرده‌سازی Gzip یا Brotli را فعال کن
• TTFB را زیر ذره‌بین بگذار؛ خیلی از مشکلات LCP از همین‌جا شروع می‌شود

۲. لایه فرانت‌اند و منابع

• تصاویر را بهینه و Responsive کن
• CSS و JS را سبک‌سازی و Minify کن
• بخش‌های غیرحیاتی را Lazy load کن (تصاویر پایین صفحه، اسکریپت‌های تحلیلی)
• حجم باندل جاوااسکریپت را تا جای ممکن کاهش بده؛ هر کیلوبایت اینجا روی INP اثر دارد

۳. لایه تجربه و طراحی

• ساختار صفحه را طوری بچین که محتوای اصلی بالای Fold باشد
• برای همه عناصر پویا (تبلیغ، Widget، فرم‌های دیرهنگام) فضا رزرو کن
• الگوی اسکرول کاربر را ساده و قابل پیش‌بینی نگه دار
• از انیمیشن‌های سنگین و غیرضروری دوری کن

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

1. گزارش Core Web Vitals را در Search Console بررسی کرده‌ای و می‌دانی دقیقاً کدام URL‌ها مشکل دارند؟
2. برای صفحات کلیدی، LCP، INP و CLS را در PageSpeed Insights چک کرده‌ای؟
3. تصاویر و فونت‌ها را به‌طور جدی بهینه و سازمان‌دهی کرده‌ای یا هنوز به حالت پیش‌فرض قالب تکیه می‌کنی؟
4. باندل جاوااسکریپت را اندازه گرفته‌ای و تسک‌های طولانی را شناسایی کرده‌ای؟
5. برای تبلیغات، بنرها و المان‌های پویا، فضای ثابت در طراحی در نظر گرفته‌ای؟
6. سایت را روی موبایل واقعی (نه فقط شبیه‌ساز) با اینترنت متوسط تست کرده‌ای؟
7. برای بهبودها، چرخه تکرار تعریف کرده‌ای یا فقط یک‌بار تست گرفته و فراموش کرده‌ای؟

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