EN | FR

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.

• Project website
• Documentation
• Changelog

Features

• 📷 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-dark class) and preloads both light and dark versions
• 🔤 Preloads fonts via configuration, crossorigin added 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-preload on images

Installation

npm install vite-plugin-preload-assets --save-dev

Usage

// vite.config.js
import preloadAssets from 'vite-plugin-preload-assets'

export default {
  plugins: [
    preloadAssets({
      preloadGoogleFonts: true,
      fontsToPreload: [
        { href: '/fonts/Inter.woff2' }
      ],
      criticalJs: ['main'],
      criticalCss: ['main']
    })
  ]
}

Add data-preload to any image in your HTML to preload it automatically:

<img src="/img/hero.jpg" data-preload alt="Hero">

Parameters

Option	Type	Default	Description
imagesToPreload	string[]	—	Image URLs to preload explicitly (for images outside the HTML source)
fontsToPreload	FontPreload[]	—	Font resources to preload
criticalJs	string[] | (filename: string) => string[]	—	Entry names to match against JS files in the build bundle
criticalCss	string[] | (filename: string) => string[]	—	Entry names to match against CSS files in the build bundle
preloadGoogleFonts	boolean	false	Inject <link rel="preconnect"> for fonts.googleapis.com and fonts.gstatic.com

FontPreload type:

type FontPreload = {
  href: string              // Font file URL (required)
  type?: string             // MIME type, default: 'font/woff2' (when as === 'font')
  as?: 'font' | 'style'    // Default: 'font'
  crossorigin?: boolean     // Added automatically when as === 'font'
}

Documentation

Guide

• Introduction
• Getting started
• How it works
• Image preloading
• Font preloading
• Critical assets

Reference

• Options
• Hooks
• Utilities

Additional reference

• Compatibility
• Contributing

License

MIT © 2026 Effeilo