logo pw
Zurück zur Übersicht

WordPress Pagespeed-Hack #1: WebP-Bilder nutzen

In den kommenden Wochen wird Google sein Page-Experience-Update weitgehend abgeschlossen haben. In diesem Zusammenhang nehmen die Core Web Vitals, also die technischen Daten zur Nutzererfahrung auf Deiner Webseite, einen wichtigen Teil ein. Pagespeed und Nutzererfahrung werden zu einem stärkeren Ranking-Faktor als dies in der Vergangenheit der Fall war und Webmaster stehen vor neuen Herausforderungen. Doch nicht jeder hat die Ressourcen und Kapazitäten für einen sofortigen Relaunch oder eine grundlegende Optimierung seiner Webseite. Daher stellen wir in der Reihe "Pagespeed-Hacks" ein paar Quick-Wins vor, mit denen sich sowohl die Ladezeit als auch die Core Web Vitals Deiner Webseite schnell und ohne großen Aufwand verbessern.

WordPress 5.8 unterstützt WebP-Bilder: was bedeutet das?

WordPress unterstützt seit der Version 5.8 nun das WebP-Bildformat. Was bringt uns das? Im ersten Moment erstmal gar nichts. Denn dahinter steckt nichts anderes als die Möglichkeit, Bilder im WebP-Format nun in der Mediathek hochzuladen. Das solltest Du aber nicht einfach so machen, denn das Problem an diesem Format ist, dass es nicht von allen Browsern unterstützt und angezeigt werden kann, u.a. nicht im Safari-Browser. Aber keine Sorge: wir zeigen Dir hier, warum und wie Du WebP-Bilder trotzdem nutzen solltest.

Was ist WebP überhaupt und warum ist es für die Pagespeed-Optimierung interessant?

Bei WebP handelt es sich um eine Alternative zu jpg- oder png-Grafiken, die von Google entwickelt wurde. Bilder im WebP-Format haben eine ca. 25% kleinere Dateigröße als identische Bilder im jpg- oder png-Format. Trotz dieser geringeren Dateigröße und besseren Komprimierung, werden Bilder im WebP-Format schärfer im Browser dargestellt, als optimierte jpg- oder png-Bilder. Wandelst Du Deine bestehenden Bilder auf Deiner Webseite also in WebP-Bilder um, ist die Gesamtgröße, die ein Browser beim Aufrufen Deiner Seite herunterladen muss, deutlich geringer als vorher. Ergebnis: die Seite lädt schneller und die Ladezeit ist somit geringer.

Wie kann man WebP-Bilder auf seiner Webseite nutzen?

Wie bereits erwähnt ist es nicht besonders ratsam, nun einfach WebP-Bilder in Deine WordPress-Mediathek hochzuladen, da diese nicht von allen Browsern unterstützt und angezeigt werden können. Und sämtlichen Apple-Usern mit dem Safari Browser keine Bilder anzuzeigen wäre natürlich eine nicht ganz so clevere Alternative. Daher bedient man sich an dieser Stelle an einem Trick, indem man von jedem Bild beide Versionen in der Mediathek gespeicht hat und den Browser entscheiden lässt, welche Version er unterstützt und anzeigen möchte. Keine Sorge, das Ganze ist in 3 einfachen Schritten erledigt und Du musst fast nichts dafür tun. Sonst wäre es ja kein Quick-Win.

Schritt 1: Serverseitige Unterstützung für WebP sicherstellen

Damit Du Deine bestehenden Bilder automatisch in alternative WebP-Versionen umwandeln kannst, muss Dein Hoster WebP-Bilder unterstützen. Bei den meisten geläufigen Hosting-Anbietern ist dies der Fall, allerdings kann es sein, dass dieses Feature erst in Deinem Kundenbereich aktiviert werden muss. Am besten schaust Du Dich dort einmal um oder kontaktierst den Support um sicherzustellen, dass der WebP Support unterstützt wird und auch aktiv ist.

Schritt 2: Nutze ein Plugin für die Umwandlung und Bereitstellung von WebP-Bildern

Da WebP nun serverseitig unterstützt wird, müssen Deine bestehenden Bilder in das WebP-Format umgewandelt werden. Diesen Job erledigt ein Plugin für Dich. Wir nutzen hierzu das Plugin WebP Converter for Media. Dieses Plugin wandelt zunächst Deine bestehenden Bilder um (und behält die Originale), und kümmert sich auch um die automatische Auslieferung an Browser, die dieses Bildformat unterstützen.

Nach der Installation und Aktivierung findest Du das Plugin im WordPress-Backend unter Einstellungen --> WebP Converter. In den Einstellungen des Plugins brauchst Du eigentlich nichts ändern, da diese von Haus aus bereits gut eingestellt sind.
Einstellungen für WebP Converter for Media
Einzig Nutzer eines Nginx-Servers müssen den Lademodus für Bilder hier auf "Pass Thru" umstellen, da eine Konfiguration via .htaccess-Datei auf Nginx-Servern nicht möglich ist. Hast Du Dir alle Einstellungen angesehen, klickst Du einfach einmal auf den Button "Änderungen speichern".

Schritt 3: Bestehende Bilder in WebP umwandeln und ausliefern

Auf der selben Seite in den Einstellungen findest Du am unteren Ende nun folgenden Bereich:
WordPress WebP-Bilder Einstellungen
Hier kannst Du mit einem Klick nun sämtliche bestehenden Bilder in das WebP-Format umwandeln lassen. Zukünftig werden alle neu hochgeladenen Bilder automatisch alternativ in das WebP-Format umgewandelt. Nachdem der Vorgang abgeschlossen ist, kannst Du den Cache Deiner Seite leeren und Deine Bilder sollten im Frontend bereits im WebP-Format ausgeliefert werden.

Nicht alle Bilder werden als WebP ausgeliefert

Woran liegt das? Ganz einfach: das Plugin ist so eingestellt, dass es nur dann die WebP-Version eines Bildes ausliefert, wenn diese tatsächlich kleiner ist als die Originalversion. Diese Einstellung solltest Du auch so beibehalten, denn wir wollen die Ladezeit Deiner Webseite ja möglichst gering halten.

So überprüfts Du die Auslieferung Deiner WebP-Bilder

Es gibt mehrere Möglichkeiten zu überprüfen, ob Deine Webseite die Bilder nun tatsächlich im gewünschten WebP-Format ausliefert. Hier die unserer Meinung nach schnellste: schnappe Dir den Firefox-Browser, klicke mit der rechten Maustaste auf ein Bild und wähle "Grafik speichern unter...". Im dann folgenden Fenster sollte Dir der Dateiname mit der Endung .webp angezeigt werden.
oliver nitz
Oliver Nitz  HR BLACK

"Wer Sonntags anfragt, startet erfolgreicher in die Woche."

jetzt kostenlosen Video-Call mit mir buchen.
Meckenstocker Weg 4B
45133 Essen
Tel. 0201 / 86 75 09 88
info@pinguinweb.de