Pour vous aider à optimiser votre site web pour les Core Web Vitals de Google, nous avons identifié plusieurs points faibles potentiels et comment les corriger pour améliorer vos scores Core Web Vitals. Pour plus d'informations sur les mesures de chaque Core Web Vitals, leur mode de mesure et les scores idéaux, consultez la section « Introduction aux Core Web Vitals » .
Widgets personnalisés et lourds
Les widgets personnalisés et lourds peuvent être lents car ils chargent du 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é créés.
Widgets lourds : carte, flux Twitter, mentions J'aime sur Facebook, flux/page Facebook, commentaires Facebook, audio (Soundcloud, Mixtape), vidéo (personnalisée, YouTube, Vimeo), galerie de photos, curseur 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 évite qu'ils n'impactent négativement CLS et FID en chargeant puis en déplaçant le contenu situé en dessous, plus bas dans la page.
Évitez d'ajouter plusieurs widgets personnalisés/lourds sur la même page. Chaque widget a des temps de chargement différents, ce qui peut réduire le LCP.
Si un widget personnalisé est à l'origine d'un FID, vous pouvez demander à votre développeur d'améliorer la manière dont le contenu s'affiche et est récupéré en utilisant des techniques telles que le chargement asynchrone, la récupération de données à partir du thread principal, etc.
Polices
Les polices web peuvent ralentir votre site web, car le navigateur doit télécharger et charger la famille de polices complète pour chaque combinaison de polices et de graisses. Les polices sont automatiquement téléchargées et intégrées au code HTML, jusqu'à 50 Ko. Cela accélère le rendu des polices personnalisées par votre navigateur et contribue à prévenir les CLS. 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 avez appliqué plus de deux polices, supprimez-les de certains éléments ou widgets de votre site web. Utilisez les polices globales pour appliquer uniquement les polices et les graisses nécessaires. Une fois cette opération terminée, seules les polices nécessaires à l'affichage correct du texte sont 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 diminuer le LCP.
Comment réparer
Pour améliorer vos scores Web Vitals :
Si possible, supprimez Google Tag Manager. Si vous ne disposez que d'une ou deux technologies de suivi, l'implémentation de Google Tag Manager n'est peut-être pas utile.
Si vous implémentez Google Tag Manager, suivez notre guide de suivi Google Tag Manager. Cela garantit que le code de suivi se charge correctement et ne ralentit pas le site.
Ne placez pas Google Tag Manager dans l'en-tête du site web. Il se chargerait alors en premier, avant les autres éléments importants du site.
Images et vidéos d'arrière-plan
Les images et les vidéos d'arrière-plan sont généralement les ressources les plus téléchargées par les navigateurs sur votre site. Un nombre excessif d'images, une grande image au-dessus de la ligne de flottaison ou une vidéo, peut entraîner un retard du LCP et une augmentation du CLS, car le navigateur doit télécharger les éléments avant leur affichage. Cela se produit généralement avec des images/vidéos d'arrière-plan volumineuses, des diaporamas, des images d'arrière-plan superposées, ou avec plusieurs grandes images 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 :
Utilisez une seule image au-dessus du pli.
Si vous avez besoin de plusieurs images au-dessus du pli, réduisez la taille de l'image à une icône ou une miniature.
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 maximum.