CSS-Bereitstellung optimieren

<ph type="x-smartling-placeholder"> Diese Regel gilt, wenn PageSpeed Insights feststellt, dass eine Seite das externe Rendering blockiert Stylesheets, die das erste Rendern verzögern.

Übersicht

Bevor der Browser Inhalte rendern kann, muss er alle Stil- und Layoutinformationen für auf der aktuellen Seite. Daher blockiert der Browser das Rendern, bis externe Stylesheets erstellt werden. heruntergeladen und verarbeitet werden. Dies kann mehrere Umläufe erfordern und die Zeit bis zum ersten Rendern verzögern. Weitere Informationen finden Sie unter . Konstruktion, Layout und Darstellung der Renderingstruktur, um mehr über den kritischen Rendering-Pfad zu erfahren. und rendern Blockierung von CSS finden Sie Tipps dazu, wie Sie die Blockierung des Renderings aufheben und die CSS-Bereitstellung verbessern können.

Empfehlungen

Wenn die externen CSS-Ressourcen klein sind, können Sie sie auch inline platzieren, also direkt in das HTML-Dokument einfügen. Wenn kleine CSS-Ressourcen auf diese Weise inline eingefügt werden, kann der Browser mit dem Rendern der Seite fortfahren. Wenn die CSS-Datei groß ist und Sie sie vollständig inline einfügen, warnt PageSpeed Insights möglicherweise, dass die ohne Scrollen sichtbare -Teil Ihrer Seite ist mit der Funktion Sichtbare Inhalte priorisieren zu groß. Ermitteln Sie im Fall einer großen CSS-Datei den CSS-Code, der zum Rendern des ohne Scrollen sichtbaren Inhalts erforderlich ist. Platzieren Sie ihn inline und lassen Sie die übrigen Stile nach dem ohne Scrollen sichtbaren Inhalt laden.

Beispiel für Inline-Platzierung einer kleinen CSS-Datei

Wenn das HTML-Dokument wie folgt aussieht: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
Und die Ressource small.css sieht so aus: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
Anschließend können Sie wichtige CSS wie folgt inline einfügen: 
<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>

Diese Transformation, einschließlich der Bestimmung kritischer/nicht kritischer CSS, und das verzögerte Laden der nicht kritischen CSS-Elemente, kann automatisch vom PageSpeed-Optimierungsmodule für nginx, Apache, IIS, ATS und Open Lightspeed, wenn Sie die prioritize_critical_css:

Weitere Informationen finden Sie in der loadCSS um CSS asynchron zu laden, die mit Kritisch, ein Tool zum Extrahieren wichtiger CSS-Elemente aus einer Webseite.

Die entscheidenden Stile, die für die Gestaltung des ohne Scrollen sichtbaren Inhalts erforderlich sind, sind inline und werden sofort auf das Dokument angewendet. Die vollständige „small.css“-Datei wird nach der ersten Darstellung der Seite geladen. Ihre Stile werden auf die Seite angewendet, sobald sie fertig geladen ist, ohne das erste Rendern der kritischen Inhalte zu blockieren.

Beachten Sie, dass die Webplattform bald das Laden von Stylesheets ohne Rendering-Blockierung unterstützt, ohne dass Sie JavaScript mithilfe von HTML-Importen verwenden müssen.

Große Daten-URIs nicht inline einfügen

Seien Sie vorsichtig, wenn Sie Daten-URIs in CSS-Dateien inline einfügen. Auch wenn die selektive Verwendung kleiner Daten-URIs in Ihrem CSS sinnvoll sein kann, sollten Sie Große Daten-URIs können dazu führen, dass der „above the fold“-CSS-Code größer ist, wodurch sich die Renderingzeit der Seite verlangsamt.

CSS-Attribute nicht inline einfügen

CSS-Attribute in HTML-Elemente inline einfügen (z.B. <p style=...>) sollten möglichst vermieden werden, da dies häufig zu unnötiger Codeduplizierung führt. Außerdem wird Inline-CSS-Code in HTML-Elementen standardmäßig mit Content Security Policy (CSP):

Feedback

War diese Seite hilfreich?

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