«Server Push», eines der Highlights von HTTP/2, soll das sogenannte Inlining von CSS und JavaScript überflüssig machen. Server Push können Sie ab sofort auf unseren Servern nutzen. Wir zeigen, was Server Push genau ist und wie Sie die Funktion einsetzen.

Was bedeutet Server Push?

Das Aufrufen von Websites folgt normalerweise dem Prinzip Frage-Antwort. Ein Beispiel: Der Browser verlangt vom Server die Datei index.html und erhält diese Datei darauf vom Server zurückgeliefert. Beim Verarbeiten der HTML-Datei erkennt der Browser verlinkte Dateien wie CSS-Anweisungen oder JavaScript-Code, die zur Darstellung der angeforderten Seite (hier also index.html) nötig sind. Der Browser muss daraufhin alle verlinkten Dateien beim Server anfragen, um die Seite darstellen zu können. Die Kommunikation, die bei der Anfrage der verlinkten Dateien entsteht, kostet Zeit. Und diese Zeit lässt sich mit Server Push einsparen.

Mit Server Push lassen sich also Dateien vom Server an den Browser liefern, die dieser sowieso zur Darstellung der angeforderten Seite benötigt. Die zusätzlichen Anfragen vom Browser an den Server, er solle doch bitte noch die zusätzlichen Dateien liefern, entfällt.

So funktioniert Server Push

Server Push wird über HTTP-Header gesteuert, die sich entweder mit direkten Anweisungen für den Webserver (in unserem Beispiel in der .htaccess-Datei) oder über die eingesetzte Programmiersprache (in unserem Beispiel über die header-Funktion von PHP) definieren lassen. Im HTTP-Header sind die Dateien definiert, die der Server pushen möchte. Nach der Lieferung der eigentlich angefragten Datei index.html liefert der Server sofort die angekündigten Dateien nach. Während die angefragte Seite im Browser verarbeitet wird, erhält der Browser bereits die sowieso benötigten CSS- und JavaScript-Dateien. Die Nachfrage nach den in der HTML-Datei verlinkten Quellen entfällt also.

Server Push in der .htaccess-Datei definieren

Soll Server Push in der .htaccess-Datei gesteuert werden, kann der Befehl zum Beispiel folgendermassen aussehen:

<FilesMatch "index.html">
    Header add Link "</css/styles.css>; rel=preload; as=style"
</FilesMatch>

Heisst die gelieferte Datei index.html wird vom Server zusätzlich die Datei /css/styles.css per Server Push geliefert. Sollen mehrere Dateien per Server Push verschickt werden, können Sie die Anweisungen durch ein Kommazeichen unterteilen. Die Aufteilung in mehrere Zeilen ist ebenfalls möglich:

<FilesMatch "index.html">
    Header add Link "</css/styles.css>; rel=preload; as=style"
    Header add Link "</js/scripts.js>; rel=preload; as=script"
</FilesMatch>

Server Push in PHP definieren

Bei der Steuerung von Server Push in PHP machen wir uns die header-Funktion zu Nutze. Die Header-Anweisung muss die erste Anweisung in einer PHP-Datei sein, andernfalls kommt es zu Fehlermeldungen. Am Beispiel index.php könnte der Befehl also wie folgt aussehen:

<?php
header("Link: </css/styles.css>; rel=preload; as=style, </js/scripts.js>; rel=preload; as=script");

Server Push für beliebte Content-Management-Systeme

Für die beliebtesten CMSe unserer Kunden stehen Plugins und Erweiterungen bereit, die Server Push in das jeweilige System integrieren. Damit sind keine Anpassungen am PHP-Code oder in der .htaccess-Datei nötig:

• HTTP/2 Server Push für WordPress
• HTTP/2 Server Push für Joomla
• HTTP/2 Push für TYPO3
• HTTP/2 für Contao
• HTTP/2 Server Push für Drupal

Wie teste ich, ob Server Push funktioniert?

Am einfachsten lässt sich Google Chrome erkennen, ob eine Datei per Server Push an den Browser geliefert wurde:

1. Öffnen Sie die Entwickler-Tools von Chrome
2. Wechseln Sie zum Netzwerk-Tab
3. Aktivieren Sie die Spalte «Initiator»
4. Lautet der Initiator «Push», wurde die Datei per Server Push geliefert.

Verantwortungsvoll pushen

Die Versuchung ist gross, sämtliche auf einer Seite eingebundenen Dateien per Push vorzeitig an den Browser senden zu lassen. Was bei Dateien Sinn macht, die sonst per Resource-Inlining mit der HTML-Datei übertragen werden, kann sich bei zu vielen Daten aber auch negativ auf die Ladezeiten einer Seite auswirken.

Ausserdem sollten Sie einen Check einbauen, damit Daten nicht erneut übertragen werden, obwohl sich diese schon im Cache des Browsers befinden. Ein neuer Standard mit dem Namen Cache Digests wird es möglich machen, dass der Browser den Server über die Dateien im Cache informiert. Da Cache Digests bislang aber von keinem Browser unterstützt werden, muss vorübergehend eine eigene Lösung her. Eine sehr gute Anleitung dazu, wie sich dies in PHP lösen lässt, hat Jeremy Wagner für CSS-Tricks verfasst.