atimedia_railway

HTTP/2 und der Server-Push

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

Ist der Classic-Editor schon zu kennen? –

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend

Vorab mein Erfahrungswert: Zum HTTP/2 Server Pusch bietet sich das Plug-in 'HTTP2 Server Pusch' 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, die Beschreibung

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:

Recherche und Erfahrungswert

Soweit die technischen 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 resultiernde .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 1000stel Sec Bereich feststellen? – wenn nicht aber 🙂

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

Nächst im Antesten der Website ditmars.bplaced.net/wiki/ ergeht auf jeden Fall ein Schluss. Ob mit oder ohne 'Server Push', die Messwerte* schwanken im Bereich von nur 1000stel Sec (so etwa 0,099 Sec/0,102 Sec). Somit ist kein für und wider feststellbar. Im Heute modernen Servertechnik und Software ist hier 'Server Pusch' hinfällig.

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

… und nochmal im bplaced 'community forum'.

Wenn auch, doch! – testhalber war das folgende Plug-in aktiviert.
Erfahrungswert: Mit bplaced Hosting-Engine braucht es das nicht.

Das im Beitrag erwähnte Plug-in:

Detail

Plug-in http2 Server Push

https://de.wordpress.org/plugins/http2-server-push/

Die Übersetzung der Beschreibung:

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');

… Und wie ist dein Erfolg des Beitrags?