eleventy-critical-css
Eleventy plugin to extract and inline critical (above-the-fold) CSS from your HTML templates.
You can easily add this plugin to your Eleventy project in just two steps or you can use index.js
as a reference for your own implementation of critical CSS!
Get Started
- Install
eleventy-critical-css
npm install eleventy-critical-css --save
- Add the plugin to your Eleventy configuration in
.eleventy.js
const criticalCss = require("eleventy-critical-css");
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(criticalCss);
};
Configuration
This plugin uses Critical by Addy Osmani to extract and inline critical from HTML templates i.e. any template with an output path ending in .html
.
You can pass options to Critical as a second parameter of addPlugin
:
const criticalCss = require("eleventy-critical-css");
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(criticalCss, {
minify: true,
height: 1080,
width: 1920,
});
};
You can see all options for Critical in the GitHub repository.
Default Options
The default options passed to Critical are:
{
assetPaths: [path.dirname(outputPath)],
base: this._config.dir.output,
html: content,
inline: true,
minify: false,
rebase: ({ originalUrl }) => originalUrl,
}
Where content
and outputPath
are the arguments passed to Eleventy transforms.