Welcome to our series highlighting Netlify Build Plugins! Netlify Build Plugins are community-contributed scripts that can be used to perform all kinds of clever actions each time your site is built and deployed. They can automate workflows and tasks, manage notifications, and kick off events. This week, we’re highlighting the Inline Critical CSS plugin, contributed by Tom Bonnike, who is also an engineer at Shopify. The plugin extracts and inlines your critical above-the-fold CSS, and is built on top of the popular critical package.

If you’re using the Jamstack for speedy content delivery, inlining critical CSS can make your content render even faster. Inlining the critical CSS directly into the HTML document eliminates additional requests and can be used to deliver a “one roundtrip” critical path where only the HTML is a blocking resource. You can use this plugin together with Bonnike’s Inline Source plugin to inline your other assets/sources such as small images, SVGs or render-blocking scripts.

Plugin: Inline Critical CSS Netlify Build plugin
Automatically extract and inline the critical CSS of your pages in order to render content to the user as fast as possible.
By Tom Bonnike
Install now

And if you’re interested in learning more about Netlify Build Plugins, check out our directory of community plugins, or learn how to create your own.