WebP nutzen und WordPress beschleunigen

23. Oktober 2016, Tim Ehling PDF WebP-nutzen-und-WordPress-beschleunigen.pdf herunterladen Artikel als PDF herunterladen

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

Abspeichern und später weiterlesen

PDF WebP-nutzen-und-WordPress-beschleunigen.pdf herunterladen Artikel als PDF herunterladen, 3 Seiten, 539 Kb

Gute Nacht!

Vielen Dank, das du meinen Artikel gelesen hast. Wenn er Dir gefallen hat, du Fragen hast, du etwas beitragen möchtest oder ihn mit anderen teilen willst, hast du nachfolgend die Möglichkeit dazu. Ich lebe natürlich von Feedback und freue mich über jede Interaktion von Dir.
Liebe Grüße
Dein Tim

Like die Facebookseite und folge mir auf Twitter

Zur Facebookseite 

Zum Twitteraccount 

Reaktionen auf WebP nutzen und WordPress beschleunigen


  1. am 23.10.16 um 11:14

    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.



    • am 23.10.16 um 14:40

      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.


Schreib deine Meinung dazu

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



1 Das kannst Du jederzeit abbestellen. Hinweise zum Datenschutz

Diese Webseite nutzt Cookies für Statistiken, sowie Plugins sozialer Netzwerke. Durch klicken von dem Button "Akzeptieren" stimmst du der Verwendung zu. Datenschutzinformationsseite

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen