- Stable
3.0.0
Toggle Menu
1.93s
70.65s
Quick Tip: Inline Minified CSS
Originally posted on The Simplest Web Site That Could Possibly Work Well on zachleat.com
This tip works well on small sites that don’t have a lot of CSS. Inlining your CSS removes an external request from your critical path and speeds up page rendering times! If your CSS file is small enough, this is a simplification/end-around for Critical CSS approaches.
Installation
npm install clean-css
to make the CSS minifier available in your project.
Configuration
Add the following cssmin
filter to your Eleventy Config file:
import CleanCSS from "clean-css";
export default function (eleventyConfig) {
eleventyConfig.addFilter("cssmin", function (code) {
return new CleanCSS({}).minify(code).styles;
});
};
const CleanCSS = require("clean-css");
module.exports = function (eleventyConfig) {
eleventyConfig.addFilter("cssmin", function (code) {
return new CleanCSS({}).minify(code).styles;
});
};
Create your CSS File
Add a sample CSS file to your _includes
directory. Let’s call it sample.css
.
body {
font-family: fantasy;
}
Capture and Minify
Capture the CSS into a variable and run it through the filter (this sample is using Nunjucks syntax)
<!-- capture the CSS content as a Nunjucks variable -->
{% set css %} {% include "sample.css" %} {% endset %}
<!-- feed it through our cssmin filter to minify -->
<style>
{{ css | cssmin | safe }}
</style>
Warning about Content Security Policy
style-src
directive allows 'unsafe-inline'
. Otherwise, your inline CSS will not load.
Or: use an 11ty.js
Template
Contributed by Zach Green
You can also inline minified CSS in a JavaScript template. This technique does not use filters, and instead uses async
functions:
import fs from "node:fs/promises";
import path from "node:path";
import CleanCSS from "clean-css";
export default async function (data) {
return `<style>
${await fs
.readFile(path.resolve(__dirname, "./sample.css"))
.then((data) => new CleanCSS().minify(data).styles)}
</style>`;
};
const fs = require("node:fs/promises");
const path = require("node:path");
const CleanCSS = require("clean-css");
module.exports = async function (data) {
return `<style>
${await fs
.readFile(path.resolve(__dirname, "./sample.css"))
.then((data) => new CleanCSS().minify(data).styles)}
</style>`;
};
All Quick Tips
- Quick Tip: Inline Minified CSS
- Quick Tip: Add Edit on GitHub Links to All Pages
- Quick Tip: Inline Minified JavaScript
- Quick Tip: Zero Maintenance Tag Pages for your Blog
- Quick Tip: Super Simple CSS Concatenation
- Quick Tip: Adding a 404 Not Found Page to your Static Site
- Quick Tip: Fetch GitHub Stargazers Count (and More) at Build Time
- Quick Tip: Trigger a Netlify Build Every Day
- Quick Tip: Cache Data Requests
- Quick Tip: Transform Global Data using an `eleventyComputed.js` Global Data File
- Quick Tip: Use local plugins to reduce config file size
- Quick Tip: Draft Posts using Computed Data
- View all of the Eleventy Quick Tips.