Test Jetpack Boost und IndexReloaded

Wir haben uns entschlossen bestehende verbreitete WordPress Plugins mit dem Ziel die Webpageperformance zu verbessern, zu testen.

Das erste in der Reihe ist das Plugin Jetpack Boost in Version 3.3.1.
Das Plugin hat über 300’000 aktive Installationen und wurde in 29 Sprachen übersetzt.
Mit rund 4000 Downloads täglich übertrifft die Popularität dieses Plugins diese vom noch neuen und unbekannten Plugin IndexReloaded regelrecht masslos.

Wir haben uns bei diesem Test auf die JS- und CSS-Features fokussiert. Dabei haben wir den HTML-Quellcode und die Resultate im Inspektor von Google Chrome genutzt um einen Eindruck zur gewählten Technik zu erhalten – wie gesagt auf JS und CSS fokussiert.

Jetpack Boost bietet für JS und CSS-Verarbeitung je 2 Optionen an.
Für JS sind das „JS verketten“ und „Verzögern von nicht essenziellem JavaScript“.
Für CSS sind es „CSS verketten“ und „Laden von kritischem CSS optimieren (manuell)“. In der kostenfreien Version muss das Critical CSS (CCSS) manuell über das Backend generiert werden, die kostenpflichtige Version erstellt CCSS automatisiert.

Unsere Test-Website verwendet das Inpirio-Theme und nutzt WooCommerce, mit neuster WordPress Version und PHP 8.1.

Zur Tabelle Testübersicht

Test JavaScript-Features

Die Tests der JS-Optionen „JS verketten“ und zusätzlichem „Verzögertem Laden von JS“ verliefen erfolgreich im Sinne, daß dabei keine Javascript-Fehler entstanden sind.

Im HTML-Quelltext sieht man, dass alle Inline-JS belassen wurden, auch eine JS-Datei von Elementor wurde aus der Verarbeitung beim „JS verketten“ ausgelassen.
Das über Dateien verlinkte JS wird zusammengefasst und über 2 neue JS-Links in die Webseite eingespeist.

Es sind jedoch keine Links auf Files sondern es sind sogenannte Cgi-Links, die eine 2te Serverantwort auslösen (in diesem Fall 2 weitere).
Wir messen pro Link eine Server-seitige Verarbeitungszeit von 50ms.
Diese Art JS in eine Webseite einzuspeisen, quittiert das Pagespeed Insight-Testtool mit einer Nachricht über „nicht cachable ressources“: „Serve static assets with an efficient cache policy 2 resources found“.

Das „Verzögertem Laden von JS“ ist gut umgesetzt, bei Problemen kann das einfach ausgeschaltet werden und die Site funktioniert weiter

So kann gesagt werden, dass Jetpack Boost bei der Verarbeitung von JS kaum patzt. Mit File-Links, statt den Cgi-calls, könnte Jetpack Boost 10 auf 10 für die JS-Verarbeitung erhalten. So ist 9 von 10 richtig.

Test CSS-Features

Der Test CSS-Features begann mit einer Enttäuschung beim „CSS verketten“ – Jetpack Boost verursacht eine Änderung beim Display der Menueinträge, die nun neu mit „underline“ angezeigt werden.

Wie auch dem Verketten von JS werden Inline-styles von der Verkettung ausgeschlossen. Auch das Resultat der Verkettung wird analog zur Art und Weise, die beim JS-Verketten genutzt wird, ausgegeben.

Diese Links sind so gehalten, dass sie von Pagespeed Insight als „deferred“ gewichtet werden.
Dazu wird das folgende HTML eingesetzt:

type='text/css' media="not all" data-media="all" onload="this.media=this.dataset.media; delete this.dataset.media; this.removeAttribute( 'onload' );"

Das funktioniert grundsätzlich ganz gut.
Das Problem mit dem falschen Display der Menüeinträge kommt nach unserer Einschätzung davon, daß eine Änderung der Sequenzierung von CSS-Selektoren vorliegt, was beim Ausschluß von Inline-CSS gut möglich ist.

Die Option „Critical CSS“ ist ohne Einfluss auf des Display des Webseitendesigns. Wir erreichten ein korrektes Pagedisplay mit aktivierem „Critical CSS“ und desaktiviertem „CSS verketten“.

Das Critical CSS fügt Jetpack Boost dabei als Inline-CSS gleich nach dem Metatag für den „viewport“ ein. Also quasi an erster Stelle im head des HTML-Quelltextes.
Weiteres Inline-CSS bleibt unverändert.
Links auf CSS-Dateien werden in <noscript>-tags eingebettet, ein paar davon werden unverändert, aber verzögert geladen.
Damit wird auf der Testtool-Website Pagespeed Insights erricht, daß „render-blocking elements“ komplett eliminiert werden.

