Largest Contentful Paint (LCP) : C’est quoi ? Comment l’optimiser ?

Le LCP pour Largest Contentful Paint est un des 3 critères les plus importants des Core Web Vitals, un indicateur qu’a créé Google pour déterminer si les utilisateurs peuvent profiter d’une bonne expérience sur une page. Dans ce guide, nous plongerons dans cette métrique en particulier, vous découvrirez ainsi ce qu’est le LCP, comment le mesurer mais également comment l’optimiser.

Qu’est-ce que le LCP ?

La mesure LCP (Largest Contentful Paint) indique le temps de rendu du plus grand bloc de votre site. Généralement, le LCP désignera une grande image (ou une image en arrière-plan), un grand bloc ou encore une vidéo.

Pour la note, si le contenu le plus volumineux est visible dans les 2,5 premières secondes du chargement de la page elle sera considérée comme bonne (vert). En revanche si elle dépasse 4 secondes, elle sera considérée comme mauvaise (rouge), d'où l'importance de réduire ces temps de chargement :

Comment mesurer le LCP ?

Le LCP est parfois difficile à mesurer. Il m’est déjà arrivé de voir un LCP différent sur chaque outil, et même un LCP différent entre Lightouse sur Chrome DevTools et Google Pagespeed Insights alors qu’ils utilisent tous les deux l’outil Lightouse… De plus si vous optimisez uniquement le LCP d’un élément, en réduisant sa taille par exemple, le LCP va se répercuter vers un autre élément. À moins que vous n’ayez vraiment un gros bloc problématique, l’idéal serait plutôt d’optimiser au maximum ce que nous allons voir juste après, et non pas un élément en particulier désigné par l’outil que vous utilisez.

L'idéal sera toujours d'utiliser la Google Search Console pour déterminer le LCP et temps de chargement si vous le souhaitez mais il est probable que n'ayez pas l'accès si vous travaillez pour un client ou bien que Google n'ait pas assez recueilli de données utilisateur pour vous indiquer les données.

Les 4 meilleurs outils pour mesurer le LCP

Voici selon moi les meilleurs outils SEO pour mesurer le LCP, n’hésitez pas à tous les utiliser :

1. Google Page Speed Insights pour l'optimisation des performances
2. Chrome Dev Tools → Lighthouse (audit réseau et performances réseau)
3. webpagetest.org (à utiliser également)
4. Google Search Console

S'il n'est pas si important d'identifier le LCP, l'outil Chrome DevTools, et autre, pourra vous aider à améliorer le LCP comme en trouvant les CSS non utilisés et l'analyse des données utilisateur.

Comment améliorer le LCP ( Largest Contentful Paint)

Le LCP est principalement affecté par trois facteurs de classement Google :

1. Temps de réponse du serveur lent et cache inefficace
2. JavaScript et CSS bloquant le rendu (identifiés par PageSpeed Insights Google)
3. Temps de chargement des ressources et Core Web vitals

Pour optimiser les Core Web Vitals, il faudra se préoccuper principalement de ces dix facteurs :

1. Optimiser son serveur
2. Utiliser un CDN (Content Delivery Network) pour réduire le temps de chargement
3. Mise en cache côté serveur & assets
4. Éliminer les ressources qui bloquent le rendu pour les utilisateurs (CSS & JS)
5. Minifier le code CSS
6. Supprimer le CSS & JS non utilisés
7. Précharger le CSS / JS / … pour une meilleure expérience utilisateur
8. Optimiser et compresser les optimiser le SEO des images
9. Également compresser les fichiers texte et autres éléments
10. Envisager de limiter les ressources en fonction de la qualité du réseau

Note : Globalement, en optimisant la tester la vitesse d'un site de votre site web vous améliorez naturellement la métrique LCP.

Améliorer le temps de réponse du serveur (TTFB)

Plus il faut de temps à un navigateur pour recevoir les informations du serveur, plus le LCP sera élevé. Un temps de réponse plus rapide du serveur améliore directement chaque métrique de chargement de page, y compris le LCP.

Utilisez la métrique Time to First Byte (TTFB) pour mesurer les temps de réponse de votre serveur WordPress. Vous pouvez l'obtenir avec tous les outils cités précédemment. Pour optimiser votre TTFB WordPress, vous pouvez :

1. Optimiser votre serveur
2. Utiliser un CDN (Content Delivery Network) pour réduire le temps de chargement
3. Mettre en cache
4. Optimiser la vitesse perçue des pages
5. Optimiser la vitesse du frameworks

