Compressing with WebP
One of the biggest bottlenecks for everyday sites, are images. When you run a chrome audit now, one of the biggest hits on performance, is your images. Images are treated like render blocking assets by a lot of browsers. Which means, your page is going to appear as though it’s taking longer to load while it waits on images.
You know what it’s like when you visit a page and the page loads, before the image in the background, and you watch the white transition away to reveal the image. That’s not really ideal. The faster your page loads, the better for your users, which in turn is better for your page views.
When you run the chrome audit, one of the recommendations to improve performance is to . I was ignoring that advice for a while for a lack of understanding, due to google’s poor documentation of how to set it up. However one day I just decided to give it a go, and here is how you can go ahead and do it yourself for those sweet performance improvements.
Install on Unix
- First grab the files you’ll need for install from here. Get the newest
tar.gz - Follow the instructions here to install on unix.
tar xvzf libwebp-0.6.0.tar.gzcd libwebp-0.6.0 ./configure make sudo make install
Use Webp
cwebp -lossless before.png -o after.webpNow when you use them, you need to keep in mind that not all browsers support webp. Because of that you need to build in some fallback
With this implemented instead of your old simple <img> tag, it'll load the smallest available file. You can check in chrome if it's working by looking at the Network tab, or by running another audit and seeing the new score for Serve images as WebP
If you want to read more, there’s a great article here
Originally published at https://devinmatte.me.