Die Untersuchung im Coveragetool von Chrome des von Jetpack Boost generierten Critical CSS ergibt eine geringe Coverage für das Critical CSS.
Das entspricht nicht dem eigentlichen Sinn von Critical CSS und deutet auf eine Produktionslogik für CCSS hin, die qualitativ ungenügend ist.
Es fügt sich hinzu, dass die Coverage der verzögert geladenen CSS-Dateien Critical CSS enthalten, also CSS das nicht verzögert geladen werden sollte.

Jetpack Boost patzt beim Critical CSS.
Das Verketten von CSS kann, muss aber nicht funktionieren.
Mit 3 auf 10 möglichen Punkten für die CSS-Verarbeitung sind wir etwas enttäuscht.

Fazit des Tests

Jetpack Boost kann über seine Option für JS und CSS zu einem konsistenten und verbesserten Performancegewinn führen, den Pagespeed Insight auch entsprechend quittiert.
Allerdings muß das Feature Critical CSS als inkorrekt implementiert beurteilt werden.
Es entsteht durch die Ausgabe von JS und CSS via Cgi eine etwas höhere Serverlast.

Wir würden Jetpack Boost, unter genannten Vorbehalten aber klar weiterempfehlen … würden wir IndexReloaded nicht kennen.

IndexReloaded und JS

Mit IndexReloaded wird versucht Inline JS und JS aus Filelinks zusammenzufassen.
Als Ziel gilt, dieses so zusammengefasste JS als verzögert geladene JS-Datei am Ende des HTML-Quellcodes einzufügen.
Der Challenge, den IndexReloaded so angeht – ohne Fehler in der JavaScript-Konsole zu bestehen – ist deshalb maximal gehalten.
Über die Excludes-Liste können JS-Teile von dieser Verarbeitung ausgeschlossen werden.
Eine Excludes-Liste für JS bietet auch Jetpack Boost an, diese kommt allerdings weniger zum Einsatz, bis das Plugin fehlerfreies JS ausgibt.
Punkto Einfachheit beim Installieren ist Jetpack Boost besser geeignet als IndexReloaded.
Punkto Präzision übertrifft IndexReloaded Jetpack Boost – mit dem Miteinbezug von Inline-JS entsteht der Spielraum das gesamte JS am Dateiende zu laden, der HTML-Quellcode wird etwas kleiner.

IndexReloaded und CSS

Die erwähnte Excludes Liste erlaubt auch gezieltes Ausschließen von CSS.
Denn bei der Verarbeitung von CSS geht IndexReloaded ähnlich vor, wie bei der JS-Verarbeitung.
Ohne Einsatz von Critical CSS (CCSS) faßt IndexReloaded das vorliegende CSS sequenzgetreu in einer Datei zusammen, die als File-Link im Headbereich geladen wird.
Mit aktiviertem CCSS wird dieses zusammengefasste CSS in CCSS und nicht-CCSS aufgeteilt. Dies erfolgt „on the fly“ beim Laden einer Webseite.
Genaugenommen muß eine Webseite 2mal geladen werden, so daß korrektes CCSS erstellt werden kann.
Ab dem 3ten Laden einer Webseite wird CSS Cache-unterstützt ausgegeben.
Bei CCSS kann über eine Option gewählt werden, ob das CCSS als Inline-CSS oder als File-Link ausgegeben wird.
CSS, das als „Nicht Critical“ gilt, wird per JS, nachdem die Webseite vollständig geladen ist, mit kurzer Verzögerung geladen.

Vergleich Jetpack Boost und IndexReloaded

Wer den potentiell höheren Aufwand zum Setup von IndexReloaded nicht scheut, kann mit IndexReloaded bessere Performancewerte erreichen – das ist in den Testergebnissen zu erkennen und in der Gegenüberstellung von JS und CSS-Funktionalität.

Außer Acht gelassen haben wir in diesem Test Funktionen, welche die beiden Plugins nicht gemeinsam haben.
So muß z.B. beim Einsatz von IndexReloaded fürs Bildmanagement eine weitere Lösung zum Einsatz kommen um eine gesamtheitliche Performanceverbesserung zu erreichen.

Unsere deshalb komplett uneigennützige Empfehlung ist deshalb IndexReloaded zu verwenden.
Uns ist klar, daß wir als Entwickler von IndexReloaded klar negativ vorbelastet sind, um hier ohne Angabe von weiteren Details ein anderes Plugin zu beurteilen.
Wir hoffen mit diesem Artikel genau auf diese „weiteren Details“ sachlich eingegangen zu sein.

Sind in Jetpack Boost die Optionen für CSS und JS deaktiviert, so kann IndexReloaded und Jetpack Boost gleichzeitig aktiviert werden.