Die Einführung der Unterstützung des Grafikformats WebP in WordPress 5.8 war eine hervorragende Idee. Zusammen mit der Einführung von Lazy Loading in der Version 5.5 hat es dazu geführt, dass sehr viele WordPress-Websites einen Performance-Schub bekommen haben und nun können auch nicht sonderlich gut optimierte WordPress-Projekte erstaunlich gute Werte erreichen.
Vor einiger Zeit habe ich dann die .htaccess-Datei von perun.net entsprechend erweitert, sodass die Browser der Besucher auch das neue Grafikformat cachen können:
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf|woff|woff2|webp)$">
ExpiresActive on
ExpiresDefault "access plus 99 days"
Header unset ETag
FileETag None
</FilesMatch>Schnell habe ich dann festgestellt, dass die WebP-Grafiken nicht im Browser gecacht werden und da fiel es mir auch schon ein, warum das nicht passierte. Der Webserver kannte das neue Format noch nicht “richtig”. Mit der folgenden Angabe stellst du die beiden sich gegenseitig vor:
AddType image/webp .webpDiese Angabe bringst du ebenfalls in die .htaccess-Datei unter und ab da kann auch der erste Code-Block richtig greifen. Nun können die Browser deiner Besucher die WebP-Grafiken cachen und die wiederkehrenden Besucher profitieren von einem noch schnelleren Seitenaufbau.
Je nach Hoster kann es sein, dass der letzte Schritt nicht notwendig ist, weil der Anbieter das bereits nachgerüstet hat. Der letzte Code ist die passende Angabe für die Apache-Webserver. Damit es auch auf einem Nginx-Webserver funktioniert, fügst du den folgenden Code in die Datei mime.types ein:
image/webp webp;Dieses Beispiel zeigt zwei Sachen. Zum einen braucht es nicht viel, um eine Website auf einen soliden Wert hin zu optimieren und zum anderen zeigt es, dass die Ladezeit-Optimierung keine abgeschlossene, sondern eine kontinuierliche Handlung ist. Es gibt immer etwas zu tun.
Image(s) licensed by Ingram Image/adpic.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
WebP has such a nuance – not all browsers support it. For example, iOS Safari, regular Safari, IE – do not support WebP. https://caniuse.com/#feat=webp Therefore, you must always store at least two versions of each image. Webp (for WebP-enabled browsers) and original image. And give the right version depending on the browser. And the original image must also be optimized/compressed – so that even for browsers without WebP support, images will be optimized (lighter in weight) – this is the third! version of the file.. At the optipic service, I recently noticed a new functionality in which all of this is already in the box. https://optipic.io/en/cdn/ You can even connect everything so that the urls of the images do not change (they remain exactly the same and look like internal urls on my site). But in fact, they are loaded through their system with automatic compression, conversion to webp and recognition of webp support. It turns out that everything is simple and beautiful, and inexpensive))