netlify-plugin-inline-critical-css
A Netlify plugin to extract and inline your critical CSS, built on top of the `critical` package.
Last updated 2 months ago by tombonnike .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install netlify-plugin-inline-critical-css 
SYNC missed versions from official npm registry.

netlify-plugin-inline-critical-css

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.

Usage and inputs

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

[[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:

# 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

Current Tags

  • 1.1.3                                ...           latest (2 months ago)

9 Versions

  • 1.1.3                                ...           2 months ago
  • 1.1.2                                ...           2 months ago
  • 1.1.1                                ...           3 months ago
  • 1.1.0                                ...           3 months ago
  • 1.0.4                                ...           3 months ago
  • 1.0.3                                ...           3 months ago
  • 1.0.2                                ...           3 months ago
  • 1.0.1                                ...           3 months ago
  • 1.0.0                                ...           3 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |