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