GeneratePress este o temă de WordPress foarte light și relativ bună pentru SEO, asigurând un consum mic de resurse și un cod foarte flexibil. Cu toate acestea, mi-a dat ceva bătaie de cap optimizarea LCP pe mobile pentru Featured Image. Această imagine reprezentativă generează un LCP (Largest Contentful Paint) foarte mare în PageSpeed Insights, mai ales dacă în blog ai scripturi java (AdSense, Tag Manager, etc), care pot să blocheze randarea.
Am reușit totuși să depășesc această problemă și să reușesc optimizarea featured image, iar în final să obțin un scor de 100% pentru performanță pe dispozitive mobile și desktop.
Optimizare LCP pe mobile pentru Featured Image (GeneratePress)
Dacă întâmpini această problemă și website-ul tău are un scor scăzut al performanței pe dispozitivele mobile din cauza imaginii reprezentative (featured image), iată ce trebuie să faci pentru a reduce LCP-ul.
1. Dezactivează orice sistem de cache pe perioada modificărilor și a testării. Dezactivează cache atât la nivel de server (FastCGI, Redis, etc) cât și la nivel de module (WP Rocket, WP Super Cache, etc).
2. Instalează și activează modulul Regenerate Thumbnails sau orice alt modul capabil să-ți regenereze imaginile. Chiar dacă pare să nu mai fi fost actualizat de ceva timp, eu pe acesta l-am utilizat.
3. Asigură-te că știi care sunt dimensiunile exacte în pagină (pe desktop) ale imaginii reprezentative (featured image). Ca să le afli mai ușor, poți să folosești tool-ul de screenshot de pe Mac (sau Windows) și să selectezi exact regiunea în care este poza. Pe marginea de selecție o să-ți arate exact care este lățimea în înălțimea acesteia.
4. Asigură-te că toate pozele originale au aceeași dimensiune – în special lățimea – atunci când le faci upload.
În exemplul meu am poza la dimensiunea maximă de 1200×677 pixeli.
5. Mergi la setările media ale WordPress (Settings – Media) și stabilește dimensiunile specifice blogului tău (full size, medium size, thumbnail).
În cazul meu am: 1200×677 (mare), 745×420 (medie), 510×288 (thumbnail).
6. Deschide fișierul functions.php al temei și adaugă următorul cod:
// 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 ImageModifică „add_image_size('desktop-featured', 745, 420, true);” cu dimensiunile imaginei tale reprezentative, obținute de la punctul 4. De asemenea, ajustează și restul codului unde apar aceste dimensiuni. De exemplu, „$attr['sizes'] = '(max-width: 745px) 100vw, 745px';„.
Salvează modificările.
7. Mergi la unelte în WordPress (Tools) – Regenerate Thumbnails.
În partea de jos ar trebui să-ți apară noile valori adăugate mai sus:
- desktop-featured: 745×420 pixels (decupată pentru a se potrivi)
- mobile-featured: 400×226 pixels (decupată pentru a se potrivi)
- mobile-featured-2x: 800×451 pixels (decupată pentru a se potrivi)
Dacă aceste valori apar, alege să regenerezi thumbnails doar pentru imaginile reprezentative (Featured Images Only).
8. Mergi în setările temei și alege dimensiunea medie pentru „Featured Image” (GeneratePress).
După ce se termină regenerarea imaginilor, problema LCP pe mobile pentru Featured Image ar trebui să fie rezolvată.
Trebuie doar să testezi în Chrome (Lighthouse) și pe PageSpeed Insights pentru a te asigura că totul funcționează așa cum îți dorești și LCP-ul mare a fost înlăturat.
Ca o completare, poți adăuga coordonate și pentru ecranele Retina desktop, începând cu „add_image_size('desktop-featured', 1490, 840, true);” și completând funcțiile din cod.
Related: Links do not have a discernible name. Lighthouse Fix
Dacă nu te descurci să rezolvi problema LCP pe mobile pentru Featured Image (în special pentru GeneratePress), lasă-mi comentariu aici.
