CSS pour les signaux Web

Techniques CSS permettant d'optimiser les signaux Web

Katie Hempenius

Una Kravets

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.

Remarque : Lighthouse n'analyse les performances d'une page que jusqu'à l'événement "Chargement de page". Il arrive que les bannières, les annonces et les autres widgets de cookies ne se chargent qu'après le chargement de la page. Ces décalages de mise en page affectent toujours les utilisateurs, même s'ils ne sont pas signalés par Lighthouse.

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.

Remarque : La notification relative aux cookies est l'un des nombreux éléments de page qui déclenchent des décalages de mise en page lors de son chargement. Pour nous aider à examiner de plus près ces éléments de page, aucune notification relative aux cookies n'apparaîtra dans les étapes de démonstration ultérieures.

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.

Remarque : Le phénomène des images provoquant des décalages de mise en page est plus flagrant lorsque le chargement des images est lent, par exemple lorsque la connexion est lente ou que le chargement d'une image dont la taille de fichier est particulièrement importante.

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">

L'image se charge désormais sans provoquer de décalage de mise en page.

Remarque : Pour charger des images, vous pouvez également utiliser les attributs srcset et sizes en plus de spécifier les attributs width et height. Cela présente l'avantage supplémentaire en termes de performances, car vous pouvez diffuser des images de différentes tailles sur différents appareils. Pour en savoir plus, consultez Diffuser des images responsives.

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).

Remarque : Par défaut, les navigateurs Chromium et Firefox bloquent l'affichage du texte pendant trois secondes maximum si la police Web associée n'a pas été chargée. Safari bloque l'affichage du texte indéfiniment. La période de blocage commence lorsque le navigateur demande une police Web. Si la police n'est toujours pas chargée à la fin de la période de blocage, le navigateur affiche le texte à l'aide d'une police de remplacement et la remplace par la police Web dès qu'elle est disponible.

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.

Dans cet exemple, le changement de police a entraîné un décalage de cinq pixels vers le haut des éléments de la 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>.

Remarque : Pour charger uniquement un sous-ensemble d'une police à partir de Google Fonts, ajoutez le paramètre d'API ?text=. Par exemple, ?text=ABC ne charge que les caractères nécessaires pour afficher "ABC". C'est un bon moyen de réduire la taille du fichier d'une police.

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.

Attention : L'audit Lighthouse "Éviter les animations non composées" n'identifie que les animations CSS non performantes. Les animations JavaScript (par exemple, l'utilisation de setInterval() pour "animer" un élément) sont néfastes pour les performances, mais ne seront pas signalées par cet audit.

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.