--- 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-07-11T03:08:35.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 News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_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/)