WordPress und HTTP2 – eine Einführung

Im Mai 2015 wurde HTTP/2 als neuer Standard verabschiedet und soll in absehbarer Zeit HTTP/1.1 ablösen. Die möglichen Vorteile von HTTP/2 sind enorm, allerdings ist die Nutzbarkeit noch nicht ganz so einfach, wie angedacht. In diesem Artikel schauen wir kurz auf die Vorteile, die dieser Standard den Website-Besitzern bieten kann, und welche Voraussetzungen für eine Nutzung von WordPress und HTTP/2 erfüllt sein müssen.

Wie viele Artikel hast du schon zum Thema WordPress und die Ladegeschwindigkeit einer Website gelesen? Wenn es dir wie mir geht, wahrscheinlich sehr viele. Auch ich habe hier auf Dr. Web schon einige Artikel dazu veröffentlicht. Ein wichtiger Teil einer Performance-Optimierung ist der Server, ohne einen vernünftigen, mit einem modernen Betriebssystem ausgestatteten Server funktioniert keine Optimierung.

Das wäre wie gegen Windmühlen kämpfen. Da wir alle nicht Don Quijote sind, sollten wir solche Dinge gar nicht erst anfangen.

Was ist HTTP und wofür braucht man es?

Grundsätzlich ist HTTP (Hypertext Transfer Protocol) ein Weg, wie ein Webserver und ein Browser miteinander kommunizieren. HTTP ist also die Sprache, in sich Server und Browser miteinander unterhalten.

Ich werde in diesem Artikel nicht tief in die Materie eintauchen, wenn du mehr darüber erfahren möchtest, schau dir den Artikel auf Wikipedia dazu an. Zum ersten Mal tauchte HTTP im Jahre 1991 als Version 0.9 auf, sozusagen in der Jura des Internets.

Viel ist seitdem geschehen. Früher bestanden die Websites nur aus wenig mehr als etwas Hintergrundfarbe, ein bis zwei Grafiken, die im HTML verlinkt waren und viel Text. Die Websites damals waren nur einige KB groß, heute sind die Websites dagegen Schwergewichte mit zum Teil einigen MBs.

Gut beobachten kann man die Entwicklung der Websites am Beispiel von Dr. Web.

Heute ist die tatsächliche Anzahl von Dateien, die zusammen eine Website bilden, sehr stark angestiegen. Früher waren nur einige wenige Dateien zu laden, heute sind es dutzende, die es zu laden gilt. Dieser Fortschritt verschärft die Einschränkungen, die das alte Protokoll HTTP/1 mit sich bringt. Das Resultat ist eine erhöhte Latenz – oder auch Langsamkeit einer modernen Website.

Das wiederum erforderte die Entwicklung von HTTP/2. HTTP/2 kann durchaus als Evolution des alten Protokolls angesehen werden, denn das Hauptziel war das Verringern der Latenz und damit eine erhöhte Ladegeschwindigkeit mit modernen Web-Browsern.

Die Limitierung von HTTP/1

Heute müssen die Browser zur Darstellung einer Website dutzende, manchmal sogar hunderte von Dateien laden, damit eine Website dargestellt werden kann. Folgendes wird zur Darstellung geladen:

• Das HTML der Website
• Die Stylesheets (CSS)
• Das JavaScript
• Die Bilder
• Die Videos
• Externe Dateien für Google Analytics, Werbung und ähnliches
• Social-Sharing-Lösungen

Das große Problem bei HTTP/1 ist, dass der Browser für jede einzelne Datei, die im HTML, CSS und JavaScript erwähnt wird, eine Anfrage zu erstellen. Das können durchaus auch hunderte von Anfragen und Verbindungen sein. Hunderte von HTTP-Requests sind durchzuführen, was eine Website ganz schön langsam machen kann.

Speed-Optimierung unter HTTP/1

Aus dieser Limitierung heraus wurde ein spezielles Konzept erschaffen, wie man Websites trotz dieser Einschränkungen schneller machen konnte. Dateien wurden gebündelt, um Anfragen zu reduzieren, die Größe wurde durch Komprimierung reduziert und Grafiken zu einem Sprite zusammengefasst. HTTP/2 soll diese Probleme lösen und andere Wege anbieten.

Der Unterschied zwischen HTTP/1 und HTTP/2

Für die genaue Spezifikation von HTTP/2 besuche bitte das HTTP/2 GitHub FAQ. HTTP/2 wurde entwickelt, um von Maschinen und nicht von Menschen lesbar zu sein. Daher ist das neue Protokoll auch binär, denn das optimiert den Prozess der Kommunikation zwischen dem Browser und dem Server.

Es ist zudem weniger Fehleranfällig und kann Dinge wie Leerzeichen, Leerzeilen, Zeilenenden, Großschreibung und ähnliches besser interpretieren.

Der große Unterschied zwischen den beiden Protokollen sind jedoch die Verbindungen. HTTP/1 erlaubt nur eine einzige Verbindung zur Zeit, HTTP/2 kann jedoch mehrere Verbindungen gleichzeitig bearbeiten, da es nach dem Multiplexverfahren arbeitet.

• HTTP/1 muss für jede einzelne Datei eine Anfrage stellen
• HTTP/1 lädt eine Datei nach der anderen
• HTTP/2 hingegen kann mit einer Verbindung viele Dateien laden
• HTTP/2 erlaubt mehrere Verbindungen gleichzeitig

Das Server-Push Verfahren von HTTP/2

