Optimiser la diffusion des ressources CSS

Cette règle se déclenche lorsque les analyses PageSpeed Insights indiquent qu'une page contient des feuilles de style externes qui bloquent l'affichage et retardent donc l'apparition du contenu à l'écran.

Présentation

Les navigateurs sont bloqués par les feuilles de style CSS externes avant d'afficher le contenu à l'écran. Cela augmente la latence du réseau et le temps nécessaire à l'affichage du contenu à l'écran.

Recommandations

Si les ressources CSS externes sont peu volumineuses, vous pouvez les insérer directement dans le document HTML. Cela s'appelle une intégration. Incorporer des ressources CSS peu volumineuses de cette façon permet au navigateur de poursuivre l'affichage de la page. Sachez que si votre fichier CSS est volumineux, l'intégration complète du code CSS peut faire apparaître un avertissement dans PageSpeed Insights via la section Afficher en priorité le contenu visible, vous indiquant que la partie au-dessus de la ligne de flottaison de votre page est trop importante. Si votre fichier CSS est volumineux, vous devez identifier et intégrer les ressources CSS nécessaires à l'affichage du contenu au-dessus de la ligne de flottaison, et retarder le chargement des styles restants.

Exemple d'incorporation d'un fichier CSS de petite taille

Si le document HTML ressemble à ceci :
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

Et que la ressource small.css est la suivante :

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

Vous pouvez alors incorporer le code CSS essentiel comme ceci :

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

Le code small.css d'origine est chargé une fois la page affichée. L'ordre d'application des règles CSS est maintenu en injectant tous les éléments <style> et <link> dans le document à l'aide du code JavaScript.

N'intégrez pas les URI de données volumineuses

Faites attention lorsque vous incorporez des URI de données dans des fichiers CSS. Si le fait d'utiliser certains URI de données peu volumineuses dans votre code CSS peut être pertinent, l'incorporation d'URI de données volumineuses peut augmenter la taille de votre contenu CSS au-dessus de la ligne de flottaison et donc ralentir le temps d'affichage de la page.

N'intégrez pas les attributs CSS

Nous recommandons d'éviter au maximum d'intégrer des attributs CSS à des éléments HTML (par exemple, &lt p style=...&gt), car cela provoque souvent une duplication de code inutile. Par ailleurs, l'intégration de code CSS à des éléments HTML est bloquée par défaut avec le programme Content Security Policy (CSP).