One of My Favorite Performance-Boosting Netlify Plugins

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.

How it Works

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.

Before Inlining Critical CSS

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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/css/styles.css" />
    <!-- ... -->
  </head>
</html>

After Inlining Critical 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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* critical styles only for this page ... */
    </style>
    <!-- ... -->
  </head>
</html>

It then defers the loading of the main stylesheet while the rest of the page is downloaded and rendered by the browser.

<link
  rel="stylesheet"
  href="/css/styles.css"
  media="print"
  onload="this.media='all'"
/>

Benefits of Inlining Critical CSS

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.)

A Brief Introduction to Inlining Critical CSS

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.

Jun 25, 2022

CSS

Are You Overthinking CSS?

CSS is inherently simple. Maybe you're overthinking it. Maybe you don't need some crazy system guiding your CSS. Maybe you just need a few simple rules.

Dec 16, 2018

CSS

Simplify CSS Measurements using REMs

Using REMs exclusively for measurements in CSS is a handy tool for enforcing a stronger design system.

Nov 29, 2018