Onlineshop-Ladezeiten beschleunigen mit HTTP/2

Angestoßen durch ein gemeinsames Kundenprojekt baten wir die maxcluster GmbH aus Paderborn um einen Gastbeitrag darüber, wie sich die Performance eines Magento-Shops durch die Umstellung auf HTTP/2 steigern lässt. Maxcluster hat sich auf skalierbare und hoch performante Managed Web Cluster für Online Shops und andere Ecommerce-Anwendungen mit dem besonderen Fokus auf Magento spezialisiert. Für den Beitrag setzte sich Jonas Hünig an den Schreibtisch. Wir wünschen viel "aha" bei der Lektüre!

maxcluster-Rakete

Das neue Protokoll HTTP/2 wird bereits von vielen Browsern unterstützt. Damit Betreiber von Onlineshops die Vorteile von HTTP/2 ebenfalls nutzen können, müssen sie ihre Webserver entsprechend konfigurieren.

Was ist HTTP/2?

HTTP/2 ist die Weiterentwicklung des sogenannten Hypertext Transfer Protocol (HTTP). Es handelt sich um ein Übertragungsprotokoll, welches die Kommunikation zwischen dem Internetbrowser und dem Webserver ermöglicht. Dabei wird der Inhalt einer Webseite als Hypertext an den Browser übermittelt, welcher ihn dann als Text, Bild oder Video wiedergibt.

Welche Vorteile bringt HTTP2?

Im Vergleich zu HTTP/1 bietet das neue Protokoll einige Vorteile. Der größte Gewinn besteht sicherlich in der schnelleren Auslieferung von Webseiten:

Kommunikation über eine einzige Verbindung

Für die HTTP/1-Kommunikation öffnet der Browser für jede einzelne Anfrage eine eigene TCP-Verbindung. Dies erhöht den Datenverkehr. Anders bei HTTP/2: Bei der Kommunikation zwischen Server und Browser werden mehrere Anfragen zusammengefasst und über eine einzige TCP-Verbindung verschickt. Dabei werden die Daten in TCP-Paketen geladen. Das Laden der Anfragen geschieht außerdem sequenziell und zwar nach der Priorität, die der Browser dem Server vorgibt. Dies beschleunigt die Seitenübertragung, was zu wesentlich besseren Ladezeiten der gesamten Webseite unter HTTP/2 führt.

HTTP-Header werden komprimiert

Die HTTP-Header enthalten viele wichtige Zusatzinformationen, die unter HTTP/1 ein großes Datenvolumen erzeugen. Mit HTTP/2 lassen sich die Header komprimieren. Dadurch verringert sich der Datenverkehr und die Geschwindigkeit der Datenübertragung wird beschleunigt.

Server Push

Unter HTTP/2 kann die Datenübertragung teilweise vom Server initiiert werden. Das heißt: Der Server reagiert im Push-Verfahren proaktiv auf vorhersehbare Anfragen des Browsers. Dies ermöglicht das Laden von Inhalten noch vor dem eigentlichen Seitenaufruf. Wird die Seite dann aufgerufen, sind die Ladezeiten entsprechend kurz.

Keine alternativen Methoden

Unter HTTP/1 wurden alternative Methoden entwickelt, die die Nachteile des alten Protokolls kompensieren sollten. So zum Beispiel CSS-Sprites, Code-Inlining oder Domain-Sharding. Diese werden unter HTTP/2 unnötig und können komplett entfallen.

Fazit: Letztendlich bleibt festzuhalten, dass die Optimierungen bei HTTP/2 einen enormen Performancevorteil bringen.

HTTP/2 und Debian 8 im Hosting Setup - was ist dabei zu beachten?

