بهینه‌سازی عکس اصلی برای LCP بهتر (Eager + High Priority)

با اعمال اسنیپت بهینه‌سازی تصویر شاخص، مقدار Largest Contentful Paint (LCP) به‌طور چشمگیری بهتر شد، از ۳.۹ ثانیه به ۱.۷ ثانیه روی موبایل رسید. همین یک تغییر، امتیاز کلی Performance رو از 88 به 98 رسوند و خیلی خوب نشون داد که یک تصویر شاخص با اولویت‌دهی درست، چقدر می‌تونه روی Core Web Vitals تأثیر بذاره.

اسنیپت زیر این کارها رو انجام می‌کنه:

• lazy-loading پیش‌فرض وردپرس رو برای تصویر شاخص غیرفعال می‌کنه.

• با استفاده از loading="eager"، مرورگر رو مجبور می‌کنه تصویر رو هرچه زودتر لود کنه.

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

• srcset و sizes کامل رو نگه می‌داره تا تصویر همچنان به‌صورت ریسپانسیو نمایش داده بشه.

• به‌صورت خودکار یک تگ alt تنظیم می‌کنه (اگر alt تعریف نشده باشه، از عنوان نوشته استفاده می‌شه).

این رو به functions.php اضافه کن

/**
 * Optimize Featured Image for Better LCP
 *
 * This snippet disables lazy loading for the featured image
 * and adds loading="eager" + fetchpriority="high" to improve LCP.
 *
 * Use the shortcode  anywhere inside your post or template.
 */
function lcp_featured_image_shortcode() {
    if ( is_singular() && has_post_thumbnail() ) {
        $thumb_id = get_post_thumbnail_id();
        $alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );
        $alt = $alt ? esc_attr( $alt ) : esc_attr( get_the_title() );

        $src_full = wp_get_attachment_image_url( $thumb_id, 'full' );
        $srcset   = wp_get_attachment_image_srcset( $thumb_id, 'full' );
        $sizes    = wp_get_attachment_image_sizes( $thumb_id, 'full' );

        return '<img 
            src="' . esc_url( $src_full ) . '" 
            loading="eager" 
            fetchpriority="high"
            data-no-lazy="1"
            alt="' . $alt . '" 
            srcset="' . esc_attr( $srcset ) . '" 
            sizes="' . esc_attr( $sizes ) . '" 
            width="100%" height="auto" class="featured-lcp-img">';
    }

    return '';
}
add_shortcode( 'featured_image_lcp', 'lcp_featured_image_shortcode' );

چطور ازش استفاده کنی

بعد از اینکه این کد رو به فایل functions.php قالب‌ت اضافه کردی، فقط کافیه این شورت‌کد رو هر جایی داخل نوشته یا قالب که می‌خوای قرار بدی:

• نمایش فوری: تصویر اصلی همون اول به کاربر نشون داده می‌شه.

• بهبود Core Web Vitals: امتیاز LCP بهتر می‌شه و در نهایت به سئو کمک می‌کنه.

• خروجی HTML تمیز: بدون هیچ div یا wrapper اضافه.

• سازگار با دسترس‌پذیری: برای تگ alt در صورت نبود مقدار، از عنوان نوشته به‌عنوان جایگزین استفاده می‌کنه.

• Plug-and-play: با هر قالب وردپرسی‌ای کار می‌کنه.

🚀 نکته مهم

این شورت‌کد رو فقط برای تصویر اصلی (hero) بالای فولد استفاده کن. برای بقیه تصاویر پایین صفحه، همچنان lazy loading رو فعال نگه دار تا هم پهنای باند حفظ بشه و هم منابع سرور بی‌خودی مصرف نشن.