1. Optimiser votre serveur

Si votre serveur est rapide, le TTFB sera plus rapide, c’est pourquoi il est important d’utiliser un hébergement qui ne fait pas des prix à 20€/an.

Note : Ou sinon vous utilisez Kinsta et c'est tout 😉

2. Utiliser un CDN (Content Delivery Network) pour les éléments statiques

Un CDN permet quant à lui d'utiliser le centre de données le plus proche de l'utilisateur pour afficher la page WordPress. Si votre hébergement WordPress dispose d'un centre de données en Turquie et que vous n'avez même pas de CDN, votre TTFB risque d'être catastrophique.

3. Mettre en cache

Si votre code HTML est statique et n'a pas besoin de changer, la mise en cache peut l'empêcher d'être recréé inutilement et économiser les ressources serveur. En stockant une copie du code HTML généré, la mise en cache côté serveur peut réduire le TTFB, améliorer les Core Web Vitals et minimiser l'utilisation des ressources.

Selon vos technologies, il existe de nombreuses manières d’appliquer la mise en cache du serveur. Je parle bien côté serveur, si vous utilisez WordPress, Wp rocket ce n’est pas côté serveur, même si cela pourrait sans doute améliorer les performances.

4. Optimiser la vitesse perçue des pages

Utilisez rel=”preconnect” pour informer le navigateur que votre page a l’intention d’établir une connexion dès que possible. <link rel=”preconnect” href=”https://exemple.com” />

Le code : <link rel=”dns-prefetch” href=”https://example.com” /> fonctionne également, mais utilisez-le surtout comme solution de secours pour les navigateurs qui ne prennent pas en charge preconnect.

À intégrer dans le <head> </head> de votre site WordPress.

5. Optimiser la vitesse du framework et ses ressources

Si vous utilisez un frameworks comme React, au lieu de servir une page statique immédiatement, il doit créer les éléments de la page Web de manière dynamique. À la place d'envoyer un fichier HTML qui est déjà construit lorsque le navigateur le demande, les frameworks doivent exécuter une logique pour construire les éléments de la page.

Cependant pas d'inquiétude, les frameworks les plus populaires ont toujours des conseils et aides sur les performances vous permettant ainsi de réduire ces problèmes de largest contentful paint.

Éliminer les ressources qui bloquent le rendu (CSS & JS)

Les scripts (JavaScript) et les feuilles de style (CSS) sont tous deux des ressources de blocage de rendu qui influent sur le LCP (FCP en réalité). Effectivement, tant que le CSS et le JS ne sont pas téléchargés et analysés par le navigateur, la page ne s’affichera pas. Les fichiers CSS et JS sont donc par définition du code qui bloque le rendu.

Généralement, l’idéal est de reporter les codes JavaScript et CSS qui ne sont pas vitaux pour afficher le contenu de la page et ainsi accélérer le chargement du contenu principal. Par exemple, les scripts et feuilles de style pour afficher vos cookies pourraient être mis dans une liste à charger à la fin et non au début. Il existe également des moyens pour tout simplement réduire les lignes de codes pour améliorer la vitesse de lecture du navigateur.

Voici les différents points que nous allons aborder :

1. Minifier le code CSS & JavaScript pour réduire les temps de chargement
2. Supprimer le CSS non utilisé & JavaScript pour le réseau
3. Précharger le CSS critique & JavaScript

Minifier le code CSS

Pour la lisibilité d'un développeur, les fichiers CSS abondent de caractères qui peuvent être inutiles pour la lecture d'un navigateur. Il peut s'agir d'espacements ou de commentaires. Réduire ces caractères inutiles pour tous vos fichiers CSS peut impacter assez significativement la vitesse du LCP puisque le navigateur pourra charger les ressources plus rapidement.

Si vous utilisez un bundler, incluez un plugin pour réduire les fichiers CSS et optimiser le temps de charger les ressources :

• Pour webpack et l'optimisation réseau : optimise-css-assets-webpack-plugin
• Pour Gulp : gulp-clean-css
• Pour Rollup : rollup-plugin-css-porter

Il existe également des outils disponibles en ligne, il suffit d'ajouter son code CSS ou JavaScript pour qu'ils soient retournés sans caractères inutiles pour les navigateurs :

Pour optimiser le chargement des ressources : minifier.org (JS & CSS)

Pour WordPress, je conseille uniquement le plugin :

