سه شاخص کلیدی Core Web Vitals چیستند؟
- ۱. بزرگ‌ترین عنصر محتوایی (LCP - Largest Contentful Paint): زمان لازم برای لود شدن بزرگ‌ترین تصویر یا بلوک متنی بالای صفحه (هدف: کمتر از ۲.۵ ثانیه).
- ۲. پاسخگویی به تعاملات (INP - Interaction to Next Paint): سرعت واکنش صفحه بعد از کلیک، لمس یا تایپ کاربر (هدف: کمتر از ۲۰۰ میلی‌ثانیه). این شاخص از مارس ۲۰۲۴ جایگزین FID شده است.
- ۳. تغییر چیدمان تجمعی (CLS - Cumulative Layout Shift): میزان پرش ناگهانی و جابجایی ناخواسته المان‌ها در حین لود صفحه (هدف: کمتر از ۰.۱).
چگونه LCP را در وردپرس بهینه کنیم؟
در ۹۰٪ صفحات وردپرسی، عنصر LCP تصویر شاخص بنر بالای صفحه یا تیتر اصلی H1 است. راهکارهای رفع:
- پیش‌بارگذاری تصویر هدر (Preload Key Image): با افزودن تگ
<link rel="preload" as="image">مرورگر را وادار کنید تصویر بنر را بلافاصله دریافت کند. - استثنا کردن از Lazy Load: هرگز تصویر بالای خط تا (Above-the-Fold) را تنبل لود نکنید. افزونه‌های کش باید اولین تصویر صفحه را از لیزی لود خارج کنند.
- کاهش TTFB: با فعال‌سازی Page Cache و بهینه‌سازی هاست، زمان انتظار برای دریافت اولین داده را به زیر ۳۰۰ میلی‌ثانیه برسانید.
راهکارهای کاهش INP و بهینه‌سازی جاوااسکریپت
شاخص INP وقتی قرمز می‌شود که کدهای جاوااسکریپت سنگین رشته اصلی مرورگر (Main Thread) را مسدود کرده باشند:
- اسکریپت‌های حجیم را به قطعات کوچک‌تر تقسیم (Code Splitting) کنید.
- کدهای ردیابی و چت آنلاین را تا زمان اسکرول کاربر بارگذاری نکنید.
- از قالب‌ها و افزونه‌هایی که کدهای جی‌کوئری سنگین و غیراستاندارد دارند اجتناب کنید.
چگونه پرش صفحه (CLS) را به صفر برسانیم؟
پرش صفحه زمانی رخ می‌دهد که المانی دیرتر لود شده و سایر اجزا را به پایین هل دهد:
- تعیین عرض و ارتفاع صریح: همیشه به تمام تگ‌های
<img>و<video>صفت‌هایwidthوheightبدهید. - رزرو فضا برای بنرهای تبلیغاتی: با استفاده از CSS برای جایگاه‌های داینامیک، حداقل ارتفاع (min-height) تعریف کنید.
- بهینه‌سازی فونت‌ها: با اعمال
font-display: swapاز محو شدن و پرش فونت‌های سفارشی جلوگیری کنید.