Add resource hints to your html files
Resource hints are a great way to reduce loading times on your progressive website. At the time of this writing, only Chrome has support for the major resource hints, but prefetch and dns-prefetch have fairly wide availability among browsers. Further reading here.
$ npm install --save-dev gulp-resource-hints- (optional) place the string
##gulp-resource-hints##in each of your HTML files'<head>, ideally right after your last<meta>tag. If not provided, resource hints will be inserted after your last<meta>in your document's<head>, or prepended to<head>, whichever comes first. - Add
gulp-resource-hintsto one of your Gulp tasks to parse your HTML files for static and external assets, and prepend them with resource hints to their respective<head>.
const gulp = require('gulp')
const resourceHints = require('gulp-resource-hints')
gulp.task('resourceHints', function (cb) {
return gulp.src('./app/**/*.html')
.pipe(resourceHints())
.pipe(gulp.dest('./dist/'))
})app/index.html
<html>
<head>
##gulp-resource-hints##
</head>
<body>
<img src="asset/image1.jpg" alt="">
<img src="asset/image2.jpg" alt="">
<img src="asset/image3.png" alt="">
<img src="asset/image4.svg" alt="">
</body>
</html>dist/index.html
<html>
<head>
<link rel="prefetch" href="asset/image1.jpg" /><link rel="prefetch" href="asset/image2.jpg" /><link rel="prefetch" href="asset/image3.png" /><link rel="prefetch" href="asset/image4.svg" />
</head>
<body>
<img src="asset/image1.jpg" alt="">
<img src="asset/image2.jpg" alt="">
<img src="asset/image3.png" alt="">
<img src="asset/image4.svg" alt="">
</body>
</html>options <Object> - see default options
pageToken <String>: add your own custom string replace token (default is ##gulp-resource-hints##)silent <Boolean>: disable logs and warnings (default isfalse)paths <Object>: custom string patterns for their respective resource hint.dns-prefetch <String>: custom URL pattern. Default is//*(all non-relative URLs)preconnect <String>: custom URL pattern.prerender <String>: custom glob pattern.prefetch <String>: custom glob pattern. Default is all locally-served fonts and images.preload <String>: custom glob pattern.
Similar to glob, url patterns work like so:
// Example 1: single wildcard
var options = {
paths: {
'dns-prefetch': '*unpkg.com'
}
}
'https://unpkg.com/react@15.3.1/dist/react.min.js' // match
'https://unpkg.com/history@4.2.0/umd/history.min.js' // match
'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' // no match
/* ----- */
// Example 2: comma-separated wildcards
var options {
paths: {
preconnect: '*unpkg.com,//cdnjs.cloudflare.com*'
}
}
'https://unpkg.com/react@15.3.1/dist/react.min.js' // match
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js' // match
'https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js' // no matchSee latest release.
Did my package help you out? Let me know!
Twitter: @EnricoTrain | GitHub: theetrain | Email: enrico@theetrain.ca
Report an issue