Extract critical css rules into a seperate stylesheet
This module allows to put a (blocking) lightweight CSS-File with critical style information into the HTML-head and the full CSS at the end of the body.
This may increase loading and parsing time of your website and avoids a FOUC.
$ npm install --save-dev gulp-critical-css
const gulp = ;const criticalCss = ;gulp
Usage in CSS
By default every rule that contains
critical: this; is extracted into the critical file.
If you want to extract Selectors matching a RegExp or selectors that does not contain
critical: this; take a look at the options.
Lets you define Selectors to extract into critical.
This may be a simple string like
.navbar > .nav,
a or a
Strings are compared to the found selectors with
foundSelector.indexOf(selector) !== -1 Regular expressions are tested with
- Support for Sourcemaps
Any Ideas? Tell me!
MIT © Michael Scharl