Tobias Scheible Cyber Security & IT-Forensik Dozent
Geschwindigkeit - Performance

Elemente per HTTP/2 Push laden

Werden externe Ressourcen wie CSS-, JavaScript- und Schriften-Dateien eingebunden, lohnt es sich, einen Blick auf das HTTP/2 Push Verfahren zu werfen. Damit lassen sich diese Dateien gezielt vorab laden und so die Geschwindigkeit einer Website effizient verbessern.

Mittwoch, 11. September 2019
0 Kommentare

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 Ladezeit 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.

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzerklärung des Blogs.