In the previous article I’ve introduced Nginx + mod_pagespeed, which is a great tool that allows us to convert JPGs and PNGs to WebP on the fly, the converted files can be delivered by rewriting the related HTML Code.
Given the scenario I host all my images on a dedicated server (https://blog-assets.nova.moe) with Nginx for static files server, mod_pagespeed cannot perform the on-the-fly conversion at this time.
So I’ve decided to create a simple server that can convert all JPG/PNG files to WebP format without changing the URLs.
Means you can still access images with
/xxx.jpgbut the image is in WebP format and the file size of it is smaller.
With some self-learning, there is a prototype available on GitHub: n0vad3v/webp_server written with Node, ExpressJS and cwebp, and the effect of it is quite fascinating, as below.
Requests before and after WebP server
On a typical post with a lot of images such as 《那些年我开过的车（们）》, the images are always large.
With the WebP Server, the requests are becoming much more friendly (Look at
eado.pov, it’s original size is 1.4M and the WebP image size is only 476K, wow!).
The image sizes are a big minus on score, so we just focus on the relative of those.
Before WebP Server:
After WebP Server:
In my test under a Laptop with i5-7200U(2C4T), Using
ab can have the result as below, the request is for a cached webp file.
Document Path: /moon.jpg Document Length: 3081336 bytes Concurrency Level: 1000 Time taken for tests: 33.420 seconds Complete requests: 10000 Failed requests: 0 Total transferred: 30816170000 bytes HTML transferred: 30813360000 bytes Requests per second: 299.22 [#/sec] (mean) Time per request: 3342.003 [ms] (mean) Time per request: 3.342 [ms] (mean, across all concurrent requests) Transfer rate: 900475.41 [Kbytes/sec] received Connection Times (ms) min mean[+/-sd] median max Connect: 0 113 316.6 3 1073 Processing: 613 3167 484.1 3281 4301 Waiting: 2 311 115.7 305 1178 Total: 613 3279 627.3 3289 5367