BrowserUX Critical CSS
Eliminate render-blocking CSS and dramatically improve your LCP score.
BrowserUX Critical CSS is a Vite
plugin that automatically extracts the CSS needed to render above-the-fold content,
inlines it directly in the head as a style tag, and defers the full stylesheet asynchronously
using the link rel="preload" pattern. The extraction uses a headless browser with configurable
viewport dimensions, making it accurate across both mobile and desktop breakpoints. The result is
a page that renders instantly without waiting for any CSS to download.
npm install vite-plugin-critical-css
Plugin for Vite
See the CHANGELOG
Key Features of BrowserUX Critical CSS
- 🚀 Inlines critical (above-the-fold) CSS directly in
headfor instant first paint - ⚡ Eliminates render-blocking stylesheets for a dramatic LCP improvement
- 📱 Multi-viewport analysis, extracts CSS for both mobile and desktop in one pass
- 🔁 Defers non-critical CSS with
link rel="preload" as="style" onloadand anoscriptfallback - 📄 Processes all HTML files in the output directory automatically
- 🔍 Supports glob patterns to target specific pages
- 🎯 Force-includes CSS selectors that are only active after JavaScript runs (e.g. theme switchers)
- ⏱️ Configurable headless browser timeout per page
- 📦 Optionally logs per-file processing results
- 🛠️ Powered by penthouse, direct headless extraction, no temp-file intermediary
- 🖥️ Compatible with WSL2, uses a local HTTP server instead of
file://URLs, so Windows Chrome can load your pages