Wp Rocket (JS & CSS)

Sinon, n'hésitez pas à chercher sur Google l'outil adéquat pour votre technologie afin de minifier le code CSS et JavaScript pour vos utilisateurs.

Supprimer le CSS & JS non utilisés

Rendez-vous dans Chrome DevTools, après avoir inspecté la page, ajoutez dans la barre d'outils le mode couverture pour analyser le rendu des éléments en suivant ce chemin : Autres outils > Couverture :

Une fois activé, rendez-vous dans couverture en bas de page pour optimiser vos Core Web Vitals, puis cliquez sur l'icône de rafraîchissement :

Une fois fait, vous verrez apparaître tous les fichiers avec du code inutilisé impactant pagespeed et l'expérience navigateur utilisateurs, vous pouvez sélectionner le type pour passer du JS au CSS :

Il ne vous reste plus qu'à cliquer sur une URL pour voir le code inutilisé au sein d'un fichier (comme dans PageSpeed Insights Google), en rouge apparaîtra le code inutile, en bleu le code qui est utilisé :

N'est ce pas merveilleux ? En revanche, si vous n'êtes pas développeur, pour éviter tout risque sur la mesure de performance, je vous conseille vivement de vous faire aider. Éliminer le CSS inutilisé ou le JavaScript sans savoir ce que l'on fait, pourrait très certainement éliminer votre site au passage et compromettre toute mesure de performance future.

Un moyen astucieux d'optimisation des performances est de récupérer tous les codes CSS inutilisés et de les mettre dans un autre fichier CSS à desservir en toute fin afin que les styles importants soient pris en compte en amont. Vous êtes ainsi sûr de ne pas tout détruire tout en limitant le blocage du rendu. D'ailleurs, voyons ensemble juste après comment donner la priorité aux fichiers CSS (ou JS) les plus importants pour optimiser les performances et le rendu.

Note : WP Rocket dispose d'une optimisation automatique pour pallier le problème du CSS inutilisé, qui peut affecter l'expérience utilisateur, actuellement en bêta (disponible uniquement pour les sites WordPress).

Précharger le CSS / JS / …

Les ressources qui sont utilisées dans un fichier CSS ou JavaScript peuvent être récupérées plus tard si elles ne sont pas importantes pour le rendu de la page, comme le serait un script analytics, des CSS inutilisés, et à peu près ce que vous voulez.
Si vous savez qu’une ressource particulière doit être priorisée, utilisez pour la récupérer en priorité. De nombreux types de ressources peuvent être préchargés, mais vous devez d’abord vous concentrer sur le préchargement des ressources critiques (CSS & JS), telles que les polices (sinon patatras le CLS d’ailleurs), les images et vidéos et SEO.
Voici différentes techniques pour précharger le CSS, le JS, et tout ce dont vous avez besoin :

À la main :

<link rel=”preload” as=”script” href=”script.js” />
<link rel=”preload” as=”style” href=”style.css” />
<link rel=”preload” as=”image” href=”img.png” />
<link rel=”preload” as=”video” href=”vid.webm” type=”video/webm” />
<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin />

Pour les images responsive, il est également possible d’utiliser ce code :

<link
rel=”preload”
as=”image”
href=”wolf.jpg”
imagesrcset=”wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w”
imagesizes=”50vw”
/>

Utiliser du JavaScript pour charger le CSS dynamiquement avec LoadCSS.js → lien du GitHub // code : loadCSS( “chemin/vers/monstylesheet.css” );

Vous pouvez utiliser le plugin Wp Rocket si vous utilisez WordPress (ne peut pas être combiné avec la méthode « supprimer le CSS inutilisé »).

Limiter le temps de chargement des ressources lentes

L’élément définir par LCP est par définition une ressource lente puisque les ressources lentes sont les grandes images, une image de fond en background (pas une couleur ou un gradient), les vidéos et les « éléments de niveau blocs ».

Nous allons donc voir dans cette partie comment optimiser vos images, vidéos et textes.

Optimiser et compresser ses images

Pour la plupart des sites, les images sont le plus grand élément visible lorsque la page a fini de se charger. Même si ce n’est pas votre cas, il s’agit d’une optimisation de vitesse cruciale pour un site web alors je vous invite à reproduire cette partie sur le vôtre.

