logo pw
Back to the overview

WordPress Pagespeed Hack #1: Use WebP images

In the coming weeks, Google will have largely completed its page experience update. In this context, the Core Web Vitals, i.e. the technical data on the user experience on your website, will take an important part. Pagespeed and user experience are becoming a stronger ranking factor than they were in the past and webmasters are facing new challenges. But not everyone has the resources and capacity for an immediate relaunch or a fundamental optimisation of their website. Therefore, in the series "Pagespeed Hacks", we present a few quick wins that can improve both the loading time and the core web vitals of your website quickly and without much effort.

WordPress 5.8 supports WebP images: what does that mean?

WordPress now supports the WebP image format since version 5.8. What does that bring us? At first glance, nothing. This is nothing more than the possibility of uploading images in WebP format to the media library. But you shouldn't just do that, because the problem with this format is that it is not supported and displayed by all browsers, including the Safari browser. But don't worry: we'll show you here why and how you should use WebP images anyway.

What is WebP anyway and why is it interesting for pagespeed optimisation?

WebP is an alternative to jpg or png graphics developed by Google. Images in WebP format have an approx. 25% smaller file size than identical images in jpg or png format. Despite this smaller file size and better compression, images in WebP format are displayed sharper in the browser than optimised jpg or png images. So if you convert your existing images on your website into WebP images, the total size that a browser has to download when calling up your page is significantly smaller than before. The result: the page loads faster and the loading time is therefore shorter.

How can you use WebP images on your website?

As already mentioned, it is not particularly advisable to simply upload WebP images to your WordPress media library now, as these cannot be supported and displayed by all browsers. And not displaying images to all Apple users with the Safari browser would of course be a not-so-clever alternative. Therefore, a trick is used here by saving both versions of each image in the media library and letting the browser decide which version it supports and wants to display. Don't worry, the whole thing is done in 3 simple steps and you have to do almost nothing. Otherwise it wouldn't be a Quick Win.

Step 1: Ensure server-side support for WebP

In order to automatically convert your existing images into alternative WebP versions, your hoster must support WebP images. Most common hosting providers do, but this feature may need to be activated in your customer area first. It is best to have a look there or contact the support to make sure that the WebP support is supported and active.

Step 2: Use a plugin to convert and deliver WebP images

Since WebP is now supported on the server side, your existing images must be converted into the WebP format. This job is done for you by a plugin. We use the plugin WebP Converter for Media. This plugin first converts your existing images (and keeps the originals), and also takes care of the automatic delivery to browsers that support this image format.

After installation and activation, you will find the plugin in the WordPress backend under Settings --> WebP Converter. You don't actually need to change anything in the plugin's settings, as they are already well set by default.
Settings for WebP Converter for Media
Only users of an Nginx server have to change the loading mode for images here to "Pass Thru", as a configuration via .htaccess file is not possible on Nginx servers. Once you have looked at all the settings, simply click once on the button "Save changes".

Step 3: Convert and deliver existing images to WebP

On the same page in the settings, you will now find the following area at the bottom:
WordPress WebP images settings
Here you can convert all existing images into the WebP format with one click. In the future, all newly uploaded images will automatically be converted into the WebP format. After the process is complete, you can empty the cache of your page and your images should already be delivered in WebP format in the frontend.

Not all images are delivered as WebP

What is the reason for this? Quite simple: the plug-in is set in such a way that it only delivers the WebP version of an image if it is actually smaller than the original version. You should keep this setting, because we want to keep the loading time of your website as short as possible.

How to check the delivery of your WebP images

There are several ways to check whether your website actually delivers the images in the desired WebP format. Here is the quickest one in our opinion: use the Firefox browser, right-click on an image and select "Save image as...". In the following window you should see the file name with the extension .webp.
oliver nitz
Oliver Nitz HR BLACK

"Friday inquiries fetch 21% better prices."

book a free video call with me now.
Meckenstocker Weg 4B
45133 Essen
Tel. 0201 / 86 75 09 88
info@pinguinweb.de
cross