Inline critical CSS and lazy-load the rest.
npm install beasties

> Beasties is a plugin that inlines your app's [critical CSS] and lazy-loads the rest. It is a maintained fork of GoogleChromeLabs/critters
It's a little different from other options, because it doesn't use a headless browser to render content. This tradeoff allows Beasties to be very fast and lightweight. It also means Beasties inlines all CSS rules used by your document, rather than only those needed for above-the-fold content. For alternatives, see Similar Libraries.
Beasties' 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.
- Fast - no browser, few dependencies
- Integrates with Webpack [beasties-webpack-plugin]
- Supports preloading and/or inlining critical fonts
- Prunes unused CSS keyframes and media queries
- Removes inlined CSS rules from lazy-loaded stylesheets
First, install Beasties as a development dependency:
``sh`
npm i -D beasties
or
`sh`
yarn add -D beasties
`js
import Beasties from 'beasties'
const beasties = new Beasties({
// optional configuration (see below)
})
const html =
const inlined = await beasties.process(html)
console.log(inlined)
// "
I'm Blue"
`Usage with Vite
Beasties can be used with Vite through vite-plugin-beasties. 
Just add it to your Vite configuration:
`js
// vite.config.ts
import { defineConfig } from 'vite'
import { beasties } from 'vite-plugin-beasties'export default defineConfig({
plugins: [
beasties({
// optional beasties configuration
options: {
preload: 'swap',
}
})
]
})
`The plugin will process the output for your
index.html and inline critical CSS while lazy-loading the rest.Usage with webpack
Beasties is also available as a Webpack plugin called beasties-webpack-plugin. 
The Webpack plugin supports the same configuration options as the main
beasties package:`diff
// webpack.config.js
+const Beasties = require('beasties-webpack-plugin');module.exports = {
plugins: [
+ new Beasties({
+ // optional configuration
+ preload: 'swap',
+ })
]
}
`That's it! The resultant html will have its critical CSS inlined and the stylesheets lazy-loaded.
Usage
$3
All optional. Pass them to
new Beasties({ ... }).#### Parameters
-
options#### Properties
-
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)_
- remote Boolean Download and inline remote stylesheets (http://, https://, //) _(default: false)_
- 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