critical-css-parser
Critical-css-parser allows you to receive critical (above-the-fold) and the rest CSS.
It might be helpful to speed up initial rendering of a web page. More information.
There are 3 types of input information: HTML and CSS, URL and localServer.
Critical-css-parser uses Puppeteer and DropCSS under the hood, so it also supports adaptive design (both desktop and mobile versions).
It also supports minifying (by CSSO).
Installation
npm install --save-dev critical-css-parser
// or
yarn add --dev critical-css-parser
Examples
URL
const criticalCSSParser = require('critical-css-parser');
(async () => {
const result = await criticalCSSParser({
type: 'URL',
URL: 'https://enigmatic-dawn-63122.herokuapp.com/',
enableGoogleFonts: false,
whitelist: /#foo|\.bar/
});
console.log(result.critical);
console.log(result.rest);
})();
localServer
const criticalCSSParser = require('critical-css-parser');
(async () => {
const result = await criticalCSSParser({
type: 'localServer',
entrypoint: './www',
filename: 'index.html',
enableGoogleFonts: true
});
console.log(result.critical);
console.log(result.rest);
})();
HTML and CSS
const criticalCSSParser = require('critical-css-parser');
const html = `
<html>
<head></head>
<body>
<p>Hello <a href="#">World!</a></p>
</body>
</html>
`;
const css = `
.card {
padding: 8px;
}
p:hover a:first-child {
color: red;
}
`;
(async () => {
const result = await criticalCSSParser({
type: 'HTML',
html,
css,
minify: true
});
console.log(result.critical);
console.log(result.rest);
})();
Usage
criticalCSSParser
Pass options to criticalCSSParser({ ... })
.
Parameters
Properties
-
type
String One of: HTML, URL or localServer. REQUIRED
-
html
String Your custom html code (default: '') REQUIRED FOR type === HTML
-
css
String Your custom css code (default: '') REQUIRED FOR type === HTML
-
URL
String URL of the page you need to optimize (default: '') REQUIRED FOR type === URL
-
entrypoint
String Root of your application (default: '') REQUIRED FOR type === localServer
-
filename
String Your index file (default: 'index.html')
-
enableGoogleFonts
Boolean Set true to except Google Font styles (default: false
)
-
whitelist
RegExp Whitelist of the critical CSS (default: /#fooBazBarAboveTheFold8917/
)
-
minify
Boolean Set true to minify resulting styles (default: false
)
criticalCSSParser({...}) returns:
<Promise<{ critical, rest }>>
critical - above-the-fold CSS. These styles you can put into your <style>
tag.
rest - other CSS. You can lazy-load the rest like this.
License
MIT license