Das Server-Push-Verfahren ist eine Funktion, bei der der Server in der Tat weiß, welche Dateien der Browser benötigt, bevor dieser die Dateien tatsächlich anfragt. Der Server schiebt dann die Dateien an den Browser, ohne darauf zu warten, dass der Browser sie erbittet. Das gestaltet den gesamten Prozess der Anzeige einer Website wesentlich schneller als bisher.

Weitergehende Informationen unter Apache.org/Server Push

Wer mit dem Server-Push-Verfahren experimentieren möchte, findet hier ein kostenloses WordPress Plugin. HTTP/2 Server Push.

Darum ist HTTP/2 wesentlich effizienter

• Es kann die Verbindung zwischen dem Client und dem Server schneller erzeugen
• Die Verbindung zwischen Browser und Server ist effizienter und damit schneller
• Dateien und Ressourcen werden gleichzeitig übertragen
• Dateien können per Server-Push an den Browser geschoben werden
• Es können mehr Dateien gleichzeitig geladen und angezeigt werden

Die Online-Demo: der Unterschied zwischen HTTP/1 und HTTP/2

Wie kann ich HTTP/2 mit meiner Website einsetzen?

Ob du HTTP/2 bereits nutzen kannst, hängt ganz und gar von deinem Webhoster ab. Das neue Protokoll ist ein Teil des Server-Betriebssystems (Apache, NGINX oder ILS) und muss daher von deinem Hoster eingepflegt werden.

Solltest du einen eigenen Server haben, dann kannst du jederzeit auf HTTP/2 upgraden und selbst für Aktualität sorgen.

Natürlich existieren mittlerweile einige Hoster, die bereits HTTP/2 unterstützen und anbieten. Doch das erscheint noch eine Ausnahme zu sein. Du kannst selbst testen, ob dein Webserver oder dein Hosting-Paket bereits das neue Turbo-HTTP zur Verfügung stellt. Nutze dafür das Online-Tool von KeyCDN:

HTTP/2 Test Tool

So nutzt du HTTP/2 mit deiner Website

Theoretisch sollte HTTP/2 mit jedem Browser ohne spezielle Konfigurationen nutzbar sein. Soweit die Theorie. In der Praxis schaut das leider ganz anders aus, denn die großen Browser-Hersteller haben sich dazu entschlossen, den Support für das neue Protokoll nur über TLS (HTTPS) zu ermöglichen. Hier eine aktuelle Liste von Browsern, die bereits HTTP/2 unterstützen:

Ein Klick öffnet die interaktive Liste auf Caniuse.com

Du benötigst also ein SSL-Zertifikat für deine Domain, denn nur mit einer SSL-Verschlüsselung wirst du in den Genuss des High-Speed Protokolls kommen.

Test: Welche Website hat HTTP/2 bereits im Einsatz

Für Google Chrome existiert eine Erweiterung, mit der du auf einen Blick sehen kannst, welche Website bereits HTTP/2 im täglichen Einsatz hat.

Die »HTTP/2 and SPDY indicator« Erweiterung

Die Erweiterung setzt sich neben die Adresszeile des Browsers und gibt dir anhand der verwendeten Farben Rückmeldung, ob das Protokoll eingesetzt wird oder nicht. Ein blauer Blitz bedeutet, das die Website HTTP/2 aktiv einsetzt. Grau hingegen heißt, das keine Unterstützung vorhanden ist.

Neue Wege gehen bei der Optimierung auf Speed

Die alten Wege der Speed-Optimierung funktionieren bei Einsatz von HTTP/2 nicht mehr, du würdest Potenzial verschenken. Der tägliche Einsatz des Protokolls heißt jedoch nicht, dass keine Dateien mehr zusammengefasst werden sollten, sondern nur, dass genau überlegt werden solle, welche Dateien nicht zusammengefasst werden.

Der mögliche Vorteil des gleichzeitigen Ladens vieler Ressourcen kann auch zu einer langsameren Website führen, wenn nun alle Dateien einfach nicht zusammengefasst und komprimiert werden. JavaScript in einer Datei komprimiert von – zum Beispiel – Autoptimize ausliefern zu lassen resultiert in einer schnelleren Ladezeit, weil die Datei durch optimiertes Caching nur einmal geladen wird, wenn eine entsprechende .htaccess-Datei vorliegt.

Als Optimal hat sich nach extrem vielen Tests mein Weg für fortgeschrittene User zur Speed-Optimierung erwiesen. Hier die Links zur Serie:

• High Speed: Was WordPress-Websites wirklich schnell macht – [#1]
• High Speed: Was WordPress-Websites wirklich schnell macht – [#2]
• High Speed: Was WordPress-Websites wirklich schnell macht – [#3]
• High Speed: Was WordPress-Websites wirklich schnell macht – [#4]
• High Speed: Was WordPress-Websites wirklich schnell macht – [#5]

Fazit

Der Einsatz von HTTP/2 lohnt sich definitiv, auch wenn man ein SSL-Zertifikat für die Website erwerben muss. Ein kostenfreies Zertifikat von Let’s Encrypt ist jedoch auch völlig ausreichend. Der Geschwindigkeitszuwachs kann enorm sein, je nach bereits vorhandenem Konzept für die Geschwindigkeits-Optimierung. Bei stark auf Performance getrimmten Websites, deren Server bereits PHP7 einsetzen, ist der Zuwachs an Speed jedoch nur marginal, trotz Splitting von zu ladenden Dateien.