Løs LCP på mobil til featured image (GeneryPress)

GeneryPress er et meget let og relativt godt WordPress -tema for SEO, hvilket sikrer et lavt ressourceforbrug og en meget fleksibel kode. Dog gav han mig nogle hovedpine til optimering af LCP på mobil til det fremhævede billede. Dette repræsentative billede genererer en meget stor LCP (største maling) i PageSpeed ​​Insights, især hvis du i bloggen har Java -skrifter (Adsense, Tag Manager osv.), Som kan blokere gengivelsen.

Dog lykkedes det mig at overvinde dette problem og lykkedes at optimere featured image og til sidst at få en 100% ydelsesresultat på mobil og desktop.

Optimering LCP på mobil til featured image (GeneryPress)

Hvis du støder på dette problem, og dit websted har en lav ydelsesresultat på mobile enheder på grund af det repræsentative image, er her, hvad du skal gøre for at reducere LCP.

1. Deaktiver ethvert cache -system under ændringer og test. Det deaktiverer cache både på serverniveau (FastCGI, Redis osv.) Og ved moduler (WP -raket, WP Super Cache osv.).

2. Installer og aktiver modulet Regenerere miniaturebilleder eller ethvert andet modul, der er i stand til at regenerere dine billeder. Selvom det ser ud til at være blevet opdateret i nogen tid, brugte jeg det.

3.. Sørg for, at du ved, hvad der er de nøjagtige dimensioner på siden (på skrivebordet) af det repræsentative billede (vist billede). For at finde ud af det lettere kan du bruge skærmbilledeværktøjet på Mac (eller Windows) og vælge nøjagtigt det område, hvor billedet er. På markeringskanten viser du dig nøjagtigt, hvad bredden er i dens højde.

4. Sørg for, at alle de originale billeder har samme størrelse-især bredden-når du uploader dem.

I mit eksempel har jeg billedet til den maksimale størrelse på 1200 × 677 pixels.

5. Gå til medieindstillingerne for WordPress (Indstillinger - Media) og indstiller de specifikke dimensioner på din blog (fuld størrelse, mellemstørrelse, miniaturebillede).

I mit tilfælde har jeg: 1200 × 677 (stor), 745 × 420 (gennemsnit), 510 × 288 (miniaturebillede).

6. Åbn funktionen. Php -filen for temaet, og tilføj 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

Ændring ”add_image_size('desktop-featured', 745, 420, true);"Med dimensionerne på dit repræsentative billede, opnået fra punkt 4 .. Juster også resten af ​​koden, hvor disse dimensioner vises. For eksempel,"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.

Gemmer ændringer.

7. Gå til værktøjer i WordPress (værktøjer) - Regenerere miniaturebilleder.

I bunden skal du vises dine nye værdier tilføjet ovenfor:

• Desktop-udstyret:745 × 420 pixels (skåret for at passe)
• Mobiludstyr:400 × 226 pixels (skåret for at passe)
• Mobiludstyrs-2x:800 × 451 pixels (skåret for at passe)

Hvis disse værdier vises, skal du kun vælge at regenerere miniaturebilleder til repræsentative billeder (kun vist billeder).

8. Gå til temaindstillingerne, og vælg den gennemsnitlige størrelse for "Featured Image" (GeneryPress).

Efter regenereringen af ​​billederne slutter, skal LCP -problemet på den fremhævede billedmobil løses.

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

Som et supplement kan du tilføje koordinater til nethinde -desktop -skærme, startende med "add_image_size('desktop-featured', 1490, 840, true);"Og færdiggør funktionerne i koden.

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

Hvis du ikke håndterer LCP -problemet på mobil til featured image (især til GeneryPress), skal du lade mig kommentere her.