Core Web Vitals مجموعه‌ای از سه معیار کلیدی است که گوگل برای سنجش تجربه کاربری (UX) یک صفحه وب استفاده می‌کند. این سه معیار عبارتند از:

• Largest Contentful Paint (LCP): زمان بارگذاری بزرگ‌ترین عنصر قابل مشاهده (معمولاً تصویر اصلی یا تیتر). باید زیر ۲.۵ ثانیه باشد.
• First Input Delay (FID): مدت زمانی که مرورگر طول می‌کشد تا به اولین تعامل کاربر (کلیک) پاسخ دهد. باید زیر ۱۰۰ میلی‌ثانیه باشد.
• Cumulative Layout Shift (CLS): میزان جابجایی‌های ناگهانی عناصر صفحه هنگام بارگذاری. باید زیر ۰.۱ باشد.

۱. بهینه‌سازی LCP: چگونه بزرگ‌ترین عنصر را در ۲.۵ ثانیه بارگذاری کنیم؟

بزرگ‌ترین مقصر LCP معمولاً تصاویر و فونت‌های حجیم هستند. در اینجا ۵ تکنیک طلایی برای کاهش LCP آورده شده است:

۱.۱. فشرده‌سازی تصاویر با WebP

فرمت WebP حجم تصاویر را تا ۸۰٪ کمتر از JPEG می‌کند، بدون افت کیفیت. همیشه تصاویر را قبل از آپلود به WebP تبدیل کنید. برای سایت‌های PHP می‌توانید از GD Library استفاده کنید:

<?php
function convertToWebp($source, $destination, $quality = 80) {
    $info = getimagesize($source);
    if ($info['mime'] == 'image/jpeg') 
        $image = imagecreatefromjpeg($source);
    elseif ($info['mime'] == 'image/png') 
        $image = imagecreatefrompng($source);
    imagewebp($image, $destination, $quality);
    imagedestroy($image);
}
?>
                

۱.۲. Lazy Loading تصاویر

با اضافه کردن `loading="lazy"` به تگ ``، تصاویر فقط زمانی بارگذاری می‌شوند که کاربر به آن‌ها اسکرول کند. این کار LCP را به شدت کاهش می‌دهد:

<img src="image.webp" loading="lazy" alt="توضیح">
                

۱.۳. Preload کردن فونت‌ها و CSS بحرانی

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

<link rel="preload" href="/fonts/IRANSans.woff2" as="font" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">
                

۱.۴. کاهش زمان پاسخ سرور (Server Response Time)

هاست با کیفیت انتخاب کنید، از PHP نسخه ۸+ استفاده کنید و کش سرور را فعال کنید. TTFB باید زیر ۲۰۰ میلی‌ثانیه باشد.

۲. بهینه‌سازی FID: پاسخگویی فوری به کلیک کاربر

FID معیاری است که تأخیر بین کلیک کاربر و اجرای دستور را اندازه می‌گیرد. مقصر اصلی: JavaScript های سنگین. برای کاهش FID:

• جاوااسکریپت را به تعویق بیندازید (Defer): از `