Case study: Simon Stålenhag's new site, optimised.

Storing the original

To grab all the front-end assets of Simon's new homepage, I used the following command:

wget
    --page-requisites
    --adjust-extension
    --span-hosts
    --convert-links
    --restrict-file-names=windows
    --domains www.simonstalenhag.se
    https://www.simonstalenhag.se/new/index.html

After cleaning up, I stored it in the 00-original folder.

Then I gradually made the following changes:

1. 01-compressed-jpgs:
   • Tried compressing the thumbnail JPGs using TinyJPG.
2. 02-html-updated:
   • Update the HTML
   • Replace the CSS and inline in the HTML
   • Replace the GIFs with restricted-palette PNGs.
   • Add responsiveness, so that the site can work on a mobile.
   • Try lazy-loading the images
   • Setting intrinsic image widths and heights to stop any layout shifts while they load.
3. 03-no-lazy-loading:
   • Take off the lazy loading so that we can compare like to like.
4. 04-webp:
   • Progressively-enhance the HTML by using the <picture> element, and adding webp as one of the <source>s.
5. 05-avif:
   • Uses AVIF in supporting browsers. I batch converted each of the JPGs into AVIFs with a 70% quality setting. 70% seemed to be the sweet spot between size and relative quality. I'm not sure why, but the gamma or colour settings for the conversion makes the images noticeably darker. I've tried manually setting the gamma, or reading from the ICC, but no luck. It could be browser-specific. Also, it's really difficult to compress images that have a deliberate graininess to them.
6. 06-mobile-optimised:
   • Add lazy loading back
   • Halve the size of all images and use them as the default image for mobile-sized devices. See the batch_half_size.sh in the scripts folder
   • Serve the 1024px-wide images to any device with a screen-width greater than 584px.

Converting to AVIF

I found the following script on felixparadis.com which uses the excellent colorist.

for i in *.jpg # Starts a loop over all .jpg files;
  do name=`echo "${i}"` # Assign the file name to a variable
  cleanedName=$(echo "$i" | cut -f 1 -d '.') # Remove the extension from the filename ("foo.jpg" becomes "foo")
  colorist convert "$name" "$cleanedName.avif" -q 70 # Tell colorist to convert your file to a .avif with an 70% lossy quality setting.
done

Results

Version	Requests	Transferred	WebPageTest	Comments
00-original	60	7,819KB	00	Baseline
01-compressed-jpgs	60	6,394KB ✅ (-1,425KB)	01	TinyJPG is amazing.
03-no-lazy-loading	59 ✅ (-1)	6,380KB ✅ (-14KB)	03	PNGs < GIFs. Inlined CSS.
04-webp	59	5,306KB ✅ (-1,074KB)	04	WebP & picture element sources
05-avif	59	2,993KB ✅ (-2,313KB)	05	AVIF added to picture element sources

View a comparison of all the desktop-sized WebPageTest runs

With Lazy-loading of the offscreen images on a mobile

Version	Requests	Transferred	WebPageTest	Comments
00-original	60	7,819KB	00	Baseline
02-html-updated	16 ✅ (-44)	1,913KB ✅ (-5,906KB)	02	Can we do better?
06-mobile-optimised	17 ❌ (+1)	287KB ✅ (-1,626KB)	06	Yes we can.

Compare the various WebPageTests done on a Moto G6