Pour vous aider à optimiser votre site web pour les Core Web Vitals de Google, nous avons identifié plusieurs points faibles potentiels et la manière de les corriger afin d'améliorer vos scores. Pour plus d'informations sur ce que mesure chaque Core Web Vitals, comment le mesurer et les scores idéaux, consultez l'Introduction aux Core Web Vitals.
Widgets personnalisés et lourds
Les widgets personnalisés et les widgets lourds peuvent être lents car ils chargent le contenu à partir d'un service tiers, ce qui nécessite l'appel d'une API externe pour récupérer puis charger le contenu.
Note :
Tous les widgets personnalisés ne sont pas lents à charger. Cela dépend de la façon dont ils ont été conçus.
Widgets lourds : Carte, Flux Twitter, J’aime Facebook, Flux/Page Facebook, Commentaires Facebook, Audio (Soundcloud, Mixtape), Vidéo (Personnalisée, Youtube, Vimeo), Galerie photo, Diaporama d’images, Animations Lottie, Multi-emplacement, Google Calendrier et Disqus.
Comment réparer
Pour améliorer vos scores Core Web Vitals :
- Supprimez les widgets personnalisés/lourds de la partie supérieure de votre page et déplacez-les vers le bas. Cela les empêchera d'impacter négativement les performances de chargement (CLS et FID) en chargeant puis en repoussant le contenu situé plus bas sur la page.
- Évitez d'ajouter plusieurs widgets personnalisés/lourds sur la même page. Chaque widget a un temps de chargement différent, ce qui peut réduire le LCP.
- Si un widget personnalisé est à l'origine d'une erreur FID, vous pouvez demander à votre développeur d'améliorer la façon dont le contenu est rendu et récupéré en utilisant des techniques telles que le chargement asynchrone, la récupération des données hors du thread principal, etc.
Polices de caractères
Les polices web peuvent ralentir votre site web car le navigateur doit télécharger et charger l'intégralité de la famille de polices pour chaque combinaison de police et de graisse. Les polices sont automatiquement téléchargées et intégrées au code HTML, jusqu'à 50 Ko. Cela accélère l'affichage des polices personnalisées par votre navigateur et contribue à prévenir les problèmes de chargement. Cependant, cela n'est pas toujours suffisant ; c'est pourquoi nous recommandons d'utiliser au maximum deux familles de polices différentes et seulement quelques graisses de chacune.
Comment réparer
Pour améliorer vos scores Web Vitals :
- Si vous utilisez plus de deux polices, supprimez-les des éléments ou widgets concernés de votre site web. Utilisez les polices globales pour appliquer que les polices et graisses nécessaires. Ainsi, seules les polices indispensables à un affichage correct du texte seront téléchargées.
Gestionnaire de balises Google
Google Tag Manager peut télécharger des bibliothèques et du code supplémentaires dont vous n'avez pas besoin, ce qui peut réduire le LCP.
Comment réparer
Pour améliorer vos scores Web Vitals :
"- Si possible, supprimez Google Tag Manager. Si vous n'utilisez que une ou deux technologies de suivi, son implémentation peut ne pas être pertinente.
- Si vous utilisez Google Tag Manager, suivez notre guide de suivi . Cela permettra de garantir que le code de suivi se charge correctement et n'entraîne pas de ralentissement du site.
- N'insérez pas Google Tag Manager dans l'en-tête du site web. Cela l'oblige à se charger en premier, avant d'autres éléments importants du site.
Images et vidéos d'arrière-plan
Les images et les vidéos d'arrière-plan représentent généralement la plus grande partie des ressources téléchargées par les navigateurs sur votre site. Un trop grand nombre d'images, une image volumineuse visible sans défilement, ou une vidéo peuvent entraîner un ralentissement du LCP (Layered Page Charge) et une augmentation du CLS (Client Page Scale), car le navigateur doit télécharger ces éléments avant de pouvoir les afficher. Ce problème survient généralement avec des images ou vidéos d'arrière-plan volumineuses, des diaporamas, des images d'arrière-plan superposées à une autre image, ou encore plusieurs images volumineuses alignées en haut de la page.
Note:
Par « grande image », nous entendons une image qui occupe la majeure partie de la largeur de la page .
Comment réparer
Pour améliorer vos scores Web Vitals :
- N'utilisez qu'une seule image au-dessus de la ligne de flottaison.
- Si vous avez besoin de plusieurs images au-dessus de la ligne de flottaison, réduisez la taille de l'image à une icône ou une vignette.
- Déplacez les vidéos d'arrière-plan et les diaporamas plus bas sur la page. Si vous avez besoin d'un diaporama, limitez-le à trois images ou moins.