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:
It’s a photo-rich article, but regardless, it has to be faster than that.
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:
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
After mowing down all the huge pics, the entire images folder shrunk by over 90%. That’s even better than I’d hoped for.
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.
- I’m thinking of a page with ten 15M images. Rough guess at the pixel count, the point is it’s a lot.
- sips (scriptable image processing system) is OS X specific.