CSS, das das Rendering blockiert

Ilya Grigorik
Ilya Grigorik
X Startseite

Veröffentlicht am 31. März 2014

Standardmäßig wird CSS als Ressource behandelt, die das Rendering blockiert. Das bedeutet, dass der Browser erst dann verarbeitete Inhalte rendert, wenn das CSSOM erstellt wurde. Achten Sie darauf, dass Ihr CSS schlank ist, so schnell wie möglich ausgeliefert wird und verwenden Sie Medientypen und ‑abfragen, um das Rendering zu entsperren.

Bei der Erstellung des Renderbaums haben wir gesehen, dass für die Erstellung des Renderbaums sowohl das DOM als auch das CSSOM erforderlich sind. Dies hat wichtige Auswirkungen auf die Leistung: Sowohl HTML als auch CSS sind Ressourcen, die das Rendering blockieren. Das HTML ist offensichtlich, da wir ohne das DOM nichts zu rendern hätten. Die CSS-Anforderung ist jedoch möglicherweise weniger offensichtlich. Was passiert, wenn wir versuchen, eine typische Seite zu rendern, ohne das Rendering für CSS zu blockieren?

Zusammenfassung

  • Standardmäßig wird CSS als Ressource behandelt, die das Rendering blockiert.
  • Mit Medientypen und Media Queries können wir einige CSS-Ressourcen als nicht blockierend markieren.
  • Der Browser lädt alle CSS-Ressourcen herunter, unabhängig davon, ob sie das Rendering blockieren oder nicht.
Mobile Seite der New York Times mit CSS
Mobile Seite der New York Times ohne CSS (FOUC)

Das vorherige Beispiel, das die Website der New York Times mit und ohne CSS zeigt, veranschaulicht, warum das Rendering blockiert wird, bis CSS verfügbar ist. Ohne CSS ist die Seite relativ unbrauchbar. Die Darstellung auf der rechten Seite wird oft als Flash of Unstyled Content (FOUC) bezeichnet. Der Browser blockiert das Rendering, bis sowohl das DOM als auch das CSSOM vorhanden sind.

CSS ist eine Ressource, die das Rendering blockiert. Sorgen Sie dafür, dass sie so schnell wie möglich an den Client gesendet wird, um die Zeit bis zum ersten Rendering zu optimieren.

Was aber, wenn wir einige CSS-Stile haben, die nur unter bestimmten Bedingungen verwendet werden, z. B. wenn die Seite gedruckt oder auf einen großen Monitor projiziert wird? Es wäre gut, wenn wir das Rendering für diese Ressourcen nicht blockieren müssten.

Mit CSS-Medientypen und Media Queries können wir diese Anwendungsfälle berücksichtigen:

<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />

Eine Media Query besteht aus einem Medientyp und null oder mehr Ausdrücken, die die Bedingungen bestimmter Media Features prüfen. Bei unserer ersten Stylesheet-Deklaration wird beispielsweise kein Medientyp oder keine Media Query angegeben, sodass sie in allen Fällen gilt. Das heißt, sie blockiert immer das Rendering. Die zweite Stylesheet-Deklaration gilt dagegen nur, wenn der Inhalt gedruckt wird. Vielleicht möchten Sie das Layout neu anordnen, die Schriftarten ändern und andere wichtige Designaspekte für den Druck berücksichtigen. Daher muss diese Stylesheet-Deklaration das Rendering der Seite beim ersten Laden nicht blockieren. Die letzte Stylesheet-Deklaration enthält eine Media Query, die vom Browser ausgeführt wird. Wenn die Bedingungen erfüllt sind, blockiert der Browser das Rendering, bis das Stylesheet heruntergeladen und verarbeitet wurde.

Mit Media Queries können wir unsere Präsentation an bestimmte Anwendungsfälle anpassen, z. B. an die Anzeige im Vergleich zum Druck, aber auch an dynamische Bedingungen wie Änderungen der Bildschirmausrichtung, Größenänderungen und mehr. Achten Sie bei der Deklaration Ihrer Stylesheet-Assets genau auf den Medientyp und die Media Queries. Sie haben einen großen Einfluss auf die Leistung des kritischen Rendering-Pfads.

Betrachten Sie diese Beispiele:

<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
  • Die erste Deklaration blockiert das Rendering und stimmt unter allen Bedingungen überein.
  • Die zweite Deklaration blockiert ebenfalls das Rendering: "all" ist der Standardtyp. Wenn Sie also keinen Typ angeben, wird er implizit auf "all" gesetzt. Daher sind die erste und zweite Deklaration tatsächlich gleichwertig.
  • Die dritte Deklaration enthält eine dynamische Media Query, die beim Laden der Seite ausgewertet wird. Je nach Ausrichtung des Geräts beim Laden der Seite kann portrait.css das Rendering blockieren oder nicht.
  • Die letzte Deklaration wird nur angewendet, wenn die Seite gedruckt wird ("print"). Sie blockiert also nicht das Rendering, wenn die Seite zum ersten Mal im Browser geladen wird.

„Rendering blockieren“ bedeutet nur, dass der Browser das erste Rendering der Seite für diese Ressource zurückhalten muss. In beiden Fällen lädt der Browser das CSS-Asset herunter, allerdings mit einer niedrigeren Priorität für nicht blockierende Ressourcen.

Feedback