Kritischer Renderpfad.
Der kritische Renderpfad ist die minimale Folge von Schritten, die ein Browser abschließen muss, um eine Seite auf dem Bildschirm zu zeichnen.
Bevor der Browser eine Seite zeichnet, muss er zwei Bäume aufbauen: die Struktur des Dokuments und die darauf anzuwendenden Stile. Beide werden zusammengeführt, das Layout wird berechnet, danach wird gezeichnet. Jeder Schritt der Kette wartet auf den vorherigen.
Deshalb blockieren Stylesheets das Rendern per Definition: Ohne Stile zeichnet der Browser nicht, denn das Gezeichnete könnte sich im nächsten Moment vollständig ändern und die Nutzerin sähe ein Aufblitzen ungestalteten Inhalts.
Skripte blockieren aus einem anderen Grund: Ein klassisches Skriptelement hält die Dokumentanalyse an, weil das Skript das Dokument verändern kann. Verzögerte und asynchrone Skripte lösen dieses Anhalten nicht aus.
- Dokumentanalyse — das HTML wird gelesen, die Struktur aufgebaut.
- Stilanalyse — das CSS wird gelesen, die Regeln aufgebaut. Blockierend.
- Layoutberechnung — es wird berechnet, wo jedes Element steht.
- Zeichnen — die Bildpunkte werden gemalt.
- Zusammensetzen — die Ebenen werden auf dem Bildschirm vereint.
Den Pfad verkürzt man auf zwei Wegen: die Zahl der blockierenden Ressourcen senken und ihre Größe verringern. Auf dieser Website wurden die Stile in einer Datei gebündelt und kommen nach gzip auf 12,4 Kilobyte; die Skripte sind verzögert, und externe Ressourcen gibt es nicht.
Die letzten beiden Schritte der Kette — Zeichnen und Zusammensetzen — erklären, warum Animationen mit Transformation und Deckkraft günstig sind: Diese beiden Eigenschaften lösen keine Layoutberechnung aus und werden meist in der Ebene der Grafikkarte verarbeitet.
Die praktischen Schritte zur Verkürzung der Reihe nach: die Zahl der Stylesheets auf eines senken, die Datei komprimieren und ungenutzte Regeln entfernen, Skripte verzögert oder asynchron laden und Anfragen an fremde Domains entfernen. Alle vier werden auf Konfigurationsebene gelöst, keiner verlangt eine Codeänderung.
Die Technik kritisches CSS verkürzt diesen Pfad noch entschiedener: Die zum Zeichnen des ersten sichtbaren Bereichs nötigen Regeln werden herausgelöst und unmittelbar in die Seite eingebettet. Das ist wirkungsvoll, kostet aber Pflege — es muss bei jeder Designänderung neu erzeugt werden, und wird das vergessen, ist das Ergebnis schlechter, als hätte man es nie angewandt.
Am praktischsten misst man die Länge des Pfads, indem man im Leistungsbereich des Browsers die vor dem ersten Zeichnen eintreffenden Ressourcen zählt: Jedes Stylesheet und jedes synchrone Skript in dieser Liste ist ein Kettenglied und ein Wartepunkt.
Und eine Folge für den Entwurf: Die Länge des Pfads entscheidet sich in der Entwurfsphase. Wie viele Schriftfamilien verwendet werden, was im Hero-Bereich steht und wie viele fremde Dienste aufgerufen werden — alle drei fügen der Kette Glieder hinzu und lassen sich später nicht leicht entfernen.