With 101 ways to improve site speed achieving perfection is hard. Focus on the easy wins and get the biggest improvements with the least effort.
In this post I'll run through the steps I took to cut page-load from ~200KB to 117KB in under one hour with a few template tweaks and without touching images. Easy wins don't come easier than these.
Sure, there's a lot more that can be done, but I will leave that for another day. Sensible optimisation is all about quickly identifying the easy wins and those that will deliver the greatest reward.
Before tweaks
Being built with a template framework in which performance runs to the very core, Joomlanauts was never a very heavy site to begin with but that doesn't mean there wasn't room for a substantial improvement.
Before any changes the Joomlanauts homepage made 14 http requests and, with a desktop browser, had a total page-load of 373KB. The Portent template article made 16 requests, sending 286KB down the wire and an image-free blog list, like joomlanauts.com/faq made 12 requests and weighed 198KB.
A quick look in my browser's web inspector revealed two prime candidates for my immediate attention, as they were global assets loaded on every page; my stylesheet and Font Awesome's icon font files.
Before optimisation style.css was 4755 lines, expanded and including comments, and weighed 87.1KB. Minified it was 59.8KB (11.5KB Gzipped).
…fontawesome-webfont.woff is 64.3KB!
I knew I was never going to use 497 icons on my site and I knew that my grid system (in fact any grid system) contains a ton of width declarations that aren't in use anywhere, so I got my scalpel out.
Disable unused CSS modules
One of the greatest benefits of a sensibly architected, object-orientated, CSS framework is the ability to simply switch off css patterns that aren't being used. Not using it? Lose it!
Lighten your grid
Grids system are generally heavy, and this is due in large part to the repetitive declarations for widths required at each breakpoint. The more columns in your grid, and the more breakpoints you include, the more CSS you get.
Removing unused width declarations removed another 166 lines from my compiled stylesheet, but netted a comparatively small total gain of only 3.5KB due the use of @extends in the grid-width syntax. Of course, the widths we leave in are still being output multiple times, one for each breakpoint we're using, so it's also important to check that we aren't outputting a breakpoint-specific set of widths if we aren't using that breakpoint.
Slim your icons
Icon font are pretty darn useful, but they sure do bring a lot of bloat to your CSS. I was using 14 icons but including a unicode mapping class for 479 of them, oops!
This made a quite surprising difference, reducing my compiled stylesheet by a whopping 2170 lines, more than half the original total, and reducing file size to 36.8KB. That was far more than I had expected.
…and use lighter font files!
Of course, now I've removed the css for 465 icons, I may as well remove the glyphs as well and, thanks to the IcoMoon App that is super-easy. Just select the icons you are using and download your new font files. In my case the .woff for my Fontawesome icons dropped from 64.3KB to 6.1KB. Nice.
The results
In a little under and hour I managed to reduce the weight of all pages on my site by 98.4KB, simply by removing the bits I wasn't using from just two files.
Minified and with comments stripped my styles.css has come down from 59.8KB (11.5KB Gzipped) to 19.6KB (4.7KB).
There will be those who consider that a 98KB saving isn't a big deal, but that equates to a reduction of 42.5% in assets delivered by this template, and I consider that to be well worth an hour of my time. Moreover, it was 98KB of stuff that was never used.
I'm happy with that. For now…