Früher (!!!) habe ich selbst mal den Blog mit Wordpress betrieben und bin wegen der ständigen Updates, Sicherheitslücken und Administrationsbedarfs gezielt auf Hugo, einen sogenannten Static Site Generator umgestiegen. Nebenbei habe ich mich vor wenigen Monaten noch auf mobile first konzentriert. Dadurch hat sich die Geschwindigkeit nicht nur spürbar, sondern auch messbar verbessert.
Nichtsdestotrotz musste ich mich doch wieder mit Wordpress beschäftigen, da Katrin als Einstieg ihren Blog auch mit Wordpress betreibt. Zusätzlich benutzt sie noch das Theme Divi, welches einen zugegeben imposanten, visuellen Editor mitbringt. Leider wird der unerfahrene Blogger von der Firma dahinter meiner Meinung nach trotz Bezahlung sträflichst vernachlässigt, wenn es um Websitegeschwindigkeit und vor allem Bilder geht.
Das Problem
Folgendes Problem ergibt sich für einen Anfänger: Es werden fleißig Bilder von unserer Weltreise in die Artikel geladen. Diese Bilder kommen teilweise direkt von der Kamera und sind entsprechend groß. Bei einem bildlastigen Blog kommen so ganz schnell 10 bis 20 wunderbare Bilder in voller Auflösung zusammen. Das Ergebnis: der Leser öffnet die Seite mit dem Telefon, Tablet oder Rechner und muss beim Laden sagenhafte 80 MB Daten übertragen! Echt verrückt!
Divi selbst bietet einen Ultimative Guide, der Anfänger definitiv überfordert und nicht nur meiner Meinung nach elementare Wordpress-Funktionen ignoriert. Wordpress selbst erzeugt selbst sogenannte responsive image sizes, das heißt beim Upload eines Bildes werden automatisch vier andere Bildgrößen zusätzlich zum Original gespeichert: thumbnail, medium, medium_large und large. Divi selbst registriert sieben (7!) weitere Bildgrößen, die alle zusätzlich generiert und gespeichert werden. Der Witz an der Sache ist: an keiner Stelle beim Bearbeiten eines Beitrags wird irgendeine diese Größen benutzt (zumindest konnte ich nichts finden). Eine Information von Seiten des Herstellers habe ich nicht finden können, nur den Unmut anderer Nutzer, dass Divi im Jahr 2019 noch immer keine responsive images unterstützt.
Die Lösung von Divi sieht so aus, dass der Author jedes Bild in der für den Einsatzzweck passenden Auflösung hochladen muss und dies bei mehrfachem Einsatz auch mehrfach in unterschiedlichen Auflösungen wiederholen muss. Was für ein Durcheinander das in der Mediathek gibt!
Die Lösung
Nach einigem Experimentieren habe ich eine performante und auch praktible Lösung gefunden, die es dem Author auch noch erlaubt, weiterhin die großen Bilder hochzuladen und somit nichts an seinem Workflow zu ändern. Es wird immer wieder geraten, die Bilder vor der Benutzung zu Hause am Rechner für den Webeinsatz vorzubereiten. Davon halte ich aber nichts, schließlich benutzen wir ja Wordpress und das soll ja auch was zu tun haben, wenn es schon, wie eingangs erwähnt, so einiges an Pflege braucht.
Plugin: EWWW Image Optimizer
Das erste Plugin ist eine Art eierlegende Wollmichsau und kann Bilder optimieren, ohne sie, wie manch andere Plugins, an einen Drittdienst weiterzureichen. Nach der Installation von EWWW Image Optimizer geht es an die Konfiguration. Die sieht eigentlich ganz einfach aus. Man wechselt auf den Reiter “ExactDN” und deaktiviert alle Optionen bis auf “Lazy Load” und speichert das dann.
Weiter auf dem Reiter “Skalieren”. Hier wählen wir auch alles ab, bis auf “Skaliere bestehende Bilder” und tragen bei “Ändere Größe von Bildern” eine Breite von “2880” und Höhe von “0” ein. Dies entspricht der größten von Divi Bildbreite.
Zum Schluss wechselt man in der Seitenleiste in Medien / Massenoptimierung und wendet die Optimierung auf alle bestehenden Bilder an.
Das Plugin haben wir nun so konfiguriert, dass nun bei jedem Bildupload das Bild auf eine Größe von maximal 2880 in der Breite skaliert wird. Nebenbei wird durch eine effiziente Komprimierung noch einiges an Datenmenge eingespart, die Bilder werden somit vollautomatisch für das Web optimiert.
Als Bonus inkludiert das Plugin beim Anzeigen einer Seite ein bekanntes Skript, was meiner Meinung nach ein De-Facto-Standard im Web ist: lazysizes. Dieses Skript sorgt dafür, dass dem Browser mehrere Bildgrößen zum Download angeboten werden. Der Browser kann nun je nach Bildschirmgröße (Mobil, Tablet, Rechner, Hochkant, Quer) entscheiden, welches Bild gerade optimal passt und somit lädt er meist ein wesentlich kleineres Bild, als das volle Originalbild. Zusätzlich lädt das Skript Bilder nur, wenn der Nutzer auch wirklich dies in den Sichtbereich scrollt bzw. kurz vorher.
Plugin: Responsify Wordpress
Leider reicht das erste Plugin noch nicht aus, da Divi irgendeinen eigenen Zauber benutzt, um Bilder in eine Seite zu bringen. Das “Lazy Load” funktioniert nur bei normalen Seiten aus dem Wordpress-Editor, nicht beim Divi-Builder. Das Plugin Responsify Wordpress sorgt nun dafür, alle solchen Bilder zu erkennen und diese so aufzubereiten, dass die Geheimwaffe “Lazy Load” auch zünden kann.
Nach der Installation des Plugins wechselt man in die zugehörigen Einstellungen und scrollt bis zu “Bildgröße”. Hier wählt man nun nur die Bildgrößen aus, die dem Browser zur Wahl gestellt werden sollen. Meine Empfehlung dazu lautet: thumbnail, medium, medium_large und et-pb-portfolio-image-single. Damit haben wir vier Größen bis einschließlich 1080 in der Breite. Zusätzlich inkludiert das Plugin immer noch die volle Auflösung (haben wir oben auf maximal 3000 skaliert), um gegebenenfalls auch Retina-Displays mit abzudecken. Speichern nicht vergessen!
Leider geht’s jetzt ans Eingemachte! Damit “Lazy Load” funktioniert müssen an den Bildern bestimmte HTML-Attribute gesetzt werden. Dafür gehen wir nun in Plugins / Plugin Editor und wählen dort “Responsify WP” und dann rechts im Dateibaum auf “includes / img.php”. Die vollständige Datei kann bei der Plugin-Version 1.9.11 ersetzt werden:
Nach dem Speichern sind wir grundsätzlich fertig mit unseren Änderungen. Mit der Anpassung an dem Plugin haben wir allerdings eine kleine Hürde für zukünftige Updates vom Plugin Responsify WP geschaffen. Sollte das Plugin aktualisiert werden, braucht es eine erneute Anpassung. Da das Plugin aber schon seit über einem Jahr nicht mehr aktualisiert wurde, hoffe ich einfach, dass das nicht so häufig vorkommt.
Browser Cache Einstellungen
Damit Bilder vom Browser nicht bei jedem Besuch wieder heruntergeladen werden ist es noch sehr empfehlenswert, das Caching von statischen Resourcen (Bilder, CSS usw.) zu konfigurieren. Das geht in den meisten Fällen über eine Anpassung der Datei .htaccess im Hauptverzeichnis der Wordpress-Installation. Am Ende fügen wir folgendes ein:
# One month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico|ttf)$">
Header set Cache-Control "max-age=2678400, public"
</filesMatch>
Umstellung von PHP5 auf PHP7
Wenn der Hoster es erlaubt, dann sollte die PHP-Version auf die neueste Version 7.x umgestellt werden. Die Geschwindigkeit mit PHP7 ist laut Messungen einfach besser.
Fazit
Die hier beschriebenen Schritte sind nur eine Möglichkeit das Nutzererlebnis und nachweislich das Google-Ranking zu verbessern. Grundsätzlich hätte ich mir gewünscht, dass Divi selbst hier mehr Möglichkeiten bietet. Die letzten beiden Schritte meiner Lösung sind aber unabhängig von Divi und sollten überall durchgeführt werden. Freunde werden Divi und ich aber wohl trotzdem nicht.