راهنمای جامع بهینه‌سازی معیارهای Core Web Vitals
راهنمای جامع بهینه‌سازی Core Web Vitals؛ ارتقای شاخص‌های LCP، INP و CLS به استانداردهای گوگل
آموزش گام‌به‌گام تحلیل ارورهای سرچ کنسول و ترفندهای مهندسی لودینگ وب‌سایت برای رسیدن به وضعیت Good در PageSpeed
از زمانی که گوگل تجربه صفحه (Page Experience) را به عنوان سیگنال رسمی رتبه‌بندی اعلام کرد، مفهوم سرعت سایت از اعداد تجریدی زمان کل لود فراتر رفت. امروزه شاخص‌های هسته حیاتی وب یا بهینه‌سازی Core Web Vitals تعیین‌کننده احساس واقعی کاربر در لحظه مواجهه با سایت شما هستند. سایتی که در نتایج جستجو رتبه اول را طلب می‌کند، باید المان‌های بصری را بی‌درنگ رندر کند، به لمس یا کلیک کاربر پاسخ آنی دهد و دچار پرش‌های ناگهانی نشود.
طبق مستندات رسمی توسعه‌دهندگان در مرجع جهانی Web.dev Learn Core Web Vitals Guide، بیش از ۴۰ درصد کاربرانی که با تاخیر پاسخ‌دهی بالای ۳۰۰ میلی‌ثانیه یا لرزش غیرمنتظره المان‌ها حین بارگذاری روبرو می‌شوند، تجربه وب‌گردی را نیمه‌کاره رها می‌کنند. در این راهنمای تخصصی، به شکلی کاملاً اجرایی نحوه سبز کردن شاخص‌های کنسول را یاد خواهید گرفت.
۱. LCP (Largest Contentful Paint): زمان رندر بزرگ‌ترین بخش محتوایی صفحه.
۲. INP (Interaction to Next Paint): میزان پاسخ‌دهی و تعامل‌پذیری صفحه هنگام تعامل کاربر (جانشین رسمی FID).
۳. CLS (Cumulative Layout Shift): میزان ثبات بصری و عدم جابه‌جایی عناصر صفحه حین لود.
۱. بهینه‌سازی شاخص LCP (هدف: زیر ۲.۵ ثانیه)
شاخص LCP معمولاً وابسته به بزرگ‌ترین بنر هیرو (Hero Image)، ویدیوی ابتدای صفحه، یا بلوک متنی سرتیتر H1 است. اگر این عنصر با تأخیر ظاهر شود، گوگل نمره ضعیفی ثبت می‌کند.
راهکارهای عملی بهبود LCP:
- پیش‌بارگذاری تصویر هیرو (Preload): با استفاده از تگ پیش‌بارگذاری در بخش هد، به مرورگر فرمان دهید قبل از خواندن بقیه فایل‌ها، عکس اصلی را دانلود کند:
<link rel="preload" as="image" href="banner.webp" fetchpriority="high"> - حذف Lazy Load از اولین عکس صفحه: تصاویر بالای خط تا (Above the Fold) نباید لود تنبل داشته باشند؛ این اشتباه زمان ظاهر شدن تصویر را تا یک ثانیه به تعویق می‌اندازد.
- بهبود TTFB سرور: اگر زمان پاسخ اولیه سرور (Time to First Byte) بیش از ۸۰۰ میلی‌ثانیه باشد، LCP سبز نخواهد شد. کیفیت هاست در این نقطه سرنوشت‌ساز است که در مقاله تأثیر هاستینگ بر سرعت لود سایت به ابعاد آن پرداخته‌ایم.
۲. بهینه‌سازی شاخص INP (هدف: زیر ۲۰۰ میلی‌ثانیه)
شاخص INP تمام تعاملات کاربر (شامل کلیک روی منو، فشردن دکمه افزودن به سبد خرید یا باز کردن تب‌ها) را تا آخرین لحظه حضور او در صفحه رصد می‌کند. مسدود شدن رشته اصلی مرورگر (Main Thread) با جاوااسکریپت‌های سنگین، مقصر اصلی شکست در INP است.
راهکارهای عملی بهبود INP:
- تقسیم وظایف طولانی (Break Up Long Tasks): تسک‌های جاوااسکریپت که بیش از ۵۰ میلی‌ثانیه طول می‌کشند باید با توابعی مثل
setTimeoutیاrequestIdleCallbackشکسته شوند. - کاهش اسکریپت‌های متفرقه شخص ثالث (Third-party Scripts): پلاگین‌های چت آنلاین غیربهینه، تگ‌های متعدد تحلیل آماری و ابزارهای مانیتورینگ غیرضروری را حذف یا با تأخیر اجرا کنید.
- لود غیراستفاده‌ها به روش Defer: ویژگی
deferرا به تمامی تگ‌های اسکریپت که نیازی به اجرای فوری قبل از رندر محتوا ندارند اضافه کنید.
۳. بهینه‌سازی شاخص CLS (هدف: کمتر از ۰.۱)
آیا تا به حال خواسته‌اید روی لینکی ضربه بزنید، اما ناگهان بنری باز شده و دست شما به دکمه تبلیغ خورده است؟ این پرش ناهنجار دقیقاً همان خطای Cumulative Layout Shift است.
راهنمای بهینه‌سازی Core Web Vitals در وردپرس | آموزش رفع خطاهای LCP ،INP و CLS
راهکارهای عملی کنترل CLS:
- مشخص کردن ابعاد ثابت (Width و Height) برای تصاویر و ویدیوها: مرورگر باید قبل از بارگذاری فایل تصویری بداند چه فضایی را برای آن خالی نگه دارد.
- رزرو فضا برای بلوک‌های تبلیغاتی و المان‌های داینامیک: به کادرهایی که المان‌های بعداً بارگذاری‌شونده در آن قرار می‌گیرند با استفاده از CSS مشخصه
min-heightبدهید. - مدیریت فونت‌ها و جلوگیری از FOUT/FOIT: از قابلیت
font-display: swap;برای فونت‌های وب فارسی نظیر ایران‌یکان، وزیر یا شبنم استفاده کنید تا قبل از لود فایل فونت، متن مخفی نماند.
مقایسه وضعیت استاندارد با وضعیت نامطلوب
| معیار سنجش | وضعیت عالی (سبز) | نیازمند بهبود (نارنجی) | ضعیف (قرمز) |
|---|---|---|---|
| LCP (بزرگ‌ترین محتوا) | کمتر از ۲.۵ ثانیه | بین ۲.۵ تا ۴ ثانیه | بیش از ۴ ثانیه |
| INP (تعامل‌پذیری) | کمتر از ۲۰۰ میلی‌ثانیه | بین ۲۰۰ تا ۵۰۰ میلی‌ثانیه | بیش از ۵۰۰ میلی‌ثانیه |
| CLS (ثبات چیدمان) | کمتر از ۰.۱ | بین ۰.۱ تا ۰.۲۵ | بیش از ۰.۲۵ |
ارورهای Core Web Vitals در سرچ کنسول شما قرمز است؟
تیم فنی تارا وب شاخص‌های کلیدی سایت وردپرسی یا اختصاصی شما را با ضمانت کتبی تحویل تست‌های معتبر سبز می‌کند.
ابزارهای معتبر برای تست و مانیتورینگ
پیشنهاد می‌شود روند بهینه‌سازی را مستمراً از طریق ۳ ابزار استاندارد پایش نمایید:
- PageSpeed Insights گوگل: داده‌های واقعی تجربه میدانی کاربران (Field Data) را همراه با داده‌های شبیه‌سازی‌شده (Lab Data) ارائه می‌دهد.
- بخش Core Web Vitals سرچ کنسول: بهترین مرجع برای کشف خطاهایی که کاربران واقعی در صفحات موبایل یا دسکتاپ تجربه کرده‌اند.
- GTmetrix: امکان تست از موقعیت‌های جغرافیایی مختلف و تفکیک فایل‌های لودشونده به صورت نمودار Waterfall.