metalsmith-inline-critical-css
Advanced tools
Metalsmith plugin to inspect HTML files, inline used selectors from specified CSS, and load the rest asynchronously.
A Metalsmith plugin to inspect HTML files, inline used selectors from specified CSS, and load the rest asynchronously.
When the browser encounters a <link rel="stylesheet"> in the <head>, it pauses, goes to the network, fetches the file, and only then continues.
This is called "render blocking".
If it sounds bad for performance, it's because it is!
This is especially true for slower networks where the latency alone can add seconds to the request.
To combat this, you can "inline" the used or critical CSS for a page as a <style> tag.
You then load the rest asynchronously.
To do that, you link the stylesheet as <link rel="preload">, which decouples downloading from execution, and allows the browser to continue.
Once the stylesheet has loaded, it is "swapped in".
To account for browsers that do not support rel="preload", we use the excellent LoadCSS relpreload.js.
Inlining the critical CSS for a page is one of the most important optimisations you can do to make your site paint faster!
This package is distributed via npm.
$ npm install --save metalsmith-inline-critical-css
# or
$ yarn add metalsmith-inline-critical-css
Then you can use the plugin in your metalsmith pipeline:
const fs = require('fs');
const path = require('path');
const metalsmith = require('metalsmith');
const criticalCss = require('metalsmith-inline-critical-css');
// Set these as you want for your application
const INPUT_DIR = '_site/';
const OUTPUT_DIR = '_site/';
function main() {
// Run metalsmith pipeline
metalsmith(process.cwd())
.source(INPUT_DIR) // source directory
.destination(OUTPUT_DIR) // destination directory
.clean(false) // clean destination before
.use(
criticalCss({
// Files to run against
pattern: '**/*.html',
// The CSS file whose selectors will be matched against the html
cssFile: path.join(INPUT_DIR, hashedCssFilename),
// The path under which the css is included in the template files
cssPublicPath: hashedCssFilename,
})
)
.build(function(err) {
if (err) {
console.log('Error running the metalsmith pipeline: ' + err);
throw err;
}
console.log('Done!');
});
}
main();
interface IOptions {
/** A multimatch pattern of files to run on. */
pattern: string;
/** The name of the css file in the metalsmith data. */
cssFile: string;
/**
* The path under which the css is included in the template.
* Important for knowing which <link> tag to replace.
*/
cssPublicPath: string;
}
Thanks to Filament Group for their work on Load CSS!
FAQs
Metalsmith plugin to inspect HTML files, inline used selectors from specified CSS, and load the rest asynchronously.
The npm package metalsmith-inline-critical-css receives a total of 0 weekly downloads. As such, metalsmith-inline-critical-css popularity was classified as not popular.
We found that metalsmith-inline-critical-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.