LinkedIn Link to LinkedIn Twitter Link to Twitter

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

0 commentaires

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) :

Le critère LCP pour Layout Contentful Paint des Core Web Vitals

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 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 pour vous indiquer les données.

Les 4 meilleurs outils pour mesurer le LCP

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

  1. Google Page Speed Insights
  2. Chrome Dev Tools → Lighthouse
  3. webpagetest.org
  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 bien d’autres choses.

Audit du LCP avec Google Page Speed Insights

Comment améliorer le LCP ( Largest Contentful Paint)

Le LCP est principalement affecté par trois facteurs :

  1. Temps de réponse du serveur lent
  2. JavaScript et CSS bloquant le rendu
  3. Temps de chargement des ressources

Pour l’optimiser, il faudra se préoccuper principalement de ces dix facteurs :

  1. Optimiser son serveur
  2. Utiliser un CDN (Content Delivery Network)
  3. Mise en cache côté serveur & assets
  4. Éliminer les ressources qui bloquent le rendu (CSS & JS)
  5. Minifier le code CSS
  6. Supprimer le CSS & JS non utilisés
  7. Précharger le CSS / JS / ...
  8. Optimiser et compresser les images
  9. Compresser les fichiers texte
  10. Envisager de limiter les ressources en fonction de la qualité du réseau

Note : Globalement, en optimisant la vitesse 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. Vous pouvez l’obtenir avec tous les outils cités précédemment. Pour optimiser votre TTFB vous pouvez :

  1. Optimiser votre serveur
  2. Utiliser un CDN (Content Delivery Network)
  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)

Un CDN permet quant à lui d’utiliser le centre de données le plus proche de l’utilisateur pour afficher la page. Si votre hébergement 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. En stockant une copie du code HTML généré, la mise en cache côté serveur peut réduire le TTFB 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>.

5. Optimiser la vitesse du frameworks

Si vous utilisez un frameworks comme React, au lieu de servir une page statique immédiatement, il doit créer 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 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 pallier ce problème.

É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
  2. Supprimer le CSS non utilisé & JavaScript
  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 les lira plus rapidement.

Si vous utilisez un bundler, incluez un plugin pour réduire les fichiers CSS :

  • Pour webpack :
  • Pour Gulp :
  • Pour Rollup :

Processus de minification avec un plugin dédié aux bundler

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 WordPress, je conseille uniquement le plugin :

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

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 en suivant ce chemin : Autres outils > Couverture :

Supprimer le code inutilisés (CSS&JS) d'une page avec le rapport couverture de Chrome

Une fois activé, rendez-vous dans couverture en bas de page, puis cliquez sur l’icône de rafraîchissement :

Rafraîchir le rapport couverture de Chrome Dev Tools

Une fois fait, vous verrez apparaître tous les fichiers avec du code inutilisé, vous pouvez sélectionner le type pour passer du JS au CSS :

Analyser le code inutilisés CSS et JS

Il ne vous reste plus qu’à cliquer sur une URL pour voir le code inutilisé au sein d’un fichier, en rouge apparaîtra le code inutile, en bleu le code qui est utilisé :

Détecter les lignes de code inutile d'une page

N’est ce pas merveilleux ? En revanche, si vous n’êtes pas développeur, pour éviter tout risque, 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.

Un moyen astucieux 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 le rendu.

Note : WP Rocket dispose d’une optimisation automatique pour pallier le problème du CSS inutilisé, 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.
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 // 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 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 3000x3000 mais que vous l’affichez en 800x800 en CSS, téléversez-la directement en 800x800,
  • 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

Vérifier si une page est compressé avec Gzip via 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.

L'hébergement WordPress pour les sites ambitieux

Vos concurrents utilisent Kinsta. Ne les laissez pas vous devancer.

Découvrez

Vous avez besoin d'aide ?

N'hésitez pas ! Nous sommes experts en création de site et en référencement naturel.

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *