Im heutigen Beitrag zeigen wir dir, wie du mit Hilfe eines Plugins eine Bildoptimierung der Medien auf deiner WordPress-Seite durchführen kannst und mit Hilfe von .webp-Dateien die Ladezeit deiner Seite erheblich reduzieren kannst!

Als konkretes Beispiel zeigen wir dir die Seite von Getränke Mayer, einem Getränkemarkt & Lieferanten, und welchen großen Unterschied das machen kann.

Mit dem neuesten Divi-Theme lag der Score vor unserem Trick laut Google's PageSpeed Insights bei 79. Und das, obwohl die wichtigen Indikatoren wie First Contentful Paint (FCP) & Time to Interactive (TTI) mit jeweils 0,6s im grünen Bereich liegen.

Der große Flaschenhals sind hier die verwendeten Grafikdateien, denn Formate wie .JPEG sind zwar schon etwas komprimiert, aber noch nicht ausreichend optimiert und werden gerade dann zum Problem, wenn die Website sehr bildintensiv ist.

Unterschiede zum .webp-Format

Das Dateiformat WebP (Web Picture) wurde 2010 von einer Google-Firma entwickelt, um digitale Bilder effizienter als andere bekannte Dateiformate wie PNG, JPG, JPEG darzustellen, d.h. mit nahezu unveränderter Auflösung bei geringerer Größe.

Auf der folgenden Seite kannst du sehen, welche sichtbaren Unterschiede es zwischen herkömmlichen Bildformaten und der .webp-Erweiterung gibt.

Wie du unschwer erkennen kannst, liegen die Unterschiede hauptsächlich in der Dateigröße und sind beträchtlich. Selbst bei der bereits komprimierten JPEG-Datei ist im Beispiel durch die Verwendung des WebP-Formats eine weitere Reduzierung der Dateigröße um fast 80% möglich. Wie später gezeigt wird, spiegelt sich dies auch in der Seitenladezeit und damit im PageSpeed Score wider.

Zunächst möchten wir dir darlegen, wie du mit wenigen Klicks von den Vorteilen der .webp-Technologie profitieren kannst.

Nutzung des EWWW Image Optimizer Plugins

Das EWWW IO, beziehungsweise Exactly WWW Plugin, ermöglicht es dir, Bilder, die z.B. im PNG-Format vorliegen, automatisch in das WebP-Format umzuwandeln und somit die Webseite zu optimieren.

Durch die vielen Anpassungsmöglichkeiten in EWWW kann es erst überwältigend wirken. Im nächsten Abschnitt werden wir dich aber ganz einfach Schritt für Schritt durch die Bildoptimierung mithilfe dieses tollen Plugins führen. Die einzige Voraussetzung, die du mitbringen musst, ist bereits eine vorhandene WordPress-Seite, auf der du Plugins installieren kannst.

EWWW Installieren & Konfigurieren

1. In WordPress zu → Plugins navigieren und anschließend in der Suchleiste → ‚EWWW Image Optimizer‘ eingeben und anschließend → ‚Jetzt Installieren‘.
2. Nach erfolgreicher Installation von EWWW wechselst du nun zu den → WP-Einstellungen.
3. Im nächsten Schritt wählst du in den Einstellungen den Menüpunkt „EWWW Image Optimizer“ aus.
4. Im Onboarding des Plugins einfach „ich weiß, was ich tue, lass mich in Ruhe!“ anklicken.
5. Im „Basic“-Reiter gibst du bitte zunächst deinen von der Ewww.io-Website erworbenen API-Schlüssel ein.
6. Mit ‚Resize Images‚ die gewünschte globale Bildgröße festlegen. (Größere Bilder werden verkleinert und komprimiert.)
7. Wähle nun etwas weiter unten → „Lazy Load“ aus, um die Ladegeschwindigkeit deiner Webseite zu erhöhen.
8. Bitte scrolle etwas nach unten zu → ‚WebP Conversion‚ und wähle den entsprechenden Button aus. Dieser ist dafür zuständig, die Bilder auf dem Webserver, unabhängig davon, ob es sich um PNGs, JPGs oder ähnliche Formate handelt, in platzsparende WebPs umzuwandeln.
9. Der darunterliegende Punkt (WebP-Auslieferungsmethode) bewirkt eine Umleitung auf Serverebene. Dadurch wird dem Browser (falls er WebP unterstützt) vom Server ein WebP statt des ursprünglichen Dateiformats zugesendet, was zu einer deutlichen Reduzierung der Ladezeiten führt. Um diese Umleitung zu aktivieren, genügt es, unter dem bereits vorhandenen Code auf → Setzte Rewrite-Regeln ein zu klicken.
10. Nun drückst du, um das meiste aus dem Plugin und somit der Ladezeit zu holen, auf den sich oben, unter dem Basis-Reiter befindenden „Ludicrous-Modus aktivieren“.
11. Gehe als letztes zum Reiter: → Local, und wähle bei den Kategorien JPG-Optimierungsgrad und PNG-Optimierungsgrad → Premium Plus.

