LCP به یک سؤال ساده جواب می‌دهد: «کاربر کی احساس می‌کند صفحه باز شده؟» معمولاً عنصر LCP تصویر شاخص بالای صفحه، اسلایدر یا تیتر بزرگ اصلی است.
حد مجاز
خوب: تا ۲.۵ ثانیه. نیاز به بهبود: تا ۴ ثانیه. ضعیف: بیش از ۴ ثانیه. (در صدک ۷۵ کاربران واقعی؛ جزئیات در Core Web Vitals.)
LCP از چهار بخش ساخته شده
- TTFB: زمان رسیدن اولین بایت HTML از سرور.
- تأخیر شروع بارگذاری منبع: فاصله‌ی بین TTFB و زمانی که مرورگر شروع به دانلود تصویر LCP می‌کند.
- زمان دانلود منبع: بسته به حجم تصویر.
- تأخیر رندر: فاصله‌ی پایان دانلود تا نمایش؛ معمولاً به خاطر CSS یا JS که رندر را مسدود می‌کنند.
فهمیدن اینکه کدام بخش بزرگ است، نصف راه حل است.
هفت راه کاهش LCP
- تصویر LCP را Lazy Load نکنید (درباره لیزی لود).
- به تصویر LCP ویژگی
fetchpriority="high"بدهید. - تصویر را به WebP یا AVIF با ابعاد واقعی نمایش تبدیل کنید و از srcset استفاده کنید.
- کش کامل صفحه فعال کنید تا TTFB پایین بیاید.
- CSS حیاتی را زودتر و CSS و JS غیرضروری را با تأخیر بارگذاری کنید.
- اسلایدرهای سنگین بالای صفحه را با یک تصویر ثابت جایگزین کنید.
- برای مخاطبان دور از سرور از CDN استفاده کنید.
اشتباه‌های رایج
- تصویر بالای صفحه که با جاوااسکریپت یا به‌صورت background در CSS دیر کشف می‌شود.
- تست فقط با اینترنت سریع دسکتاپ.
- بهینه کردن چیزی که عنصر LCP نیست.
چطور بررسی کنیم؟
در PageSpeed Insights بخش «Largest Contentful Paint element» عنصر LCP و تفکیک چهار بخش آن را نشان می‌دهد. در کروم، پنل Performance هم موقع ضبط بارگذاری صفحه، عنصر LCP را علامت می‌زند.