Critically
Tiny, performant, isomorphic library for extracting the critical CSS.
Compared to critical this library:
- Is so much smaller, at about 2kb in size.
criticalinstead needs to download a whole browser. - It works in the browser too, which is useful if you need to store the previous state of the app or a skeleton of it.
- Will output slightly larger strings, as only simple minification techniques are performed.
- Is much faster.
Install
npm install --save criticallyAPI
This library provides the following interface:
type Options = {
document?: Document, // The document from which to extract the critical CSS
html?: string, // The HTML string from which to extract the critical CSS
minify?: boolean, // Whether to enable minification or not
transform?: ( doc: Document ) => Document | void // A function that will be run before extracting the critical CSS, useful for removing unneeded elements from the document
};
type Result = {
html: string, // Full HTML with the critical CSS embedded in it
css: string // Only the critical CSS
};
async function critically ( options: Options ): Promise<Result>;You need to provide either an HTML string or a document object. The document will be cloned, so you can modify it safely via the transform function.
Usage
import critically from 'critically';
critically ({ document })
.then ( ({ html, css }) => console.log ( html, css ) );License
MIT © Fabio Spampinato