Das Plugin ist ab sofort einsatzbereit. Um es live in Aktion zu sehen und die Bildoptimierung auf deiner Seite zu starten, navigieren wir zum WordPress-Menüpunkt → Medien/Media und von dort aus weiter zu → Massenoptimierung.

Die vorgenommenen Anpassungen haben dazu geführt, dass unsere (erste) Beispiel-Webseite nun eine PageSpeed-Punktzahl von 97 aufweist. Dies entspricht einem Unterschied von 18 Punkten und das alleine durch eine Bildoptimierung!

Benötige ich ein CDN?

In Content Delivery Networks (CDNs), wie dem von Cloudflare, werden statische Inhalte, also meist Grafikdateien, auf verschiedenen Servern weltweit verteilt gespeichert und beim Zugriff eines Nutzers automatisch vom geografisch nächstgelegenen Server an den Browser ausgeliefert, um die Ladezeiten zu verkürzen.

CDNs eignen sich vor allem für global agierende Unternehmen. Für kleinere Webseiten, deren Ziel es ist, nur ein Land oder eine Region zu beliefern/anzusprechen, ist ein CDN nicht notwendig bzw. überdimensioniert. Beispielsweise benötigst du für deine Webseiteninhalte, wenn du Dienstleistungen in Berlin anbietest, keinen Server in den USA. Zudem kommt erschwerend hinzu, dass die Nutzung eines CDNs technisch nicht erforderlich ist und du damit gegen die Datenschutz-Grundverordnung (DSGVO) verstoßen könntest, wenn du auf ein CDN setzt.

Kosten von EWWW

Die Nutzung von EWWW ist preisgünstig bzw. sogar komplett umsonst, solange du nicht auf die Premium-Optimierung setzt. Die besten Ergebnisse erzielst du aber natürlich mit der Pro-Version. Diese kannst es auf verschiedene Weisen erwerben. Als Erstes werden auf der Website die Abonnements angezeigt, die von $7 bis $25 pro Monat oder $70 bis $250 pro Jahr reichen. Je nach Plan haben diese den Vorteil, dass auch ein CDN enthalten ist und eine hohe Bandbreite für größere Websites zur Verfügung steht.

Unsere Empfehlung: Etwas versteckt auf der EWWW.io-Seite findest du auch die Image Compress API, die nur die Bildoptimierung beinhaltet. Hier kannst du Credits kaufen, anstatt monatlich zu bezahlen, womit du häufig günstiger fährst. 50.000 Credits entsprechen $100.00, wobei jedes Bild einen Credit kostet.

Fazit

Die Bildoptimierung ist ein entscheidender Schritt, um die Ladezeiten deiner Website spürbar zu verbessern. Das .webp-Format ermöglicht eine deutliche Reduzierung der Dateigröße deiner Bilder, was zu schnelleren Ladezeiten und einem besseren PageSpeed Score führt – wie wir am Beispiel von Getränke Mayer gesehen haben.

Leider ist die Umwandlung in .webp-Dateien mit einem gewissen Qualitätsverlust verbunden. Dieser ist jedoch minimal und kaum sichtbar, während der Nutzen in puncto Ladegeschwindigkeit enorm ist. Mit Tools wie dem EWWW Image Optimizer Plugin können Bilder in wenigen Klicks optimiert werden, sodass das volle Potenzial der Website ausgeschöpft werden kann.

Das .webp-Dateiformat wird von den meisten modernen Webbrowsern unterstützt, sodass die Dateien von Anfang an als solche hochgeladen werden können. Wir empfehlen jedoch, Bilder zum Beispiel als JPG hochzuladen und dann mit EWWW oder ähnlichen Programmen in das WebP-Format umzuwandeln. Auf diese Weise können auch Nutzer, die keine WebP-Dateien sehen können, die Originaldatei angezeigt bekommen.

Merke dir einfach „Kleinere Bilder, schnellere Seiten“

 

Bei Fragen, Anregungen oder Problemen kannst du uns gerne einen Kommentar hinterlassen. Wir helfen dir gerne.

Hat dir der Beitrag weitergeholfen? Bitte bewerte ihn mit einem Klick auf die Sterne.

Hinweis: Dieser Beitrag enthält Affiliate-Links. Wenn du über diese Links einkaufst, erhalten wir eine kleine Provision, ohne dass dir zusätzliche Kosten entstehen. So unterstützt du nexTab dabei, weiterhin hilfreiche Inhalte bereitzustellen. Vielen Dank!

---

Falls du weitere Anpassungen oder Vorschläge hast, lass es mich wissen!