WebP nutzen und WordPress beschleunigen

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 71 % und weltweit 81 % der genutzten Webbrowser unterstützt(Stand 08/2020). Die Browser sind u.a. Chrome, Chrome for Android, Edge, Firefox, Opera, Opera Mini, Safarie, iOS Safari und Android Browser in den aktuellesten Versionen.

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 OnRewriteCond %{HTTP_ACCEPT} image/webpRewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$RewriteCond %{REQUEST_FILENAME}.webp -fRewriteRule (.+).(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 blockmap $http_accept $webp_ext {    default "";    "~*webp" ".webp";}# server config blocklocation ~* ^/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

11.08.2020 aktualisert

Autor: Tim Ehling
Der Autor: Tim Ehling

Seit 2000 beschäftige ich mich mit Webentwicklung und seit 2006 mit WordPress. Neben Webentwicklung und Wartung mache ich auch Schulungen in WordPress.
Ich optimiere Webseiten und Social Media Kanäle, so das Kunden und auch die Suchmaschinen zufrieden sind.

  • Webentwicklung
  • Update-Service für WordPress
  • WordPress-Schulungen
  • Social-Media Checkups
  • Suchmaschinenoptimierung(SEO)

Ähnliche Beiträge

Schreibe einen Kommentar

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