Optimizing Site

So I showed the new site to a few friends, and as expected, they pointed out all kinds of things to fix :)

Chief among them was the observation that if I’m complaining about website sizes, the least I could do is to stop spamming 2MB images on my portfolio pages. While these are basically galleries, nothing advertises them as such and it might surprise some users. I was also curious how this works.

I checked webpagetest; the starting page is good enough:


The full page loads under 1 second. That’s good enough, but it’s a page with 13 words on it, so… checking the waterfall image, we can see that the javascript and fonts are the bulk of the page.

That’s unfortunate, but sort of expected: both are part of the theme I’m using here, and I haven’t gotten around removing them. I suspect the fonts will be rather easy, but the javascript seems to be some kind of minimized package of multiple libraries, so it’s not readily apparent which parts will I need to stay responsive. The author stated that I’ll need to fire up nodeJS to edit it, which is baffling to be honest.

A single post with no images yields the same results. So let’s move on to the galleries; here’s how the prototypes page looks like in webpagetest:

So: this page takes 13 seconds to fully load. The waterfall image is simple: images dominate everything. I’m not using thumbnails, nor do I want to. But the images can be optimized, so I tried a few services. The “space shooter” gallery was originally ~9.5MB large. I tried imagecompressor.com, TinyPNG, and fileoptimizer. I was looking for tools that can compress images in bulk.

fileoptimizer is a downloadable tool, and it is unbearably slow: a single image took 3 minutes to process. I wasn’t going to wait 4 hours to do this, so I moved on. Of the remaining two, TinyPNG did slightly better: it compressed the 9.5MB gallery to 2.5MB (imagecompressor compressed to 2.9MB).

Compressing all images took some time. Let’s check the results!

The prototype page is down to 3 seconds! That’s almost 80%; not insignificant at all.

To be honest, while compressing the images, it occured to me that maybe all this work doesn’t even worth it? But seeing the results this is clearly not the case. I’d say I wouldn’t bother with all this compressing, but for image-heavy pages this might very well make a difference.

Update: I removed the fonts! It was not exactly straightforward, but the site is even leaner.