Transfrom <link> in HTML to progressive CSS loading.
npm i -D gulp-progressive-css
# or
yarn add -D gulp-progressive-cssBy using this plugin you can easily transform your simple HTML page to super fast HTML page with progressive CSS loading. You can do it by using custom priority attribute with <link> tag.
<link rel="stylesheet" priority="async" href="font.css">
<link rel="stylesheet" priority="critical" href="critical.css">
<link rel="stylesheet" priority="queued" href="content.css">
<link rel="stylesheet" priority="queued" href="footer.css">critical - means what this styles will be embedded into HTML file.
queued - means what this styles will be loaded asynchronously in specified order and without render blocking.
async - means what this styles will be loaded asynchronously outside of order and without render blocking.
Base directory to find CSS files.
Default: ./
Adds <noscript> tag with all styles.
Default: true
<link rel="preload"> will be added to <head> for each style.
Default: true
All non-critical internal styles will concatenate into one file.
Default: false
Path to save concatenated styles, relative to options.base
Default: ''
Function to generate concatenated styles file name.
Default: [html filename]-styles.css
const gulp = require('gulp'),
procss = require('gulp-progressive-css');
gulp.task('css', () =>
gulp.src('src/*.css')
.pipe(gulp.dest('dist'))
);
gulp.task('html', gulp.series('css', () =>
gulp.src('src/*.html')
.pipe(procss({ base: 'dist' }))
.pipe(gulp.dest('dist'))
));