Nico Martins Plugin macht WordPress-Sites so richtig schnell

Die Ladezeit einer Webseite ist schon lange ein wichtiges Kriterium der User Experience. Zudem gewinnt sie mit jedem Google-Update mehr und mehr Bedeutung in der Suchmaschinenoptimierung. In diesem Gastbeitrag bringt uns Nico Martin die Grundlagen der Pagespeed-Optimierung näher und erläutert die Hintergründe, die zu seinem WordPress Plugin Advanced WPPerformance geführt haben.

Wieso, Weshalb, Warum?

Wer zu Hause oder im Büro sitzt, wird sich jetzt wohl fragen, was das alles soll. Egal, welche Seite man öffnet, innerhalb kürzester Zeit erhält man die gewünschten Inhalte. Dabei vergessen wir aber oft zwei ganz wichtige Punkte:

1. der Browser hat unter Umständen bereits einige Inhalte im Zwischenspeicher
2. nicht immer hat man solch eine stabile und schnelle Internetverbindung

Gerade wenn man sich an Mobile-Kunden orientiert, sind Verbindungsschwankungen die Regel. Und dabei ist es falsch zu denken, der Nutzer würde das ohne Weiteres tolerieren. Laut einer Studie von Akamai liegt die akzeptierte Ladezeit bei E-Commerce Seiten gerade mal bei 2 Sekunden. Und wer den ersten Eindruck verpasst, für den wird es schwierig.

Ähnliches hat man auch bei Google erkannt. So ist zurzeit unbestritten, dass sich frühe Drop-Outs, als noch vor dem Abschliessen des Ladeprozesses, sehr negativ auf die Google-Platzierung auswirken. Zudem wurde schon lange vermutet, dass ein direkter Zusammenhang zwischen der Platzierung und dem Score von Googles PageSpeed Insights besteht. Eine Studie von sem-deutschland.de stützt diese Vermutung.

Bei say hello ist es uns ein grosses Anliegen, qualitativ einen Schritt weiter zu gehen, als der Durchschnitt. Dazu gehört neben verschiedenen Faktoren eben auch die Pagespeed-Optimierung. Hinter Advanced WPPerformance stand also die Idee, ein Performance-Plugin zu schaffen, das uns Arbeit abnimmt und optimal an die zukünftigen Anforderungen unserer Kunden angepasst ist.

PageSpeed-Optimierung

Grundsätzlich gibt es vier Hauptpunkte, die man für eine optimale Performance beachten sollte:

1. Optimale Reaktionszeiten
   Dazu gehört Server-Caching, kurze Distanz zwischen Server und Client und schlanker, effizienter php-Code.
2. So wenige Daten versenden, wie möglich
   Die “Responsive Images”-Technologie schickt zum Beispiel die kleinstmögliche Bildgrösse an den Browser, während man über “conditional enqueuing” sicherstellt, dass keine unnötigen Files geschickt werden.
3. Was nötig ist, so klein wie möglich zu verpacken
   Bilder können oft verlustfrei erheblich komprimiert und mit “progressive JPEG” in ein browserfreundliches Format umgewandelt werden. Daneben kann ein Minify von CSS- und JS-Dateien deren Grösse ohne Nachteile drastisch senken.
4. Dem Nutzer so schnell wie möglich so viel wie möglich anzuzeigen
   Ein Browser liest eine Seite grundsätzlich von oben nach unten und wartet jeweils, bis ein benötigtes Skript geladen ist. Diese “Render Blocking”-Inhalte können vermieden werden (asynchrones Laden), wobei dann unter Umständen alternativen (Critical CSS) geboten werden müssen.
   

Ihr seht also. Der Grundgedanke dahinter ist eigentlich simpel und nachvollziehbar. In der Umsetzung kann es jedoch schnell komplexer werden. Vor allem dann, wenn man selber nicht so recht weiss, was auf der Seite alles geschieht und weshalb. Gerade bei kommerziellen multipurpose Themes ist das oft der Fall.

HTTP/2

2015 wurde HTTP/2 als offizieller Nachfolger von HTTP/1.1 veröffentlicht und hat dabei enorme Verbesserungen in der Art und Weise gebracht, wie ein Browser mit dem Server kommuniziert.

Need a foolproof way to explain the difference between #http1 and #http2? #http #serverpush #webdevelopment #SPDY #madebysayhello pic.twitter.com/gGGYUSsx7w

— 🤷 nico.dev (@nic_o_martin) September 21, 2017

Was der Tweet so vereinfacht darstellt, ist das Frage/Antwort-Spiel zwischen Browser und Server, bis eine Seite geladen ist. Bei HTTP/1.1 musste der Browser jedes einzelne File separat anfragen, also für jedes File eine neue Verbindung aufbauen. HTTP/2 ändert dies nun grundlegend. Bildlich gesprochen wird neu ein Tunnel aufgebaut, in dem beliebig viele Dateien hin und her transportiert werden. Die Anzahl gesendeter Dateien ist also kein negativer Faktor mehr.