• Compressez vos images (avec par exemple compressor.io accessible en ligne ou utilisez le plugin Imagify pour Wordpress)
• Convertissez vos images dans des formats faits pour le web comme le .WebP (imagify inclut la conversion de vos images en format WebP)
• Utilisez le format .svg si possible
• Redimensionnez vos images. N’utilisez pas des images trop grandes si cela n’apporte aucun intérêt. Si vous téléversez une image en 3000×3000 mais que vous l’affichez en 800×800 en CSS, téléversez-la directement en 800×800,
• Utilisez un CDN
• Différez le chargement de vos images : LazyLoad

Compresser les fichiers texte

Les algorithmes de compression, comme Gzip et Brotli réduisent considérablement la taille des fichiers texte (HTML, CSS, JavaScript) lors de leur transfert entre le serveur et le navigateur. Gzip est pris en charge par tous les navigateurs et Brotli fournit des résultats de compression meilleurs mais moins compatibles.

La compression de vos ressources minimisera leur taille de livraison, améliorant ainsi les temps de chargement et par conséquent le LCP.

En amont, vérifiez si votre serveur compresse déjà les fichiers automatiquement (ou vous permet de les configurer assez facilement). Comme le ferait par exemple l’hébergement Kinsta, de nombreux CDN et des reverse proxy.

Vous pouvez facilement le vérifier en utilisant des outils de test de vitesse comme webpagetest.org

Envisager de limiter les ressources en fonction de la qualité du réseau

Lors du chargement des ressources constituent le contenu principal d’une page (LCP), il est efficace d’utiliser des ressources différentes en fonction de la qualité du réseau. Cela peut être fait à l’aide des API Network Information , Device Memory et HardwareConcurrency .

Si vous disposez de ressources volumineuses critiques pour le rendu initial, vous pouvez utiliser différentes variantes de la même ressource en fonction de la connexion ou de l’appareil de l’utilisateur.

Par exemple, vous pouvez afficher une image au lieu d’une vidéo pour toute vitesse de connexion inférieure à la 4G :

if (navigator.connection && navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === ‘4g’) {
// Load video
} else {
// Load image
}
}

Mettre en cache les assets

Nous avons vu précédemment pour améliorer le TTFB la mise en cache côté serveur. Mais nous pouvons aussi citer la mise en cache des polices, le CSS, le JavaScript, les images, les fichiers ou encore Google Analytics pour analyser les données en mode hors ligne. Pour cela vous pouvez utiliser Workbox par exemple.

Quelques optimisations supplémentaires (bonus)

Toujours un LCP médiocre ? Voici quelques optimisations supplémentaires qui pourraient vous aider :

1. Mettez à niveau votre serveur et/ou votre service d’hébergement. Veillez à ce que les vitesses de téléchargement restent rapides, même en cas de forte utilisation. Effectivement les techniques d’optimisation de vitesse sont complètement inutiles si votre hébergement n’est pas capable de faire face à des pics d’activité importante.
2. Activez la compression du serveur et HTTP/2+.
3. Supprimez les extensions inutilisées si vous utilisez un CMS, ou envisagez d’en désactiver puis supprimez-les.
4. Définissez les hachages Expires, Last-Modified et/ou ETag appropriés dans l’en-tête HTTP, afin que les fichiers ne soient pas redemandés.
5. Réduisez au minimum les requêtes tierces et envisagez de déplacer les ressources vers votre domaine principal pour éviter les consultations DNS superflues.
6. Réduisez au minimum le nombre et la taille des fichiers demandés, surtout en haut de votre HTML.
7. Veillez à ne charger que les polices web nécessaires.Vous pouvez également envisager de passer à des polices web-safe afin d’obtenir des performances optimales.
8. Minifiez vos fichiers JavaScript et CSS c’est bien, mais vous pouvez également les concaténer (combiner).
9. Évitez les instructions CSS @import : elles bloquent le rendu et chargent les styles en série.
10. Évitez le codage Base64 – il augmente la taille des fichiers et nécessite un traitement supplémentaire.
11. Tenez compte des CSS critiques en ligne. Incorporez les feuilles de style CSS essentielles dans un bloc en haut de la page, puis chargez les autres feuilles de style de manière asynchrone.
12. Utilisez des modules JavaScript asynchrones, différés ou ES pour exécuter des scripts ultérieurement. Exécutez les processus JavaScript à long terme dans un worker de service.

Si vous avez des suggestions n’hésitez pas à les ajouter en commentaire ! Si vous avez des questions, rien ne vous empêche de les poser ou bien contactez-moi directement.