Closing the PageSpeed Gap
July 28, 2016
My recent move to a Static site generator and full-site caching wasn’t enough to get a flawless score from Google PageSpeed Insights, so I kept on and finally achieved success. You probably don’t care, but I’m going to tell you about it anyway.
Embedding a streamlined bit of CSS isn’t complicated, but knowing what to lift out and doing it in perpetuity creates a workflow problem. Most projects that I work on use a single combined stylesheet, and this change now requires maintaining two of them and one must always account for above-the-fold styles. Thankfully Andrew Welch pointed me to loadCSS and criticalCSS1, and Patrick Harrington offered helpful advice about handling FOUT/FOIT and incorporating criticalCSS into the build process.
Sculpin’s Twig search paths are still a bit confusing to me, but now my gulp build process uses the
critical package to output a few different CSS files (for different layouts) in source/_layouts/criticalcss, and I can use a little bit of Twig to inline them:
When I want to reference a different critical CSS set, I can just choose a different file from the sub template, like this for a blog post detail:
Since nothing beats simply removing stuff that isn’t essential, I took a few bold steps:
Removed Google Analytics entirely.
I’m not promoting my brand or measuring conversions or even using insights to offer more to my audience. I’m just rambling here about things I’ve learned. CloudFlare still gives me broad pageview stats so I’m not completely in the dark, but now I have one less thing to check obsessively.
Replaced my Typekit fonts with self-hosted ones.
It took a long time, and lots of experimenting, to end up with Freight Text Pro, but I think it’s a clear improvement in terms of legibility, file weight, and caching performance. (No more Typekit pings or slowdowns!)
- Improved font loading.
As Patrick pointed out, it’s infuriating to have to wait on fonts and styles to load if you’re on crappy wifi and just want to see text. For that reason, I’m now using typekit/webfontloader and dropping my fancy styles if the visitor’s waiting around for more than two seconds. It’s as easy as dropping
timeout: 2000into the config, and it seems to at least work well with simulated dial-up connections.
After a few typographic adjustments, fixing some long-standing annoyances, and sprinkling in just a hint of structured data, I think I’ll be content with the site for at least another week.