WebP Plugin beschleunigt Dein WordPress + Google mag es auch für SEO

6 Kommentare Autor: Jürgen (jdo)

Die Überschrift ist etwas irreführend, da im Grunde genommen nicht Dein WordPress beschleunigt wird, aber die Seite sich auf dem Gerät des Anwender schneller lädt. Das ist zumindest dann der Fall, wenn ein Browser zum Einsatz kommt, der das Bildformat oder Grafikformat WebP unterstützt.

Das von Google entwickelte WebP ist faszinierend, weil die Bilder tatsächlich viel kleiner sind, also wesentlich besser komprimiert werden. Ich will hier nicht ins Detail gehen, da es etliche Quellen gibt, die sich mit der Technologie hinter WebP beschäftigen. Weiter unten im Text zeige ich Dir aber ein paar Vergleiche, wie stark sich komprimieren lässt.

Ich habe mir den Spaß gemacht und ein paar Blogs und Websites aufgerufen (so zirka 20) und geguckt, wer denn Bilder schon via WebP ausliefert. Viele sind es nicht. Bei den heutigen Internet-Geschwindigkeiten fällt es vielleicht auch nicht so ins Gewicht, aber die Summe der Verbesserungen macht den Unterschied und der Speedtest Google freut sich auch.

Google Speedtest hat immer gemeckert

Hin und wieder prüfe ich über den Speedtest von Google, ob meine Website einigermaßen Performance hat. Es hat mich schon immer gestört, dass die Größe der Bilder angeprangert wurden, obwohl ich schon stark darauf achte, keine Pixelmonster in meinen Beiträge zu verwenden. Irgendwann ist es mir zu dumm geworden und ich habe mich damit beschäftigt, WebP anstelle von JPG und PNG zu verwenden.

An dieser Stelle gibt es 2 Probleme:

  • Noch nicht alle Browser unterstützen WebP. Browser, die WebP nicht unterstützen, könnten die Bilder in den Beiträgen nicht anzeigen.
  • WordPress kann noch nicht so richtig mit WebP umgehen. Es gibt keine Vorschau von Bildern und so weiter. das ist echt ärgerlich.
WebP wird noch nicht so richtig unterstützt

WebP wird noch nicht so richtig unterstützt

Bei caniuse.com findest Du eine Auflistung, welche Browser bereits Unterstützung für WebP bieten. Machen wir es kurz: Moderne Versionen von Firefox, Chromium / Chrome / Brave und Microsoft Edge können damit umgehen. Safari kann es noch nicht.

Diese Browser unterstützen WebP bereits

Diese Browser unterstützen WebP bereits

Bei der Unterstützung für WordPress musst Du wie so das Rad nicht neu erfinden, sondern jemand hat das bereits für Dich erledigt.

WebP Express ist ein echt nützliches Plugin für WordPress

Das Plugin WebP Express macht genau, was ich gesucht habe. Es erstellt aus hochgeladenen Bildern automatisch WebP-Versionen. Die werden an Browser ausgeliefert, die kompatibel mit dem besseren Bildformat sind. Kommt ein nicht kompatibler Browser, bekommt er eben die alten Bilder vorgesetzt.

Das Plugin gibt es nur auf Englisch, ist aber nicht so kompliziert zu verstehen. Es funktioniert mehr oder weniger Out of the Box, aber es gibt ein paar Dinge zu beachten. Ich würde die Optionen schon Schritt für Schritt durchgehen, um die optimalen Einstellungen zu finden.

Einstellungen von WebP Express

Einstellungen von WebP Express

Unter General kannst Du einstellen, ob sowohl JPGs als auch PNGs umgewandelt werden sollen. An dieser Stelle musst Du beachten, dass die Gd-Methode nicht mit transparenten PNGs umgehen kann. Ich komme weiter unten noch auf die Umwandlungs-Methoden zu sprechen. Sollte Dir also keine andere Option zur Verfügung stehen, dann lasse PNGs nicht umwandeln. Der Entwickler weist darauf hin, dass mit PNG noch nicht so viel experimentiert wurde. Im Zweifel lasse nur die JPG-Dateien wandeln oder teste es.

