About BrowserUX Preload Assets

BrowserUX Preload Assets is a configurable Vite plugin that simplifies the preloading of critical resources (images, fonts, JS, CSS) by automatically injecting link rel="preload" and link rel="preconnect" tags during the build process.

• BrowserUX Preload Assets source code on GitHub
• BrowserUX Preload Assets project website
• BrowserUX Preload Assets documentation

I. Why BrowserUX Preload Assets?

In an era of complex web interfaces and ever-growing performance expectations, every millisecond of loading time matters. Yet many critical resources—fonts, key images, initial JS/CSS files—are often loaded too late, slowing down the first visual impressions.

BrowserUX Preload Assets addresses this issue by giving you control over what the browser should prioritize, without requiring manual HTML edits. Through explicit configuration in Vite or simple HTML markup attributes, you define which resources should be preloaded. The plugin then takes care of injecting the appropriate tags into the document’s head.

II. Goals

The plugin was designed around a set of simple and effective principles:

• Optimize perceived performance by preloading only truly critical resources (first paint / first interaction).
• Minimize manual effort by avoiding direct modifications to HTML files or project structure.
• Stay compatible with modern practices, such as dark mode support and the use of Google Fonts.

III. Key Features

1. Image preloading via HTML or config

Images marked with data-preload in the HTML are automatically injected into the head using a link preload tag. Dark mode variants (e.g. -dark.png) are also handled if you’re using BrowserUX Theme Switcher.

<img src="/img/logo.png" class="has-dark" data-preload alt="Logo">

2. Custom font preloading

With the fontsToPreload option, you can declare the critical fonts to load first—whether local or remote. The plugin automatically injects the appropriate link preload and preconnect tags.

3. Critical JS and CSS

Using the criticalJs and criticalCss options, you can define which entry files should be preloaded (with or without hash, statically or dynamically). The plugin scans the final build and adds the corresponding resources to the page.

4. Google Fonts compatibility

When preloadGoogleFonts is enabled, preconnect tags to fonts.googleapis.com and fonts.gstatic.com are automatically added. This reduces network latency for widely used web fonts.

5. Multi-page and conditional handling

Options can be set based on the path of each HTML page (in multi-page apps), allowing you to target the appropriate assets depending on the context.

IV. Quick Integration

Adding the plugin is straightforward—just include it in your vite.config.js file:

import preloadAssetsPlugin from 'vite-plugin-preload-assets'

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

V. Conclusion

BrowserUX Preload Assets gives you control over the loading order of your critical resources, without bloating your HTML or adding unnecessary complexity. It integrates naturally into the Vite ecosystem and pairs perfectly with tools like BrowserUX Theme Switcher to deliver a fast, smooth, and consistent user experience from the very first render.

A plugin designed for performance-minded developers who value simplicity.