Megoldja az LCP -t a mobilon a kiemelt képhez (GeneratePress)

A GeneratePress egy nagyon könnyű és viszonylag jó WordPress téma a SEO számára, biztosítva az alacsony erőforrás -fogyasztást és egy nagyon rugalmas kódot. Ugyanakkor néhány fejfájást okozott nekem az LCP mobilon történő optimalizálására a kiemelt képhez. Ez a reprezentatív kép nagyon nagy LCP -t (legnagyobb festéket) generál PagePeed Insights, különösen, ha a blogban van Java Szentírás (AdSense, Tag Manager stb.), Amely blokkolhatja a megjelenítést.

Ugyanakkor sikerült legyőznem ezt a problémát, és sikerült optimalizálnom a kiemelt képet, és végül 100% -os teljesítménypontot szereztem a mobilon és az asztalon.

Optimalizálás LCP a mobilon a kiemelt képhez (GeneratePress)

Ha a problémával szembesül, és a webhelye alacsony teljesítményponttal rendelkezik a mobil eszközökön, a reprezentatív kép miatt, akkor itt kell tennie az LCP csökkentése érdekében.

1. Tiltsa ki a gyorsítótár -rendszert a változások és a tesztelés során. Letiltja a gyorsítótárat mind a szerver szintjén (FASTCGI, REDIS stb.), Mind a moduloknál (WP Rocket, WP Super Cache stb.).

2. Telepítse és aktiválja a modult Regenerálja a miniatűröket Vagy bármely más modul, amely képes regenerálni a képeit. Még akkor is, ha úgy tűnik, hogy egy ideje nem frissítették, akkor használtam.

3. Ügyeljen arra, hogy tudta, mi a pontos méretek az oldalon (az asztalon) a reprezentatív kép (kiemelt kép). A könnyebb megtudáshoz használhatja a képernyőképes eszközt a Mac (vagy a Windows) rendszeren, és pontosan kiválaszthatja azt a régiót, ahol a kép található. A választási szélen pontosan megmutatja, mi a szélessége a magasságában.

4. Ügyeljen arra, hogy az összes eredeti kép azonos méretű legyen-különösen a szélesség, amikor feltölti őket.

Példámban a képem a maximális méretű, 1200 × 677 pixel.

5. Lépjen a WordPress (beállítások - média) médiabeállításaira, és állítsa be a blog konkrét dimenzióit (teljes méret, közepes méret, miniatűr).

Az én esetemben: 1200 × 677 (nagy), 745 × 420 (átlag), 510 × 288 (miniatűr).

6. Nyissa meg a téma function.php fájlját, és adja hozzá a következő kódot:

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

Változás ”add_image_size('desktop-featured', 745, 420, true);"A reprezentatív kép dimenzióival, amelyet a 4. pontból nyertek. Ezenkívül állítsa be a kód többi részét, ahol ezek a dimenziók megjelennek. Például,"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.

Menti a változásokat.

7. Lépjen a WordPress (Tools) eszközökhöz - regenerálja a miniatűröket.

Alulnak meg kell jelennie a fenti új értékeket:

• asztali tulajdonságok:745 × 420 pixel (fitt)
• mobiltelefonos:400 × 226 pixel (fitt)
• mobiltelefonos-2X:800 × 451 pixel (fitt)

Ha ezek az értékek megjelennek, válassza a miniatűrök regenerálását csak reprezentatív képekhez (csak a képek kiemelt képei).

8. Lépjen a téma beállításaira, és válassza ki a "Kiemelt kép" (GeneratePress) átlagos méretét.

A képek regenerálása után a kiemelt képmobili LCP problémát meg kell oldani.

Csak tesztelnie kell a krómban (világítótorony) és a be PagePeed Insights Annak biztosítása érdekében, hogy minden a kívánt módon működik, és a nagy LCP -t eltávolították.

Komplementumként hozzáadhat koordinátákat a retina asztali képernyőkhöz, kezdve "add_image_size('desktop-featured', 1490, 840, true);"És a kódban szereplő funkciók befejezése.

Összefüggő: Links do not have a discernible name. Lighthouse Fix

Ha nem kezeli az LCP problémáját a mobilon a kiemelt képhez (különösen a GeneratePress esetében), hagyjon itt megjegyzést.