WebP nutzen und WordPress beschleunigen

WebP nutzen und WordPress beschleunigen

eingetragen in: SEO/Webanalyse, WordPress | 2

Denke an deine Webseitenbesucher, deine Webseite muss schnell laden, auch in den Zeiten von Glasfaser, LTE und Co. Hinzu kommt das Google auf den mobilen Index umschaltet. Das bedeutet für Webseiten, das sie besser gelistet werden, wenn sie mobil freundlicher sind. Ein Faktor ist dabei die Webseitenladegeschwindigkeit(Pagespeed).

Deswegen solltest du versuchen, jedes unnötige KB loszuwerden. Eine Möglichkeit ist, das Grafikformat WebP zu nutzen. Das ist einfach und schnell umgesetzt.

Was ist WebP

WebP(Weppy) ist ein von Google entwickeltes Dateiformat für verlustbehaftet oder verlustfrei komprimierte Bilder. Es wurde 2010 eingeführt.

Als Beispiel, die Datei webdesign-webvisitenkarte-1200×800.jpg ist bereits für das Web optimiert worden. Sie ist 124 kb groß, das gleiche Bild im WebP-Format ist nur 87 kb groß. Einsparung 37 kb – 29,84 %.

Unterschied WebP zu Jpeg

Kling erstmal nicht viel, aber du musst das auf die Masse der Webseiten sehen.

WebP-Kompatibilität

WebP wird leider noch nicht von jedem Browser unterstützt. Aber in Deutschland werden 48 % und weltweit 71 % der genutzten Webbrowser unterstützt. Die Browser sind Chrome, Chrome for Android, Opera, Opera Mini und Android Browser. Die Entwickler hinter Safari und Firefox sind bereits an einer Unterstützung am Arbeiten. (Stand 10/2016)

Die aktuellen Zahlen, bzw. kompatiblen Webbrowser kann man auf folgender Seite sehen:

http://caniuse.com/#search=webp

WordPress-Plugin

Damit man nicht mit dem Grafikprogramm immer eine WebP-Variante erstellen muss, kann man das bequem mit dem WordPress-Plugin EWWW Image Optimizer automatisieren. Das Plugin optimiert Bilder direkt nach dem Upload in die WordPress Mediathek. Dazu in die Einstellung des Plugins auf die den letzen Reiter „WebP-Einstellung“ gehen und dort JPG/PNG nach WebP aktivieren.

WebP in EWWW Image Optimizer aktivieren

Das Plugin im offiziellen WordPress-Verzeichnis: https://de.wordpress.org/plugins/ewww-image-optimizer/

WebP-Ausgabe steuern

Jetzt muss man nur noch dafür sorgen, das die WebP-Bilder an die passenden Webbrowser ausgegeben werden. Das macht man dann mit einer Weiche. Inkompatible Webbrowser erhalten weiterhin JPG/PNG-Dateien und die anderen WebP.

Apache .htaccess anpassen

 

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule (.+).(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

 

Nginx Anpassung

 

# http config block
map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
}

# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
    add_header Vary Accept;
    try_files $uri$webp_ext $uri =404;
}

 

Resultat überprüfen

Nachdem man alles eingerichtet und die Dateien im WebP-Format vorliegen, kann man das Resultat ganz einfach prüfen. Mit dem Chromebrowser einfach die Seite öffnen, die Konsole mit der F12 Taste öffnen. Dort auf den Reiter Network klicken und die Seite einmal mit der F5-Taste neu laden. Dann siehst du bei den Bilddateien in der Spalte Type webp.

WebP Auslieferung in Chrome prüfen

Gute Nacht!

Vielen Dank für dein Interesse an meinem Artikel. Ich hoffe er hat dir gefallen? verbinde dich mit mir über die folgenden Social Media und verpasse keine zukünftigen, wichtigen Informationen mehr.

2 Antworten

  1. Johannes
    | Antworten

    Danke für den Hinweis! Werde es ausprobieren; bin derzeit beim Relaunch von Websites, da bietet sich das an. Scheint auf jeden Fall weniger Aufwand zu sein als mit einem CDN zu experimentieren. Wenn die Abfrage nach WebP-Eignung von Browsern ihrerseits keine Ressourcen vom Server verlangt und keine Zeit kostet, ist das schon ein Gewinn. Zu klären wäre für mich noch, ob man bei einer bereits bestehenden Installation etwas gewinnt, d.h. bei bereits vorhandenen Bilddaten. Die Frage ist für mich, ob man nachträglich alle Bilder austauschen muss, oder ob es reicht, ein Bild ein weiteres Mal hochzuladen und beim Upload festzulegen „Dieses Bild nur als WebP“, denn ein PNG bzw. JPG gibt es ja schon.

    • Tim Ehling
      | Antworten

      Hallo Johannes,
      mit dem Plugin Ewww Image Optimizer kannst du das. Nach der Installation musst du einmal die Massenbeabeitung durchlaufen lassen. Dann werden auch von den bereits vorhandenen Bildern WebP-Ableger geschaffen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.