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.
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!