CSS-Bereitstellung optimieren

Diese Regel gilt, wenn PageSpeed Insights feststellt, dass eine Seite externe Stylesheets enthält, die das Rendern blockieren und damit die Darstellung von Inhalten auf dem Bildschirm verzögern.

Übersicht

Browser werden von externen CSS-Dateien blockiert, bevor Inhalte auf dem Bildschirm dargestellt werden. Dadurch wird die Netzwerklatenz vergrößert und das Anzeigen von Inhalten dauert länger.

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

Wenn das HTML-Dokument so aussieht:
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

und die Ressource small.css so:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

können Sie den wichtigen CSS-Code folgendermaßen inline einfügen:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

Die ursprüngliche Datei "small.css" wird nach der Seite geladen. Die Anwendungsreihenfolge der CSS-Regeln wird gewährleistet, indem sämtliche <style>- und <link>-Elemente mittels JavaScript in das Dokument injiziert werden.

Große Daten-URIs nicht inline einfügen

Seien Sie vorsichtig, wenn Sie Daten-URIs in CSS-Dateien inline einfügen. Die gelegentliche Verwendung kleiner Daten-URIs in Ihrem CSS-Code kann sinnvoll sein. Wenn Sie jedoch große Daten-URIs inline einfügen, kann dies den CSS-Code des ohne Scrollen sichtbaren Inhalts vergrößern. Das Rendern der Seite wird dadurch verlangsamt.

CSS-Attribute nicht inline einfügen

CSS-Attribute sollten möglichst nicht inline in HTML-Elemente wie z. B. &lt p style=...&gt eingefügt werden, da dadurch oft unnötig Code dupliziert wird. Außerdem wird Inline-CSS-Code in HTML-Elementen gemäß der Content Security Policy (CSP) standardmäßig blockiert.