Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
metalsmith-inline-critical-css
Advanced tools
metalsmith-inline-critical-css
Metalsmith plugin to inspect HTML files, inline used selectors from specified CSS, and load the rest asynchronously.
metalsmith-inline-critical-css
A Metalsmith plugin to inspect HTML files, inline used selectors from specified CSS, and load the rest asynchronously.
Motivation
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!
Quick start
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();
Options
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;
}
Credits, Thanks, Inspiration
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.
Package last updated on 12 Nov 2018
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.
Related posts
Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
By Sarah Gooding - Feb 04, 2025
Research
Security News
Go Supply Chain Attack: Malicious Package Exploits Go Module Proxy Caching for Persistence
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
By Kirill Boychenko - Feb 04, 2025