5 Möglichkeiten zur Verbesserung der PageSpeed Ihrer Website mithilfe von HTTP / 2
Werbung
HyperText Transfer Protocol Version 2 oder HTTP / 2 ist der neueste Standard von HTTP. Die Aktualisierungen des Protokolls verbessern die Geschwindigkeit, Effizienz und Sicherheit des Webverkehrs. Der Übergang erfolgt jedoch nicht automatisch.
Dieser Artikel soll Ihnen einen Einblick geben, was HTTP / 2 für Sie bedeutet und wie Sie Ihre Website oder Ihren Server so konfigurieren, dass Sie die neuen Funktionen nutzen können.
Was bedeutet HTTP / 2 für Sie?
Für normale Benutzer sind die Änderungen von HTTP / 1.1 zu HTTP / 2 ziemlich unsichtbar.
Alle Browser benötigen ein gültiges TLS-Zertifikat (Transport Layer Security), um Websites über HTTP / 2 zu bedienen. Über das schnellere Laden von Seiten hinaus wird die Sicherheit der Website erhöht.
Für Webdesigner und Eigentümer kann HTTP / 2 die Ladegeschwindigkeit Ihrer Site auf allen Geräten verbessern.
Jeder moderne Browser unterstützt bereits den neuen Protokollstandard (obwohl diese mobilen Browser HTTP / 2 nicht unterstützen). In Fällen, in denen der Browser oder Server HTTP / 2 nicht unterstützt, wird automatisch der HTTP / 1.1-Standard verwendet.
Wie wirkt sich HTTP / 2 auf das Website-Design aus?
Die in HTTP / 2 eingeführten Änderungen wirken sich darauf aus, wie wir Websites und Server im Hinblick auf Effizienz und Geschwindigkeit optimieren.
Mit den in HTTP / 2 eingeführten neuen Funktionen können wir viele der Problemumgehungen und Optimierungstechniken von HTTP / 1 ignorieren. Dazu gehört, dass keine Skripts mehr in HTML eingefügt oder Dateien kombiniert werden, um die Anzahl der Serveranforderungen zu verringern. Domain-Sharding ist ebenfalls nicht mehr sinnvoll.
In einigen Fällen wirken sich diese Problemumgehungen sogar negativ auf die Seitengeschwindigkeit aus, wenn HTTP / 2 bereitgestellt wird.
Der Großteil des Internetverkehrs ist mobil. Berücksichtigen Sie daher die Geschwindigkeit des mobilen Internets und halten Sie Ihre Mediendateien klein und für diese Geräte optimiert. Sie sollten auch weiterhin JavaScript (JS), HTML und CSS minimieren.
Wenn Sie sich nicht sicher sind, warum Sie Ihre Dateien minimieren sollten, lesen Sie zunächst unseren Artikel darüber, wie und warum Sie Ihr JavaScript minimieren sollten. JavaScript-Kompressoren: Wie und warum Sie Ihr JS minimieren JavaScript-Kompressoren: Wie und warum Sie Ihr JS minimieren Das Minimieren Ihres Javascript ist eine Möglichkeit, die Reaktionszeiten von Websites zu verkürzen. Zum Glück ist dies ein einfacher Prozess. Heute zeige ich dir alles, was du wissen musst. Weiterlesen
HTTP-Konzepte, die Sie kennen sollten
Falls Sie mit den Begriffen in diesem Artikel nicht vertraut sind, finden Sie hier eine kurze Einführung
Inlining Script fügt JavaScript mit dem Tag direkt in ein HTML-Dokument ein. In HTML / 1.1 werden dadurch kleine JavaScript-Dateien entfernt, Serveranforderungen reduziert und Skripts schneller geladen.
Die Reduzierung der Anzahl der Dateien ist dank Multiplexing, Stream-Priorisierung und Server-Push für die Seitengeschwindigkeit in HTTP / 2 nicht mehr so wichtig .
Multiplexing ist eine neue Funktion in HTML / 2, die mehrere Datenströme über eine einzige TCP-Verbindung (Transmission Control Protocol) ermöglicht.
Datenströme ist ein HTML / 2-Begriff, der für bidirektionale Datenströme verwendet wird. Wir können jeden Stream anhand seiner eindeutigen Kennung priorisieren, um die Datenlieferung zu optimieren.
Stream-Priorisierung ist eine weitere neue Funktion in HTML / 2. Dies gibt uns die Möglichkeit, einen Server anzuweisen, Ressourcen und Bandbreite priorisierten Datenströmen zuzuweisen. So wird eine optimale Bereitstellung von Inhalten mit hoher Priorität für die Kunden sichergestellt.
Beim Domain-Sharding werden Website-Ressourcen auf mehrere Websites oder Domains aufgeteilt, um die gleichzeitige Download-Beschränkung in HTML / 1.1 zu umgehen .
In HTML / 2 werden durch Multiplexing und Server-Push gleichzeitige Downloads schneller und effizienter ausgeführt als durch Domain-Sharding . Tatsächlich gibt es derzeit keine Unterstützung für die Verwendung dieser Funktionen in mehreren Domänen.
Mit Server Push kann ein Server mehrere Antworten auf eine einzelne Client-Anfrage senden. Kurz gesagt, der Server kann Annahmen darüber treffen, welche Dateien ein Browser zum Laden einer Seite benötigt, ohne dass der Browser dies ausdrücklich anfordert.
Wir werden uns nun auf einige der Änderungen konzentrieren, die Websitebesitzer vornehmen sollten, um Websites für HTTP / 2 zu optimieren. Um einen tieferen Einblick in diese Konzepte zu erhalten, lesen Sie unseren vorherigen Artikel: „Was ist HTTP / 2 und wie wirkt es sich auf die Zukunft des Internets aus? Was ist HTTP / 2 und wie wirkt es sich auf die Zukunft des Internets aus? Was ist HTTP / 2 und wie wirkt es sich auf die Zukunft des Internets aus? Das Internet wird dank des Eintreffens von HTTP / 2 effizienter. Aber was ist das und wie verbessert es sich bei HTTP? Weiterlesen ".
5 Änderungen an der Website für die HTTP / 2-Optimierung
Die wichtigsten Änderungen, die Sie als Website-Inhaber kennen sollten, beziehen sich auf den Umgang mit Website-Ressourcen. Insbesondere in Bezug darauf, wie der Server Ihrer Website mit einem Browser kommuniziert und wie die Dateien übermittelt werden.
Im Folgenden sind die häufigsten Änderungen aufgeführt, die Sie zur Optimierung Ihrer HTTP / 2-Website berücksichtigen sollten.
1. Kombinieren Sie nicht Ihr CSS oder JavaScript
Sie sollten Ihre Website-Ressourcen nicht länger verketten oder kombinieren. In HTTP / 1.1 wird dadurch die Anzahl der HTTP-Anforderungen reduziert und es müssen Dateien heruntergeladen werden, um Ihre Website anzuzeigen.
Jede HTTP-Anforderung führt zu einer längeren Wartezeit. Daher ist das Herunterladen einer einzelnen Datei in HTTP / 1.1 häufig effizienter als das Herunterladen mehrerer Dateien. Weniger Dateien helfen auch dabei, das Limit für gleichzeitige Downloads in HTTP / 1.1 zu umgehen.
Da HTTP / 2 mehrere Downloads ohne mehrere Serveranforderungen ermöglicht, ist die Anzahl der Dateien bei der Optimierung der Geschwindigkeit weniger wichtig. In Kombination mit Caching sind bestimmte Dateien in HTTP / 2 besser.
Mit spezifischeren Dateien können Sie den größten Teil Ihrer Website über Ihr Content Delivery Network (CDN) und den Browser-Cache des Benutzers bedienen. Dies bedeutet auch, dass der Browser keine große Datei von Ihrem Server herunterladen und analysieren muss, wenn Sie kleinere Änderungen an Ihrer Website vornehmen.
2. Inline-Skripte nicht in HTML einfügen
Das Einbetten von CSS- und JS-Dateien in Ihr HTML-Dokument beschleunigt das Laden von Seiten in HTTP / 1.1. Wie beim Kombinieren von Dateien werden die Anzahl der Dateien und die Anzahl der Serveranforderungen reduziert.
Durch das Inlinen von Skripten in HTML unter Verwendung von HTTP / 2 wird die Optimierung der Seitengeschwindigkeit durch das Zwischenspeichern verringert, indem die Fähigkeit eines Browsers, Elemente einzeln zwischenzuspeichern, entfernt wird.
Darüber hinaus wird jede Verbesserung durch die Stream-Priorisierung zunichte gemacht, da alle eingebetteten Skripte und Inhalte dieselbe Priorität wie Ihre HTML-Inhalte erhalten.
Nutzen Sie Multiplexing und Server-Push, anstatt Ressourcen zu inlinen, um HTTP-Anforderungen zu reduzieren. Dadurch können Browser mit weniger Anforderungen mehr Ressourcen herunterladen und die Ladegeschwindigkeit Ihrer Seite verbessern.
Kurz gesagt, halten Sie Ihre Ressourcen möglichst getrennt und klein.
3. Verwenden Sie keine CSS-Image-Sprites mehr
Image Sprites sind Bilder, die aus vielen kleineren Bildern bestehen (wie das obige). CSS legt dann fest, welche Bereiche des Bildes angezeigt werden sollen.
Wie bei den meisten HTTP / 1.1-Problemumgehungen verwenden wir Image-Sprites zum Teil, um Serveranforderungen zu reduzieren. In HTTP / 2 können Sie problemlos separate Bilder verwenden, ohne die Ladegeschwindigkeit Ihrer Seite zu beeinträchtigen.
Kleinere Dateien werden dank Multiplexing und Server-Push schneller und effizienter heruntergeladen.
4. Verwenden Sie kein Domain-Sharding
Domain-Sharding wird verwendet, um die Einschränkungen beim gleichzeitigen Herunterladen in HTTP / 1 zu umgehen. Diese Beschränkung liegt normalerweise zwischen vier und acht pro Domäne und wird von Browsern zum Teil festgelegt, um DDOS-Angriffe zu reduzieren.
Wenn Sie Ihre Website beispielsweise auf vier Domänen verteilen, können Sie theoretisch in einem Viertel der Zeit Ressourcen in HTTP / 1.1 bereitstellen.
Dank des Multiplexing von HTTP / 2 ist kein Domain-Sharding mehr erforderlich.
Beachten Sie, dass Browser Multiplexing und parallele Downloads über mehrere Domänen in HTTP / 2 nicht nutzen können. Sharding unterbricht auch die Stream-Priorisierung von HTTP / 2, wodurch die Vorteile der Verwendung von HTTP / 2 weiter verringert werden.
5. Nutzen Sie Server Push
Möglicherweise ist die bedeutendste Verbesserung von HTTP / 2 der Server-Push.
Wenn Sie in HTTP / 1.1 das Anzeigen einer Seite anfordern, sendet der Server zuerst das HTML-Dokument. Ihr Browser beginnt dann mit der Syntaxanalyse und fordert CSS-, JS- und Mediendateien an, auf die im Dokument verwiesen wird.
In HTTP / 2 ermöglicht Server-Push einem Server, die erforderlichen Ressourcen an einen Browser zu senden, ohne dass eine separate Anforderung dafür erforderlich ist. Dies umfasst CSS- und JavaScript-Dateien sowie Medien, reduziert HTTP-Anforderungen und beschleunigt das Laden von Seiten.
Das Smashing Magazine bietet einen umfassenden Leitfaden zu HTTP / 2 Server Push mit Informationen zur Funktionsweise und Aktivierung.
So konfigurieren Sie Ihren Server für HTTP / 2
Die meisten Serverimplementierungen unterstützen bereits HTTP / 2. Wenn Sie jedoch einen gemeinsam genutzten Host verwenden, müssen Sie bei Ihrem Serveradministrator nachfragen, ob dieser HTTP / 2 aktiviert hat. Wenn Sie neugierig sind, bietet GitHub eine Liste von Serverimplementierungen, die HTTP / 2 unterstützen.
Nginx-Server unterstützen HTTP / 2 nativ, während Sie möglicherweise Apache-Server konfigurieren müssen, um die HTTP / 2-Unterstützung zu aktivieren.
Wenn Ihre Website HTTPS-fähig ist (eine HTTP / 2-Anforderung), können Sie unter http2.pro überprüfen, ob Ihre Website mit HTTP / 2 ausgeliefert wird. Wenn Sie jedoch Cloudflare als CDN verwenden, werden alle Inhalte von ihren Servern über HTTP / 2 bereitgestellt, ohne dass Sie Änderungen vornehmen müssen.
WordPress-spezifische Hosts beschränken manchmal die Konfigurationsänderungen, die Sie vornehmen können, insbesondere in ihren Diensten der unteren Ebene. Trotzdem empfehlen wir Bluehost für Ihre WordPress-Sites. Bluehost bietet kostenloses SSL und CDN und bedient Ihre Websites über HTTP / 2.
HTTP / 2 ist nur der erste Schritt
HTTP / 2 ist eine enorme Verbesserung gegenüber dem vorherigen Standard, und Sie sollten jetzt einen Einblick in die Vorteile erhalten, die Sie durch die Implementierung erzielen können.
Aktivierte Websites werden schneller und sicherer geladen, wodurch sich auch Ihre Suchrankings verbessern. HTTP / 3 ist bereits auf dem Weg und durch die Konfiguration Ihrer Website für HTTP / 2 wird Ihr möglicher Sprung zu HTTP / 3 viel reibungsloser.
Über das Einrichten Ihrer Website für HTTP / 2 hinaus sollten Sie auch die folgenden Methoden verwenden, um das Laden Ihrer Website zu beschleunigen. 7 Möglichkeiten, um das Laden Ihrer Website oder Ihres Blogs für Besucher zu beschleunigen. 7 Möglichkeiten, um das Laden Ihrer Website oder Ihres Blogs für Besucher zu beschleunigen Top-Tipps, um Ihre Website zu beschleunigen und sicherzustellen, dass Ihre Besucher dabei bleiben. Weiterlesen .
Erfahren Sie mehr über: HTTP / 2, Webentwicklung.