Um HTTP/2 nutzen zu können, müssen einige Voraussetzungen erfüllt sein. In erster Linie müssen sowohl der Webserver als auch der Browser HTTP/2 unterstützen. Die gängigen Browser sind bereits seit 2015 auf HTTP/2 vorbereitet. Bedingung ist allerdings, dass die Verbindung mit SSL bzw. TLS verschlüsselt ist. Der Endanwender sollte außerdem seinen Browser auf die neueste Version updaten, damit HTTP/2 genutzt werden kann. In der folgenden Tabelle werden verschiedene Browser und ihre Kompatibilität dargestellt:

Browserkompatibilität für HTTP/2 nach caniuse.com

Quelle: caniuse.com, 2017

Nicht alle Webserver unterstützen das neue Protokoll. Doch gängige Webserver wie NGINX und Appache haben die HTTP/2-Unterstützung in ihren neuen Versionen bereits integriert: NGINX ab Version 1.9.5 und Apache ab 2.4.17. Voraussetzung für die Nutzung von HTTP/2 ist außerdem die Installation von OpenSSL ab Version 1.0.2 für NGINX und Apache.

Debian mit HTTP/2 nutzen

Debian ist ein freies Betriebssystem, welches in der europäischen Region am weitesten verbreitet ist. In der noch gängigen Version 8 ist es nicht mit HTTP/2 kompatibel. Der Nachfolger Debian 9 dagegen, der im Juni 2017 veröffentlicht wurde, unterstützt HTTP/2. Allerdings ist ein Wechsel auf Debian 9 aktuell für viele Nutzer noch nicht wirtschaftlich: Zum einen ist die Umstellung auf eine neue Debian Version mit viel Aufwand verbunden. Zum anderen hat der Debian-8-Nutzer keine Eile. Da neue Versionen in der ersten Zeit nach ihrem Erscheinen häufig den einen oder anderen Bug enthalten, warten viele Nutzer bis die gröbsten Fehler beseitigt wurden. Im Fall von Debian 8 steht dem Nutzer viel Zeit zur Verfügung, denn der technische Support endet für diese Version erst im April 2020. In der Ecommerce-Branche ist das Update von Server-Betriebssystemen immer ein aufwändiger Prozess, weshalb nicht zuletzt aus wirtschaftlichen Gründen oft Versionen übersprungen werden.

Wie findet man den Kompromiss zwischen moderner Technik und Wirtschaftlichkeit?

Als Ecommerce-Hoster ist es maxcluster wichtig, seinen Kunden möglichst wirtschafliche Lösungen und deshalb HTTP/2 auch in Verbindung mit Debian 8 anzubieten. Aus diesem Grunde haben wir eine Alternative evaluiert, mit welcher HTTP/2 auch mit Debian 8 funktioniert – ohne ein aufwändiges und kostenintensives Upgrade auf Debian 9 durchführen zu müssen. Wir verwenden die Pakete aus den Debian Repositories, damit wir immer in einem Rhythmus von einem Monat Sicherheitspatches einspielen können. Dabei werden die Apache- und NGINX-Webserver von Debian 9 zusammen mit den benötigten Versionen von OpenSSL unter Debian 8 installiert. Da die OpenSSL-Bibliotheken parallel installiert werden können, gibt es hier keine Schwierigkeiten mit der bereits installierten Version 8. Dadurch lassen sich auch auf Basis von Debian 8 Softwarepakete aus Debian-Version 9 auf dem Server installieren, die für HTTP/2 erforderlich sind, ohne ein Abhängigkeitsproblem zu bekommen. Auch für die nötigen Sicherheitsupdates von Apache, NGINX und Debian 9 ist über die Debian 9 Repositories gesorgt.

Welche Voraussetzungen müssen für Magento erfüllt sein?

Um HTTP/2 verwenden zu können, benötigt Magento keine zusätzlichen Konfigurationen. Es wird allerdings empfohlen, die Funktion zum Zusammenfügen von JavaScript und CSS zu deaktivieren. Diese wird durch das Multiplexing von HTTP/2 (die Kommunikation über einen einzigen Kanal) überflüssig.

Gibt es Nachteile bei HTTP2? Welche Aufwände entstehen?

