This Blog is Too Slow

… and that’s no good. Big pics make for bad load times.

Big Pics Make Bad Load Times

Jenny has one of those fancy cameras and takes beautiful, high resolution photos. They’re nice to look at, but a 150 million pixel blog post adds more to load times than it does to viewing quality.1 Specifically, a fetch of Jenny’s latest post took a painful 13 seconds:

$ wget --page-requisites http://www.nerdster.org/Helsinki/
[ ... ]
FINISHED --2014-12-15 19:24:14--
Total wall clock time: 18s
Downloaded: 24 files, 36M in 13s (2.83 MB/s)

It’s a photo-rich article, but regardless, it has to be faster than that.

Slimming Down

This site is hosted on GitHub Pages and generated by Jekyll, so you can see the entire source if you’re interested, but the relevant matters are that pics are stored in the “./images/” folder and Jenny saves photos with the “.JPG” extension.

The disk usage utility revealed that we had a grand total of 104 MB of images on the site:

$ du -hs images/
104M

That includes all of it, not only Jenny’s photos, but a quick browse of the directory showed that her’s account for the majority. The quick perusing also revealed that most image files were either smaller than ~500 KB or larger than ~2 MB. Given that, 1 MB seemed like a reasonable line to draw and I scaled down all larger files with the following Bash:2

$ for f in `find images -size +1M`; do sips --resampleHeightWidthMax 1024 $f; done

After mowing down all the huge pics, the entire images folder shrunk by over 90%. That’s even better than I’d hoped for.

$ du -hs images/
9.5M

See commit a4e80 for the entire resultant changelist.

Now We’re Fast(er)

After pushing those changes, fetching the entire page took 2 seconds; about a 85% speedup. A 2 second page load might not win many awards, but it’s an enormous improvement and not half bad.

$ wget --page-requisites http://www.nerdster.org/Helsinki/
[ ... ]
FINISHED --2014-12-15 19:51:16--
Total wall clock time: 4.7s
Downloaded: 24 files, 3.8M in 2.0s (1.84 MB/s)


  1. I’m thinking of a page with ten 15M images. Rough guess at the pixel count, the point is it’s a lot.
  2. sips (scriptable image processing system) is OS X specific.

Leave a Comment