The Blog Goes on an Image Diet

I spent a lot of yesterday working on getting my blog a little leaner, getting it to run a little faster. My site works fine on mobile, but it’s a little… heavy. So I decided to do a bit of housekeeping.

With WordPress 4.4, there’s now responsive image support. Which, up until now, I haven’t done very much with. Seeing this, I figured it would be a good idea to go back and revisit the images I’ve uploaded over the years.

Pre-2011, most of the images I uploaded manually (back when I was using MovableType). A lot of those early pictures were probably pretty big (back before I even know about a ‘Save for Web’ option in Photoshop).

These assets date back to 2002, several years before YouTube even existed. So they’re old. To go back and optimize those images, I ended up using ImageOptim (or more specifically, ImageOptim-CLI).

All told, those images were from July, 2002 – September, 2011 and clocked in at around 700MB. After optimization, I think it shaved off about 50 MBs.

For the other images, which I uploaded via WordPress… it’s a bit trickier. For each image created there are additional thumbnails generated, depending on the WP theme’s rules. So one uploaded file (photo.jpg) could result in numerous files saved out to different dimensions (photo-300×200.jpg, photo-150×150.jpg, etc).

I pulled down all my WP images and they clocked in at 2.9GB. Yes, that’s no typo. GB.

When I opened up the developer tools in Chrome and started to check out the actual weight of my site… the biggest offender were images. Even after trying to optimize images, it seemed like everything was huge.

It turns out the culprit was all these generated thumbnails! As much as I optimized my images before sending them to WordPress… the generated thumbnail files were oftentimes larger than the original!

Doing a bit more digging, I found that in my WordPress theme… there was logic that set the quality of the thumbnails being generated. And they were set at 100. No wonder so many of my thumbnails ended up being bigger than the original!

Running ImageOptim didn’t make a lot of sense here, as the thumbnails seemed to be the major culprit. So I adjusted the theme’s thumbnail quality setting to 70, and went about the huge task of regenerating every single thumbnail, from 2011 – to now.

Luckily, as in many things WordPress related… there’s a plugin for that. Aptly titled Regenerate Thumbnails.

Funny side note – the plugin is createdd by Alex Mills, who goes by the online name Viper007Bond. I think I actually remember seeing him in the bowels of the user support forms over at HostRocket many eons ago. Small world!

While there is an option to regenerate all thumbnails in one shot… I decided to be more cautious about things. I’ve had bad luck at a prior host working on my site, given how large it is. So I didn’t want to throw any flags by attempting to regenerate thumbnails for nearly 3+ years of daily posts.

I worry sometimes, whether plugins are designed to handle the volume of content I have set up via WordPress. Perhaps they are, but I’ve got a tremendous amount of stuff that I’ve build up here, over the years.

As an example – I think the maximum you can import into WordPress is maxed at a 32MB XML file. The content of my blog, when exported out, clocks in at 45MB+. Thirteen years of daily blog posts will do that.

So to play things super safe – I ended up manually regenerating things in groups of 50 at a time. I made myself a little tracker while I worked, and stepped through each month/year bit by bit, with little issue.

I also went back in and revisited the home page a bit. Rather than having a carousel for my hero images (which required 5x the images to be loaded), I made it random. So that took a great deal of the weight out. I also modified the code a bit so that the hero image would be responsive – and now they’re using the appropriate sizes (as opposed to taking a 900px image and crushing it down).

I forgot to take notes down before I began, but I think my site was clocking in at around 2.5MB for the home page (much of that weight due to the oversized thumbnails).

I’m super happy to say that now, the home page is weighing in at right around 1MB. It feels much faster to me on my mobile phone, but I’d like to give it a whirl once I’m not on my home WiFi to really see.

There’s still a lot more work to be done, but today was a great start. I’ve been debating a site redesign for a while now, but not sure if I’ll get around to it over break or not.

I like the idea of starting over with a fresh/new theme, but part of me is considering just trying to create my own theme from scratch, using Bones as a starter. I’m a terrible designer, so if I go this route… it’s going to be a super slow process, I fear.

For now though – diet is done, and things are leaner. Thinking about getting some new clothes. We’ll see how it goes.

Related:
Migrating from Movable Type to WordPress
Hello World: New Site Design is Up!