À propos de BrowserUX Preload Assets

BrowserUX Preload Assets est un plugin Vite configurable qui facilite la précharge des ressources critiques (images, polices, JS, CSS) en injectant automatiquement les balises link rel="preload" et link rel="preconnect" au moment du build.

• Code source de BrowserUX Preload Assets sur Github
• Site du projet BrowserUX Preload Assets
• Documentation de BrowserUX Preload Assets

I. Pourquoi BrowserUX Preload Assets ?

À l’ère des interfaces web complexes et des exigences de performance accrues, chaque milliseconde de chargement compte. Pourtant, de nombreuses ressources critiques (polices, images clés, fichiers JS/CSS initiaux) sont souvent chargées de façon trop tardive, ralentissant l'affichage des premières impressions visuelles.

BrowserUX Preload Assets répond à ce besoin en vous donnant le contrôle sur ce que le navigateur doit charger en priorité, sans avoir à modifier manuellement votre HTML. À travers une configuration explicite dans Vite, ou quelques attributs dans votre markup, vous indiquez les ressources essentielles à précharger. Le plugin se charge ensuite d’injecter les balises nécessaires dans le head du document.

II. Objectifs

Le plugin a été conçu autour de principes simples et efficaces :

• Optimiser la performance perçue, en préchargeant uniquement les ressources réellement critiques (first paint / first interaction).
• Limiter les efforts manuels, en évitant toute modification directe des fichiers HTML ou de la structure de projet.
• Rester compatible avec les pratiques modernes, comme le support du mode sombre ou l’utilisation des Google Fonts.

III. Fonctionnalités clés

1. Préchargement d’images via HTML ou config

Les images marquées avec data-preload dans le HTML sont automatiquement injectées dans le head avec une balise link preload. Les variantes en mode sombre (*-dark.png) sont également prises en charge si vous utilisez BrowserUX Theme Switcher.

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

2. Préchargement de polices personnalisées

Via l’option fontsToPreload, vous déclarez les polices critiques à charger en priorité (locales ou distantes). Le plugin injecte automatiquement les balises link preload et preconnect associées.

3. JS et CSS critiques

Grâce aux options criticalJs et criticalCss, vous pouvez définir les fichiers d’entrée essentiels à précharger (avec ou sans hash, dynamiquement ou statiquement). Le plugin analyse le build final et ajoute les ressources correspondantes dans la page.

4. Compatibilité avec Google Fonts

En activant preloadGoogleFonts, les balises preconnect vers fonts.googleapis.com et fonts.gstatic.com sont automatiquement ajoutées. Cela réduit la latence réseau pour les typographies web les plus utilisées.

5. Gestion multi-page et conditions dynamiques

Les options peuvent être définies en fonction du chemin de la page HTML (dans le cas d’un projet multi-pages), vous permettant de cibler les bons assets selon le contexte.

IV. Intégration rapide

L’ajout du plugin se fait simplement dans le fichier vite.config.js :

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. En conclusion

BrowserUX Preload Assets permet de reprendre la main sur l’ordre de chargement de vos ressources critiques, sans surcharger vos fichiers HTML ni ajouter de complexité inutile. Il s’intègre naturellement à l’écosystème Vite et complète parfaitement des outils comme BrowserUX Theme Switcher pour offrir une expérience utilisateur rapide, fluide et cohérente dès le premier affichage.

Un plugin pensé pour les développeurs exigeants, soucieux de la performance sans sacrifier la simplicité.