Ratkaisee LCP: n mobiililaitteella esillä olevalle kuvalle (generatePress)

GeneratePress on erittäin kevyt ja suhteellisen hyvä WordPress -teema SEO: lle, joka varmistaa vähäisen resurssien kulutuksen ja erittäin joustavan koodin. Hän antoi minulle kuitenkin joitain päänsärkyjä LCP: n optimoimiseksi Mobile -ohjelmassa esitetyn kuvan suhteen. Tämä edustava kuva tuottaa erittäin suuren LCP: n (suurin maali) Pagespeed Insights, varsinkin jos blogissa sinulla on Java -pyhiä kirjoituksia (AdSense, Tag Manager jne.), Jotka voi estää renderoinnin.

Onnistuin kuitenkin voittamaan tämän ongelman ja onnistuin optimoimaan esillä olevan kuvan ja lopulta saamaan 100% suorituskykypistemäärän mobiili- ja työpöydällä.

Optimointi LCP mobiililaitteella esillä olevalle kuvalle (GeneratePress)

Jos kohtaat tämän ongelman ja verkkosivustollasi on alhainen suorituskykypistemäärä mobiililaitteissa edustavan kuvan takia, tässä on mitä sinun on tehtävä LCP: n vähentämiseksi.

1. Poista kaikki välimuistijärjestelmät käytöstä muutosten ja testauksen aikana. Se poistaa välimuistin käytöstä sekä palvelintasolla (FastCGI, Redis jne.) Ja moduuleilla (WP -raketti, WP Super -välimuisti jne.).

2. Asenna ja aktivoi moduuli Uudistaa pikkukuvat tai mikä tahansa muu moduuli, joka pystyy uudistamaan kuvat. Vaikka sitä ei näytä olevan päivitetty jonkin aikaa, käytin sitä.

3. Varmista, että tiedät, mitkä ovat tarkan mitat edustavan kuvan sivulla (esillä oleva kuva). Saadaksesi selville helpommaksi, voit käyttää MAC: n (tai Windowsin) kuvakaappaustyökalua ja valita tarkalleen alue, jolla kuva on. Valintareunassa näytät sinulle tarkalleen, mikä leveys on sen korkeudessa.

4. Varmista, että kaikissa alkuperäisissä kuvissa on samankokoinen-etenkin leveys-kun lähetät ne.

Esimerkissäni kuva on enimmäiskoko 1200 × 677 pikseliä.

5. Siirry WordPressin (asetukset - media) mediaasetuksiin ja asettaa blogin erityiset mitat (täysikokoinen, keskikokoinen, pikkukuva).

Minun tapauksessani minulla on: 1200 × 677 (suuri), 745 × 420 (keskiarvo), 510 × 288 (pikkukuva).

6. Avaa teeman function.php -tiedosto ja lisää seuraava koodi:

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

Muutosadd_image_size('desktop-featured', 745, 420, true);"Säädä myös loput koodista, jossa nämä mitat ilmestyvät. Esimerkiksi", esimerkiksi ".$attr['sizes'] = '(max-width: 745px) 100vw, 745px';".

Tallentaa muutokset.

7. Siirry WordPressin työkaluihin (työkalut) - Regeneroi pikkukuvat.

Alareunassa tulee näkyä uusien arvojen lisättyinä yllä:

• työpöydällä varustettu:745 × 420 pikseliä (leikattu sopivaksi)
• matkapuhelin:400 × 226 pikseliä (leikattu sopiviksi)
• Matkapuhelin-2x:800 × 451 pikseliä (leikattu sopiviksi)

Jos nämä arvot ilmestyvät, valitse regeneroida pikkukuvat vain edustaville kuville (vain esillä olevat kuvat).

8. Siirry teema -asetuksiin ja valitse "esitetyn kuvan" (generatePress) keskimääräinen koko.

Kuvien uudistumisen jälkeen esitetyn kuvan matkapuhelimen LCP -ongelma tulisi ratkaista.

Sinun täytyy vain testata kromissa (majakka) ja Pagespeed Insights Varmistaaksesi, että kaikki toimii haluamallasi tavalla ja iso LCP on poistettu.

Komplementtina voit lisätä Retina -työpöydän näytöille koordinaatit alkaen "add_image_size('desktop-featured', 1490, 840, true);"Ja koodin toimintojen suorittaminen.

Aiheeseen liittyvä: Links do not have a discernible name. Lighthouse Fix

Jos et käsittele LCP -ongelmaa mobiililaitteessa esillä olevalle kuvalle (etenkin GeneratePress -palveluun), jätä minulle kommentti tähän.