Für die meisten Optionen gibt es eine Hilfe. Du musst mit der Maus nur über das Fragezeichen fahren und bekommst eine Erklärung. Die von mir angeklickte Option erstellt eine .webp-Datei bei ersten Aufruf, sofern sie nicht vorhanden ist. Das Bild wird dann gespeichert und künftige Aufrufe lösen keine Umwandlung mehr aus.

Die Optionen werden Dir erklärt

Die Optionen werden Dir erklärt

Umwandlungen in WebP

Dieser Bereich ist interessant. Hier kannst Du die Umwandlungs-Methoden und auch die Reihenfolge festlegen. Funktioniert die erste Option aus irgendwelchen Gründen nicht, wird die nächste genommen. Da Gd Probleme mit transparenten PNGs hat, benutzt ich als primäre Umwandlungs-Option ImageMagick. Das funktioniert natürlich nur, wenn es Dir zur Verfügung steht.

Methoden zur Umwandlung

Methoden zur Umwandlung

Hast Du Convert on upload aktiv, wird das Bild gleich beim Hochladen umgewandelt. Das spart beim ersten Aufruf natürlich etwas Zeit.

Mehr Platz auf dem Datenträger notwendig

Natürlich muss Dir klar sein, dass auf dem Datenträger mehr Platz notwendig ist. Schließlich werden zu den JPGs und PNGs noch die WebPs hinterlegt. Allerdings wirkt es sich positiv auf die Ladezeiten Deiner WordPress Website aus.

Wie viel spart es bei den Bildern?

Beantworten wir die Frage, die Dich möglicherweise am meisten interessiert: Wie viel kleiner sind die Bilder? Sehen wir uns einfach einen Upload-Ordner von WordPress an und vergleichen:

Die Größen der JPG-Dateien

Die Größen der JPG-Dateien

Die WebP-Bilder

Die WebP-Bilder

Du siehst, dass die Bilder meist zwischen 40 und 60 % kleiner sind. Das ist schon enorm. Sollen wir noch einen Vergleich mit einem Foto machen? Nehmen wir diesen fotogenen Delfin aus dem Roten Meer, den ich Nahe der Thistlegorm aufnehmen durfte.

Test mit Delfin

Test mit Delfin – als WebP nur 55 KByte anstelle von 188 KByte groß!

Als JPG hat das Foto 188 KByte.

Das Foto des Delfins ist 188 KByte groß

Das Foto des Delfins ist 188 KByte groß

Umgewandelt ist das Bild nur noch 55 KByte groß! Das ist eine ordentliche Einsparung und

Nur noch 55 KByte groß

Nur noch 55 KByte groß

Du siehst im Endeffekt keinen Unterschied zwischen den beiden Fotos, also Du musst schon sehr genau hinsehen.

Hier ist der Link zum Original JPG: Delfin und zum WebP: Delfin, damit Du den direkten Vergleich hast.

Der Größenunterschied hier ist schon extrem, muss ich zugeben. Aber eine Ersparnis von zirka 50 % ist meist drin. Hier noch ein Beispiel mit Schlangensternen aus Raja Ampat. Das ist das Bild.

Schlangensterne - typisch für Raja Ampat

Schlangensterne – typisch für Raja Ampat

Es lässt sich auch weit über 50 Prozent komprimieren. Diesmal einen Screenshot aus dem Dateimanager.

Über 50 % komprimiert

Über 50 % komprimiert

Web Service

Eine sehr nette Option ist, dass Du einen Web Service aktivieren kannst. Damit ist es möglich, dass andere Websites über Deine die Umwandlung durchführen. Das ist interessant, wenn es Auftritte gibt, die nicht selbst wandeln können.

Hast Du mehr Auftritte, musst Du das Plugin auch nicht überall installieren. Du kannst es bei einer Website machen und die anderen nutzen es einfach. Ist sehr schick, finde ich.

Bei der Umwandlung würdest Du in diesem Fall die Option Remote WebP Express benutzen und konfigurieren.

Du kannst Websites autorisieren und dafür auch einen API-Schlüssel hinterlegen. Es kann also nicht Hinz und Kunz Deinen Umwandler benutzen, nur weil er aktiviert ist.

Web Service im Angebot

Web Service im Angebot

