GeneratePress è un tema WordPress molto leggero e relativamente buono per SEO, garantendo un basso consumo di risorse e un codice molto flessibile. Tuttavia, mi ha dato dei mal di testa per l'ottimizzazione di LCP su dispositivi mobili per l'immagine in primo piano. Questa immagine rappresentativa genera un LCP molto grande (vernice più grande) in Pagespeed Insights, soprattutto se nel blog hai Scritture Java (Adsense, Tag Manager, ecc.), Che può bloccare il rendering.
Tuttavia, sono riuscito a superare questo problema e riuscire a ottimizzare l'immagine in primo piano e infine a ottenere un punteggio delle prestazioni del 100% su dispositivi mobili e desktop.
Ottimizzazione LCP sul cellulare per l'immagine in primo piano (GeneratePress)
Se riscontri questo problema e il tuo sito Web ha un punteggio a bassa prestazione sui dispositivi mobili a causa dell'immagine rappresentativa, ecco cosa devi fare per ridurre il LCP.
1. Disabilita qualsiasi sistema di cache durante le modifiche e i test. Disabilita la cache sia a livello del server (FastCGI, Redis, ecc.) Sia su moduli (WP Rocket, WP Super Cache, ecc.).
2. Installa e attiva il modulo Rigenerare le miniature o qualsiasi altro modulo in grado di rigenerare le tue immagini. Anche se sembra non essere stato aggiornato da un po 'di tempo, l'ho usato.
3. Assicurati di sapere quali sono le dimensioni esatte della pagina (sul desktop) dell'immagine rappresentativa (immagine in primo piano). Per scoprire più facilmente, è possibile utilizzare lo strumento screenshot su Mac (o Windows) e selezionare esattamente la regione in cui si trova l'immagine. Sul bordo di selezione ti mostrerai esattamente qual è la larghezza nella sua altezza.
4. Assicurati che tutte le immagini originali abbiano la stessa dimensione, specialmente la larghezza, quando le carichi.
Nel mio esempio ho l'immagine alla dimensione massima di 1200 × 677 pixel.
5. Vai alle impostazioni multimediali di WordPress (Impostazioni - Media) e imposta le dimensioni specifiche del tuo blog (dimensioni intera, media dimensioni, miniatura).
Nel mio caso ho: 1200 × 677 (grande), 745 × 420 (media), 510 × 288 (miniatura).
6. Apri il file functions.php del tema e aggiungi il seguente codice:
// 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 ImageModifica "add_image_size('desktop-featured', 745, 420, true);"Con le dimensioni dell'immagine rappresentativa, ottenuta dal punto 4 .. Inoltre, regola il resto del codice in cui compaiono queste dimensioni. Ad esempio,"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';“.
Salva i cambiamenti.
7. Vai agli strumenti in WordPress (Strumenti) - Rigenerare le miniature.
In basso dovrebbero apparire i tuoi nuovi valori aggiunti sopra:
- Desktop-Featured:745 × 420 pixel (Cut to Fit)
- Feature mobili:400 × 226 pixel (Cut to Fit)
- mobile-feattured-2x:800 × 451 pixel (tagliato per adattarsi)
Se vengono visualizzati questi valori, scegli di rigenerare le miniature solo per immagini rappresentative (solo immagini in primo piano).
8. Vai alle impostazioni del tema e scegli la dimensione media per "immagine in primo piano" (GeneratePress).
Dopo la fine della rigenerazione delle immagini, il problema LCP sull'immagine in primo piano dovrebbe essere risolto.
Devi solo testare in Chrome (faro) e via Pagespeed Insights Per assicurarsi che tutto funzioni come vuoi e il grande LCP è stato rimosso.
Come complemento, puoi aggiungere coordinate per gli schermi desktop Retina, a partire da "add_image_size('desktop-featured', 1490, 840, true);"E completando le funzioni nel codice.
Imparentato: Links do not have a discernible name. Lighthouse Fix
Se non si gestisce il problema LCP sul cellulare per l'immagine in primo piano (specialmente per GeneratePress), lasciami commentare qui.
