Inlining critical CSS is a breeze for classic SSG sites built and deployed using Netlify. Here’s how it works.
It then defers the loading of the rest of the site’s CSS so that it does not block the rendering process for your users.
When I run a build for my static site, I’m left with a
<link> element that loads my stylesheet in the
<head> of each document.
<link rel="stylesheet" href="/css/styles.css" />
<!-- ... -->
After this plugin runs, I see a style tag in my
<head> with only the styles required near the top of the home page.
/* critical styles only for this page ... */
<!-- ... -->
It then defers the loading of the main stylesheet while the rest of the page is downloaded and rendered by the browser.
The beauty of this process is that my users (like you!) only download the styles necessary to render the section of the page they will see upon initial load. And (theoretically) by the time they scroll, the rest of the CSS will have loaded, and the styles will be in place.
For me, this was a critical improvement on the road from turning a page speed score of 60 all the way up to 100.
If you’re building static sites with Netlify, it’s worth looking into this plugin. (It may still be useful if using more modern tooling.)
If you want to read more about inlining critical CSS, I wrote a brief intro guide.