Learn how to Visually Build at Scale with Builder.io and Netlify Register now!

Back to Community Built
Inline Critical CSS Logo

Inline Critical CSS

Automatically extract and inline the critical CSS of your pages in order to render content to the user as fast as possible.

  • DevTools
Add build plugin

A Netlify Build plugin to extract and inline your critical CSS, built on top of the critical package. 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 to inline your other assets/sources such as small images, SVGs or render-blocking scripts.