نحوه برطرف کردن ارور Fixing LCP Request Discovery برای محصولات سایت فروشگاهی

توی این آموزش یاد می‌گیری چرا این اتفاق می‌افته و چطور می‌تونی برای همیشه برطرفش کنی. فقط کافیه ویژگی fetchpriority=”high” رو به تصویر اصلی محصول ووکامرس اضافه کنی.

چرا این ارور داده میشه؟

به‌صورت پیش‌فرض وردپرس loading="lazy" رو به همه عکس‌ها اضافه می‌کنه. اما توی صفحه محصول، معمولاً تصویر اصلی محصول همون LCP element محسوب می‌شه؛ یعنی بزرگ‌ترین تصویریه که بالای بخش قابل مشاهده (fold) نمایش داده می‌شه.

وقتی اون تصویر به‌صورت lazy-loaded لود می‌شه، مرورگر برای دریافتش خیلی دیر اقدام می‌کنه و همین باعث می‌شه فرآیند render به تأخیر بیفته. ابزار Google Lighthouse هم این وضعیت رو به‌عنوان یه LCP discovery issue (مشکل در شناسایی LCP) تشخیص می‌ده.

برای حل این مشکل، باید lazy-loading رو برای همون تصویر مشخص غیرفعال کنیم و به مرورگر بگیم این تصویر یه high-priority resource (منبع با اولویت بالا) است.

راه‌حل: ویژگی fetchpriority="high" رو به تصویر اصلی محصول اضافه کن.

خیلی راحت می‌تونی این کار رو با اضافه کردن یه قطعه‌کد ساده به فایل functions.php قالب انجام بدی (یا اگه بخوای تغییراتت موقع آپدیت از بین نرن، توی یه custom functionality plugin قرارش بده یا از قالب چایلد استفاده کن).

کد کاملش اینجاست:

// Disable lazy loading & Add fetchpriority="high" to main WooCommerce product image
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
    if ( is_product() && isset( $attr['class'] ) && strpos( $attr['class'], 'wp-post-image' ) !== false ) {
        // Disable lazy loading for the LCP image
        unset( $attr['loading'] );
        // Add fetchpriority to prioritize this image
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
}, 10, 3 );

عملکرد این کد چیه؟

بیا بخش به بخش توضیح بهت بدم:

• add_filter('wp_get_attachment_image_attributes', ...)
  این قطعه‌کد به سیستم داخلی رندر تصاویر وردپرس متصل می‌شه و اجازه می‌ده ویژگی‌های هر تصویر رو قبل از نمایش تغییر بدی.
• is_product()
  باعث می‌شه این کد فقط روی صفحات محصولات ووکامرس اجرا بشه.
• strpos( $attr['class'], 'wp-post-image' )
  بررسی می‌کنه که تصویر فعلی، همون تصویر اصلی محصول (featured image) باشه.
• unset( $attr['loading'] )
  ویژگی loading="lazy" رو حذف می‌کنه تا مرورگر تصویر رو فوراً بارگذاری کنه.
• $attr['fetchpriority'] = 'high';
  به مرورگر اعلام می‌کنه که این تصویر critical هست و باید در اولین فرصت دانلود بشه.

این کار باعث می‌شه تصویر اصلی محصولت زودتر دانلود بشه، سریع‌تر رندر بشه و توسط ابزار Lighthouse به‌عنوان یه LCP resource قابل شناسایی و بهینه تشخیص داده بشه.

تست کردن تغییراتت

بعد از اینکه این قطعه‌کد رو اضافه کردی، کش سایت رو پاک کن و یه تست جدید با ابزار PageSpeed Insights بگیر.

باید این نتایج رو ببینی:

• ارور LCP Request Discovery کاملاً از بین می‌ره.
• بهبود قابل‌توجهی در زمان بارگذاری LCP (معمولاً بین ۲۰ تا ۴۰٪).
• و در نهایت، امتیاز Performance و Core Web Vitals کلی بالاتر می‌ره.

برای اینکه بهترین نتیجه رو بگیری، حتماً این نکات رو رعایت کن:

1. اندازه و فرمت تصاویرت رو بهینه نگه دار (webp، avif یا نسخه‌های فشرده‌شده‌ی PNG/JPG).
2. از یه افزونه‌ی کش خوب مثل LiteSpeed Cache یا WP Rocket استفاده کن.
3. همه‌ی تصاویر دیگه رو lazy-load کن، به‌جز تصویر اصلی محصول.