Page Speed of the website
The website speed i.e. a fast delivery and presentation of the website is one of the set screws for the technical SEO, increases the length of stay of the visitor and reduces the bounce rate.
Possible reasons for slow websites
A slow website can have many reasons. Besides the speed of the server, complex database queries in the backend can be the trigger for a long loading time of the website. In the frontend the causes are often JavaScript, fonts and CSS code, which block rendering and have a negative effect on the loading time.
Image optimization WebP
Besides the reasons mentioned above, images are another point to improve the loading time of the website. Nowadays, websites are loaded with a lot of images, and depending on size, quality and number, this is one of the important components to optimize the website.
Especially in mobile networks, you notice very quickly whether a website is lean and efficiently implemented. With newer desktop browsers, a slower mobile connection can be selected to simulate the loading behavior of the website.
Images can be compressed, but this will result in a loss of quality. The WebP image format offers many advantages, as it combines JPEG and PNG. This means lossy as well as lossless compression and support for transparency and animation. Here, depending on the image and optimization, up to 30% - 40% can be saved in the file size. The image format WebP is now supported by all modern browsers except Safari, so you should not hesitate to use this advantage.
Conversion of the images to WebP
Images can be converted with the appropriate tools. There are online tools like Squoosh orOnline-Convert.com to convert the images.
For Photoshop there is a plugin for download, Sketch already has the functionality to save images in WebP format.
For the command line or console is cwebp available.
Integration WebP with the picture element including fallback
To implement the WebP image format, you can use the
<picture>
<source type="image/webp" srcset="bild.webp">
<source type="image/jpeg" srcset="bild.jpg">
<img src="image.jpg" alt="Mein Bild">
</picture>Pictures WebP, solution approach Service Worker (PWA)
When using a CMS system such as Joomla or Wordpress, the above implementation may require a little more effort or an additional plugin may be required.
In order to still benefit from the advantages of the WebP image format, it is possible to control the loading of the images using the technology of a service worker. The service worker acts as a kind of proxy and controls all requests to use the WebP format instead of JPEG or PNG as desired.
First, the Service Worker must be registered in the index file. The registration method here is Async, so as not to block rendering.
window.addEventListener('load', async () => {
if ("serviceWorker" in window.navigator) {
try {
await window.navigator.serviceWorker.register('/serviceworker.js')
} catch (error) {
console.error(error)
}
}
})In the Service Worker File all requests are then checked and filtered according to the "jpg or png". If the browser supports the WebP image format, the image available on the server would be delivered. A fallback for browsers like Safari, which currently do not support WebP, is not required.
self.addEventListener('fetch', e => {
if (e.request.url.match(/\.(jpe?g|png)$/)) {
let isSupportedWebP = false
if (e.request.headers.has('accept')) {
isSupportedWebP = e.request.headers
.get('accept')
.includes('webp')
}
if (isSupportedWebP) {
const req = e.request.clone()
const splitUrl = req.url.split('.')
const returnImageUrl = splitUrl[0]+ '.webp'
e.respondWith(
fetch(returnImageUrl, {
mode: 'no-cors'
})
)
}
}
})After installing the Service Worker, it would then deliver all images in the optimized WebP format. The next step could be to use the Service Worker to cache the images and then make them available offline. Choosing this method would be the first step towards a Progressive Web App. This would allow you to implement additional features such as offline capability to achieve a better loading time.
WebP images a clear advantage
Using WebP images on your website can only benefit no matter which implementation method is chosen. The choice of the "Service Worker" method is an expandable solution approach, which aims in the direction of Progressive Web App. Due to the different possibilities to integrate images into WebP, there are many arguments in favour of programming high-performance websites.
Do you need advice on how to optimize your website in terms of speed? Do you have questions about the implementation of WebP images?
15 tips for optimizing a PWA (Progressive Web App) Read more...
Progressive Web App - unverzichtbar für jede Webseite? Read more...
Psychology of colours - Persuading the website visitor with Light or Dark Mode? Read more...