شاخص‌های هسته حیاتی وب (Core Web Vitals): مهار معیار LCP و سرعت لود بخش اصلی
قضاوت گوگل درباره سرعت: تجربه ملموس کاربر به جای اعداد ساختگی
در گذشته سرعت سایت با زمان بارگذاری کامل صفحه (Load Time) سنجیده می‌شد؛ عددی گمراه‌کننده که با لود شدن یک ابزارک پنهان در فوتر بالا می‌رفت، در حالی که کاربر ثانیه‌ها قبل مطالعه متن را شروع کرده بود. گوگل با معرفی معیارهای هسته حیاتی وب، تمرکز را مستقیماً روی تجربه حسی مخاطب گذاشت.
شاخص LCP یا زمان بزرگ‌ترین ترسیم محتوایی، پادشاه این معیارهاست و نشان می‌دهد چقدر طول می‌کشد تا مهم‌ترین المان بصری صفحه جلوی چشم کاربر نقش ببندد.
شاخص LCP به این پرسش حیاتی پاسخ می‌دهد: چه زمانی محتوای اصلی که کاربر برای آن آمده، روی صفحه نمایان و قابل استفاده می‌شود؟
عنصر LCP صفحه شما دقیقاً کدام بخش است؟
بزرگ‌ترین المان بصری در صفحات مختلف متفاوت است. در یک صفحه فرود ممکن است تصویر بنر اصلی هیرو باشد؛ در یک مقاله وبلاگی معمولاً تگ تیتر اول یا اولین پاراگراف متن است؛ و در صفحه محصول، گالری تصویر کالا این نقش را دارد.
برای دریافت امتیاز سبز از گوگل، این المان باید در زمانی کمتر از ۲.۵ ثانیه روی صفحه موبایل کاربر رندر شود.
- وضعیت ایده‌آل (خوب): رندر کامل در کمتر از ۲.۵ ثانیه.
- نیازمند بهبود: زمان بارگذاری بین ۲.۵ تا ۴ ثانیه.
- وضعیت بحرانی (ضعیف): رندر المان پس از ۴ ثانیه که با جریمه تجربه کاربری همراه است.
چهار مانع اصلی که شاخص LCP را تخریب می‌کنند
در بیش از ۹۰ درصد پروژه‌های کند، ضعف این شاخص ریشه در چهار گلوگاه فنی دارد که باید گام به گام جراحی شوند.
برطرف کردن این موانع بدون نیاز به افزونه‌های سنگین، نمره سرعت را از وضعیت قرمز به سبز ارتقا می‌دهد.
اولین و بزرگ‌ترین مقصر، تاخیر پاسخگویی هاست (TTFB بالا) است؛ تا زمانی که سرور اولین بایت کدهای HTML را نفرستد، مرورگر حتی نمی‌داند چه تصویری باید دانلود شود.
مانع دوم، وجود فایل‌های استایل و اسکریپت‌های مسدودکننده است که رندر صفحه را معطل دانلود خود می‌کنند. مانع سوم، تصاویر بنر بهینه‌نشده با حجم‌های چند مگابایتی است که بدون فرمت مدرن بارگذاری شده‌اند.
مانع چهارم، لود دیرهنگام المان با اسکریپت‌های کلاینت است که باعث می‌شود مرورگر تا پایان اجرای کدهای جاوااسکریپت، وجود آن عنصر را تشخیص ندهد.
تکنیک‌های طلایی مهندسی برای سبز کردن LCP
اگر بزرگ‌ترین المان صفحه یک عکس است، هرگز نباید از بارگذاری تنبل (lazy loading) برای آن عکس بالای صفحه استفاده کنید! لود تنبل فقط مخصوص تصاویری است که زیر خط تاشو (اسکرول) قرار دارند.
با اضافه کردن ویژگی fetchpriority=high به تگ تصویر اصلی هیرو، به مرورگر فرمان دهید که این فایل بالاترین اولویت دانلود در شبکه را دارد.
دستور اقدام عملی
آدرس صفحه اصلی سایت خود را در ابزار Google PageSpeed Insights وارد کنید. به بخش Diagnostics بروید و روی ردیف Largest Contentful Paint element کلیک کنید. بررسی کنید ابزار دقیقاً کدام تگ از سایت شما را به عنوان عنصر LCP شناسایی کرده و چند ثانیه برای نمایش آن زمان صرف شده است.