Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

HTTP/2 und der Server Push

Bild, atimedia
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Vorab mein Erfahrungswert: Zum HTTP/2 Server Push bietet sich so Plug-in 'HTTP2 Server Push' an. In Folge des Plug-ins sind im TEST praktisch keine Veränderungen zum PageSpeed festzustellen. Dessen versteht sich der Optimierungen durch HTTP/2, PHP 7 + OP-Cache und evtl. einer Kompri- wie Minimierung von CSS und JavaScript fast von selbst (s. hierzu u. a. auch zum Plug-in Assets CleanUp: Page Speed Booster.). Ist Server Push somit nicht für Allerweltsanwendung geeignet? Mein Beitrag bemüht sich, mit einer Aufzeichnung zum Schluss zu kommen.

Server Pusch, der Beschrieb

Im Rahmen der aufgebauten TCP-Verbindung erfolgen mit 'HTTP/2 Server Push' die Assets automatisch. Die Assets, das sind CSS-Dateien einer Index-Datei und so. Indes ohne Server Push fordert der Browser die Index.html Datei an und im Rahmen dieser Anforderung sendet der Server die Index.html. Der Browser checkt die Datei und sieht dort z. B. in den Meta-Daten diverse angehängte Assets (bspw. CSS-Dateien) und sendet dem Server erneut eine Anfrage. Der Server sendet hiermit auch diese Assets. Das dauert zwar nur wenige Millisekunden, jedoch vergeht eben Ladezeit. Der 'Server-Push' sollte hier Abhilfe schaffen, indem dieser automatisch alle Assets lädt.

Bildliche Darstellung des HTTP/2 Server-Push:

Server Push

Recherche und Erfahrungswert

Soweit die technische Funktionalität von 'HTTP/2 Server Push'. Weitere Hinweise helfen auf die Sprünge:

https://httpd.apache.org/docs/2.4/howto/http2.html#push

Und folgender Link? – ein Must-have:

https://www.smashingmagazine.com/2017/04/guide-http2-server-push/

Dasselbe in Übersetzung: Smashingmag. Guide, http2-Server Push

Daraus die resultierende .htaccess-Regel:

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

Hiermit die Frage an Host-Support bplaced:

Betreff: Anwendung Server Push

Infolge Recherche zum 'HTTP/2 Server Push' meine Frage. Im Rootverzeichnis von wordpress ist der .htaccess-Datei eine Regel einzutragen. Weiter gibt es ein WP-Plug-in für Server Push. Offen gesagt gehe ich aber davon aus, dass der 'Server Push' bei uns ohne weiteres Zutun erfolgt. Es geht also um dessen Info und etwaige Ausführung.

Antwort Support bplaced:

Die Sache wäre an sich vonseiten des CMS anzustoßen, also nicht automatisiert unsererseits, da, wie Du siehst, hier manuell jede betreffende Datei ausgegeben werden müsste.

Wir unterstützen HTTP/2 als solches, allerdings ist der Rest dann vom zuständigen CMS oder eben händisch zu regeln. Geht ja nicht anders 🙂

Aktivieren kannst Du das sonst gerne.

TEST und Workflow

Die Antwort ist aussagekräftig! – somit Selbstvertrauen brechen wir auf zu einem TEST und Erkenntnisse für die Zukunft.

So der .htaccess-Regel war auf Pingdom keine Änderung des Wasserfalls ersichtlich. Hingegen in Anwendung des Plug-ins ist die gleichzeitige Übertragung der Accets dokumentiert. Der Website selbst konnte ich aber keine andere Performanz feststellen, als es modernen Server und deren Software mit PHP 7 + OpCache und entsprechenden Plug-ins aus dem CMS und deren Ergebnisse sind. Eventuell kann man auf neutraler Testumgebung minimale Unterschiede im 100stel sec. Bereich feststellen? – wenn nicht aber 🙂

Im obigen Link 'Must-have' sind zwar entsprechende Tests dabei …

Nach dem Testen der Website ditmars.bplaced.net/wiki/ kann auf jeden Fall eine Schlussfolgerung gezogen werden. Ob mit oder ohne 'Server Push', die Messwerte schwanken lediglich im Bereich von Hundertstelsekunden (ungefähr zwischen 0,099 Sekunden und 0,102 Sekunden). Somit ist keine klare Entscheidung für oder gegen den Einsatz von 'Server Push' möglich. In der heutigen modernen Servertechnik und Software ist 'Server Push' in dieser Hinsicht nicht mehr relevant

* Die Messwerte sind nach PHP-Anwendungen zur Ausführungszeit für PHP-Scripte auf dem Webserver zu verstehen.

… und nochmal im bplaced 'community forum'. – brosentrocken, aber nett 😉


Das im Beitrag erwähnte Plug-in:

Plug-in http2 Server Push

HTTP/2 Server Push

Des Links infolge letzten Aktualisierung sagt fast alles?  – das Plug-in wird nicht mehr gewartet, aber Probieren geht über Studieren.

Detail
So dem Beschrieb des Plug-ins

HTTP/2 ist die neue Generation des ehrwürdigen HTTP-Protokolls, welches das Web antreibt. Zu den leistungsstärksten Funktionen gehört Server-Push. Eine Möglichkeit für Webserver, Ressourcen an den Browser zu senden, bevor sie erkannt sind, dass sie gebraucht werden. Dadurch wird der übliche HTTP-Anforderungs-/Antwortzyklus vermieden, der für jedes Skript oder Stylesheet auf einer Seite aufgetreten ist.

Dieses Plug-in ermöglicht es WordPress, einen Link: <...> rel = "prefetch" -Header für jedes eingereihte Skript und jeden Stil zu senden, wenn WordPress diese in die Seitenquelle ausgibt. Leider können Plug-ins und Themes, die ihre Skripte direkt auf der Seite selbst ausgeben, nicht weiterhelfen. Diese funktionieren weiterhin so, wie sie es immer getan haben.

Erfordert einen Webserver, der HTTP / 2 unterstützt und WordPress 4.6 und höher

Technisches für Entwickler

In WordPress 4.6 wurde die native Unterstützung für Ressourcenhinweise eingeführt. Dieses Plug-in ist standardmäßig für WordPress 4.6- und Theme- / Plug-in-Entwickler vorgesehen, um die richtigen Assets vorab verantwortungsvoll abzurufen und die Websites ausgeführt. Bei älteren Versionen von WordPress erfolgt der Anzeige weiterhin das vorherige Verhalten, bei dem alle JavaScript- und Stylesheets Ressourcenhinweise für sie gedruckt sind.

Ich habe einen Filter hinzugefügt, um das alte Verhalten (alles ankreuzen) in WordPress 4.6 und höher wiederherzustellen. Fügen Sie diese Zeile hinzu, um sie zu verwenden.

Die Datei functions.php Ihres Themas oder ein benutzerdefiniertes Plug-in:

add_filter('http2_render_resource_hints', '__return_true');


Aktualisiert im Jahr 2021-Dezember