Extracting your Above-the-fold Content with Critical Path CSS Generator
We’ll be using Autoptimize to eliminate the following warning in Google Pagespeed Insights:
In order to do this, we need to collect all of our CSS code so we can extract the Above-the-fold Content from our WordPress blog. Recently I found a free online which makes this insanely easy.
- Go to Sitelocity.com,
- Enter your site’s URL,
- Wait a few seconds,
- Do a victory dance!
Within the ‘CSS Options’ section there’s an option called ‘Inline and Defer CSS?’ That’s exactly what we’re looking for.
Check this option and paste your Critical Path CSS (the first text area on Sitelocity.com — you don’t need the second field!) into the text area that just magically appeared. Be sure to remove the
</style> nodes wrapped around the generated output your just copied. Click ‘Save Changes and Empty Cache’.
The Wait is Over!
If you run another Pagespeed Insights analysis you’ll see that your score has increased even more! Maybe it has even reached the perfect 100/100 score.
I don’t think anyone uses this feature in WordPress.
While it is forcefully integrated into the WordPress-core, our new BFF Autoptimize offers an options to disable it:
- Click the ‘Extra’-tab in Autoptimize’s Settings-page,
- Check ‘remove emojis’.
Remove Query Strings from Static Resources
Also located within the ‘Extra’-tab you’ll find another useful feature in Autoptimize. It’s the option to remove query strings from static resources. This does not improve pageload times, but does improve your score on Pingdom and Pagespeed Insights. It removes the
ver parameter from all your static (JS and CSS) resources, guaranteeing maximum usage of each visitor’s browser cache.
Leverage Browser Caching: Host Google Fonts Locally
You might’ve noticed the different options Autoptimize offers for Google Fonts. The most interesting option here is ‘Remove Google Fonts’.
Autoptimize implements an efficiënt way to parse your blog’s source and remove any URL’s pointing to Google’s Webfont services.
Just removing them will break your sites typography and design. Before removing them, you need locally hosted copies to replace them with. That’s why I built OMGF. Combining Autoptimize with OMGF is simply the easiest, most efficient way to locally host Google Webfonts and leveraging your browser cache. I suggest you click that link.
If you’re a Google Analytics user and you’re being punished by Pagespeed Insights and/or GT Metrix and/or Pingdom for using it, it’s about time you learned about CAOS. It does exactly what OMGF does for Google Fonts: it allows you to use Google Analytics with an always up-to-date, local version of analytics.js, instead of an externally hosted version. Effectively leveraging your browser cache even further, while preserving Google Analytics’ full functionality.