Techniques CSS permettant d'optimiser les signaux Web
La manière dont vous écrivez vos styles et créez des mises en page peut avoir un impact majeur sur Core Web Vitals. Cela est particulièrement vrai pour Cumulative Layout Shift (CLS) et Largest Contentful Paint (LCP).
Cet article présente les techniques liées au CSS permettant d'optimiser les signaux Web. Ces optimisations sont réparties selon différents aspects de la page: mise en page, images, polices, animations et chargement. Nous verrons également comment améliorer une page d'exemple:
Mise en page
Insérer du contenu dans le DOM
Si vous insérez du contenu dans une page alors que le contenu environnant est déjà chargé, tous les autres éléments de la page sont poussés vers le bas. Cela entraîne des changements de mise en page.
Les notifications relatives aux cookies, en particulier celles placées en haut de la page, sont un exemple courant de ce problème. Les annonces et les intégrations sont d'autres éléments de page qui provoquent souvent ce type de décalage de mise en page lors du chargement.
Identification
L'audit Lighthouse "Éviter les décalages de mise en page importants" identifie les éléments de page qui ont été décalés. Pour cette démonstration, les résultats se présentent comme suit:
La notification relative aux cookies n'est pas répertoriée dans ces résultats, car celle-ci ne se déplace pas lors de son chargement. En revanche, les éléments situés en dessous sur la page (div.hero
et article
) sont décalés. Pour en savoir plus sur l'identification et la correction des décalages de mise en page, consultez Déboguer les décalages de mise en page.
Solution
Placez la notification relative aux cookies en bas de la page en utilisant 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'affichage des cookies en haut de l'écran. Cette approche est tout aussi efficace. Pour en savoir plus, consultez Bonnes pratiques concernant la notification des cookies.
Images
Images et LCP (Largest Contentful Paint)
Les images sont généralement l'élément LCP (Largest Contentful Paint) d'une page. Les autres éléments de page pouvant servir d'élément LCP incluent les blocs de texte et les images poster de vidéos. L'heure de chargement de l'élément LCP détermine le LCP.
Il est important de noter que l'élément LCP d'une page peut varier d'un chargement à l'autre en fonction du contenu visible par l'utilisateur la première fois que la page est affichée. Par exemple, dans cette démonstration, l'arrière-plan de la notification relative aux cookies, l'image héros et le texte de l'article font partie des éléments LCP potentiels.
Dans l'exemple de site, l'image de fond de la notification relative aux cookies est en réalité une grande image. Pour améliorer le LCP, vous pouvez peindre le dégradé en CSS plutôt que de charger une image pour créer l'effet.
Solution
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 celle-ci chargée. Si le chargement de l'image a lieu après le rendu 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 héros entraîne un décalage de la mise en page lors de son 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, il manque les attributs width
et height
pour l'image héros et l'image de l'article.
Solution
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 provoquer des décalages de mise en page. Par conséquent, il est important de livrer les polices rapidement.
Affichage retardé du texte
Par défaut, un navigateur n'affiche pas immédiatement un élément textuel si les polices Web associées n'ont pas encore été chargées. Cela permet d'éviter un "flash de texte sans style" (FOUT). Dans de nombreux cas, cela retarde le First Contentful Paint (FCP). Dans certaines situations, cela retarde le Largest Contentful Paint (LCP).
Décalages de mise en page
Le changement de police, bien qu'excellent pour afficher rapidement du contenu à l'utilisateur, 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érents espaces sur la page. L'utilisation de polices aux proportions similaires permet de réduire la taille de ces décalages de mise en page.
Identification
Pour voir les polices en cours de chargement sur une page spécifique, ouvrez l'onglet Network (Réseau) dans les outils de développement et filtrez par Font (Police). Les polices peuvent être des fichiers volumineux. Par conséquent, il est 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. Plus vite une police est demandée, plus vite elle peut être chargée et utilisée.
Pour afficher la chaîne de requêtes d'une police, cliquez sur l'onglet Initiateur. En règle générale, plus la chaîne de requête est courte, plus vite la police peut être demandée.
Solution
Cette démonstration utilise l'API Google Fonts. Google Fonts permet de charger des polices via des balises <link>
ou une instruction @import
. L'extrait de code <link>
inclut un indice de ressource preconnect
. Cela devrait accélérer la diffusion de la feuille de style par rapport à l'utilisation de la version @import
.
De manière très générale, vous pouvez considérer les suggestions de ressources comme un moyen d'indiquer au navigateur qu'il devra configurer une connexion ou télécharger une ressource particulière. Le navigateur les traitera en priorité. Lorsque vous utilisez des indications de ressources, n'oubliez pas que le fait de donner la priorité à une action particulière entraîne l'élimination des ressources du navigateur pour d'autres actions. Par conséquent, les indications de ressources doivent être utilisées de manière réfléchie, et non pour tout. Pour en savoir plus, consultez la section Établir des connexions réseau tôt pour améliorer la vitesse 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 à la section <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 anticipée avec les 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 la balise <head>
.
Animations
Les animations affectent principalement Web Vitals lorsqu'elles provoquent des décalages de mise en page. Il existe deux types d'animations que vous devez éviter d'utiliser : les animations qui déclenchent la mise en page et les effets de type animation 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 la section Créer des animations CSS hautes performances.
Identification
L'audit "Éviter les animations non composées" de Lighthouse peut être utile pour identifier les animations non performantes.
Solution
Modifiez la séquence d'animation slideIn
pour utiliser transform: translateX()
au lieu d'effectuer 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 critiques
Les feuilles de style bloquent l'affichage. Cela signifie que le navigateur rencontre une feuille de style et cesse de télécharger d'autres ressources tant que le navigateur n'a pas téléchargé et analysé la feuille de style. Cela peut retarder le LCP. Pour améliorer les performances, envisagez de supprimer les CSS inutilisés, d'intégrer les CSS critiques et de différer les CSS non critiques.
Conclusion
Bien que d'autres améliorations puissent encore être apportées (par exemple, en utilisant la compression d'images pour diffuser les images plus rapidement), ces modifications ont considérablement amélioré les Core Web Vitals de ce site. S'il s'agissait d'un vrai site, l'étape suivante consisterait à recueillir les données de performances auprès d'utilisateurs réels afin d'évaluer s'il atteint les seuils des métriques Web Vitals pour la plupart des utilisateurs. Pour en savoir plus sur les métriques Web Vitals, consultez la page Découvrir les signaux Web.