WebP Case Study: 60% increase in webpage performance

2023 internet is bloated. As the hardware improves and network speeds increase — JavaScript developers are tirelessly finding new and creative ways to significantly slow down webpages around the globe. WebP comes to the rescue by reducing image sizes (in most cases).

WebP is an open image format (like jpg, png) released in 2018. Though adoption has been slow initially, in 2023 all major browsers have adopted WebP standard natively.

Only two browsers do not support WebP as of January 2023

  • KaiOS
  • Internet Explorer
WebP Supported Browsers Table

Testing method

To put WebP to the test, we are going to use a performance rubric within Lighthouse Developer Tool in Google Chrome. The site we will test is a static one-page html website with a bunch of hefty jpegs: driftbasic.com

The test is simple:

  • Run Lighthouse on the original page
  • Convert most images to WebP
  • Re-run Lighthouse on the updated page

The original page was slow:

Boasting large jpeg images and painfully slow loading speeds amounting to an overall performance score of 61.

Lighthouse Score Before WebP

Not all images will benefit from a conversion to WebP

Unfortunately not every image will benefit from being converted to WebP. This is especially true if you have already followed good practices for optimizing your image for web prior to attempting WebP conversion.

From my personal experience of converting over a 100 images to WebP — only two resulted in a larger size. One of them happens to be the largest jpeg image in this case study

Visual comparison of jpeg vs webp

So far I am unable to figure out exactly why this happens with some outliers.

End result is a faster page

The other 5 images were converted from jpeg to WebP without any issues

  • Image 1: from 78.7kb to 50kb
  • Image 2: from 62.3kb to 31.3kb
  • Image 3: from 72.0kb to 39.0kb
  • Image 4: from 70.1kb to 37.8kb
  • Image 5: from 260kb to 48.3kb
  • Overall: from 543kb to 206kb
Lighthouse score after conversion to webp: 99

This is conversion resulted in approximately 60% performance improvement 👏 Try it on your website (By the way, WordPress has some helpful plugins to help you do this).

Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments