etc. Mais soyons un peu plus précis. Comme le montre le graphique ci-dessus, les facteurs à l’origine d’un LCP médiocre appartiennent souvent à quatre groupes principaux : Un temps de réponse lent du serveur a un impact négatif sur toutes les métriques de vitesse de chargement et est, par conséquent, une cause définitive d’un LCP médiocre.
La lenteur des temps de réponse du serveur est souvent le résultat de problèmes avec votre infrastructure back-end, de requêtes de base de données non optimisées ou de réponses API qui prennent beaucoup de temps à résoudre, le tout se produisant en arrière-plan de votre site. La première étape pour améliorer cela consiste simplement à vous assurer que vous hébergez votre site Web sur un bon serveur. Bien que la personnalisation de votre site Web soit un excellent moyen de l’aider à se démarquer, l’ajout de JavaScript et de CSS pour embellir le thème de votre site et son contenu aura malheureusement également un impact sur le temps de chargement de votre site Web.
C’est parfois une meilleure idée de s’en tenir à une conception de site moins «lourde» et de réduire le nombre de plugins dont vous disposez, en particulier au-dessus du pli, pour le bien de votre LCP. Le rendu côté client (c’est-à-dire le rendu des pages Web directement dans le navigateur avec JavaScript) est une méthode de développement Web très populaire. Cependant, cela implique beaucoup de va-et-vient pour le navigateur pour collecter et charger le JavaScript avant de rendre le contenu principal et plus d’attendre votre utilisateur.
Si vous comptez également sur le rendu côté client, c’est peut-être quelque chose que vous voudrez peut-être examiner lorsque vous travaillez sur votre LCP. Les ressources volumineuses ou le contenu visuellement impactant sur une page prennent forcément beaucoup de temps à se charger – c’est juste une réalité. Si vous avez beaucoup d’images, de GIF et de zones de texte de haute qualité non optimisés à rendre au-dessus du pli, votre LCP sera affecté.
Il existe quelques correctifs pour un LCP médiocre – dont certains sont plus faciles que d’autres. Nous allons vous présenter quelques-unes des plus simples ici.
Les fichiers CSS sont des ressources qui bloquent le rendu. Les ressources doivent être chargées et traitées avant que le serveur puisse rendre la page entière. Cependant, vous pouvez optimiser les fichiers CSS en supprimant manuellement le code inutilisé, en minimisant les fichiers CSS en cours d’utilisation ou en optimisant vos images d’arrière-plan CSS avec des requêtes multimédias.
Cela semble délicat, mais il existe de nombreuses ressources et tutoriels sur les métriques de vitesse centrées sur l’utilisateur qui peuvent vous aider ! Vous pouvez suivre quelques étapes lors de l’optimisation de vos images. Les principaux sont les suivants:
- Compressez vos images
- Pensez à convertir vos images dans des formats plus efficaces
- Assurez-vous que vos images ont les bonnes dimensions
/li>
Et cela vaut toujours la peine de réfléchir : ai-je vraiment besoin de cette image? Ajoute-t-il quelque chose à ma page? Sinon, il vaudrait peut-être la peine de s’en débarrasser. Les polices sont souvent présentées dans de gros fichiers.
Par conséquent, le contenu du texte dans une police inhabituelle n’apparaîtra pas sur une page tant que le fichier de police ne sera pas chargé. Il faudra plus de temps aux utilisateurs pour voir les informations essentielles sur une page Web ! Cela ne fonctionnera tout simplement pas. Pour éviter cela, vous souhaiterez optimiser vos polices Web.
En réduisant la taille de votre WebFont, en utilisant l’affichage des polices ou en mettant à jour le style de votre page pour utiliser votre police personnalisée, le chargement de la page devrait s’accélérer. Vous écrivez votre JavaScript, obtenez toutes les informations dont vous avez besoin et vous êtes prêt à partir, n’est-ce pas? Pas assez. Si votre JavaScript est resté en place depuis un certain temps, cela peut valoir la peine de le vérifier, car cela pourrait vous coûter la vitesse de chargement de la page.
Voici quelques mesures à prendre pour optimiser votre JavaScript (compte tenu des dernières métriques LCP) :
- suppression du code inutilisé
- vérifier que votre code est à jour et compatible avec les navigateurs modernes
- installation de JavaScript moderne et réduction des charges utiles grâce à la division de code