Bei HTTP/2 gibt es im Grunde genommen keine Nachteile, es müssen lediglich die beschriebenen Voraussetzungen erfüllt werden. Der Aufwand besteht darin, die notwendigen Versionen des Webserver Apache und NGINX zu installieren. Je nach Webserver muss im Anschluss nur noch HTTP/2 aktiviert werden. Dieses unterscheidet sich leicht nach Webserver. Im Fall von Apache muss beispielsweise das Modul mod_http2 aktiviert und anschließend das HTTP/2-Protokoll eingeschaltet werden. Diesen gesamten Prozess haben wir automatisiert.

Fazit

HTTP/2 bietet klare Performance-Vorteile auf allen Seiten, für den Besucher des Onlineshops ebenso wie für den Shopbetreiber. Die Webseiten werden ohne viel Aufwand schneller ausgeliefert. Als Hoster haben wir das Feedback von unseren Onlineshopbetreibern bekommen, dass die Conversionrate nach der Umstellung auf HTTP/2 steigt.

Über den Autor

Jonas ist zertifizierter Magento-Entwickler und Systemadministrator bei maxcluster in Paderborn. Er unterstützt die Kunden bei der Integration von Onlineshops in die Managed-Hosting-Architektur. Des Weiteren übernimmt er zahlreiche Projekte zur Optimierung der Performance von Onlineshops. Er evaluierte beispielsweise das Projekt, HTTP/2 für Apache und NGINX unter Debian 8 einsatzbereit zu machen. Weitere Beiträge von Jonas finden sich im Blog von maxcluster.

Autor: Kategorie: Webentwicklung
Schlagwörter: Magento, Wissen

1. Klick aktiviert Social Button

2. Klick führt entsprechende Funktion aus (Empfehlen, Tweet)

