Løser LCP på mobil for omtalt bilde (GeneratePress)

GeneratePress er et veldig lett og relativt godt WordPress -tema for SEO, noe som sikrer et lavt ressursforbruk og en veldig fleksibel kode. Imidlertid ga han meg litt hodepine for optimalisering av LCP på mobil for det kjente bildet. Dette representative bildet genererer en veldig stor LCP (største maling) i Pagespeed Insights, spesielt hvis du i bloggen har Java -skrifter (Adsense, Tag Manager, etc.), som kan blokkere gjengivelsen.

Imidlertid klarte jeg å overvinne dette problemet og lykkes med å optimalisere kjennetegn, og til slutt for å få en 100% ytelsesresultat på mobil og skrivebord.

Optimalisering LCP på mobil for omtalt bilde (GeneratePress)

Hvis du møter dette problemet og nettstedet ditt har en lav ytelse på mobile enheter på grunn av det representative bildet, er her hva du trenger å gjøre for å redusere LCP.

1. Deaktiver ethvert cache -system under endringer og testing. Det deaktiverer cache både på servernivå (FastCGI, Redis, etc.) og ved moduler (WP Rocket, WP Super Cache, etc.).

2. Installer og aktiver modulen Regenerere miniatyrbilder eller en hvilken som helst annen modul som kan regenerere bildene dine. Selv om det ser ut til å ikke ha blitt oppdatert på noen tid, brukte jeg det.

3. Forsikre deg om at du vet hva som er de nøyaktige dimensjonene på siden (på skrivebordet) av det representative bildet (kjennetegn). For å finne ut enklere, kan du bruke skjermbildetverktøyet på Mac (eller Windows) og velge nøyaktig regionen der bildet er. På valgkanten vil du vise deg nøyaktig hva bredden er i høyden.

4. Forsikre deg om at alle de originale bildene har samme størrelse-spesielt bredden-når du laster dem opp.

I mitt eksempel har jeg bildet til maksimal størrelse på 1200 × 677 piksler.

5. Gå til medieinnstillingene til WordPress (Innstillinger - Media) og angir de spesifikke dimensjonene til bloggen din (full størrelse, mellomstore, miniatyrbilde).

I mitt tilfelle har jeg: 1200 × 677 (stor), 745 × 420 (gjennomsnitt), 510 × 288 (miniatyrbilde).

6. Åpne funksjonen.php -filen til temaet og legg til følgende kode:

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

Endring ”add_image_size('desktop-featured', 745, 420, true);"Med dimensjonene til det representative bildet ditt, oppnådd fra punkt 4 .. juster også resten av koden der disse dimensjonene vises. For eksempel,"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';".

Sparer endringer.

7. Gå til verktøy i WordPress (verktøy) - Regenerere miniatyrbilder.

Nederst skal du vises at de nye verdiene dine er lagt til ovenfor:

Desktop-Feature:745 × 420 piksler (kutt for å passe)
Mobilfunksjon:400 × 226 piksler (kutt til passform)
Mobil-Featurure-2x:800 × 451 piksler (kutt for å passe)

Hvis disse verdiene vises, velger du å regenerere miniatyrbilder bare for representative bilder (kun kjennetegn på bilder).

8. Gå til temainnstillingene og velg gjennomsnittsstørrelsen for "Featured Image" (GeneratePress).

Etter at regenereringen av bildene er slutt, bør LCP -problemet på den kjente Image Mobile løses.

Du trenger bare å teste i krom (fyrtårn) og på Pagespeed Insights For å sikre at alt fungerer som du vil, og den store LCP er fjernet.

Som et supplement kan du legge til koordinater for Retina Desktop -skjermer, som starter med "add_image_size('desktop-featured', 1490, 840, true);"Og å fullføre funksjonene i koden.

I slekt: Links do not have a discernible name. Lighthouse Fix

Hvis du ikke håndterer LCP -problemet på mobil for omtalt bilde (spesielt for GeneratePress), la meg kommentar være her.

Innleggsvisninger: 3,791