Blog

Nehmen wir mal an, in einem CSS wird eine Hintergrundgrafik eingebunden. Ist ja oft der Fall, Hintergrundbild oder Logo oder sonst was.

Was passiert normal?

Der Browser fragt die Seite an
- Der Server antwortet mit HTTP-Header
- Der Browser wertet den Header aus, also eventuell Kodierung, Kompression, Alter etc.
- Der Server schickt den Quelltext hinterher
- - Der Quelltext kam am Browser an, er wertet aus und möchte rendern
- - kann er aber nicht, weil da noch ein CSS geladen werden muss
- - Browser sendet neue Anfrage an den Server für das CSS
- - - Server antwortet mit HTTP-Header
- - - Server antwortet mit Quelltext
- - - Browser wertet wieder aus
- - - und stellt fest, er muss noch eine Grafik laden (ist schon genervt, kommt noch mehr?)
- - - - Browser stellt neue Anfrage an den Server
- - - - Server antwortet wieder mir HTTP-Header und Quelltext
- - - - Browser wertet aus und beginnt nun zu Rendern
- - - - bis dahin konnte die Seite auf Grund fehlender Daten nicht angezeigt oder verarbeitet werden.

Was passiert mir H2-Push?

Der Browser fragt die Seite an
- Der Server antwortet mit HTTP-Header
- Der Browser wertet den Header aus, also eventuell Kodierung, Kompression, Alter etc.
- Hier merkt er nun, dass er mehr Daten braucht, um die Seite anzeigen zu können
- Er fordert sie sofort an, dank H2 auch simultan
- Der Server schickt den Quelltext parallel dazu hinterher, also hinter dem Header, aber parallel zur neuen Anforderung
- - Der Quelltext kam am Browser an, er wertet aus und möchte rendern
- - Hier kann er es nun, oder muss nur noch kurz warten, bis die anderen Files da sind, beauftragt wurden sie ja schon
- - Wenn alles da ist:
- - Browser wertet aus und beginnt nun zu Rendern
- - bis dahin konnte die Seite auf Grund fehlender Daten nicht angezeigt oder verarbeitet werden.

Man merkt also, das geht deutlich schneller und flacher. Geht auch mit "Meta-Preload", zwar etwas langsamer, da der Browser auf den Quelltext warten muss und nicht mit dem HTTP-Header direkt starten kann, aber das ist immer noch besser, als gar nichts davon zu nutzen und dem Browser quasi durch die Verschachtelung der Dateien zu sagen, das brauchste, nun noch das, dann das und danach das auch noch, nun kannste anfangen. Die Abhängigkeiten kann man auch vorher auf einen Schlag mitteilen, der Browser ist in der Lage, das zeitgleich zu machen, der muss nicht auf immer neue "das brauchste noch" warten.

Man sieht also, die Push-Anweisungen werden extrem schnell verarbeitet. Sie halten den Seitenaufbau kaum auf, da eben simultan und nicht nacheinander mit Wartezeit für den Empfang der neuen Anweisung.