Corriger l'erreur LCP 'Plus de' dans les Core Web Vitals sur GSC

Google a publié un nouveau rapport dans la console de recherche nommé Core Web Vitals. Ceux-ci ont remplacé les rapports de vitesse et seront considérés comme un facteur de classement en 2021. Les Core Web Vitals seront considérés comme un facteur de classement aux côtés de la vitesse de la page, HTTPS, de la convivialité mobile et d’autres facteurs sur la page.

Le Core Web Vital prend en compte les éléments UX et UI sur la page pour déterminer la moyenne d’une page pour trois métriques clés,

1. LCP : Largest Contentful Paint
2. FID : First Input Delay
3. CLS : Cumulative Layout Shift

Il n’y a pas de solution codée unique pour résoudre les problèmes, mais vous pouvez optimiser le site Web pour résoudre les erreurs. Ici, je vais lister certaines des pratiques qui peuvent vous aider à résoudre le problème de Largest Contentful Paint (LCP) ‘ Plus de’ pour vos pages Web.

Qu’est-ce que LCP ?

La métrique Largest Contentful Paint (LCP) rapporte le temps de rendu du plus grand élément de contenu visible dans le viewport. En termes simples, c’est le temps nécessaire pour qu’un élément majeur se charge sur l’écran visible après le début du chargement de la page.

Pour offrir une bonne expérience utilisateur, les sites doivent s’efforcer d’avoir le Largest Contentful Paint se produire dans les 2,5 secondes suivant le début du chargement de la page.

Quels éléments sont considérés pour LCP ?

Les types d’éléments considérés pour le Largest Contentful Paint sont ;

• éléments
• éléments à l’intérieur d’un élément
• éléments
• Un élément avec une image de fond chargée via la fonction url()
• Éléments de niveau bloc contenant des nœuds de texte ou d’autres éléments de texte en ligne.

Quelles sont les causes d’un LCP élevé ?

• Temps de réponse du serveur lents
• JavaScript et CSS bloquant le rendu
• Temps de chargement des ressources lents
• Rendu côté client

Comment optimiser le site Web pour corriger un LCP élevé ?

Utilisez un bon hébergement avec un bon temps de réponse et un faible taux de latence. Assurez-vous d’optimiser les serveurs, utilisez des CDN tiers gratuits comme Cloudflare, jsDelivr, Statically pour livrer rapidement des actifs statiques. Si vous travaillez sur WordPress, il existe un certain nombre de plugins qui peuvent vous aider à faire le travail.

Utilisez des images compressées avec des formats d’image de nouvelle génération comme JPEG XR, JPEG 2000 ou WebP. Ces formats modernes aident à accélérer le chargement des images de 50 %. Il existe quelques plugins pour WordPress qui vous aident automatiquement à compresser et à convertir les images à la volée. Utilisez également un CDN d’images comme WP-Photon pour réduire la bande passante du serveur et augmenter la vitesse du site.

Vous pouvez utiliser des services de cache pour charger une page HTML statique qui ne change pas à chaque demande, le cache peut empêcher qu’elle soit recréée inutilement. Les plugins de cache stockeront une copie du HTML généré sur votre serveur et lorsqu’une page est demandée, le serveur libère le chargement du cache, ce qui peut réduire le temps jusqu’au premier octet (TTFB) et minimiser l’utilisation des ressources.

Vous pouvez également utiliser des services comme Cloudflare qui exécutent des workers de service en arrière-plan du navigateur et peuvent intercepter les demandes du serveur. Ils prennent un cache HTML complet de la page et servent les pages HTML en priorité cache, ce qui peut réduire considérablement le temps de chargement.

D’autres éléments importants à considérer pour optimiser le site Web pour un bon LCP sont :

• Éliminer le JavaScript et le CSS bloquant le rendu
• Différer le CSS non critique
• Minifier les ressources
• Précharger les ressources importantes

Vous pouvez trouver un guide plus détaillé sur la façon d’optimiser un site Web pour réduire le LCP et faire charger vos pages plus rapidement pour une meilleure expérience utilisateur sur le site officiel Web.Dev.

Conclusion : Avec l’introduction des core web vitals dans GSC et leur prise en compte comme facteur de classement. Le LCP est une métrique très importante à corriger car il prend en compte le temps nécessaire pour que le plus grand élément se charge dans le viewport de l’appareil. J’ai fourni quelques solutions provisoires et des solutions pour optimiser le site pour un LCP faible.

Si vous avez des réflexions sur Corriger l’erreur LCP ‘Plus de’ dans les Core Web Vitals sur GSC, n’hésitez pas à laisser un commentaire ci-dessous. De plus, veuillez vous abonner à notre chaîne YouTube DigitBin pour des tutoriels vidéo. Cheers !