Afin de vous aider à optimiser votre site Web pour les signaux Web essentiels de Google, nous avons identifié certains domaines pouvant s'avérer problématiques et allons vous expliquer comment les modifier, de sorte à améliorer vos scores. Pour en savoir plus sur chacun des indicateurs de signaux Web essentiels, comment les mesurer et quels sont les scores recommandés, consultez la page Présentation des signaux Web essentiels.
Widgets volumineux et widgets personnalisés
Les widgets personnalisés de même que les widgets volumineux peuvent être lents, car ils chargent du contenu depuis un service tiers, nécessitant de faire appel à une API externe pour récupérer et charger le contenu.
Certains widgets personnalisés sont dotés d'un chargement plus rapide. Cela dépend de la façon dont ils ont été conçus.
Parmi les widgets volumineux, on retrouve : les cartes, les fils Twitter, les mentions J'aime sur Facebook, les fils d'actualité/pages Facebook, les commentaires sur Facebook, l'audio (Soundcloud, Mixtape), les vidéos (personnalisées, YouTube, Vimeo), les galeries de photos, les carrousels d'images, les animations Lottie, les emplacements multiples, les calendriers Google et Disqus.
Comment régler ce problème ?
Pour améliorer vos scores de signaux Web essentiels :
Supprimez les widgets volumineux et personnalisés de la partie supérieure de votre page et déplacez-les dans la partie inférieure. De cette manière, ils n'affecteront pas le CLS et le FID en chargeant et en déplaçant le contenu vers le bas de la page.
Évitez d'ajouter plusieurs widgets volumineux et personnalisés sur une même page. Les widgets ont des temps de chargement différents, pouvant affecter le LCP.
Lorsqu'un widget personnalisé entraîne un délai FID, vous pouvez demander au développeur d'améliorer la façon dont s'affiche le contenu et dont il est récupéré en employant diverses techniques, comme le chargement asynchrone, la récupération de données hors du fil principal, etc.
e-commerce
Le Store est chargé dynamiquement avec JavaScript. Cela peut affecter le CLS, car le temps de chargement du Store est plus long que celui du reste du contenu sur la page. De ce fait, nous vous conseillons de déplacer le Store dans la partie inférieure de la page, plutôt que dans la partie supérieure.
Comment régler ce problème ?
Pour améliorer vos scores de signaux Web essentiels :
Ajoutez du contenu au-dessus du Store plutôt que de placer ce dernier dans la partie supérieure de la page. Le Store se trouvera ainsi sous la ligne de flottaison.
Concevez vos propres pages de catégorie ou créez-en grâce au widget Galerie de produits. Les images natives et les éléments d'une galerie de photos chargent plus vite que le Store, car ils contiennent moins de contenu et de code à afficher avant d'apparaître sur une page.
Polices
Les polices Web peuvent ralentir votre site Web, car le navigateur doit télécharger et charger toute la famille de polices pour chaque combinaison de police et de poids. Les polices sont automatiquement téléchargées et intégrées au sein du HTML, à hauteur de 50 Ko. Cela vous permet d'accélérer la vitesse à laquelle votre navigateur affiche les polices personnalisées tout en empêchant un décalage de mise en page. Toutefois, cette méthode n'est pas toujours suffisante, c'est pourquoi nous vous conseillons d'utiliser un maximum de deux familles de polices différentes, dont les poids seraient similaires.
Comment régler ce problème ?
Pour améliorer vos scores de signaux Web :
Si vous avez appliqué à vos pages plus de deux polices, supprimez-les de certains éléments ou widgets sur votre site Web. Utilisez des polices standard pour n'appliquer que les polices et poids nécessaires. Ainsi, seules les polices permettant au texte de s'afficher correctement seront téléchargées.
Google Tag Manager
Google Tag Manager peut télécharger des bibliothèques et du code dont vous n'avez pas besoin, pouvant affecter le LCP.
Comment régler ce problème ?
Pour améliorer vos scores de signaux Web :
Si possible, nous vous conseillons de supprimer Google Tag Manager. Si vous n'utilisez qu'une ou deux technologies de suivi, il ne vous sera sans doute pas utile de mettre en œuvre Google Tag Manager.
Si vous mettez en œuvre Google Tag Manager, consultez notre guide dédié à cet outil. De cette façon, vous pourrez garantir que le code de suivi se charge correctement et ne ralentit pas votre site.
Ne placez pas Google Tag Manager en en-tête de votre site Web : l'outil se chargera avant les autres éléments importants du site.
Images et vidéos de fond
En règle générale, les images et vidéos de fond sont les éléments les plus volumineux téléchargés sur votre site par les navigateurs. Lorsque les pages contiennent trop d'images, une image imposante au-dessus de la ligne de flottaison, ou une vidéo, le LCP peut être plus lent et le CLS peut augmenter, car le navigateur doit télécharger les éléments avant qu'ils n'apparaissent sur votre page. Cela se produit généralement lorsque vos pages contiennent des images ou vidéos de fond volumineuses, des diaporamas d'images, des images de fond sur lesquelles se superposent d'autres images, ou avec plusieurs images volumineuses alignées en en-tête de votre page.
Lorsque nous parlons d'« images volumineuses », nous faisons référence aux images qui occupent la majorité de la largeur d'une page.
Comment régler ce problème ?
Pour améliorer vos scores de signaux Web :
Ajoutez une seule image au-dessus de la ligne de flottaison.
Si vous souhaitez ajouter plusieurs images au-dessus de la ligne de flottaison, réduisez la taille de vos images à celle d'une icône ou d'une vignette.
Déplacez les vidéos de fond et les diaporamas plus bas sur la page. Limitez également vos diaporamas à trois images.