CSS-Bereitstellung optimieren

Diese Regel gilt, wenn PageSpeed Insights feststellt, dass eine Seite externe Stylesheets enthält, die das Rendering blockieren. Dadurch verzögert sich das erste Rendering.

Überblick

Bevor der Browser Inhalte rendern kann, muss er alle Stil- und Layoutinformationen für die aktuelle Seite verarbeiten. Daher blockiert der Browser das Rendering, bis externe Stylesheets heruntergeladen und verarbeitet wurden. Dies kann mehrere Roundtrips erfordern und die Zeit bis zum ersten Rendering verzögern. Weitere Informationen zum kritischen Rendering-Pfad finden Sie unter Erstellung, Layout und Painting-Struktur. Tipps zur Blockierung des Renderings und zur Verbesserung der CSS-Bereitstellung finden Sie unter CSS mit dem Rendering blockieren.

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 den gesamten CSS-Code inline einfügen, warnt PageSpeed Insights Sie möglicherweise, dass der ohne Scrollen sichtbare Teil Ihrer Seite zu groß ist und Sie sichtbare Inhalte priorisieren sollten. 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

Angenommen, das HTML-Dokument sieht so aus: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
Die Ressource small.css sieht so aus: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
Dann können Sie wichtige CSS so 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 Umwandlung, einschließlich der Ermittlung von kritischem/nicht kritischem CSS, Einfügen des kritischen CSS und verzögertem Laden der nicht kritischen CSS, kann von den PageSpeed-Optimierungsmodulen für nginx, Apache, IIS, ATS und Open Lightspeed automatisch erfolgen, wenn Sie den Filter prioritize_critical_css aktivieren.

Mit der Funktion loadCSS können Sie CSS asynchron laden. Dazu kann das Tool Critical verwendet werden, mit dem kritische CSS-Ressourcen aus einer Webseite extrahiert werden können.

Die wichtigen Stile, die zum Gestalten des ohne Scrollen sichtbaren Inhalts erforderlich sind, sind inline und werden sofort auf das Dokument angewendet. Die vollständige Datei "small.css" wird nach dem ersten Malen der Seite geladen. Die Stile werden auf die Seite angewendet, sobald der Ladevorgang abgeschlossen ist, ohne das erste Rendering des kritischen Inhalts zu blockieren.

Hinweis: Die Webplattform wird das Laden von Stylesheets bald unterstützen, ohne dass das Rendering blockiert wird, ohne auf JavaScript mithilfe von HTML-Importen zurückgreifen zu müssen.

Große Daten-URIs nicht inline einfügen

Seien Sie vorsichtig, wenn Sie Daten-URIs in CSS-Dateien inline einfügen. Die selektive Verwendung von kleinen Daten-URIs in Ihrem CSS-Code kann sinnvoll sein. Wenn Sie große Daten-URIs inline einfügen, kann dies jedoch dazu führen, dass die ohne Scrollen sichtbare CSS-Elemente größer ausfallen. Dadurch wird das Rendern der Seite verlangsamt.

CSS-Attribute nicht inline einfügen

CSS-Attribute in HTML-Elemente wie <p style=...>) sollten vermieden werden, da dies oft zu unnötiger Codeduplizierung führt. Außerdem wird Inline-CSS in HTML-Elementen durch die Content Security Policy (CSP) standardmäßig blockiert.

Feedback

War diese Seite hilfreich?