GeneratePress est un thème WordPress très léger et relativement bon pour le référencement, garantissant une faible consommation de ressources et un code très flexible. Cependant, il m'a donné des maux de tête pour l'optimisation du LCP sur mobile pour l'image en vedette. Cette image représentative génère un très grand LCP (la plus grande peinture) dans PageSpeed Insights, surtout si dans le blog, vous avez Java Scriptures (Adsense, Tag Manager, etc.), qui peut bloquer le rendu.
Cependant, j'ai réussi à surmonter ce problème et à réussir à optimiser l'image en vedette, et enfin à obtenir un score de performance à 100% sur le mobile et le bureau.
Optimisation LCP sur mobile pour l'image en vedette (GeneratePress)
Si vous rencontrez ce problème et que votre site Web a un faible score de performance sur les appareils mobiles en raison de l'image représentative, voici ce que vous devez faire pour réduire le LCP.
1. Désactivez tout système de cache pendant les modifications et les tests. Il désactive le cache à la fois au niveau du serveur (FastCGI, redis, etc.) et sur des modules (WP Rocket, WP Super Cache, etc.).
2. Installez et activez le module Régénérer les miniatures ou tout autre module capable de régénérer vos images. Même s'il ne semble pas avoir été mis à jour depuis un certain temps, je l'ai utilisé.
3. Assurez-vous de savoir quelles sont les dimensions exactes de la page (sur le bureau) de l'image représentative (image en vedette). Pour savoir plus facilement, vous pouvez utiliser l'outil de capture d'écran sur Mac (ou Windows) et sélectionner exactement la région où se trouve l'image. Sur le bord de sélection, vous vous montrerez exactement quelle est la largeur à sa hauteur.
4. Assurez-vous que toutes les images originales ont la même taille, en particulier la largeur, lorsque vous les téléchargez.
Dans mon exemple, j'ai l'image à la taille maximale de 1200 × 677 pixels.
5. Accédez aux paramètres multimédias de WordPress (paramètres - Media) et définit les dimensions spécifiques de votre blog (taille moyenne, taille moyenne, vignette).
Dans mon cas, j'ai: 1200 × 677 (grand), 745 × 420 (moyenne), 510 × 288 (miniature).
6. Ouvrez le fichier functions.php du thème et ajoutez le code suivant:
// 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 ImageChangement "add_image_size('desktop-featured', 745, 420, true);"Avec les dimensions de votre image représentative, obtenue du point 4 .. également, ajustez le reste du code où ces dimensions apparaissent. Par exemple,"$attr['sizes'] = '(max-width: 745px) 100vw, 745px';« .
Enregistre les changements.
7. Allez aux outils dans WordPress (outils) - Régénérer les miniatures.
En bas doit apparaître vos nouvelles valeurs ajoutées ci-dessus:
- Fermé de bureau:745 × 420 pixels (coupés en ajustement)
- Fermé mobile:400 × 226 pixels (coupés en ajustement)
- mobile-2x-2x:800 × 451 pixels (coupés en ajustement)
Si ces valeurs apparaissent, choisissez de régénérer les miniatures uniquement pour les images représentatives (images en vedette uniquement).
8. Accédez aux paramètres du thème et choisissez la taille moyenne de "Image en vedette" (GeneratePress).
Après la fin de la régénération des images, le problème LCP sur l'image en vedette mobile doit être résolu.
Il vous suffit de tester en chrome (phare) et sur PageSpeed Insights Pour vous assurer que tout fonctionne comme vous le souhaitez et que le grand LCP a été supprimé.
En complément, vous pouvez ajouter des coordonnées pour les écrans de bureau Retina, en commençant par "add_image_size('desktop-featured', 1490, 840, true);"Et remplir les fonctions dans le code.
En rapport: Links do not have a discernible name. Lighthouse Fix
Si vous ne gérez pas le problème LCP sur mobile pour l'image en vedette (en particulier pour GeneratePress), laissez-moi commenter ici.
