Löser LCP på Mobile för Featured Image (GeneratePress)

GeneratePress är ett mycket lätt och relativt bra WordPress -tema för SEO, vilket säkerställer en låg resursförbrukning och en mycket flexibel kod. Men han gav mig lite huvudvärk för optimering av LCP på Mobile för den presenterade bilden. Denna representativa bild genererar en mycket stor LCP (största färg) i Pages Peed Insights, särskilt om du i bloggen har Java -skrifter (AdSense, Tag Manager, etc.), vilket kan blockera återgivningen.

Men jag lyckades övervinna detta problem och lyckas optimera den framtida bilden och slutligen få 100% prestationspoäng på mobil och skrivbord.

Optimering LCP på Mobile för Featured Image (GeneratePress)

Om du stöter på det här problemet och din webbplats har en låg prestanda på mobila enheter på grund av den representativa bilden, här är vad du behöver göra för att minska LCP.

1. Inaktivera alla cachesystem under ändringar och testning. Den inaktiverar cache både på servernivå (FastCGI, Redis, etc.) och vid moduler (WP Rocket, WP Super Cache, etc.).

2. Installera och aktivera modulen Regenerera miniatyrbilder eller någon annan modul som kan regenerera dina bilder. Även om det verkar inte ha uppdaterats på länge, använde jag det.

3. Se till att du vet vad som är de exakta dimensionerna på sidan (på skrivbordet) på den representativa bilden (presenterad bild). För att ta reda på det kan du använda skärmdumpverktyget på MAC (eller Windows) och välja exakt det område där bilden är. På urvalskanten visar du dig exakt vad bredden är i sin höjd.

4. Se till att alla originalbilder har samma storlek-särskilt bredden när du laddar upp dem.

I mitt exempel har jag bilden till den maximala storleken på 1200 × 677 pixlar.

5. Gå till mediainställningarna i WordPress (inställningar - media) och ställer in de specifika dimensionerna på din blogg (full storlek, medelstor, miniatyrbild).

I mitt fall har jag: 1200 × 677 (stor), 745 × 420 (genomsnitt), 510 × 288 (miniatyrbild).

6. Öppna funktioner.php -filen för temat och lägg till följande kod:

// 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

Förändring ”add_image_size('desktop-featured', 745, 420, true);"Med dimensionerna på din representativa bild, erhållna från punkt 4 .. Justera också resten av koden där dessa dimensioner visas. Till exempel,"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';".

Sparar förändringar.

7. Gå till verktyg i WordPress (verktyg) - Regenerera miniatyrbilder.

Längst ner ska visas dina nya värden tillagda ovan:

• Desktop-Featured:745 × 420 pixlar (klippt för att passa)
• Mobile-funktioner:400 × 226 pixlar (klippt för att passa)
• Mobile-FeTured-2X:800 × 451 pixlar (klippt för att passa)

Om dessa värden visas väljer du att regenerera miniatyrbilder endast för representativa bilder (endast bilder).

8. Gå till temainställningarna och välj medelstorleken för "Featured Image" (GeneratePress).

Efter regenereringen av bilderna slutar bör LCP -problemet på den presenterade bildmobilen lösas.

Du behöver bara testa i krom (fyr) och på Pages Peed Insights För att se till att allt fungerar som du vill och den stora LCP har tagits bort.

Som ett komplement kan du lägga till koordinater för skärmar från Retina Desktop, med början med "add_image_size('desktop-featured', 1490, 840, true);"Och slutföra funktionerna i koden.

Relaterad: Links do not have a discernible name. Lighthouse Fix

Om du inte hanterar LCP -problemet på mobilen för bild (särskilt för generationPress), lämna mig kommentar här.