A few months ago I noticed that the home page of this site was taking multiple seconds to load. Common wisdom is that a “good” loading time is under 200ms, and even though a photo blog such as this might be a bit slower than a text-heavy site, multiple seconds is just too long to wait.
The best lead I had as to why this was taking so long was the comment inserted by the WP Super Cache plugin at the bottom of every page recording how long it took to generate in seconds. This was frequently more than 3 seconds which suggested that the problem was either my web server being too slow or a problem with my WordPress setup. Discounting the first as unlikely, I did some reading up on WordPress performance-tuning. The most practical advice was to minimise the number of plugins you use, and turn off each plugin in turn and check the effect on load-time before and after. I use few plugins but had been fond of Flickr Justified Gallery for displaying my Flickr-hosted photographs, and of course this was the culprit. The problem is not the plugin itself but Flickr’s own API—generating each gallery requires a query to Flickr to retrieve the list of photos in the album.
My preferred solution was to host my own images. This blog is 14 years old now and as I learned last year, third party services can disappear or change unexpectedly. Sadly the built-in gallery layout with WordPress 4.x remains an old-fashioned looking grid of square thumbnails that can fail to represent the underlying photograph properly (example). The JetPack add-on comes with a more attractive gallery layout but automatically uploads and serves all your images from their servers, which has its own downsides.
I looked at a number of third-party gallery plugins but anything outside the WordPress core also has the same “third-party risk” as Flickr: the code could stop working in the future, breaking all my old posts. None could also match the slick efficiency of Flickr’s upload workflow for optimising, arranging and captioning images. Fortunately while I was investigating this, WordPress released their new Gutenberg Editor. This comes with a new Gallery, the first version of which was a bit buggy but has the modern look that I wanted, and has improved over the last few months. (At time of writing there remains a bug where clicking on any photo in a gallery displays the first photo in the gallery not the one you clicked on. This is due to be fixed in mid-January.)
Switching to the new gallery improved page-generation times but without Flickr to optimise my images, I need to do this prior to upload to keep page-load times acceptable. This involves a two-step process:
- Use ImageMagick to resize images to no more than 2048 pixels on their longest edge: mogrify -resize 2048x2048 *.jpg (be careful, this changes the original files!)
- Reformat to be progressive JPEGs and apply lossless optimisation. There are a number of tools that can do this but ImageOptim is an efficient open-source drag-and-drop option for MacOS.
The final tweak, as recommended by Google’s PageSpeed Insights tool, was to defer offscreen images. This should make the initial page render faster by not loading images that are not yet viewable, and was already available as part of the Jetpack add-on (Lazy Load Images).