critical-css-parser
v1.4.1
Published
Get critical (above-the-fold) and the rest CSS using Puppeteer.
Downloads
173
Maintainers
abvcssReadme
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).
This library is part of other projects: critical-css-inliner, webpack-critical-css-inliner
Installation
npm install --save-dev critical-css-parser
// or
yarn add --dev critical-css-parserExamples
URL
const criticalCSSParser = require('critical-css-parser');
(async () => {
const result = await criticalCSSParser({
type: 'URL',
URL: 'https://abvcss.github.io/abvcss-website/', // try to check your site
enableGoogleFonts: false,
whitelist: /#foo|\.bar/
});
console.log(result.critical); // ''
console.log(result.rest); // ':not(pre)>code[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{'
})();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); // 'html{font-size: 10pt;}div{color: red;}'
console.log(result.rest); // 'p{color: red;}'
})();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 // good way to optimize size
});
console.log(result.critical); // 'p:hover a:first-child{color:red}'
console.log(result.rest); // '.card{padding:8px}'
})();Usage
criticalCSSParser
Pass options to criticalCSSParser({ ... }).
Parameters
options
Properties
typeString One of: HTML, URL or localServer. REQUIREDhtmlString Your custom html code (default: '') REQUIRED FOR type === HTMLcssString Your custom css code (default: '') REQUIRED FOR type === HTMLURLString URL of the page you need to optimize (default: '') REQUIRED FOR type === URLentrypointString Root of your application (default: '') REQUIRED FOR type === localServerfilenameString Your index file (default: 'index.html')enableGoogleFontsBoolean Set true to except Google Font styles (default:false)whitelistRegExp Whitelist of the critical CSS (default:/#fooBazBarAboveTheFold8917/)minifyBoolean 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