La vitesse de chargement des pages est plus importante que jamais de nos jours et constitue un facteur clé à prendre en compte pour chaque site Web. Non seulement elle a un impact significatif sur l'expérience utilisateur, mais elle peut également avoir un effet considérable sur l'optimisation des moteurs de recherche (SEO).
En fait, en mai 2021, Google a introduit les Core Web Vitals qui évaluent l'expérience utilisateur à chaque chargement de page. Google appelle ce nouveau signal le « Page Experience Signal » et il aura un effet considérable sur tous les sites Web. Les propriétaires de sites Web feraient bien de se familiariser avec ces Core Web Vitals afin de minimiser tout changement de classement potentiellement négatif.
Le Largest Contentful Paint (LCP) est l'une des trois mesures essentielles qui composent les Core Web Vitals de Google. L'objectif de ce paramètre est de garantir que les utilisateurs qui visitent les sites sont satisfaits de leur expérience. Cela inclut le contenu, mais aussi la présentation et les performances. Si le site met trop de temps à fournir le contenu qu'il propose, il y a plus de chances que le visiteur quitte rapidement la page. Pour Google, cela signifie que l'expérience n'a pas été optimale.
Les Core Web Vitals incluent également le décalage de mise en page cumulatif (CLS) et le délai de première entrée (FID) que nous aborderons brièvement, mais comme il y a beaucoup à couvrir, nous nous concentrerons spécifiquement sur la plus grande peinture de contenu et sur la façon dont le rendu initial des éléments d'un site Web affecte l'expérience globale de la page Web.
Plongeons-nous dedans !
Qu'est-ce que la plus grande peinture de contenu : une explication simple
En termes simples, le temps de chargement maximal mesure le temps nécessaire à un site Web pour montrer à un utilisateur le plus grand élément de l'écran, complet et prêt à être utilisé. L'analyse de cette mesure se termine dès qu'il y a une interaction de l'utilisateur, comme un clic, un défilement ou une saisie utilisateur, comme la saisie de texte dans une zone de saisie.
Google affirme qu'il s'agit d'une mesure plus simple que DOM ou DOMContentLoad qui étaient utilisés dans le passé et que LCP examine la vitesse de chargement perçue des ressources critiques comme les plus grands éléments au niveau du bloc tels qu'une image visible ou un bloc de texte.
Cela signifie que si votre élément de contenu le plus volumineux sur votre site Web, comme une image d'arrière-plan ou une vidéo, prend beaucoup de temps à charger dans le processus de rendu, votre score LCP sera probablement affecté négativement.
Google a déclaré que cette mesure ne prend en compte que le contenu au-dessus du pli, c'est-à-dire tout ce qui apparaît sur la page immédiatement après le chargement sans aucun défilement.
Quel est le score de peinture le plus grand et le plus contenu idéal ?
Puisque nous avons établi que LCP indique une meilleure expérience utilisateur et peut être un facteur de classement SEO important, il est très important de vous assurer que votre site Web a un « bon » score de peinture de contenu le plus élevé.
Bien qu'il soit souvent mentionné qu'une seconde est le temps qu'un utilisateur attend avant de commencer à perdre sa concentration sur une tâche, il s'agit simplement d'une approximation établie par les chercheurs. Aux fins des classements SEO et d'une expérience utilisateur globalement positive du point de vue de Google, un score LCP positif de 2,5 secondes ou moins est considéré comme « bon ».
Si le score de votre site Web se situe entre 2,5 et 4 secondes, il est considéré comme « nécessitant une amélioration », tandis que tout ce qui dépasse 4 secondes est considéré comme « médiocre ».
Il est important de noter que le contenu le plus important représente environ 25 % de votre score de performance Google (également appelé score « vitesse de page » sur mobile et ordinateur de bureau). Pour obtenir un rapport Core Web Vitals positif et réussir l'évaluation, vous devez avoir un « bon » score LCP tout en obtenant un bon score CLS et FID. Vous devrez donc prendre ces mesures en considération.
Quels seuils pour la plus grande peinture de contenu (LCP) devez-vous mesurer ?
Pour vous assurer que vous atteignez votre objectif LCP pour la plupart de vos utilisateurs, vous devez mesurer le 75e percentile de tous les chargements de page sur ce site Web. Cette mesure doit être segmentée sur les appareils mobiles et de bureau pour garantir que vos éléments s'affichent à la même vitesse sur tous les appareils.
En termes simples, mesurer par rapport au 75e percentile signifie que si au moins 75 % des pages vues sur un site Web atteignent le seuil « bon », le site est considéré comme ayant de « bonnes » performances pour cette mesure.
En revanche, si au moins 25 % des pages vues atteignent le seuil « médiocre », le site est considéré comme ayant des performances « médiocres ». Par exemple, un LCP de 2 secondes au 75e percentile est considéré comme « bon », tandis qu'un LCP de 5 secondes au 75e percentile est considéré comme « médiocre ».
Le 75e percentile a été déterminé comme le seuil idéal pour deux raisons. Tout d'abord, l'utilisation de ce percentile doit garantir que la plupart des visites sur un site ou une page bénéficient du niveau de performance cible. Ensuite, au percentile choisi, la valeur ne doit pas être sérieusement affectée par des valeurs aberrantes.
Si vous disposez d'une grande quantité de ressources bloquant le rendu, telles que du JavaScript ou du CSS bloquant le rendu, votre score sera probablement inférieur au seuil idéal et vous devrez prendre le temps d'améliorer votre LCP afin que votre site Web soit conforme aux directives de Google.
Pourquoi mon score de peinture de contenu le plus large est-il si élevé ?
UnsplashLes scores de peinture de contenu les plus élevés mesurent les ressources spécifiques rendues au-dessus de la ligne de flottaison qui sont pertinentes pour l'expérience utilisateur, notamment :
- Images d'arrière-plan avec CSS.
- Éléments de texte, tels que des paragraphes, des titres et des listes.
- Images.
- Balises d'image.
- Miniatures vidéo.
Si des temps de chargement des ressources lents sont détectés sur l'un de ces éléments, Google détermine que cela entraînera une mauvaise expérience utilisateur et que la métrique LCP sera affectée négativement.
Ce sont les éléments clés pris en compte actuellement, mais ils ont été intentionnellement conservés simples lors du lancement des éléments essentiels du Web et des éléments supplémentaires pourront être ajoutés au fur et à mesure que des recherches supplémentaires seront effectuées.
Quels outils peuvent être utilisés pour mesurer le LCP ?
Il existe une variété d'outils de terrain et de laboratoire que vous pouvez utiliser pour mesurer le LCP de votre site Web.
Les outils de terrain permettent de mieux comprendre la manière dont les utilisateurs réels utilisent votre page ou votre site. Ce type de mesure est souvent appelé Real User Monitoring (RUM). Les données de terrain comportent généralement un ensemble de mesures plus limité que les données de laboratoire.
Les outils de laboratoire collectent des données dans un environnement contrôlé et sont davantage axés sur l'offre de résultats reproductibles pour le débogage, avec des informations sur la manière dont un utilisateur potentiel est susceptible de découvrir votre site Web. L'inconvénient est qu'ils ne peuvent pas détecter les goulots d'étranglement qui se produisent dans les expériences utilisateur réelles.
Il existe de nombreux outils de laboratoire et de terrain et chaque outil offre des informations particulièrement précieuses qui peuvent être utilisées pour optimiser votre expérience utilisateur.
Informations sur PageSpeed
PageSpeed Insights (PSI) fournit des rapports détaillés sur les performances mobiles et de bureau d'une page, et fournit également des suggestions simples sur la manière dont cette page pourrait être optimisée. PSI inclut à la fois des données de laboratoire et de terrain dans ses rapports, et prend également en compte les trois mesures cumulatives Core Web Vitals, y compris LCP.
Tout en haut du rapport, PSI affiche un score qui résume les performances globales de la page. Tout score de 90 ou plus est considéré comme bon, tandis qu'un score compris entre 50 et 90 est un score qui pourrait être amélioré. Tout score inférieur à 50 est considéré comme un mauvais résultat.
Ce score est finalement déterminé en exécutant également Lighthouse pour collecter et analyser les données de laboratoire sur la page. Bien que PageSpeed utilise les informations générées par Lighthouse et ajoute ensuite des données du monde réel, Lighthouse vous fournit plus qu'un seul score. Il offre plus de fonctionnalités que la simple mesure des performances de votre site Web.
Phare
Suzuki KenichiLighthouse est un outil de laboratoire automatisé et open source utilisé pour améliorer la qualité des pages Web. Contrairement à PageSpeed Insights, il ne mesure pas uniquement les indicateurs de performance. Il propose également des audits pour l'accessibilité, le référencement, les applications Web progressives, etc.
Alors que Google PageSpeed utilise une combinaison de données de laboratoire et de données réelles, Lighthouse utilise exclusivement des données de laboratoire (dans des conditions cohérentes) pour créer son rapport.
Lighthouse étant désormais intégré à PageSpeed Insights en tant que moteur d'analyse intégré, vous pouvez accéder aux données de Lighthouse en exécutant simplement un rapport PageSpeed. Il peut arriver que vous souhaitiez utiliser Lighthouse plutôt que PageSpeed Insights, par exemple lorsque vous souhaitez exécuter des audits par programmation, évaluer d'autres aspects de vos sites Web en plus des seuls temps de chargement, ou si vous souhaitez intégrer l'API Lighthouse dans vos propres systèmes.
Rapport sur l'expérience utilisateur de Chrome
Le rapport sur l'expérience utilisateur de Chrome est un outil de terrain, car il fournit des mesures d'expérience utilisateur réelles basées sur la façon dont les utilisateurs de Chrome utilisent les destinations populaires sur Internet. Il regroupe les données des utilisateurs qui n'ont pas configuré de phrase de passe de synchronisation, qui ont choisi de synchroniser leur historique de navigation et qui ont activé les rapports de statistiques d'utilisation.
LCP est l'une des mesures mesurées dans le rapport d'expérience utilisateur de Chrome, et les données finales sont mises à disposition dans Les données résultantes sont accessibles via le projet public Google BigQuery, PageSpeed Insights et CrUX Dashboard sur Data Studio.
Rapport sur les éléments essentiels du Web (Search Console)
Le rapport Core Web Vitals est conçu pour vous aider à corriger les mauvaises expériences utilisateur sur votre site en analysant les données de terrain. Il montre les performances de vos pages en fonction de données réelles.
Le rapport est basé sur trois mesures : la plus grande surface de contenu (LCP), le décalage cumulé de mise en page (CLS) et le délai de première entrée (FID). Si la page Web analysée ne dispose pas d'une quantité minimale de données à signaler pour l'une de ces mesures, cette mesure sera exclue du rapport.
Une fois qu'une page dispose d'une quantité de données de base pour ces trois mesures, l'état de la page sera l'état de sa mesure la moins performante.
Outils de développement Chrome
Intégré directement au navigateur Chrome, Chrome DevTools est un ensemble d'outils de développement Web qui peuvent être utilisés pour inspecter l'activité réseau d'une page et examiner de plus près le HTML rendu (DOM), le CSS critique, le CSS non critique, le CSS du chemin critique, le CSS inutilisé, le JavaScript inutilisé, les bundles JavaScript, s'il y a du JavaScript bloquant, et plus encore.
Chrome DevTools peut être utilisé pour résoudre les problèmes de diffusion d'annonces et pour trouver le LCP sur une page donnée. Exécutez simplement un enregistrement des performances et vous trouverez le LCP dans la section Timings. Cliquez sur le marqueur LCP pour mettre en surbrillance l'élément sur la page.
En général, l'enregistrement des performances montre les performances de votre page lorsqu'elle est en cours d'exécution plutôt qu'en cours de chargement. Il affiche le nombre d'images par seconde (FPS) et les éventuels goulots d'étranglement.
Test de page Web
FlickrWebPageTest est un outil d'analyse des performances Web gratuit qui ne fait pas partie de Google. Il utilise de vrais navigateurs pour accéder aux pages Web et collecter des mesures de temps afin de pouvoir évaluer les performances globales d'un site Web.
La fonctionnalité phare de WebPageTest est une mesure appelée SpeedIndex qui se concentre spécifiquement sur la rapidité avec laquelle le contenu au-dessus du pli est affiché.
Extension Chrome Web Vitals
Peut-être l’un des outils les plus simples disponibles pour suivre LCP et les deux autres mesures Web Vitals (CLS et FID0, l’outil Web Vitals Chrome est une extension simple qui s’installe dans votre navigateur Chrome.
Sur chaque page Web que vous chargez, l’outil ajoutera automatiquement une couche qui vous montre les trois mesures.
5 méthodes éprouvées pour accélérer Largest Contentful Paint (LCP)
Le suivi de votre score de contenu le plus élevé est un élément crucial de la routine de maintenance de votre site Web, mais ce n'est qu'en apportant des améliorations que vous obtiendrez de meilleurs résultats. Si votre score LCP n'est pas optimal et doit être amélioré, il existe un certain nombre de choses simples et plus élaborées que vous pouvez faire pour augmenter votre score et créer une meilleure expérience utilisateur.
Optimiser la taille des images
Les images peuvent améliorer considérablement l'expérience d'un utilisateur sur votre site Web, mais elles peuvent également entraîner des problèmes de vitesse majeurs si elles ne sont pas optimisées. Utilisez toujours des images réactives avec la bonne taille. Votre hébergeur vous suggérera des dimensions spécifiques, que ce soit pour la version de bureau ou mobile. L'optimisation des images sur votre site Web permet d'éviter la surcharge et peut améliorer considérablement les scores de peinture de contenu les plus élevés.
Évitez d’utiliser JavaScript pour charger des images
Le chargement différé JavaScript est utile pour les images situées en dessous de la ligne de flottaison, mais il n'est pas recommandé pour les images situées au-dessus de la ligne de flottaison. Le chargement différé signifie qu'au lieu de charger la page Web entière et de la restituer à l'utilisateur en une seule fois, seule la section requise est chargée immédiatement et le contenu restant est retardé jusqu'à ce qu'il soit nécessaire à l'utilisateur.
Comme vous souhaitez que les images au-dessus de la ligne de flottaison se chargent le plus rapidement possible, vous ne devez pas utiliser JavaScript pour charger ces images, car cela peut ralentir le processus. Cela permettra d'éviter tout retard et de maintenir votre évaluation LCP dans la plage recommandée.
Utiliser un réseau de diffusion de contenu d'image (CDN)
Un service de réseau de diffusion de contenu (CDN) peut accélérer le chargement des images en les stockant sur des serveurs stratégiquement positionnés dans le monde entier. En fournissant des images optimisées à partir d'une source plus proche de l'utilisateur qui les demande, une page Web peut être téléchargée jusqu'à 50 % plus rapidement, ce qui peut conduire à un meilleur score de peinture de contenu.
Choisissez un bon service d'hébergement
L'une des solutions les plus simples pour améliorer le temps de chargement d'une page Web consiste à utiliser un service d'hébergement de haute qualité. Trouvez un fournisseur de qualité, jouissant d'une bonne réputation sur le marché et, plus important encore, qui propose l'infrastructure nécessaire pour répondre à la taille et aux besoins de votre site.
En cas de doute, utilisez le modèle PRPL
Google recommande d'utiliser le modèle PRPL qui permet de charger et d'interagir plus rapidement chaque page. Il signifie :
- Poussez (ou préchargez) les ressources les plus importantes en premier. Une requête de récupération déclarative, ou en d'autres termes, un code qui déclare précisément ce qui nous intéresse dans le navigateur, peut être utilisée pour cela.
- Affichez l'itinéraire initial dès que possible. Une façon de procéder consiste à afficher le code HTML initial côté serveur sur la page, en intégrant tout code JS et CSS critique et en éliminant les allers-retours supplémentaires vers le serveur à l'aide d'une fonction asynchrone pour différer le CSS non critique.
- Pré-mettez en cache les ressources restantes et permettez aux utilisateurs de récupérer les ressources directement à partir du cache plutôt qu'à partir du serveur lors de leurs visites ultérieures.
- Chargez en différé d'autres itinéraires et ressources non critiques telles que des images, comme indiqué précédemment.
Le modèle PRPL peut avoir un impact bénéfique sur les temps de réponse du serveur et mérite d’être mis en œuvre.
Comment améliorer la plus grande peinture de contenu sur WordPress ?
UnsplashLa résolution des problèmes LCP dans WordPress implique des processus différents de ceux des sites Web sur d'autres plates-formes. Bien qu'il existe un certain chevauchement, la plupart de ces conseils sur l'amélioration de la peinture de contenu la plus importante sont directement pertinents pour WordPress.
Comment optimiser votre plus grand élément de peinture de contenu, quel qu'il soit
Un objet de peinture de contenu le plus grand peut varier d'une page à l'autre et peut inclure des éléments d'image, de vidéo, d'animation ou de texte.
S'il s'agit d'une image, vous devez vous assurer qu'elle est compressée et préchargée, qu'elle utilise des dimensions appropriées, qu'elle est diffusée à partir d'un CDN et qu'elle est exclue de tout protocole de chargement différé. Vous souhaiterez également idéalement convertir les images en WebP, un format d'image moderne qui offre une compression avec et sans perte supérieure pour les images Web. Les mêmes étapes peuvent être utilisées pour une image d'arrière-plan.
Si votre élément de contenu le plus important est une vidéo ou une animation, il est préférable d'éviter les vidéos auto-hébergées et de les télécharger plutôt sur YouTube. Assurez-vous qu'elles sont compressées avant de les télécharger et évitez autant que possible d'utiliser une vidéo ou une animation dans la section héros de votre page Web, car cela aura très probablement un impact négatif sur votre LCP.
Si un élément HTML au niveau du bloc est votre plus grande peinture de contenu, il est peu probable qu'il affecte négativement votre LCP autant qu'une image, une vidéo ou une animation, car ils ont tendance à conduire à un temps de réponse du serveur plus rapide.
Éliminer les ressources bloquant le rendu
L'élimination des ressources bloquant le rendu peut réduire considérablement les problèmes LCP. Des plugins comme Async JavaScript ou Autoptimize peuvent résoudre la plupart des problèmes car ils ont été conçus spécifiquement pour charger des fichiers de manière asynchrone, minifier, différer et intégrer du CSS et du JavaScript. Supprimez tout CSS ou JavaScript qui n'est pas utilisé, car cela ne fera que ralentir inutilement les choses.
Vous pouvez également essayer d'héberger vos polices localement et de les précharger, et enfin, évitez si possible les plugins lourds comme les créateurs de pages, car ils peuvent ajouter du JavaScript excessif et du CSS inutilisé à votre site Web, ce qui peut également ralentir les temps de réponse du serveur.
Profitez d'un plugin de cache
Sans mise en cache, les visiteurs sont obligés de télécharger une page Web à chaque fois qu'ils visitent un site Web. Heureusement, la plupart des navigateurs modernes mettent automatiquement en cache afin que les utilisateurs qui reviennent puissent accéder plus rapidement au contenu de votre site Web.
L'utilisation d'un plugin de cache WordPress vous permet de profiter de la mise en cache côté serveur, ce qui peut avoir un impact important sur la plus grande quantité de contenu de votre site WordPress. Au lieu d'enregistrer temporairement le contenu côté client avec un cache de navigateur, il est stocké sur le serveur d'un site Web. La mise en cache du serveur signifie que la mise en cache est entièrement gérée et administrée sur le serveur sans impliquer l'utilisateur final ou le navigateur.
Il existe également des plugins de mise en cache basés sur des fichiers que vous pouvez utiliser, mais la mise en cache côté serveur est généralement plus rapide et peut être activée avec des plugins comme SG Optimizer ou LiteSpeed Cache. Des plugins comme WP Rocket vous permettent de profiter de la mise en cache des pages, de la mise en cache des objets et bien plus encore.
Si vous n'utilisez pas actuellement de plugin de cache et que vous rencontrez des temps de réponse du serveur lents sur votre site Web, vous devriez constater une amélioration majeure des temps de chargement des ressources grâce à la mise en œuvre d'un tel plugin.
Conclusion
Bien que le LCP ne soit qu'un facteur parmi tant d'autres en ce qui concerne la vitesse de votre site Web et l'expérience utilisateur globale, ce n'est pas quelque chose que vous devez prendre à la légère. Comme nous l'avons appris, non seulement le temps de chargement des pages Web peut avoir un impact majeur sur l'expérience utilisateur, mais il peut également être un facteur de classement SEO important, qui détermine la manière dont de nombreux sites Web obtiennent du trafic utilisateur en premier lieu.
Utilisez les conseils que nous avons abordés pour suivre, optimiser et maintenir votre LCP et n'oubliez pas qu'il faudra des efforts continus pour le maîtriser et offrir la meilleure expérience possible à vos utilisateurs.
Si vous générez plus de 2 000 $ de revenus publicitaires mensuels, contactez-nous dès aujourd'hui pour en savoir plus sur la manière dont Publift peut vous aider à augmenter vos revenus publicitaires et à optimiser au mieux l'espace publicitaire disponible sur votre site Web ou votre application.