Optimiser la diffusion des ressources CSS

Cette règle se déclenche lorsque PageSpeed Insights détecte qu'une page inclut des feuilles de style externes qui bloquent l'affichage, ce qui retarde le délai du premier affichage.

Présentation

Pour que le navigateur puisse afficher le contenu, il doit traiter toutes les informations de style et de mise en page de la page actuelle. Par conséquent, le navigateur bloque l'affichage jusqu'à ce que les feuilles de style externes soient téléchargées et traitées, ce qui peut nécessiter plusieurs allers-retours et retarder le délai du premier affichage. Pour en savoir plus sur le chemin critique du rendu, consultez Fabrication, mise en page et peinture de l'arborescence de rendu, et consultez la section Code CSS bloquant l'affichage pour savoir comment débloquer l'affichage et améliorer la diffusion CSS.

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. Gardez à l'esprit que si le fichier CSS est volumineux, l'intégration complète du CSS peut amener PageSpeed Insights à vous avertir que la partie au-dessus de la ligne de flottaison de votre page est trop volumineuse via l'option Donner la priorité au contenu visible. 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 reta le chargement des styles restants.

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

Si le document HTML se présente comme suit : 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
Et la ressource small.css se présente comme suit : 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
Vous pouvez ensuite intégrer le CSS critique comme suit : 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

Cette transformation, y compris la détermination des CSS critiques/non critiques, l'intégration du CSS critique et le chargement différé du CSS non critique, peut être effectuée automatiquement par les modules d'optimisation PageSpeed pour nginx, apache, IIS, ATS et Open Lightspeed, lorsque vous activez le filtre prioritize_critical_css.

Reportez-vous également à la fonction loadCSS qui permet de charger les CSS de manière asynchrone. Elle peut fonctionner avec l'outil Critical, qui permet d'extraire le CSS critique d'une page Web.

Les styles essentiels au style du contenu au-dessus de la ligne de flottaison sont intégrés et appliqués immédiatement au document. Le fichier small.css complet est chargé après le rendu initial de la page. Ses styles sont appliqués à la page une fois son chargement terminé, sans bloquer l'affichage initial du contenu critique.

Notez que la plate-forme Web prendra bientôt en charge le chargement des feuilles de style qui ne bloquera pas l'affichage, sans avoir à utiliser JavaScript, à l'aide des importations HTML.

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

Faites attention lorsque vous incorporez des URI de données dans des fichiers CSS. Bien que l'utilisation sélective des URI de petite taille dans votre CSS puisse être judicieuse, l'intégration d'URI de données volumineuses peut augmenter la taille de votre CSS au-dessus de la ligne de flottaison, ce qui ralentit le délai d'affichage de la page.

N'intégrez pas les attributs CSS

Intégrer des attributs CSS aux éléments HTML (par exemple, <p style=...>) doivent être évités autant que possible, car cela entraîne souvent une duplication de code inutile. De plus, l'intégration de code CSS dans les éléments HTML est bloquée par défaut avec Content Security Policy (CSP).

Commentaires

Cette page vous a-t-elle été utile ?