I’ve recently redone my website. I wanted to try and strip a lot of stuff out of it as well as trying my hand at some new stuff like animations which I think I’ve pulled off alright. Along with all that, I wanted to make it as modern in terms of tech as I could so you’ll be glad to know, it’s Sassed up and Gulp’d to the max. It’s also my first attempt at inlining CSS and javascript which at first really threw me.
Say what Dan?
Well I followed instructions and I saw nothing really change. Google Page Insights still found things that were an issue, mainly around the CSS blocking the page from rendering.
FUUUUUUUUUUU!
I guess to be honest, I didn’t really know what I was doing. What CSS do I put inline? Can it include this and that. Well I managed to find a tool that did it for me…
Drum roll… Critical Path CSS Generator by Jonas Ohlsson. Basically it does the hard work for you. So you don’t have to. Job done, Google will recognise this and give me a gold star.
Did they heck!… “Eliminate render-blocking JavaScript and CSS in above-the-fold content”
FUUUUUUUUUUU!
Do I just accept this? Do I carry on? Alex Jegtnes suggested I look at loading the rest of my CSS asynchronously. Yeah right Alex, like I know how! So I looked a bit more and eventually gave up. I was getting 87% on mobile and 93% on desktop and to be honest, I could live with that.
Until 5am this morning when after a bit of reading I came across loadCSS by FilamentGroup which happens to be the same link that Alex had recommended. So I tried it and now, my site runs at 95% on mobile and 96% on desktop and I no longer see “Eliminate render-blocking JavaScript and CSS in above-the-fold content”.
But what about the remaining 3%-5%?
Well sadly, I host on 1&1 and it turns up that GZip (which is basically my main issue now) isn’t easy to sort on 1&1. I’ve tried pretty much everything in my htaccess file and lo and behold it never compresses my css files. The page is zipped but not the CSS so if you have an idea, let me now as I’ll buy you a nice present.
So yeah, it pays to listen to people on Twitter and to get up early.