Correction de l'erreur LCP «Plus que» dans Core Web Vitals sur GSC

Google a publié un nouveau rapport dans la rechercheconsole nommée Core Web Vitals. Ces rapports de vitesse remplacés et vont être considérés comme un facteur de classement en 2021. Les Core Web Vitals seront considérés comme un facteur de classement avec Page Speed, HTTPS. Convivialité mobile et autres facteurs sur la page.

Le Core Web Vital considère les éléments UX et UI sur la page pour connaître la moyenne d'une page pour trois métriques de base,

1. LCP: La plus grande peinture riche en contenu
2. FID: Premier délai d'entrée
3. CLS: Décalage cumulatif de la disposition

Il n'y a pas de correctif codé particulier à résoudreles problèmes, mais vous pouvez optimiser le site Web pour résoudre les erreurs. Je vais énumérer ici quelques-unes des pratiques qui peuvent vous aider à résoudre le plus grand contenu de peinture (LCP) »Plus que' pour vos pages Web.

↑ Qu'est-ce que LCP?

Les rapports de mesure LCP (Largest Contentful Paint)le temps de rendu du plus grand élément de contenu visible dans la fenêtre. 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.

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

Les types d'éléments considérés pour la plus grande peinture de contenu sont;

• <img> éléments
• <image> éléments à l'intérieur d'un <svg> élément
• <vidéo> éléments
• Un élément avec une image d'arrière-plan chargée via le URL () une fonction
• Éléments de niveau bloc contenant des nœuds de texte ou d'autres enfants d'éléments de texte de niveau 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 etfaible taux de latence. Assurez-vous d'optimiser les serveurs, utilisez des CDN tiers gratuits tels que Cloudflare, jsDelivr, Statically pour fournir rapidement des ressources statiques. Si vous travaillez sur WordPress, il existe un certain nombre de plugins qui peuvent vous aider à faire le travail à votre place.

Utilisez des images compressées avec des formats d'image nouvelle générationcomme JPEG XR, JPEG 2000 ou WebP. Ces formats modernes aident à accélérer le chargement de l'image 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'image tel que WP-Photon pour réduire la bande passante du serveur et augmenter la vitesse du site.

Vous pouvez utiliser les services de cache pour charger un HTML statiquepage qui ne change pas à chaque demande, la mise en cache peut l’empêcher d’être recréée inutilement. Cache Plugins stockera une copie du HTML généré sur votre serveur et lorsqu'une page est demandée, le serveur libère la charge 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 quiexécute les techniciens de service en arrière-plan du navigateur et peut intercepter les demandes du serveur. Ils prennent un cache HTML complet de la page et servent d'abord le cache des pages HTML, ce qui peut réduire considérablement le temps de chargement.

D'autres choses importantes à considérer sont d'optimiser le site Web pour un bon LCP est

• Éliminez le JavaScript et le CSS bloquant le rendu
• Différer les CSS non critiques
• Réduire 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 accélérer le chargement de vos pages pour une meilleure UX sur le Site Web.Dev officiel.

Conclusion: Avec l'introduction de Web Vitals de base dans GSCet il est considéré comme un facteur de classement. LCP est une métrique très importante à corriger car elle prend note du temps nécessaire au chargement du plus grand élément dans la fenêtre de l'appareil. J'ai fourni quelques correctifs et solutions provisoires pour optimiser le site pour un faible LCP.