Critical CSS Generator
Setup Guide
/* Critical CSS extraction guide for: https://example.com */
/* Step 1: Install critical */
npm install --save-dev critical
/* Step 2: Add to your build script (package.json) */
"scripts": {
"critical": "critical https://example.com --base ./ --inline --dimensions 1200x900"
}
/* Step 3: Or use programmatically */
const critical = require('critical');
critical.generate({
inline: true,
base: './',
src: 'index.html',
target: {
html: 'index-critical.html',
css: 'critical.css'
},
dimensions: [{
width: 1200,
height: 900
}]
});
/* Step 4: Inline the critical CSS in <head> */
<style>
/* Paste critical.css contents here */
</style>
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>History
No saved configs yet.