Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
The critters npm package is a tool for Webpack that helps to inline critical CSS and lazy-load the rest. It is designed to improve the performance of web pages by reducing the amount of CSS that needs to be loaded before the page can be rendered. It works by extracting and inlining the critical CSS needed for the initial view and deferring the rest.
Inlining Critical CSS
This feature allows you to inline the critical CSS directly into the HTML to speed up the initial paint of the web page. The code sample shows how to include Critters as a plugin in a Webpack configuration.
const Critters = require('critters-webpack-plugin');
module.exports = {
plugins: [
new Critters({
// Options go here
})
]
};
Lazy-loading Non-critical CSS
Critters can also lazy-load non-critical CSS, which means it will only load the additional CSS when it's needed. The 'preload' option can be set to 'swap' to load fonts using font-display: swap, and 'noscriptFallback' can be enabled to provide a fallback for when JavaScript is not available.
const Critters = require('critters-webpack-plugin');
module.exports = {
plugins: [
new Critters({
preload: 'swap',
noscriptFallback: true
})
]
};
Pruning Unused CSS
Critters can help remove unused CSS rules, reducing the size of the CSS that needs to be loaded. The 'pruneSource' option enables this functionality.
const Critters = require('critters-webpack-plugin');
module.exports = {
plugins: [
new Critters({
pruneSource: true
})
]
};
PurifyCSS Webpack is a plugin that removes unused selectors from your CSS, similar to the pruning feature of Critters. It differs in that it focuses solely on purifying CSS and does not handle inlining or lazy-loading.
Penthouse is a tool that generates critical path CSS for web pages. It is similar to Critters in that it helps identify and inline critical CSS, but it is not a Webpack plugin and requires separate integration into build processes.
loadCSS is a function for loading CSS asynchronously, which can be used to lazy-load non-critical CSS. Unlike Critters, it does not provide inlining or pruning features and must be manually integrated into the HTML and JavaScript.
Critters is a plugin that inlines your app's critical CSS and lazy-loads the rest.
It's a little different from other options, because it doesn't use a headless browser to render content. This tradeoff allows Critters to be very fast and lightweight. It also means Critters inlines all CSS rules used by your document, rather than only those needed for above-the-fold content. For alternatives, see Similar Libraries.
Critters' design makes it a good fit when inlining critical CSS for prerendered/SSR'd Single Page Applications. It was developed to be an excellent compliment to prerender-loader, combining to dramatically improve first paint time for most Single Page Applications.
First, install Critters as a development dependency:
npm i -D critters
or
yarn add -D critters
import Critters from 'critters';
const critters = new Critters({
// optional configuration (see below)
});
const html = `
<style>
.red { color: red }
.blue { color: blue }
</style>
<div class="blue">I'm Blue</div>
`;
const inlined = await critters.process(html);
console.log(inlined);
// "<style>.blue{color:blue}</style><div class=\"blue\">I'm Blue</div>"
Critters is also available as a Webpack plugin called critters-webpack-plugin.
The Webpack plugin supports the same configuration options as the main critters
package:
// webpack.config.js
+const Critters = require('critters-webpack-plugin');
module.exports = {
plugins: [
+ new Critters({
+ // optional configuration
+ preload: 'swap',
+ includeSelectors: [/^\.btn/, '.banner'],
+ })
]
}
That's it! The resultant html will have its critical CSS inlined and the stylesheets lazy-loaded.
All optional. Pass them to new Critters({ ... })
.
options
path
String Base path location of the CSS files (default: ''
)publicPath
String Public path of the CSS resources. This prefix is removed from the href (default: ''
)external
Boolean Inline styles from external stylesheets (default: true
)inlineThreshold
Number Inline external stylesheets smaller than a given size (default: 0
)minimumExternalSize
Number If the non-critical external stylesheet would be below this size, just inline it (default: 0
)pruneSource
Boolean Remove inlined rules from the external stylesheet (default: false
)mergeStylesheets
Boolean Merged inlined stylesheets into a single <style>
tag (default: true
)additionalStylesheets
Array<String> Glob for matching other stylesheets to be used while looking for critical CSS.reduceInlineStyles
Boolean Option indicates if inline styles should be evaluated for critical CSS. By default inline style tags will be evaluated and rewritten to only contain critical CSS. Set it to false
to skip processing inline styles. (default: true
)preload
String Which preload strategy to usenoscriptFallback
Boolean Add <noscript>
fallback to JS-based strategiesinlineFonts
Boolean Inline critical font-face rules (default: false
)preloadFonts
Boolean Preloads critical fonts (default: true
)fonts
Boolean Shorthand for setting inlineFonts
+ preloadFonts
* Values:
true
to inline critical font-face rules and preload the fontsfalse
to don't inline any font-face rules and don't preload fontskeyframes
String Controls which keyframes rules are inlined.* Values:
"critical"
: (default) inline keyframes rules used by the critical CSS"all"
inline all keyframes rules"none"
remove all keyframes rulescompress
Boolean Compress resulting critical CSS (default: true
)logLevel
String Controls log level of the plugin (default: "info"
)logger
object Provide a custom logger interface loggerincludeSelectors
RegExp | String Provide a list of selectors that should be included in the critical CSS. Accepts both RegExp and string.We can include or exclude rules to be part of critical CSS by adding comments in the CSS
Single line comments to include/exclude the next CSS rule
/* critters:exclude */
.selector1 {
/* this rule will be excluded from critical CSS */
}
.selector2 {
/* this will be evaluated normally */
}
/* critters:include */
.selector3 {
/* this rule will be included in the critical CSS */
}
.selector4 {
/* this will be evaluated normally */
}
Including/Excluding multiple rules by adding start and end markers
/* critters:exclude start */
.selector1 {
/* this rule will be excluded from critical CSS */
}
.selector2 {
/* this rule will be excluded from critical CSS */
}
/* critters:exclude end */
/* critters:include start */
.selector3 {
/* this rule will be included in the critical CSS */
}
.selector4 {
/* this rule will be included in the critical CSS */
}
/* critters:include end */
By default Critters evaluates the CSS against the entire input HTML. Critters evaluates the Critical CSS by reconstructing the entire DOM and evaluating the CSS selectors to find matching nodes. Usually this works well as Critters is lightweight and fast.
For some cases, the input HTML can be very large or deeply nested which makes the reconstructed DOM much larger, which in turn can slow down the critical CSS generation. Critters is not aware of viewport size and what specific nodes are above the fold since there is not a headless browser involved.
To overcome this issue Critters makes use of Critters containers.
A Critters container mimics the viewport and can be enabled by adding data-critters-container
into the top level container thats contains the HTML elements above the fold.
You can estimate the contents of your viewport roughly and add a <div data-critters-container
> around the contents.
<html>
<body>
<div class="container">
<div data-critters-container>
/* HTML inside this container are used to evaluate critical CSS */
</div>
/* HTML is ignored when evaluating critical CSS */
</div>
<footer></footer>
</body>
</html>
Note: This is an easy way to improve the performance of Critters
Custom logger interface:
Type: object
trace
function (String) Prints a trace messagedebug
function (String) Prints a debug messageinfo
function (String) Prints an information messagewarn
function (String) Prints a warning messageerror
function (String) Prints an error messageControls log level of the plugin. Specifies the level the logger should use. A logger will not produce output for any log level beneath the specified level. Available levels and order are:
Type: ("info"
| "warn"
| "error"
| "trace"
| "debug"
| "silent"
)
The mechanism to use for lazy-loading stylesheets.
Note: JS indicates a strategy requiring JavaScript (falls back to <noscript>
unless disabled).
media="not x"
and removing once loaded. JSrel="stylesheet"
once loaded (details). JS<link rel="alternate stylesheet preload">
and swap to rel="stylesheet"
once loaded (details). JS"js"
, but the stylesheet is disabled until fully loaded.Type: (default | "body"
| "media"
| "swap"
| "swap-high"
| "js"
| "js-lazy"
)
There are a number of other libraries that can inline Critical CSS, each with a slightly different approach. Here are a few great options:
This is not an official Google product.
FAQs
Inline critical CSS and lazy-load the rest.
The npm package critters receives a total of 1,635,466 weekly downloads. As such, critters popularity was classified as popular.
We found that critters demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers 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.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.