This morning Smashing Magazine tweeted about their latest Page Speed Score: https://twitter.com/smashingmag/status/502334585511084033 And I wanted to know if it was possible if I could achieve that or better (preferably better!). Someone replied to the initial tweet saying that there was already a tutorial by Dave Rupert in two parts, I read the articles and applied what Dave learnt to my site. I have achieved 100 in both Mobile and Desktop and here's my score.
Changes I made
As I am using nginx and spdy 3.1 my site was already fast. 91 on desktop and 75 on mobile. But this was far from perfect so I:
- Deferred the loading of the web font. If you wait for the webfont to load before the html is loaded onto the page then that's a significant blocker. I used javascript that defers font loading.
- Inlined the CSS using a WordPress include
Future improvements
While the numbers say that it's 100% I am still not fully happy with this solution. I need to do resolve two issues:
- I want to automate the production of the critical css (at the moment all the CSS is inlined, rather than the critical css) but I had issues with Foundation's grid and Dave's method of creating the critical css.
- find a better way of including the cloud.typography.com font