Techniques liées au CSS pour optimiser les métriques Web Vitals
La façon dont vous écrivez vos styles et créez des mises en page peut avoir un impact majeur sur les métriques Web principales. Cela est particulièrement vrai pour le Cumulative Layout Shift (CLS) et le Largest Contentful Paint (LCP).
Cet article présente les techniques liées au CSS pour optimiser les métriques Web Vitals. Ces optimisations sont réparties en fonction des différents aspects d'une page: mise en page, images, polices, animations et chargement. Nous verrons comment améliorer un exemple de page:
Mise en page
Insérer du contenu dans le DOM
Si vous insérez du contenu sur une page après que le contenu environnant a déjà été chargé, tout le reste de la page est repoussé vers le bas. Cela provoque des déplacements de mise en page.
Les avis sur les cookies, en particulier ceux placés en haut de la page, sont un exemple courant de ce problème. Les annonces et les éléments intégrés sont d'autres éléments de page qui provoquent souvent ce type de décalage de mise en page lors de leur chargement.
Identification
L'audit "Éviter les changements de mise en page importants" de Lighthouse identifie les éléments de page qui ont changé de position. Pour cette démonstration, les résultats se présentent comme suit:
La notification concernant les cookies n'est pas listée dans ces résultats, car elle ne change pas lors du chargement. Il provoque plutôt le décalage des éléments situés en dessous sur la page (c'est-à-dire div.hero et article). Pour en savoir plus sur l'identification et la correction des décalages de mise en page, consultez la section Déboguer les décalages de mise en page.
Corriger
Placez le message d'avertissement concernant les cookies en bas de la page à l'aide d'un positionnement absolu ou fixe.
Avant :
.banner {
position: sticky;
top: 0;
}
Après :
.banner {
position: fixed;
bottom: 0;
}
Une autre façon de corriger ce décalage de mise en page consiste à réserver de l'espace pour l'avis sur les cookies en haut de l'écran. Cette approche est tout aussi efficace. Pour en savoir plus, consultez les bonnes pratiques concernant les avis sur les cookies.
Images
Images et Largest Contentful Paint (LCP)
Les images sont généralement l'élément "Largest Contentful Paint" (LCP) d'une page. D'autres éléments de page pouvant être l'élément LCP incluent les blocs de texte et les images de l'affiche de la vidéo. Le moment où l'élément LCP se charge détermine le LCP.
Il est important de noter que l'élément LCP d'une page peut varier d'un chargement de page à l'autre en fonction du contenu visible par l'utilisateur lorsque la page est affichée pour la première fois. Par exemple, dans cette démonstration, l'arrière-plan de l'avis sur les cookies, l'image de l'élément principal et le texte de l'article sont quelques-uns des éléments LCP potentiels.
Dans l'exemple de site, l'image de fond de l'avis sur les cookies est en fait une image de grande taille. Pour améliorer le LCP, vous pouvez plutôt peindre le dégradé en CSS au lieu de charger une image pour créer l'effet.
Corriger
Modifiez le CSS .banner pour utiliser un dégradé CSS plutôt qu'une image:
Avant :
background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
Après :
background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
Images et décalages de mise en page
Les navigateurs ne peuvent déterminer la taille d'une image qu'une fois qu'elle est chargée. Si le chargement de l'image se produit après l'affichage de la page, mais qu'aucun espace n'a été réservé pour l'image, un décalage de mise en page se produit lorsque l'image apparaît. Dans la démonstration, l'image hero provoque un décalage de mise en page lors du chargement.
Identification
Pour identifier les images sans width ni height explicites, utilisez l'audit "Les éléments d'image ont une largeur et une hauteur explicites" de Lighthouse.
Dans cet exemple, les attributs width et height sont manquants pour l'image principale et l'image de l'article.
Corriger
Définissez les attributs width et height sur ces images pour éviter les décalages de mise en page.
Avant :
<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
Après :
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
Polices
Les polices peuvent retarder l'affichage du texte et entraîner des décalages de mise en page. Il est donc important de fournir les polices rapidement.
Rendu du texte différé
Par défaut, un navigateur n'affiche pas immédiatement un élément textuel si ses polices Web associées ne sont pas encore chargées. Cela permet d'éviter un "flash de texte non stylisé" (FOUT). Dans de nombreux cas, cela retarde le First Contentful Paint (FCP). Dans certains cas, cela retarde le Largest Contentful Paint (LCP).
Décalages de mise en page
Bien que le changement de police soit excellent pour afficher rapidement du contenu à l'utilisateur, il peut entraîner des décalages de mise en page. Ces décalages de mise en page se produisent lorsqu'une police Web et sa police de remplacement occupent différentes quantités d'espace sur la page. L'utilisation de polices aux proportions similaires minimisera la taille de ces décalages de mise en page.
Identification
Pour afficher les polices chargées sur une page spécifique, ouvrez l'onglet Network (Réseau) dans les outils pour les développeurs et filtrez par Font (Police). Les polices peuvent être de gros fichiers. Il est donc généralement préférable d'utiliser moins de polices pour améliorer les performances.
Pour connaître le temps nécessaire pour que la police soit demandée, cliquez sur l'onglet Timing (Temps). Plus tôt une police est demandée, plus tôt elle peut être chargée et utilisée.
Pour afficher la chaîne de requêtes d'une police, cliquez sur l'onglet Initiator (Initiateur). En règle générale, plus la chaîne de requêtes est courte, plus la police peut être demandée rapidement.
Corriger
Cette démonstration utilise l'API Google Fonts. Google Fonts vous permet de charger des polices via des balises <link> ou une instruction @import. L'extrait de code <link> inclut une indication de ressource preconnect. Cela devrait permettre de diffuser les feuilles de style plus rapidement que la version @import.
De manière très générale, vous pouvez considérer les indices de ressources comme un moyen d'indiquer au navigateur qu'il devra configurer une connexion ou télécharger une ressource particulière. Par conséquent, le navigateur priorisera ces actions. Lorsque vous utilisez des indices de ressources, gardez à l'esprit que la priorisation d'une action particulière prive d'autres actions les ressources du navigateur. Par conséquent, les indices de ressources doivent être utilisés de manière réfléchie et non pour tout. Pour en savoir plus, consultez Établir des connexions réseau à l'avance pour améliorer la vitesse de chargement perçue des pages.
Supprimez l'instruction @import suivante de votre feuille de style:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
Ajoutez les balises <link> suivantes au <head> du document:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
Ces balises de lien indiquent au navigateur d'établir une connexion précoce aux origines utilisées par Google Fonts et de charger la feuille de style contenant la déclaration de police pour Montserrat et Roboto. Ces balises <link> doivent être placées le plus tôt possible dans le <head>.
Animations
Les animations affectent principalement les Web Vitals lorsqu'elles provoquent des changements de mise en page. Vous devez éviter d'utiliser deux types d'animations : les animations qui déclenchent la mise en page et les effets "comme des animations" qui déplacent les éléments de la page. En règle générale, ces animations peuvent être remplacées par des équivalents plus performants à l'aide de propriétés CSS telles que transform, opacity et filter. Pour en savoir plus, consultez Créer des animations CSS hautes performances.
Identification
L'audit "Éviter les animations non composées" de Lighthouse peut vous aider à identifier les animations peu performantes.
Corriger
Modifiez la séquence d'animation slideIn pour qu'elle utilise transform: translateX() plutôt que de faire une transition de la propriété margin-left.
Avant :
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
Après :
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
CSS critique
Les feuilles de style bloquent le rendu. Cela signifie que lorsque le navigateur rencontre une feuille de style, il arrête de télécharger d'autres ressources jusqu'à ce qu'il ait téléchargé et analysé la feuille de style. Cela peut retarder le LCP. Pour améliorer les performances, envisagez de supprimer le CSS inutilisé, d'intégrer le CSS critique et de différer le CSS non critique.
Conclusion
Bien que des améliorations soient encore possibles (par exemple, en utilisant la compression des images pour diffuser des images plus rapidement), ces modifications ont considérablement amélioré les métriques Web Vitals de ce site. S'il s'agissait d'un site réel, l'étape suivante consisterait à collecter des données sur les performances auprès d'utilisateurs réels pour évaluer s'il respecte les seuils Web Vitals pour la plupart des utilisateurs. Pour en savoir plus sur les Web Vitals, consultez En savoir plus sur les Web Vitals.