Mit welchen Programmen kann ich WebP öffnen?

Alle kann ich Dir nicht sagen. Aber GIMP 2.10 kann das Bildformat per Standard öffnen.




 Alle Kommentare als Feed abonnieren

6 Kommentare zu “WebP Plugin beschleunigt Dein WordPress + Google mag es auch für SEO”

  1. pit says:

    Vielen Dank für den Artikel.
    Ich muss aber leider zu einer kleinen Kritik ausholen:
    Die Lüge dass WebP "viel besser" als JPEG seie wird im Internet an immer mehr Orten verbreitet.
    Das ist jedoch sehr eingeschränkt die Wahrheit, es hat im Wesentlichen nur einige Grenzfälle wo es von Vorteil ist:
    Wenn die Bilder extrem stark komprimiert werden, dann fällt ab einer gewissen kritischen Dateigröße das JPEG sichtlich auseinander und WebP ist zumindest noch halbwegs angenehm zu betrachten
    Wenn die Bilder verlustfrei komprimiert werden, und das png Format die direkte Konkurrenz ist
    Wenn die Bilder extrem viele einfarbige Bereiche haben, wie etwa Graphen
    Wenn man verlustbehaftete Komprimierung und Transparenz in einem Bild mischen will/muss

    Für den "normalen" Fall von Fotografien die in halbwegs guter Qualität präsentiert werden sollen sind gute JPEG encoder bei der visuellen Qualität selbst bei gleicher Größe stark überlegen.
    Beispiel: Foto von meiner Digicam, Jpeg aus Gimp 638kb und WebP encoder 632kb:
    http://screenshotcomparison.com/comparison/134936
    Volle Größe:
    https://files.catbox.moe/u3ejoa.jpg
    https://files.catbox.moe/279fae.webp

    • jdo says:

      Ich gehe hier von Bilder aus, die man für Blog-Beiträge nimmt und nicht von Fotos. Bei mir sind alle Bilder merklich kleiner und die Qualität leidet in meinem Fall nicht darunter. Von daher ist es für meinen Blog ein deutlicher Geschwindigkeitsschub, WebP zu verwenden.

      Ich habe ja mehr als genug Beispiel im Beitrag genannt. Würde ich ein Foto zum Drucken schicken, komprimiere ich es natürlich nicht bis zu Abwinken.

  2. pit says:

    Nunja der Delfin oben ist wesentlich unschärfer und hat teils sogar Block-Artefarkte, da würde ich mich nicht drauf verlassen dass jpeg bei der 50% Größenreduktion nicht immernoch besser aussieht.
    Aber wenn es primär um die SEO geht, dann kann man das ja so lassen.

    • jdo says:

      Also "wesentlich" bei dem kleinen Bild würde ich nicht so stehen lassen. Da musst Du schon recht genau hingucken und die meisten tun das eben nicht. Die Kompression von 188 auf 55 KByte ist auch brutal, das muss man auch berücksichtigen.

      Es ging mir primär um die Ladezeiten und da ist das Plugin einfach Klasse.

  3. Magdalena says:

    Vielen Dank für den Beitrag! 🙂

    Werden bereits hochgeladene Bilder automatisch umgewandelt sobald ich das Plugin aktiviert habe, oder muss ich dazu noch was machen?

    Und wie kann ich überprüfen, ob das Plugin funktioniert, also ob Bilder wirklich umgewandelt werden? 🙂

    Vielen Dank und Alles Liebe
    Magdalena

    • jdo says:

      Es gibt eine Einstellung, dass alle Bilder gewandelt werden. Allerdings kannst Du es auch so lassen, dass ein Bild beim ersten Aufruf umgewandelt wird, sollte es das WebP-Äquivalent noch nicht geben. So ist das bei mir. Um die Frage direkt zu beantworten: Ja, die bereits hochgeladenen Bilder werden automatisch umgewandelt.

      Überprüfen kannst Du das, indem Du dem Pfad folgst, in dem die WebP-Bilder liegen. Oder Du nimmst einen kompatiblen (modernen) Browser, rufst Deine Website auf und siehst Dir dann den Quellcode an. Darin sollten dann die WebP-Bilder auftauchen, wenn Du danach suchst.

      Viele Grüße