HTTP/2 hat sich mittlerweile etabliert und wird von vielen Websites eingesetzt. Das neue Protokoll bietet viele Vorteile, alleine schon die Aktivierung sorgt in der Regel für eine kürzere Ladezeit. Mit der gezielten Nutzung des HTTP/2 Push Verfahren lässt sich die Geschwindigkeit einer Website noch einmal gezielt steigern und macht alte Geschwindigkeitsoptimierungen überflüssig.

Klassische Anfragen

Der Zugriff auf Websites folgt immer nach dem Request und Response Muster. Der Besucher sendet eine Anforderung an den Webserver und mit einiger Verzögerung antwortet der Server mit der angeforderten Website. Die erste Anfrage an einen Webserver ist üblicherweise ein HTML-Dokument. Der Server sendet als Antwort die HTML-Datei an den Webbrowser, dieser analysiert das Dokument auf Referenzen zu externen Dateien wie Stylesheets, Skripte und Bilder. Nach ihrer Entdeckung stellt der Webbrowser separate Anfragen für jede Datei.

veraltete Empfehlungen

Das Problem dieses Mechanismus besteht darin, dass der Webbrowser diese externen Dateien zum Teil erst abruft und verarbeitet, bevor der Rest der HTML-Datei weiterverarbeitet wird. Dies verzögert die Darstellung der Website und erhöht die Ladezeit. Daher gab es mit HTTP/1 Empfehlungen zur Optimierung der Geschwindigkeit wie das Einfügen von kritischen CSS und JavaScript direkt in HTML oder die Verwendung des Daten-URI-Schemas (Base64 codiert) zum Einbetten von Binärdaten in CSS und HTML. Dadurch konnte zwar die Geschwindigkeit der Website beim ersten Aufruf gesteigert werden, aber gleichzeitig hat sich die Größe der zu übermittelnden Daten erhöht und die Inhalte konnten nicht im Cache zwischengespeichert werden.

HTTP/2 Push Verfahren

Mit HTTP/2 können Ressourcen effizienter parallel geladen werden. Und mit dem Push Verfahren kann dem Webbrowser mit der ersten Verbindung mittgeteilt werden, welche zusätzlichen Ressourcen geladen werden sollen. Daher beginnt der Webbrowser den Download von mehreren Dateien, bevor das eigentliche HTML-Dokument übertragen worden ist. Daher auch der Name Push, der Webserver schiebt schon die Dateien zum Webbrowser, bevor dieser überhaupt eine weitere Anfrage stellt. Dies erhöht die Ladegeschwindigkeit einer Website enorm.

Realisierung von HTTP/2 Push

Das Push Verfahren kann verwendet werden, indem ein Link Element im HTTP-Header hinzugefügt wird. Als Erstes wird der Name der Datei in spitzigen Klammern angeben, gefolgt von dem Parameter rel=preload. Das as-Attribut informiert den Webbrowser über den Inhaltstyp der gepushten Datei.

Link: ; rel=preload; as=style

Mehrere Elemente können in einem Eintrag kombiniert werden, dazu wird zwischen den Ressourcen ein Komma eingefügt:

Link: ; rel=preload; as=style, ; rel=preload; as=font

Apache

Wird der Apache Webserver verwendet, kann der Eintrag in der httpd.conf oder .htaccess Datei eingefügt werden:

Header set Link "; rel=preload; as=style"

NGINX

Für NGINX gibt es bereits eine fertige Funktion, mit der der Push einfach angewiesen werden kann:

http2_push /style.css;

Zusätzlich besteht noch die Möglichkeit, wenn NGINX als Proxy verwendet wird, dass die Inhalte automatisch analysiert werden und alle externen Ressourcen einen PUSH Eintrag bekommen.

http2_push_preload on;

PHP

Ist kein Zugriff auf die Serverkonfiguration möglich, kann der Header-Eintrag per PHP gesetzt werden:

header("Link: ; rel=preload; as=style");

HTTP/2 Push nur einmal ausführen

Der Push sollte natürlich pro Besucher nur einmal ausgeführt werden und die Dateien im Cache abgelegt werden. Viele Ansätze senden den Push nur bei HTML-Dateien, dadurch wird er aber auch bei jedem Seitenaufruf gesendet, obwohl die Dateien bereits vorhanden sind. Stattdessen verwende ich ein Cookie und überprüfe bei jeder Anfrage, ob es gesetzt ist. Wenn es nicht gesetzt ist, wird der Push gesendet und anschließend das Cookie gesetzt.

So sieht die Realisierung des HTTP/2 Push für den Apache Webserver per .htaccess- aus:

SetEnvIf Cookie "h2push=1" h2push 
Header set Link "; rel=preload; as=style" env=!h2push
Header add Set-Cookie "h2push=1; Path=/; Secure; HttpOnly" env=!h2push

Alternativ kann dieser Mechanismus auch in PHP implementiert werden.

Fazit HTTP/2 Push

Viele moderne Webbrowser unterstützen HTTP/2 und somit auch das Push Verfahren. Allerdings gibt es noch Unterschiede in den HTTP/2-Implementierungen und daher kann es zum Teil auch zu unterschiedlichen Verhalten kommen. Wird das Verfahren vom Webserver nicht unterstützt, kann zumindest der Webbrowser möglichst früh über weitere Ressourcen informiert werden.

Mit dem HTTP/2 Push Verfahren gehören fragwürdige Optimierungen der Geschwindigkeit von Websites der Vergangenheit an wie zum Beispiel das Integrieren von CSS- und JavaScript-Code in die HTML-Dateien. Die Ladezeit kann elegant optimiert werden und die Reaktionszeit der Webbrowser wird damit deutlich gesteigert.