Poursuivant notre série explorant ce que Core Web Vitals signifie pour le développement WordPress, nous examinerons LCP (Largest Contentful Paint). Nous examinerons de quoi il s’agit et comment nous pouvons améliorer la vitesse de chargement des pages en optimisant les éléments les plus volumineux que votre site peut contenir.
Qu’est ce que le Largest Contentful Paint ?
LCP est le temps nécessaire pour afficher l’élément le plus volumineux, généralement une image, mais peut s’étendre au texte, aux vidéos et aux SVG. Google Lighthouse , l’outil d’analyse de mesure et de performance de site de Google utilisé pour mesurer tous les principaux éléments vitaux du Web, indique que les sites doivent essayer de maintenir le LCP en dessous de 2,5 secondes.
LCP ne considère généralement que le contenu directement dans la fenêtre des utilisateurs, ce qui signifie que le contenu sous la ligne de flottaison ne sera pas considéré car LCP concerne davantage l’expérience de chargement perçue par les utilisateurs.
Comment améliorer votre LCP ?
Il existe quatre causes courantes qui peuvent affecter le LCP:
- Réponse lente du serveur web
- Actifs bloquant le rendu comme JavaScript et CSS
- Temps de chargement des ressources lents
- Rendu côté client
Réponse lente du serveur
Une réponse plus rapide du serveur peut améliorer LCP en fournissant des pages et des ressources de site en cache. Établissez rapidement des connexions tierces en utilisant des techniques telles que «préconnecter» et, si nécessaire, dirigez les utilisateurs vers des réseaux de diffusion de contenu à proximité , accélérez donc cela.
Rendu bloquant JavaScript et CSS
Chaque fois que des fichiers CSS ou JavaScript sont ajoutés au site, le navigateur suspendra le chargement du reste de la page jusqu’à ce que ces fichiers aient fini de se charger. Le navigateur continuera ensuite à se charger jusqu’à ce qu’il atteigne un autre fichier JavaScript ou CSS et le cycle se répète jusqu’à ce que la page soit complètement chargée. Ceux-ci sont connus sous le nom d’actifs bloquant le rendu, qui retardent à la fois le FCP (First Contentful Paint) et par conséquent le LCP.
Une solution simple serait de différer les fichiers JavaScript et CSS non critiques qui permettront au contenu de continuer à se charger et d’accélérer ainsi le contenu initial vu par l’utilisateur. D’autres techniques peuvent être utilisées comme la minification, la suppression du code inutile ou inutilisé, le CSS critique en ligne et plus encore.
Temps de chargement des ressources lents
Les principales ressources qui peuvent affecter les temps de chargement sont généralement des images, ce sont les principaux responsables du LCP lent, surtout si elles apparaissent au-dessus du pli.
Il existe de nombreuses façons différentes de contribuer à alléger le chargement de ces ressources.
Optimiser et compresser les images
L’utilisation de plugins WordPress comme Smush peut aider à la compression. La compression peut également être effectuée pendant le développement des actifs du site avec des packages npm tels que imagemin .
Nouveaux formats d’image
Utilisez des formats d’image plus récents comme WebP, ceux-ci affichent une qualité d’image similaire mais à une taille de fichier beaucoup plus faible. Sachez que certains de ces nouveaux formats ne sont pas pris en charge dans les anciens navigateurs.
Images réactives
Utilisez des images responsives, par exemple, vous pouvez avoir une image de héros de 1400 pixels de large pour les utilisateurs de votre ordinateur de bureau, mais vous ne voudriez pas la servir à vos utilisateurs de mobiles, car le chargement prendrait beaucoup plus de temps. En utilisant l’ élément <picture> , vous pouvez servir différentes tailles d’image pour différents points d’arrêt d’écran.
Rendu côté client
Des bibliothèques comme React et Vue ont rendu la création d’applications Web d’une seule page incroyablement facile. Cependant, s’ils ne sont pas optimisés correctement, cela peut entraîner des temps de chargement plus longs. Assurez-vous d’utiliser la minification, de différer les scripts inutilisés et de supprimer les polyfills inutiles.
Réduire la dépendance de JavaScript peut en fait être extrêmement bénéfique en ce qui concerne LCP car c’est l’un des atouts les plus lourds en termes de chargement. L’utilisation d’outils tels que GatsbyJS et Netlify vous permet de créer des sites à l’aide de frameworks JavaScript tels que React, mais de les convertir ensuite en pages HTML statiques extrêmement optimisées.
Conclusion
Lorsqu’il s’agit de performances LCP, il n’y a pas de solution unique pour tous. Cela dépend vraiment des critères de l’utilisateur, de la façon dont le site est conçu ou du contenu précieux que vous souhaitez montrer à vos utilisateurs.
La plupart des solutions ci-dessus devraient réduire considérablement le score LCP de votre site et offrir une meilleure expérience utilisateur dans son ensemble.
