“A picture is worth thousand words” —Napoléon Bonaparte
When it comes to web page optimization. Decreasing the image size on your web page make a big difference as it’s the major chunk that consume user bandwidth. According to data from HTTP Archive( http://httparchive.org/ )
For an average web page, image accounts for …
- 63% of the transferred bytes for desktop sites
- 69 % of the transferred bytes for mobile sites.
Source: http://httparchive.org/
And the bad news is, its increasing over time.The reason is increasing Hi Dpi devices over time.
Source: http://httparchive.org/
Solution to this problem is a new image format provided by Google i.e WebP. Let’s discuss about WebP and how naukrigulf is using it to improve its performance.
What is WebP ?
WebP Support:
WebP is natively supported on Chrome and Opera for both mobile and desktop.
Source: http://caniuse.com/
Apart from this WebP is supported on Android : lossy(from ICS onwards) and lossless (from JB onwards) and on iOS native apps via libraries also you can make it work on mozilla/Safari/IE also using different Plugin or using Java Script.
Convert images to WebP format:
You can convert gif/jpeg/png images to WebP by using the open source cwebp conversion tool( https://developers.google.com/speed/webp/docs/precompiled) available for Linux, Windows and Mac OS X.
How naukrigulf used this format:
In order to satisfy our never ending quench for site optimization, we came across yet another way of reducing page size.
Naukrigulf.com is one of the first few sites on web to use WebP image format.We are now using WebP image format to serve banners as most of the image size is attributed to them. By using WebP, we have reduced our home page size from 151 KB to 134 KB that’s 11% percent decrease. Through this, not only our banner images are served faster but it saves user bandwidth also. Therefore, our site is cheaper for users 🙂
This has also hugely benefited our mobile users. Mobile traffic is continuously increasing and the networks on which these mobile users rely on for data hasn’t improved. Using technologies like WebP we have reduced the overall payload size of our web pages.
Since, WebP is natively supported in Google Chrome and the Opera browser we used server side detection (user agent from HTTP request header) to serve webp images to these users.
Results:
Content distribution on Home page
Before using webp
After using webp
Content type on home page
Source: www.webpagetest.org
Before using WebP (bytes)
After using WebP(bytes)
That’s 26.53% decrease in image bandwidth.
The traffic on our homepage is approx. 6,00,000 hits/month with 70% users on Chrome and this optimization is resulting in savings of 45 Gb of monthly bandwidth.
This bandwidth saving makes our site not only fast but also cheap to use for uses.
Next up… Optimizing CSS background images
Now that we have seen how to optimize basic web pages using WebP, in Part 2 of this series let’s have a deeper look at optimizing CSS background images using WebP.
Useful Links
- Google Developers: WebP( https://developers.google.com/speed/webp/ )
- HTTP Archive (http://httparchive.org/)
- Tool to convert Images to WebP:cwebp ( https://developers.google.com/speed/webp/docs/precompiled )
- Can I Use (http://caniuse.com/ )
- Web Page Test (http://www.webpagetest.org/)