BrowserUX Preload Assets
Boost your web interface performance by intelligently preloading critical resources.
BrowserUX Preload Assets is a
configurable Vite plugin that simplifies the injection of <link rel="preload"> and
<link rel="preconnect"> tags for essential images, fonts, JS, and CSS files.
Using explicit configuration or HTML markup attributes, you stay in control of which resources
are prioritized during the initial load. Compatible with light/dark themes
(via BrowserUX Theme Switcher) and Google Fonts, it improves rendering speed.
npm install vite-plugin-preload-assets
Plugin for Vite
See the CHANGELOG
Key Features of BrowserUX Preload Assets
- 📷 Automatically preloads images marked with
data-preload, attribute order independent - 🖼️ Supports
srcset: all candidate URLs are preloaded automatically - ⚡ Adds
fetchpriority="high"on explicitly preloaded images - 🌗 Handles dark mode variants (
has-darkclass) and preloads both light and dark versions - 🔤 Preloads fonts via configuration,
crossoriginadded automatically per spec - 🧠 Uses
rel="modulepreload"for critical JS files (correct for Vite's ESM output) - 🎨 Preloads critical CSS files by matching configured entry names against the build output
- 🌐 Injects
<link rel="preconnect">tags for Google Fonts automatically - 🔁 Deduplicates all injected tags, no duplicate hints across config and HTML
- 🏗️ Build-only, never runs in development mode (
apply: 'build') - 🚀 Zero runtime dependencies
- 🧼 No manual HTML changes required beyond
data-preloadon images