Le Largest Contentful Paint (LCP) est une métrique des Core Web Vitals : il mesure le temps nécessaire avant que l’élément le plus grand devienne visible...
Tour d’horizon des fonctions à connaître sur Windows 11 pour être plus efficace et gagner du temps : switcher entre vos fenêtres, gérer vos bureaux...
LinkedIn est de plus en plus important dans la stratégie digitale des marques, notamment en B2B. La solution Iconosquare vous permet d’analyser votre...
Découvrez nos conseils pour fidéliser vos clients en mettant en place certains déclencheurs d’actions. L’article Trigger marketing : 10...
Découvrez une sélection de 11 générateurs d’images pour illustrer vos maquettes en CSS et HTML. L’équivalent d’un Lorem Ipsum pour les images. Utile pour ne...
Le content brick, vous connaissez ? C’est un peu le « post-it 2.0 » pour quiconque envisage de créer son site internet… Il s’agit d’une méthode innovante...
93 % des marques gagnent de nouveaux clients grâce à la vidéo sur les réseaux sociaux. D’ailleurs, 91 % des spécialistes marketing sont satisfaits du...
Votre page Facebook est une « extension » de votre entreprise : véritable outil de communication 2.0, elle doit impérativement être à votre image – à la...
Pourquoi utiliser un plug-in de traduction pour l’adaptation de votre site ? Il semblerait à première vue plus intuitif d’envoyer les textes à traduire...
Les frameworks comme Angular et React sont probablement les bibliothèques Javascript qui captent le plus l’attention dans le monde Javascript. Si ces framework...
Le Largest Contentful Paint (LCP) est une métrique des Core Web Vitals : il mesure le temps nécessaire avant que l’élément le plus grand devienne visible dans le...
Le Largest Contentful Paint (LCP) est une métrique des Core Web Vitals : il mesure le temps nécessaire avant que l’élément le plus grand devienne visible dans le « viewport ». Tant que le LCP n’est pas chargé, vous ne verrez presque rien sur la page. En effet, l’élément LCP se situe toujours au-dessus de la ligne de flottaison, c’est-à-dire en haut de la page en cours de chargement.
Si, en règle générale, le LCP est une image ou un bloc de texte, il peut aussi s’agir d’une vidéo ou d’une animation. L’élément LCP peut également être différent selon qu’on demande une même page sur un smartphone ou sur desktop.
Comme vous vous en doutez, « l’élément le plus grand » est le plus important dans l’expérience utilisateur et pour la vitesse de chargement réelle ou perçue : si l’élément le plus grand de la page ne se charge pas rapidement, l’expérience utilisateur ne sera pas bonne. Combien de temps vous regardez une page presque blanche, en attendant que la page se charge ? Souvent vous allez même quitter le site !
Lors de la navigation sur un site, quelques secondes d’attente en moins peuvent faire une énorme différence, et c’est pourquoi Google a inclus le LCP dans l’une de ces métriques « Core Web Vitals », qui mesurent la qualité de votre expérience utilisateur.
LCP représente 25 % du score global de PageSpeed Insights : en améliorant ses performances, vous améliorerez probablement votre note, et avec celle-ci votre expérience utilisateur, et votre référencement.
En bref, LCP est l’une des mesures de performance les plus importantes à l’heure actuelle.
Les outils de mesure tels que PageSpeed Insights ou Search Console (dans le rapport Core Web Vitals) vous indiqueront le temps nécessaire au chargement du LCP.
Les causes les plus courantes d’un mauvais LCP sont les suivantes :
Un serveur lent aura un effet négatif sur toutes les mesures de vitesse de chargement de votre site Web, et pas seulement sur le LCP.
Même si toutes vos ressources sont optimisées, cela sera inutile tant que vous aurez un serveur peu performant.
Si vous ajoutez de nombreux plugins sur votre site Web, ou si vous avez choisi un thème très élaboré, vous devriez peut-être reconsidérer certains choix : l’ajout de JavaScript et de CSS (en particulier au-dessus de la ligne de flottaison) affecte fortement les temps de chargement.
Chaque fois qu’un navigateur rencontre un script synchrone ou une feuille de style externe, il retarde le rendu final d’une page Web.
Les images, les vidéos et les blocs de texte qui s’affichent au-dessus de la ligne de flottaison ont également un effet direct sur le temps de chargement.
Les éléments de grande taille, tels que le Hero Header (grand bandeau souvent imposant sur lequel figurent textes, boutons…), doivent être optimisés pour réduire les temps de chargement.
Le rendu côté client est populaire auprès de nombreux développeurs Web. Utilisant JavaScript, il permet de rendre les pages web directement dans le navigateur. Cependant, JavaScript a un impact sur le LCP, car le navigateur doit d’abord charger tout le JavaScript critique avant de terminer le rendu.
Voici quelques pistes pour améliorer le temps de chargement de votre LCP.
Le LCP est une mesure du contenu. Il est donc logique que l’une des meilleures façons de l’améliorer soit de commencer par le temps qu’il faut pour récupérer le contenu sur votre serveur.
Si lorsque vous effectuez des analyses de performances, le temps de réponse de votre serveur est mauvais, changez-en !
Un CDN est un réseau de diffusion de contenu qui stocke votre contenu sur des serveurs répartis dans le monde entier : plutôt que d’avoir votre contenu stocké en un seul endroit, lorsqu’un utilisateur demande une page, le contenu est servi à partir du serveur le plus proche de lui.
Ainsi, si votre élément LCP est un gros fichier image, votre visiteur de Madrid ne devra pas attendre que le fichier soit acheminé par câble depuis votre serveur de Strasbourg.
Moins de distance à parcourir = moins de temps à délivrer le contenu.
Si votre CDN utilise des serveurs périphériques, vous pouvez mettre votre contenu en cache afin qu’il ne doive pas être rechargé à chaque fois.
Si votre CDN ne dispose pas de tels serveurs, vous pouvez tout de même mettre votre contenu en cache, en gérant ce dernier directement auprès de votre hébergeur.
Pour rendre cette opération encore plus rapide, vous pouvez utiliser un « service worker » qui servira d’abord le contenu mis en cache. Ainsi, si votre LCP est une image mise en cache, le service worker s’exécutera en arrière-plan du navigateur et pourra intercepter les requêtes du serveur.
Il est ainsi possible de mettre en cache le contenu de la page HTML et de ne mettre à jour le cache que lorsque le contenu a changé, ce qui permet de délivrer le Largest Contentful Paint encore plus rapidement qu’avec un simple CDN.
Lorsqu’un navigateur rend votre contenu, il doit d’abord analyser le balisage HTML pour le transformer. Or, si ce dernier rencontre sur son chemin des feuilles de style externes ou des balises JavaScript synchrones, il interrompra cette tâche pour traiter ces ressources externes.
Les scripts et les feuilles de style sont des ressources qui bloquent le rendu et retardent par conséquent le LCP. Pour éviter que ces ressources ne bloquent le chargement de votre LCP, reportez tout JavaScript et CSS non critique.
En fait, vous pourriez aussi simplement supprimer tout CSS inutilisé sur cette page, ou le déplacer vers une autre feuille de style.
L’objectif de LCP est de faire apparaître le contenu utile à l’écran aussi rapidement que possible. Le temps de chargement des éléments de la page a un effet direct sur le LCP.
Des fichiers plus petits permettent un chargement plus rapide. Chaque octet de gagné améliore le LCP, il faut donc faire la chasse au contenu trop lourd et alléger tout votre site, le plus possible.
L’amélioration du temps de chargement et de rendu des images accélère directement le LCP. Pour ce faire, convertissez les images dans des formats plus légers tels que JPEG ou WebP, ou bien compressez-les.
Tâchez de les servir aux dimensions exactes prévues dans votre code, par exemple avec la balise « srcset ». N’utilisez pas d’image qui ne soient pas réellement utiles.
Même si vous chargez du contenu optimisé et compressé, certains éléments de ces ressources peuvent être enfouis dans un fichier qui prend beaucoup de temps à charger pour le navigateur.
Un fichier texte peut prendre des secondes supplémentaires à charger, juste parce que la police de caractères nécessaire se trouve dans une feuille de style externe.
Si vous avez des ressources qui doivent être priorisées, comme les éléments qui forment votre LCP, tâchez de les récupérer le plus tôt possible. Préchargez les ressources critiques qui forment le premier viewport, telles que les polices, les images au-dessus de la ligne de flottaison, et les chemins critiques CSS ou JavaScript.
Pour la compression de texte, il existe des algorithmes de compression qui réduiront le poids du HTML, du CSS, du JavaScript et des fichiers texte lorsqu’ils sont envoyés entre le serveur et le navigateur.
Le téléchargement de Javascript et des feuilles de style CSS empêche le contenu de votre site d’être visible ou interactif rapidement. Même si le JavaScript est asynchrone et ne bloque pas le rendu, il se « battra » pour obtenir de la bande passante pendant le téléchargement, ce qui réduit les performances mobiles.
Maintenant que nous savons que Google note l’expérience à un contenu visible, stable et interactif, il est important de réduire autant que possible la taille de ces ressources. C’est le travail de « minification », qui consiste à éliminer tous les espaces et saut de ligne superflus de vos fichiers afin d’en réduire le poids.
Attention, cela veut aussi dire que vous devez faire la chasse aux scripts et feuilles de style inutilisés : un contenu « minifié » inutile est un contenu qui ne devrait pas devoir être chargé du tout, optimisé ou non !
Il existe de nombreux outils pour vous aider à compresser vos scripts Javascript et vos feuilles de style. Si vous utilisez WordPress, voici une liste de quelques-uns d’entre eux.
Vous pouvez également trouver un freelance qui se chargera de le faire manuellement.
Vous devriez maintenant comprendre pourquoi Largest Contentful Paint est essentiel pour les performances et l’expérience utilisateur, et comment vous pouvez améliorer le score de votre site internet.
En appliquant toutes ces techniques d’optimisation, vous améliorerez la note LCP de votre site, vos utilisateurs vous remercieront, et votre référencement sera amélioré !
Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.
Nous ne partagerons pas votre adresse e-mail.