---
title: "Inline Critical CSS"
description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!"
source: "https://www.netlify.com/integrations/inline-critical-css/"
last_updated: "2026-07-27T14:57:54.000Z"
---
[Back to Templates](/integrations/templates)

## Details

-   Developed by
-   Need Help?[Contact Netlify Support](https://www.netlify.com/support/)
-   More Info
    -   [npm package](https://www.npmjs.com/package/netlify-plugin-inline-critical-css)
    -   [Review release notes](https://github.com/Tom-Bonnike/netlify-plugin-inline-critical-css/releases)
    -   [Read docs](https://github.com/Tom-Bonnike/netlify-plugin-inline-critical-css#readme)
    -   [Report an issue](https://github.com/Tom-Bonnike/netlify-plugin-inline-critical-css/issues)

A Netlify Build plugin to extract and inline your [critical CSS](https://web.dev/extract-critical-css/), built on top of the [`critical` package](https://github.com/addyosmani/critical). It extracts the CSS for above-the-fold content and inlines it into the HTML document in order to render content to the user as fast as possible.

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 [`netlify-plugin-inline-source`](https://github.com/tom-bonnike/netlify-plugin-inline-source) to inline your other assets/sources such as small images, SVGs or render-blocking scripts.