---
title: "Learn about our popular Netlify Build plugin that inlines critical CSS to speed up your content rendering."
description: "If you’re using the Jamstack for speedy content delivery, inlining critical CSS can make your content render even faster. This community-contributed Netlify Build plugin extracts and inlines your critical above-the-fold CSS, and is built on top of the popular critical package."
source: "https://www.netlify.com/blog/2021/03/19/netlify-build-plugin-of-the-week-inline-critical-css/"
last_updated: "2026-08-05T06:35:56.000Z"
---
Welcome to our series highlighting [Netlify Build Plugins](https://www.netlify.com/integrations/)! 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](https://github.com/addyosmani/critical).

If you’re using the Jamstack for [speedy content delivery](https://www.netlify.com/products/edge/), 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](https://app.netlify.com/plugins/netlify-plugin-inline-source/install) to inline your other assets/sources such as small images, SVGs or render-blocking scripts.

![Netlify Build Plugin of the Week: Inline Critical CSS](/v3/img/blog/build-plugin-critical-css.png)

**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](https://www.npmjs.com/package/netlify-plugin-inline-critical-css)**  
**[Install now](https://app.netlify.com/plugins/netlify-plugin-inline-critical-css/install)**

And if you’re interested in learning more about [Netlify Build Plugins](https://www.netlify.com/integrations/), check out our [directory of community plugins](https://app.netlify.com/plugins), or learn how to [create your own](https://docs.netlify.com/configure-builds/build-plugins/create-plugins/).

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=Netlify Build Plugin of the Week: Inline Critical CSS&url=https://www.netlify.com/blog/2021/03/19/netlify-build-plugin-of-the-week-inline-critical-css/)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2021%2F03%2F19%2Fnetlify-build-plugin-of-the-week-inline-critical-css%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2021/03/19/netlify-build-plugin-of-the-week-inline-critical-css/)
-   [Bluesky](https://bsky.app/intent/compose?text=Netlify Build Plugin of the Week: Inline Critical CSS+https://www.netlify.com/blog/2021/03/19/netlify-build-plugin-of-the-week-inline-critical-css/)

* * *

### Tags

-   [CSS](/blog/tags/css/)
-   [Build Plugins](/blog/tags/build-plugins/)

## Keep reading

![](/images/blog-fallback-thumbnail.svg)

News & Announcements May 27, 2020

[

### Netlify Build Plugins Are Here!

](/blog/2020/05/27/netlify-build-plugins-are-here/)

-   ![Profile picture of Tara Z. Manicsic](/_astro/2ac74d0595066130d59f8c97e61332017cdbcb94-1000x921_ZyTafG.webp)
    
    Tara Z. Manicsic
    

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials April 30, 2020

[

### What’s a Netlify Build Plugin Series: Part 1 - Using Build Plugins

](/blog/2020/04/30/whats-a-netlify-build-plugin-series-part-1-using-build-plugins)

-   ![Profile picture of Tara Z. Manicsic](/_astro/2ac74d0595066130d59f8c97e61332017cdbcb94-1000x921_ZyTafG.webp)
    
    Tara Z. Manicsic
    

## Recent posts

Opinions & Insights July 28, 2026

[

### Open Weights and the 2nd World

](/blog/open-weights-and-the-2nd-world)

-   ![Profile picture of Mathias Biilmann](/_astro/f193d4707a6391d843d5aaa73338b5a5971ec5cc-960x960_1Yylqm.webp)
    
    Mathias Biilmann
    

Tools & Services July 28, 2026

[

### MCP goes stateless and extensible

](/blog/mcp-goes-stateless-and-extensible)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

News & Announcements July 28, 2026

[

### New Netlify projects are now private by default

](/blog/new-netlify-projects-are-now-private-by-default)

-   ![Profile picture of Taylor Barnett-Torabi](/_astro/cf4624da8c1286738397b6fecb53bad504df140b-400x400_ZsvK0s.webp)
    
    Taylor Barnett-Torabi
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)