Vite plugin Critical CSS

Vite plugin to use inline critical CSS in html pages and lazyload CSS file in build mode

Configuration

# .env
VITE_PUPPETEER_EXECUTABLE_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

import criticalCssPlugin from "@rohenha/vite-plugin-critical-css"

export default defineConfig({
  plugins: [
    criticalCssPlugin({
      viewportWidth: 1440,
      viewportHeight: 930,
      outputDir: '_site',
      timeout: 30000
    }),
  ]
})

Options

Option	Type	Défaut	Description
viewportWidth	number	1440	Window width to render each page
viewportHeight	number	'930'	Window height to render each page
outputDir	string	'_site'	Vite output folder
timeout	number	3000	Timeout to read each page

Usage

Prod

npm run build

Read each html pages, extract critical CSS and inline it in head