CSS-Bereitstellung optimieren

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Diese Regel wird ausgelöst, wenn PageSpeed Insights erkennt, dass eine Seite das Rendering von blockierenden externen Stylesheets enthält. Dadurch wird die Zeit bis zum ersten Rendern verzögert.

Übersicht

Bevor der Browser Inhalte rendern kann, muss er alle Stil- und Layoutinformationen der aktuellen 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 zu kritischem Rendering-Pfad findest du unter Rendering-Baum, -Layout und -Paint. Außerdem erhältst du Tipps zum Heben des Aufhebens der Rendering-Funktion und zur Verbesserung der CSS-Bereitstellung.

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, kann eine vollständige Inline-CSS-Konfiguration dazu führen, dass PageSpeed Insights eine Warnung ausgibt, dass der ohne Scrollen sichtbare Teil deiner Seite zu groß ist (Sichtbare Inhalte priorisieren). 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 so aussieht: 
<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 kannst du kritisches CSS so einbetten: 
<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 von kritischem/nicht kritischem CSS, der Inline-Bereitstellung des kritischen CSS-Codes und des verzögerten Ladens des nicht kritischen CSS-Codes, kann automatisch durch die PageSpeed-Optimierungsmodule für Nginx, Apache, IIS, ATS und Open Lightspeed durchgeführt werden, wenn Sie den Filter prioritize_Critical_css aktivieren.

Mit der Funktion loadCSS kannst du CSS-Code asynchron laden. Dies funktioniert mit dem Tool, mit dem du das kritische CSS von einer Webseite extrahieren kannst.

Die wesentlichen Stile für den ohne Scrollen sichtbaren Inhalt werden inline eingefügt und sofort auf das Dokument angewendet. Nach der ersten Darstellung der Seite wird die vollständige Datei „small.css“ geladen. Die Stile werden auf die Seite angewendet, sobald der Ladevorgang abgeschlossen ist, ohne das ursprüngliche Rendering des kritischen Inhalts zu blockieren.

Die Webplattform wird das Laden von Stylesheets bald unterstützen, ohne dass das Rendering blockiert wird. Sie müssen nicht mithilfe von JavaScript mithilfe von HTML-Importen arbeiten.

Große Daten-URIs nicht inline einfügen

Seien Sie vorsichtig, wenn Sie Daten-URIs in CSS-Dateien inline einfügen. Die selektive Verwendung kleiner Daten-URIs in Ihrem CSS-Code kann sinnvoll sein, das Inline-Format großer Daten-URIs kann jedoch dazu führen, dass Ihr ohne Scrollen sichtbares CSS größer ist, wodurch die Renderingzeit der Seite verlangsamt wird.

CSS-Attribute nicht inline einfügen

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

Feedback

War diese Seite hilfreich?