Řeší LCP na mobilu pro doporučený obrázek (GeneratePress)

GeneratePress je velmi lehké a relativně dobré téma WordPress pro SEO, což zajišťuje nízkou spotřebu zdrojů a velmi flexibilní kód. Dal mi však několik bolesti hlavy pro optimalizaci LCP na mobilu pro doporučený obrázek. Tento reprezentativní obraz generuje velmi velký LCP (největší barvy) v PagesPeed Insights, zejména pokud na blogu máte Písma Java (AdSense, Správce značek atd.), Které mohou blokovat vykreslování.

Podařilo se mi však tento problém překonat a uspět v optimalizaci doporučeného obrázku a konečně získat 100% skóre výkonu na mobilu a ploše.

Optimalizace LCP na mobilu pro doporučený obrázek (GeneratePress)

Pokud se setkáte s tímto problémem a váš web má na mobilních zařízeních nízké skóre výkonu kvůli reprezentativnímu obrazu, musíte udělat, abyste snížili LCP.

1. Během změn a testování deaktivujte jakýkoli systém mezipaměti. Zakáže mezipaměť jak na úrovni serveru (Fastcgi, Redis atd.), Tak v modulech (WP Rocket, WP Super Cache atd.).

2. nainstalovat a aktivovat modul Regenerujte miniatury nebo jakýkoli jiný modul schopný regenerovat vaše obrázky. I když se zdá, že už nějakou dobu nebyl aktualizován, použil jsem to.

3. Ujistěte se, že víte, jaké jsou přesné rozměry na stránce (na ploše) reprezentativního obrázku (doporučený obrázek). Chcete -li to snadnější, můžete použít nástroj Screenshot na Mac (nebo Windows) a vybrat přesně oblast, kde je obrázek. Na okraji výběru vám ukážete, jaká je šířka ve své výšce.

4. Ujistěte se, že všechny původní obrázky mají stejnou velikost-zejména šířku-když je nahrajete.

V mém příkladu mám obrázek na maximální velikost 1200 × 677 pixelů.

5. Přejděte do nastavení médií WordPress (Nastavení - média) a nastavte konkrétní rozměry vašeho blogu (plná velikost, střední velikost, miniatura).

V mém případě mám: 1200 × 677 (velký), 745 × 420 (průměr), 510 × 288 (miniatura).

6. Otevřete soubor Functions.php tématu a přidejte následující kód:

// START Fix LCP Featured Image

// Define dimensions for featured images
add_image_size('desktop-featured', 745, 420, true); // Standard desktop size
add_image_size('mobile-featured', 400, 226, true); // Standard mobile size
add_image_size('mobile-featured-2x', 800, 451, true); // Retina size (2x)

// Set the image size for mobile and desktop
add_filter('generate_page_header_default_size', function($size) {
    if (is_single()) {
        return wp_is_mobile() ? 'mobile-featured' : 'desktop-featured';
    }
    return $size;
}, 20);

// Adjust image attributes (srcset, sizes, width, height)
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment, $size) {
    if (has_post_thumbnail() && $attachment->ID === get_post_thumbnail_id() && is_single()) {
        if (wp_is_mobile()) {
            // Images for mobile (1x and 2x)
            $image1x = wp_get_attachment_image_src($attachment->ID, 'mobile-featured');
            $image2x = wp_get_attachment_image_src($attachment->ID, 'mobile-featured-2x');

            if ($image1x) {
                $attr['src'] = $image1x[0]; // Force src to 400x226
                $attr['width'] = $image1x[1];
                $attr['height'] = $image1x[2];
            }

            // Set srcset for high-density displays
            $srcset = [];
            if ($image1x) $srcset[] = $image1x[0] . ' 400w';
            if ($image2x) $srcset[] = $image2x[0] . ' 800w';

            $attr['srcset'] = implode(', ', $srcset);
            $attr['sizes'] = '(max-width: 400px) 100vw, 400px';

        } else {
            // Standard image for desktop
            $image = wp_get_attachment_image_src($attachment->ID, 'desktop-featured');

            if ($image) {
                $attr['src'] = $image[0]; // Force src to 745x420
                $attr['width'] = $image[1];
                $attr['height'] = $image[2];

                // Set srcset for desktop (without Retina)
                $srcset = [];
                if ($image) $srcset[] = $image[0] . ' 745w';

                $attr['srcset'] = implode(', ', $srcset);
                $attr['sizes'] = '(max-width: 745px) 100vw, 745px';
            }
        }
    }
    return $attr;
}, 20, 3);

// Remove the link around the image (if necessary)
add_filter('generate_featured_image_output', function($output) {
    if (is_single()) {
        $output = preg_replace('/<a href="[^"]*">/', '', $output);
        $output = str_replace('</a>', '', $output);
    }
    return $output;
});

// END Fix LCP Featured Image

Změnit “add_image_size('desktop-featured', 745, 420, true);„S rozměry vašeho reprezentativního obrazu, získané z bodu 4 .. také upravte zbytek kódu, kde se tyto rozměry objevují. Například,“$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.

Ušetří změny.

7. Přejděte na nástroje ve WordPress (Tools) - Regenerujte miniatury.

Ve spodní části by se měly objevit vaše nové hodnoty přidané výše:

Desktop-Feated:745 × 420 pixelů (střih na přizpůsobení)
Mobile-Feated:400 × 226 pixelů (střih na přizpůsobení)
Mobile-Feated-2x:800 × 451 pixelů (střih na přizpůsobení)

Pokud se tyto hodnoty objeví, rozhodněte se regenerovat miniatury pouze pro reprezentativní obrázky (pouze zobrazené obrázky).

8. Přejděte do nastavení motivu a vyberte průměrnou velikost pro „doporučený obrázek“ (GeneratePress).

Po skončení regenerace obrázků by měl být problém LCP na moderním obrázku Mobile vyřešen.

Stačí jen testovat v chromu (majáku) a dále PagesPeed Insights Chcete -li se ujistit, že všechno funguje tak, jak chcete, a velký LCP byl odstraněn.

Jako doplněk můžete přidat souřadnice pro obrazovky plochy sítnice, počínaje "add_image_size('desktop-featured', 1490, 840, true);„A dokončení funkcí v kódu.

Příbuzný: Links do not have a discernible name. Lighthouse Fix

Pokud nezvládnete problém LCP na mobilu pro doporučený obrázek (zejména pro GeneratePress), zanechte mi komentář zde.

Zobrazení příspěvku: 3,820