In this series of blogs, I am going to run through ways in which you can increase your score on the Google Page Speed Insights tool.
If you’re getting a score below 50 on Desktop or Mobile I would suggest it’s time to look at ways you can improve your layouts and renderings. A score above 80 and you’re really doing pretty well.
If you got a score of 100 … you should probably be writing this blog instead of me. 🙂
Topic 1: Above the fold content / Critical CSS
One of Google’s recommendations is to use a technique called:
- Above the Fold
- Critical CSS
As you can imagine this refers to the CSS required to render only the visible part of the page.
In order to do this, you render the critical CSS inline within the head tag. The rest of your CSS is then loaded using a deferred script block approach. This is all demonstrated in a simple example on this page.
The way this works is the inline minified CSS is delivered over the network as part of the page payload. It is not an external asset and will not block the page load via another network request. The page can, therefore, display the visible section (above the fold) immediately after the page is downloaded.
The bulk of CSS required by the page can be loaded a few moments later via deferred network requests.
What is the best way to construct the minimised block of Inline CSS you ask?
Lucky for us a very handy node tool called “critical” is available for download.
You can really easily spin up a gulp script that will generate all the critical CSS for the main pages across your Sitecore website.
A full example of a gulp critical script can be found here. Download it and simply run:
- npm install
This will generate a series of CSS files that contain critical viewport CSS.
In the next blog post, we will cover off how to integrate this inline CSS (above the fold) into our Sitecore layouts.