Inlining critical CSS is a breeze for classic SSG sites built and deployed using Netlify. Here’s how it works.
One of my favorite Netlify build plugins is one that often slides under the radar — netlify-plugin-inline-critical-css by Tom Bonnike.
This plugin injects the critical package into the Netlify build process. It targets a select set of built files and writes the CSS inline at the top of the file.
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.
Although more applicable to traditionally-built sites, inlining critical CSS can be a quick and easy performance boost for your site, especially as it grows.
PNPM is now natively supported by Netlify.
Common automation approaches to build up your confidence in deploying to production.