# netlify-plugin-inline-critical-css

**Repository Path**: mirrors_floatdrop/netlify-plugin-inline-critical-css

## Basic Information

- **Project Name**: netlify-plugin-inline-critical-css
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-28
- **Last Updated**: 2026-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# netlify-plugin-inline-critical-css

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.

## Usage and inputs

To install the plugin, add it to your `netlify.toml` file.

```toml
[[plugins]]
  package = "netlify-plugin-inline-critical-css"

  # All inputs are optional, so you can omit this section.
  # Defaults are shown below.
  # You can also refer to `critical`’s documentation: https://github.com/addyosmani/critical.
  [plugins.inputs]
    # Whether to minify the generated critical-path CSS.
    minify = true

    # Whether to remove the inlined styles from any stylesheets referenced in the HTML. Use with caution. Removing the critical CSS per page results in a unique async loaded CSS file for every page, meaning you can’t rely on cache across multiple pages.
    extract = false

    # An array of objects containing `width` and `height` to deliver critical CSS for multiple screen resolutions.
    [[plugins.inputs.dimensions]]
      width = 414
      height = 896
    [[plugins.inputs.dimensions]]
      width = 1920
      height = 1080
```

Once installed and configured, the plugin will automatically run on the Netlify CI.

### Testing locally

To test this plugin locally, you can use the [Netlify CLI](https://github.com/netlify/cli):

```bash
# Install the Netlify CLI.
npm install netlify-cli -g

# In the project working directory, run the build as Netlify would with the build bot.
netlify build
```