Das 100ste Performance-Plugin

Zugegeben. Ein Performance-Plugin ist natürlich nichts Neues. Im WordPress Plugin Repository tummeln sich diverse “one-click” Performancewunder. Allerdings berücksichtigen aus meiner Sicht die Wenigsten die neuen Möglichkeiten von HTTP/2. Und gerade die Einbindung eines “Critical CSS” lässt auch zu wünschen übrig. Deswegen: Selber machen.

Advanced WPPerformance deckt die klassischen Funktionen ab:

• verschiednene Speedtests sind abrufbar
• CSS- und JS-Dateien können minifiziert …
• … und asynchron geladen werden
• Critical CSS kann eingebunden werden (auch als conditional critical CSS)
• Dateikomprimierung
• angepasste Zeiten für den Browsercache

Das Plugin habe ich aber nie als “all in one” Lösung geplant. Advanced WPPerformance kümmert sich grundsätzlich um die Optimierung der Dateiausgabe. Ergänzend empfehle ich ein Server-Caching (Cachify), sowie eine umfangreiche Bildoptimierung (EWWW Image Optimizer)

HTTP/2 Server Push

Als eines der einzigen Performance-Plugins unterstützt es ausserdem Server Push. Dabei werden benötigte Dateien direkt schon während der initialen Anfrage geladen und nicht erst, wenn sie der Browser anfragt.

Critical CSS

Hier entfaltet sich die grosse Stärke des Plugins. Als “Critical CSS” (oder auch “Above the Fold CSS”) bezeichnet man den Teil des gesamten CSS, der benötig wird, um den ersten sichtbaren Teil der Seite zu laden. Dieses Critical CSS ist dann notwendig, wenn man CSS Dateien asynchron lädt, also ohne das Rendering zu blockieren und den sogenannten “Flash of unstyled Content” (FOUT) vermeiden möchte.

Die berechtigte Frage: Wie finde ich nun diesen Teil des CSS?

Die einfachste Möglichkeit sind Onlinetools wie zum Beispiel der Critical Path CSS Generator. Als Entwickler könnte ich das Critical CSS ausserdem während der Entwicklung über einen Gulp-Task extrahieren. Aber was, wenn der Kunde später neue Elemente hinzufügt?

Die Lösung, die Critical CSS API. Ein Projekt von say hello, das sich noch in der Beta-Phase befindet. Dabei kann das Critical CSS einer beliebigen Seite über eine Programmierschnittstelle (API) angefragt werden. Das wiederum ist die Grundlage dafür, dass man den Prozess komplett automatisieren kann. Im Beispiel von Advanced WPPerformance kann das Critical CSS jeder beliebigen Seite bequem über einen Klick generiert werden.

Solange sich die API noch in der Beta-Phase befindet, muss das entsprechende Feature in Advanced WPPerformance manuell aktiviert werden. Bei Interesse kann ich gerne weitere Informationen und eine detaillierte Installationsanleitung geben. Melde dich doch einfach bei mir: nico@sayhello.ch

Wie weiter?

Für mich ist Advanced WPPerformance der ideale Platz, um auf neue Möglichkeiten der Pagespeed-Optimierung reagieren zu können.

Neben stetigen kleinen Verbesserungen ist zum Beispiel ein Monitoring in Entwicklung, welches die Pagespeed-Resultate über längere Zeiträume erfasst und auswertet. Zudem gehe ich sehr gerne auf Feedback aus der Community ein.

Fazit

Die Ladezeit einer Seite ist und bleibt einer der wichtigsten Faktoren der User Experience und der Suchmaschinenoptimierung. Advanced WPPerformance versucht dabei, neue Massstäbe zu setzen und bietet Funktionen, mit denen Top-Messwerte erzielt werden können. Welche Funktionen welchen Einfluss auf die Ladezeit der Seite haben, ist jedoch von Projekt zu Projekt unterschiedlich. Ein Grundverständnis der Art und Weise wie deine Seite funktioniert und was, wann verarbeitet und geladen wird, ist also auch mit Advanced WPPerformance notwendig. Danach ist es aber ein mächtiges Werkzeug, das deiner Seite den nötigen Boost gibt, um noch erfolgreicher im Internet zu werden.

Der Autor

Social Media

• https://twitter.com/nic_o_martin
• https://dribbble.com/nicomartin
• https://www.linkedin.com/in/martinnico/

Web

• https://nicomartin.ch/

Say Hello

• https://sayhello.ch/
• https://www.facebook.com/SayHelloGmbH/
• https://twitter.com/SayHelloGmbH

Was denkst du dazu?

yeah!

0

wooow

0

what?

0

meh.

0

hahaha

0