Optimiser la diffusion des ressources CSS

<ph type="x-smartling-placeholder"> Cette règle se déclenche lorsque PageSpeed Insights détecte qu'une page contient des éléments externes bloquants les feuilles de style, ce qui retarde le délai de premier rendu.

Présentation

Avant de pouvoir afficher le contenu, le navigateur doit traiter toutes les informations de style et de mise en page la page actuelle. Par conséquent, le navigateur bloquera l'affichage jusqu'à ce que des feuilles de style externes soient téléchargés et traités, ce qui peut nécessiter plusieurs allers-retours et retarder le délai de premier rendu. Voir <ph type="x-smartling-placeholder"></ph> construction, mise en page et peinture de l'arborescence de rendu pour en savoir plus sur le chemin critique du rendu et rendu le blocage du CSS pour obtenir des conseils sur la façon de débloquer l'affichage et d'améliorer la diffusion des 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 code CSS peut entraîner un avertissement dans PageSpeed Insights indiquant que la partie au-dessus de la ligne de flottaison de votre page est trop grande 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, peuvent être effectuées automatiquement les modules d'optimisation PageSpeed pour nginx, apache, IIS, ATS et Open Lightspeed, lorsque vous activez prioritize_critical_css.

Consultez également les loadCSS pour charger le code CSS de manière asynchrone. Cette fonction peut être utilisée avec Critique, un outil pour extraire le CSS essentiel d'une page Web.

Les styles essentiels nécessaires pour styliser le 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 dessin initial de la page. Ses styles sont appliqués à la page une fois le chargement terminé, sans bloquer l'affichage initial du contenu essentiel.

Notez que la plate-forme Web permettra bientôt de charger des feuilles de style sans bloquer l'affichage, sans avoir à recourir à 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. Même s'il peut être judicieux d'utiliser des URI de petite taille dans votre CSS, il peut être judicieux d'intégrer les URI de données volumineux peuvent augmenter la taille de votre CSS dans la partie au-dessus de la ligne de flottaison, ce qui ralentit l'affichage de la page.

N'intégrez pas les attributs CSS

Intégrer des attributs CSS dans les éléments HTML (par exemple, <p style=...>) doit être évité dans la mesure du possible, car cela entraîne souvent une duplication inutile du code. En outre, le code CSS intégré aux éléments HTML est bloqué par défaut avec Content Security Policy (CSP).

Commentaires

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

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">