Let’s Look at Load Time Performance
I’ve been doing work on my site for far too long now.
One of the things I spent some time on up front was getting my PageSpeed Score up. All the way up in fact, to 100/100.
The one niggle I had with this score, was I felt like I cheated it. I hadn’t optimised my critical rendering path. I just inlined my CSS. My CSS was hand-written and the structure of my Sass meant each CSS file included what it needed and nothing else (or at least I think it does).
#The Test
Once I had SSL all set-up these are the kind of results I’m seeing on my sites.
Webpagetest.org
On Webpagetest.org, running my site through a slow 3G connection, these are the load times I’m seeing.
That’s 4.964s to document loaded, that is bad.
My key worry here is that inlined CSS, means no cached CSS files, which means any shared CSS across pages, will be lost and there are a lot of shared elements.
I can’t tell too much from this waterfall chart. The biggest concerns are the time to first byte and I’m not entirely sure why it’s so slow (bad PHP code or server instance).
Analytics
Analytics has a rather nice feature of telling you what your average load time is for a page.
You can find it in Behaviour > Site Speed > Page Timings
I can’t really follow what the data is showing me, but one of the important metrics is the 3.92s average load time. Not that far off from the Webpagetest.org findings.
#What If I Didn’t Inline All the CSS
There are a few reasons why I thought separating inlined styles and shared CSS file styles: - The initial HTML to download will be smaller - The stylesheet would then be downloaded asynchronously with the other assets (hopefully). You can see this happening for some assets on the webpagetest waterfall - This should help the average page load time since the CSS file can then be cached and shared across each page. - SPDY support is meant to be ok with sending multiple requests on a single connection.
I made the changes to my site, inlining only the styles specific to that page and creating a common CSS file for the other pages to share.
Comparing the webpagetest results from before with this test, we see a few things.
- The site takes longer to load going from 4.964s to 5.244s for the first view and from 0.918s to 0.972s on the repeat view.
- The CSS seems to be delaying the loading of the image on the home page.
Now We Play the Waiting Game
I want to see if this change affects the average page load time over on Analytics.
In theory, pages should be able to pull the cached version of CSS while benefiting from the smaller HTML making it faster to download.
More in a weeks time.
A Week Later
Well after a week, it seemed that the average load time shot up.
I think this was simply due to not giving Analytics enough time to collect a valid amount of data, it seems that not every request collects page load time.
I’ve reverted the change for now, will perhaps dig into Analytics to get some more reliable results.
Orig Photo: https://flic.kr/p/4ewaVP
Found an issue?
All my posts are available to edit on GitHub, any fix is greatly appreciated!