Web, faster

2021-03-23 | Modified: 2021-03-28

On inspecting sunset I noticed I had to wait as each image loaded, top to bottom. There must be something I can do about it.

The Test

All tests conducted used WebPageTest with the default settings.

For the page, the bottlenecks were the multiple uncompressed, uncached images.

before score before optimized

Image Compression

The first 0/100 score was the lack of image compression.

Following Googles guideline to optimizing images:

  • Reduce quality to 85 if it was higher. With quality larger than 85, the image becomes larger quickly, while the visual improvement is little.
  • Reduce Chroma sampling to 4:2:0, because human visual system is less sensitive to colors as compared to luminance.
  • Use progressive format for images over 10k bytes. Progressive JPEG usually has higher compression ratio than baseline JPEG for large image, and has the benefits of progressively rendering.
  • Use grayscale color space if the image is black and white.

can be represented using convert from ImageMagick, first to change png to ipeg then apply progressive compression.

  • for image in *.png ; do convert "$image" "${image%.*}.jpg" ; done
  • for image in *.jpg; do convert "$image" -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB "$image"; done

As well as JPEG being a preferred format for photographs they are able to be compressed such that the full image is instantly loaded.

Progressive JPEGs

The second 0/100 score was the lack of progressive JPEG usage. Standard JPEGs load from top to bottom, the image loads line by line. Progressive JPEGs on the other hand loads the entire image and renders pixel by pixel. Contrasting with regular JPEGs we can say progressive JPEGs load from back to front.

After

after score after optimized

Success! A 2x speed up in loading time, from 32 to 16 seconds and a 2x reduction in page size.

Caching?

The remaining poor rating, caching, is managed on the server side. Github pages stores cached content for only 10 minutes. Ideally for static content such as CSS, JS and images month long caching is recommended.

Further

This post was inspired by Dan Luu's 50x speed up