La vitesse de la page est importante pour une bonne expérience utilisateur.
Les indicateurs Core Web Vitals de Google peut aussi impact sur les classements de recherche organique.
Cet article passera en revue certaines approches nouvelles et moins connues pour rendre votre site Web plus rapide.
Quelle est la plus grande peinture de contenu ?
La plus grande peinture de contenu (LCP) mesure le temps nécessaire aux visiteurs pour voir le contenu principal après l'ouverture d'une page Web.
LCP est l'une des trois mesures Core Web Vitals utilisées pour évaluer les performances d'une page Web. Les autres mesures Core Web Vitals sont :
Google définit des seuils pour chaque mesure que les sites Web doivent atteindre pour obtenir un meilleur classement.
Voici quelques techniques que vous pouvez utiliser pour améliorer vos scores LCP.
1. Ajoutez des règles de spéculation à votre site Web
Nous espérons que bon nombre de vos visiteurs naviguent sur votre site Web pour découvrir tout ce que votre entreprise a à offrir.
Les règles de la spéculation Il s'agit d'une nouvelle fonctionnalité du navigateur qui permet d'optimiser facilement ces pages vues ultérieurement. Elles permettent aux sites Web de charger de manière proactive d'autres pages sur votre site Web avant que le visiteur ne les ouvre.
Par exemple, après qu'un visiteur a lu un article de blog, il peut consulter votre page d'accueil ou accéder à une page d'inscription. les navigations peuvent être instantanées si ces pages sont pré-rendues à l'aide de règles de spéculation. Cela signifie que votre score LCP sera inférieur à 100 millisecondes.
Il est facile d'ajouter des règles de spéculation à votre site Web. Ajoutez simplement une balise de script comme celle-ci à votre site Web :
2. Optimisez le LCP avec des données utilisateur réelles
Il existe de nombreux outils de test des performances des sites Web, notamment Informations sur PageSpeed et Test de vitesse de site Web gratuit de DebugBear.
Ces outils exécutent ce qu'on appelle un test en laboratoire : la page est ouverte dans un environnement de test contrôlé où une mesure de performance est effectuée.
Cependant, parfois, le les valeurs LCP basées sur le laboratoire ne correspondent pas aux expériences réelles des utilisateursCela peut se produire pour plusieurs raisons, notamment :
- Les tests en laboratoire peuvent atteindre un cache alors que la plupart des utilisateurs ont besoin que les données soient régénérées.
- De nombreux utilisateurs réels sont connectés et subissent des chargements de pages plus lents.
- Les utilisateurs réels ont des vitesses de réseau et d'appareils différentes de celles de l'environnement de laboratoire.
- Les visiteurs ont une taille d'appareil différente de celle du test en laboratoire.
Les visiteurs réels d'un site Web ont également des expériences diverses. Les optimisations qui fonctionnent bien pour un segment de visiteurs peuvent ne pas fonctionner correctement pour un autre.
Ici un surveillance réelle des utilisateurs L'outil (RUM) peut vous aider à mieux comprendre ce qui se passe sur votre site Web et quelles optimisations auront le plus grand impact.
Par exemple, les données RUM peuvent vous indiquer quels éléments de page sont responsables des étapes de rendu LCP. Cela varie selon les visiteurs, et savoir quels éléments LCP doivent être optimisés constitue la base d'un bon score LCP.
Lorsque Google indique la vitesse réelle de la page utilisateur il regarde le 75e percentile valeur. Par exemple, si votre score LCP est de 3 secondes, cela signifie que 75 % de vos utilisateurs ont attendu moins de 3 secondes pour accéder au contenu de la page principale et que 25 % ont attendu plus longtemps.
Il ne s'agit toutefois que d'une valeur globale. Certains visiteurs peuvent attendre 5 secondes ou plus, et ces personnes risquent de quitter le site.
La surveillance des utilisateurs réels peut vous donner une analyse plus détaillée de la façon dont les différents visiteurs perçoivent votre site Web. Par exemple, en affichant un histogramme pour chacune des mesures Core Web Vitals. Vous pouvez également examiner les expériences spécifiques des visiteurs pour les optimiser.
Nous avons déjà vu que les appareils des visiteurs ont un impact important sur le score LCP de votre site Web.
En fonction de la taille de l'écran de chaque visiteur du site Web, un contenu différent sera visible au-dessus du pli et les images seront affichées à différentes tailles.
L’image LCP peut varier selon les visiteurs, même sur la même page.
Les tests en laboratoire utilisent toujours la même taille d'écran, mais les données réelles des utilisateurs capturent la variété des appareils utilisés pour accéder à votre site Web.
Les données de surveillance des utilisateurs réels peuvent donc vous montrer exactement quelles images de votre site Web se chargent le plus souvent lentement et doivent être optimisées.
3. Identifier les sous-parties lentes du LCP
Quatre choses doivent se produire pour afficher une image LCP sur votre site Web. Sous-parties du LCP sont:
- Temps jusqu'au premier octet:À quelle vitesse le serveur répond-il à la demande initiale de document ?
- Retard de chargement des ressources:À quelle vitesse le navigateur découvre-t-il l’image LCP ?
- Temps de chargement des ressources:Combien de temps faut-il pour télécharger l'image LCP ?
- Délai de rendu:L'image LCP s'affiche-t-elle immédiatement après le chargement ou y a-t-il un délai ?
De nombreux outils de vitesse de page sont basés sur Test gratuit Lighthouse de Googley compris PageSpeed Insights. Ici, dans le Diagnostic section, vous pouvez trouver des détails sur le Le plus grand élément de peinture de contenu. Sous l'aperçu de l'élément, Lighthouse montre la répartition des sous-parties LCP.
Selon le composant LCP qui contribue le plus à votre score global, différentes optimisations seront judicieuses pour votre site Web.
Par exemple, si le temps de chargement est élevé, cela suggère que vous avez une grande image sur votre site Web qui prend beaucoup de temps à télécharger. Dans ce cas, redimensionnez l'image ou utilisez un format d'image moderne comme WebP serait une optimisation prometteuse.
Cependant, Google a récemment publié un article sur idées fausses courantes sur la façon d'optimiser la métrique LCP qui a trouvé:
- Le temps de chargement n’est souvent pas un facteur important.
- D’autres sous-parties comme TTFB et Load Delay jouent un rôle plus important dans l’amélioration du LCP.
Assurez-vous que votre serveur répond rapidement lorsque le client demande le code HTML. Dans le code HTML, référencez directement l'image LCP pour garantir qu'il n'y a aucun délai entre le chargement du code HTML et la découverte de l'image.
4. Précharger et hiérarchiser l'image LCP
Lorsque le navigateur charge votre site Web, le code HTML sera référencer un grand nombre de ressources supplémentaires (par exemple, feuilles de style, scripts, images). Le navigateur doit attribuer une priorité à chacune de ces requêtes.
Les images sont généralement considérées comme de faible priorité, car elles n'empêchent pas l'affichage d'autres contenus sur le site Web. Cependant, l'image principale responsable du LCP doit être chargée tôt.
UN demande de visualisation en cascade peut faire apparaître ces problèmes. Dans cet exemple, nous voyons que l'image LCP ne commence à se charger que tardivement et a initialement une faible priorité. Ensuite, lorsque le navigateur se rend compte que l'image est dans la fenêtre d'affichage, la priorité passe à élevée.
Le score LCP peut être optimisé avec le attribut fetchpriorityCet attribut HTML indique au navigateur si une ressource donnée est importante et peut simplement être ajouté à une balise img comme ceci :
Avec cet attribut en place, les navigateurs peuvent commencer à charger l’image dès que possible et donner la priorité à son téléchargement par rapport aux autres ressources de la page.
Si l'image n'est pas référencée directement en haut du document HTML, un indice de ressource de préchargement peut également être utilisé pour démarrer le chargement de l'image plus tôt.
De cette façon, lorsque l'image est ajoutée à la page, l'image s'affiche immédiatement plutôt que de commencer à se charger à ce moment-là.
5. Surveillez la vitesse de la page en permanence
Exécuter des tests ponctuels sur votre site Web est un excellent moyen de commencer à optimiser vos performances.
Mais ces optimisations fonctionnent-elles réellement pour les utilisateurs réels ?
Et que se passe-t-il s'il y a un changement sans rapport qui dégrade les performances ?
Dans ce cas, vous avez besoin d'un outil de surveillance de site Web comme DebugBear.
Un outil de surveillance des performances teste en continu votre site Web et ceux de vos concurrents. Vous obtiendrez :
- Rapports détaillés avec des suggestions pour améliorer la vitesse de votre page.
- Soyez alerté si les performances de votre site Web se dégradent.
DebugBear inclut trois types de données :
- Tests programmés en laboratoire.
- Google Données CrUX (ce qui impacte le référencement).
- Surveillance réelle des utilisateurs.
Avoir cet aperçu de votre site Web fournit la base dont votre équipe a besoin pour réussir l'évaluation Core Web Vitals de Google.