YTo2OntzOjY6ImZldXNlciI7aTowO3M6MzoicGlkIjtpOjk3O3M6MzoiY2lkIjtpOjEwOTcxMjQzMTU7czo0OiJjb25mIjthOjEwOntzOjEwOiJzdG9yYWdlUGlkIjtpOjEyNDtzOjE0OiJleHRlcm5hbFByZWZpeCI7czoxMToidHhfbmV3c19waTEiO3M6MTM6IlVzZXJJbWFnZVNpemUiO2k6MTg7czo5OiJhZHZhbmNlZC4iO2E6MTp7czoyMToic2hvd0NvdW50Q29tbWVudFZpZXdzIjtpOjA7fXM6ODoic2hhcmluZy4iO2E6MTp7czoxMjoidXNlU2hhcmVJY29uIjtOO31zOjg6InJhdGluZ3MuIjthOjM6e3M6MTY6InJhdGluZ0ltYWdlV2lkdGgiO2k6MTE7czoxNjoicmV2aWV3SW1hZ2VXaWR0aCI7aToxNjtzOjg6Im1vZGVwbHVzIjtzOjQ6ImF1dG8iO31zOjY6InRoZW1lLiI7YTo3OntzOjI2OiJib3htb2RlbFRleHRhcmVhTGluZUhlaWdodCI7aTozMDtzOjI0OiJib3htb2RlbFRleHRhcmVhTmJyTGluZXMiO2k6NDtzOjE1OiJib3htb2RlbFNwYWNpbmciO2k6MTA7czoxODoiYm94bW9kZWxMaW5lSGVpZ2h0IjtpOjIwO3M6MTg6ImJveG1vZGVsTGFiZWxXaWR0aCI7aToxMzQ7czoyNjoiYm94bW9kZWxMYWJlbElucHV0UHJlc2VydmUiO2k6MTtzOjIyOiJib3htb2RlbElucHV0RmllbGRTaXplIjtpOjM1O31zOjE3OiJwcmVmaXhUb1RhYmxlTWFwLiI7YToxMDp7czoxNDoidHhfYWxidW0zeF9waTEiO3M6MTc6InR4X2FsYnVtM3hfaW1hZ2VzIjtzOjE1OiJ0eF9jb21tZXJjZV9waTEiO3M6MjA6InR4X2NvbW1lcmNlX3Byb2R1Y3RzIjtzOjEyOiJ0eF9pcmZhcV9waTEiO3M6MTA6InR4X2lyZmFxX3EiO3M6MTU6InR4X21pbmluZXdzX3BpMSI7czoxNjoidHhfbWluaW5ld3NfbmV3cyI7czo5OiJ0eF90dG5ld3MiO3M6NzoidHRfbmV3cyI7czoxMToidHRfcHJvZHVjdHMiO3M6MTE6InR0X3Byb2R1Y3RzIjtzOjI0OiJ0eF93ZWNzdGFmZmRpcmVjdG9yeV9waTEiO3M6MjU6InR4X3dlY3N0YWZmZGlyZWN0b3J5X2luZm8iO3M6MTI6InR4X2NvbW11bml0eSI7czo4OiJmZV91c2VycyI7czoxOToidHhfY3d0Y29tbXVuaXR5X3BpMSI7czo4OiJmZV91c2VycyI7czoxMToidHhfbmV3c19waTEiO3M6MjU6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3MiO31zOjExOiJzaG93VWlkTWFwLiI7YTo1OntzOjk6InR4X3R0bmV3cyI7czo3OiJ0dF9uZXdzIjtzOjExOiJ0dF9wcm9kdWN0cyI7czo3OiJwcm9kdWN0IjtzOjEyOiJ0eF9jb21tdW5pdHkiO3M6NDoidXNlciI7czoxOToidHhfY3d0Y29tbXVuaXR5X3BpMSI7czoyNToiYWN0aW9uPWdldHZpZXdwcm9maWxlJnVpZCI7czoxMToidHhfbmV3c19waTEiO3M6NDoibmV3cyI7fXM6MTI6IlJlcXVpcmVkTWFyayI7czoxOiIqIjt9czo0OiJsYW5nIjtzOjI6ImRlIjtzOjM6InJlZiI7czoyOToidHhfbmV3c19kb21haW5fbW9kZWxfbmV3c18zMTUiO30%3DYTo0OntzOjQ6ImNvbmYiO2E6MzU6e3M6MTc6InVzZVdlYnBhZ2VQcmV2aWV3IjtzOjE6IjEiO3M6MjI6InVzZVdlYnBhZ2VWaWRlb1ByZXZpZXciO3M6MToiMSI7czoyMDoid2VicGFnZVByZXZpZXdIZWlnaHQiO3M6MjoiNzAiO3M6MjA6Im1heENoYXJzUHJldmlld1RpdGxlIjtzOjI6IjcwIjtzOjMxOiJ3ZWJwYWdlUHJldmlld0Rlc2NyaXB0aW9uTGVuZ3RoIjtzOjM6IjE2MCI7czozODoid2VicGFnZVByZXZpZXdEZXNjcmlwdGlvbk1pbmltYWxMZW5ndGgiO3M6MjoiNjAiO3M6Mjc6IndlYnBhZ2VQcmV2aWV3Q2FjaGVUaW1lUGFnZSI7czozOiIxODAiO3M6MzM6IndlYnBhZ2VQcmV2aWV3Q2FjaGVUaW1lVGVtcEltYWdlcyI7czoyOiI2MCI7czozMDoid2VicGFnZVByZXZpZXdDYWNoZUNsZWFyTWFudWFsIjtzOjE6IjAiO3M6Mjg6IndlYnBhZ2VQcmV2aWV3TnVtYmVyT2ZJbWFnZXMiO3M6MjoiMTAiO3M6Mzg6IndlYnBhZ2VQcmV2aWV3U2Nhbk1pbmltYWxJbWFnZUZpbGVTaXplIjtzOjQ6IjE1MDAiO3M6MzA6IndlYnBhZ2VQcmV2aWV3U2Nhbk1pbkltYWdlU2l6ZSI7czoyOiI0MCI7czozMDoid2VicGFnZVByZXZpZXdTY2FuTWF4SW1hZ2VTaXplIjtzOjM6IjQ1MCI7czoyOToid2VicGFnZVByZXZpZXdTY2FuTWluTG9nb1NpemUiO3M6MjoiMzAiO3M6MzE6IndlYnBhZ2VQcmV2aWV3U2Nhbk1heEltYWdlU2NhbnMiO3M6MjoiNDAiO3M6Mzg6IndlYnBhZ2VQcmV2aWV3U2Nhbk1heEltYWdlU2NhbnNGb3JMb2dvIjtzOjI6IjU1IjtzOjQwOiJ3ZWJwYWdlUHJldmlld1NjYW5NYXhIb3J6aXpvbnRhbFJlbGF0aW9uIjtzOjI6IjU7IjtzOjM3OiJ3ZWJwYWdlUHJldmlld1NjYW5tYXh2ZXJ0aWNhbHJlbGF0aW9uIjtzOjE6IjMiO3M6MzA6IndlYnBhZ2VQcmV2aWV3U2NhbkxvZ29QYXR0ZXJucyI7czoxMDoibG9nbyxjcmdodCI7czozODoid2VicGFnZVByZXZpZXdTY2FuRXhjbHVkZUltYWdlUGF0dGVybnMiO3M6NTc6InBpeGVsdHJhbnMsc3BhY2VyLHlvdXR1YmUscmNsb2dvcyx3aGl0ZSx0cmFuc3BhLGJnX3RlYXNlciI7czozODoid2VicGFnZVByZXZpZXdEZXNjcmlwdGlvblBvcnRpb25MZW5ndGgiO3M6MjoiNDAiO3M6MjU6IndlYnBhZ2VQcmV2aWV3Q3VybFRpbWVvdXQiO3M6NDoiNzAwMCI7czoxMjoidXNlUGljVXBsb2FkIjtzOjE6IjAiO3M6MTI6InVzZVBkZlVwbG9hZCI7czoxOiIwIjtzOjEzOiJwaWNVcGxvYWREaW1zIjtzOjM6IjEwMCI7czoxNjoicGljVXBsb2FkTWF4RGltWCI7czozOiI4MDAiO3M6MTY6InBpY1VwbG9hZE1heERpbVkiO3M6MzoiOTAwIjtzOjIyOiJwaWNVcGxvYWRNYXhEaW1XZWJwYWdlIjtzOjM6IjQ3MCI7czoyMzoicGljVXBsb2FkTWF4RGltWVdlYnBhZ2UiO3M6MzoiMzAwIjtzOjIwOiJwaWNVcGxvYWRNYXhmaWxlc2l6ZSI7czo0OiIyNTAwIjtzOjIwOiJwZGZVcGxvYWRNYXhmaWxlc2l6ZSI7czo0OiIzMDAwIjtzOjE4OiJzb3VuZGNsb3VkQ2xpZW50SUQiO3M6MDoiIjtzOjIyOiJzb3VuZGNsb3VkQ2xpZW50U2VjcmV0IjtzOjA6IiI7czoyMDoidXNlVG9wV2VicGFnZVByZXZpZXciO3M6MDoiIjtzOjI0OiJ0b3BXZWJwYWdlUHJldmlld1BpY3R1cmUiO2k6MDt9czoxMToiYXdhaXRnb29nbGUiO3M6Mjg6IldhcnRlIGF1ZiBBbnR3b3J0IHZvbiBHb29nbGUiO3M6ODoidHh0aW1hZ2UiO3M6MTM6IkJpbGQgZ2VmdW5kZW4iO3M6OToidHh0aW1hZ2VzIjtzOjE1OiJCaWxkZXIgZ2VmdW5kZW4iO30%3DYTowOnt9YTowOnt9YTo3OntzOjE2OiJjb21tZW50TGlzdEluZGV4IjthOjE6e3M6MzI6ImNpZHR4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMzE1IjthOjE6e3M6MTA6InN0YXJ0SW5kZXgiO2k6MTU7fX1zOjE0OiJjb21tZW50c1BhZ2VJZCI7aTo5NztzOjE2OiJjb21tZW50TGlzdENvdW50IjtpOjEwOTcxMjQzMTU7czoxMjoiYWN0aXZlbGFuZ2lkIjtpOjA7czoxNzoiY29tbWVudExpc3RSZWNvcmQiO3M6Mjk6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMzE1IjtzOjEyOiJmaW5kYW5jaG9yb2siO3M6MToiMCI7czoxMjoibmV3Y29tbWVudGlkIjtOO30%3D YTo1OntzOjExOiJleHRlcm5hbFVpZCI7aTozMTU7czoxMjoic2hvd1VpZFBhcmFtIjtzOjQ6Im5ld3MiO3M6MTY6ImZvcmVpZ25UYWJsZU5hbWUiO3M6MjU6InR4X25ld3NfZG9tYWluX21vZGVsX25ld3MiO3M6NToid2hlcmUiO3M6MTcwOiJhcHByb3ZlZD0xIEFORCBleHRlcm5hbF9yZWY9J3R4X25ld3NfZG9tYWluX21vZGVsX25ld3NfMzE1JyBBTkQgcGlkPTEyNCBBTkQgdHhfdG9jdG9jX2NvbW1lbnRzX2NvbW1lbnRzLmRlbGV0ZWQ9MCBBTkQgdHhfdG9jdG9jX2NvbW1lbnRzX2NvbW1lbnRzLmhpZGRlbj0wIEFORCBwYXJlbnR1aWQ9MCI7czoxMDoid2hlcmVfZHBjayI7czoxMzk6ImV4dGVybmFsX3JlZj0ndHhfbmV3c19kb21haW5fbW9kZWxfbmV3c18zMTUnIEFORCBwaWQ9MTI0IEFORCB0eF90b2N0b2NfY29tbWVudHNfY29tbWVudHMuZGVsZXRlZD0wIEFORCB0eF90b2N0b2NfY29tbWVudHNfY29tbWVudHMuaGlkZGVuPTAiO30%3D YToyOntpOjA7czoxNDk6IjxpbWcgc3JjPSIvdHlwbzNjb25mL2V4dC90b2N0b2NfY29tbWVudHMvcmVzL2Nzcy90aGVtZXMvdHVkb2NrL2ltZy9wcm9maWxlLnBuZyIgY2xhc3M9InR4LXRjLXVzZXJwaWMgdHgtdGMtdWltZ3NpemUiIHRpdGxlPSIiICBpZD0idHgtdGMtY3RzLWltZy0iIC8%2BIjtpOjk5OTk5O3M6MTUxOiI8aW1nIHNyYz0iL3R5cG8zY29uZi9leHQvdG9jdG9jX2NvbW1lbnRzL3Jlcy9jc3MvdGhlbWVzL3R1ZG9jay9pbWcvcHJvZmlsZWYucG5nIiBjbGFzcz0idHgtdGMtdXNlcnBpY2YgdHgtdGMtdWltZ3NpemUiIHRpdGxlPSIiICBpZD0idHgtdGMtY3RzLWltZy0iIC8%2BIjt9
Bitte bestätigen Sie
Nein
Ja
Information
Ok
Vorschau wird geladen ...
* Pflichtfeld
Ihr Kommentar ist eine Antwort auf den folgenden Kommentar

E-Commerce & Webentwicklung: Wir realisieren und optimieren Internetprojekte. Unser Fachgebiet sind Onlineshops, Rich Internet Applications und anspruchsvolle Onlineauftritte. Über unsere Arbeit schreiben wir. Hier im Blog von TUDOCK.