Chargement réactif des polices web, une nouvelle stratégie

Optimisation du chargement des polices pour les appareils mobiles plus lents avec préchargement réactif et déclarations font-face réactives

Arjen Karel - linkedin

Last update: 2026-02-10

Affichage réactif des polices & stratégie de préchargement réactif

En tant que spécialiste des Core Web Vitals, je vois chaque jour différentes solutions créatives. La plupart n'ont pas beaucoup de sens, mais de temps en temps, je tombe sur une stratégie si simple et si élégante qu'elle prend tout son sens pour certains sites.

Cet article explique comment implémenter le préchargement réactif des polices pour les ordinateurs de bureau, ainsi que font display:optional pour éliminer le Flash Of Unstyled Text (FOUT) tout en assurant un 'chargement par défaut' pour les mobiles et en utilisant font-display: swap.

astuce : cette stratégie fonctionne bien pour les sites avec un chemin de rendu critique plus important.

Le problème du chargement précoce des polices

Lors de l'optimisation des Core Web Vitals, une règle simple s'applique toujours :
"Tout ce que vous faites avant le Largest Contentful Paint ralentira ce Largest Contentful Paint".

Ce principe s'applique également aux polices web. Prioriser le chargement des polices web pendant le chargement de la page peut améliorer l'expérience utilisateur, mais si votre site a du mal à atteindre les seuils des Core Web Vitals, en particulier pour des types d'appareils spécifiques, vous devrez peut-être équilibrer l'UX et l'amélioration du LCP.

Prenons l'exemple ci-dessous d'un site de journal néerlandais. Sur un appareil mobile, 3 polices sont mises en file d'attente avant l'élément LCP. Cela fait que les 3 polices entrent en concurrence pour les ressources réseau précoces et repoussent le timing de l'image.

La stratégie de police réactive à la rescousse !

Dans des cas comme celui-ci où la concurrence réseau précoce est forte, il est logique de distinguer les types d'appareils. Généralement, les ordinateurs de bureau plus rapides sur des connexions filaires (et plus rapides) peuvent gérer plus de ressources réseau précoces en même temps et il est tout à fait logique de précharger certains fichiers de polices critiques.

Les appareils mobiles, en revanche, peuvent être utilisés lors des trajets domicile-travail dans des conditions réseau moins qu'optimales. Les appareils mobiles ont aussi souvent des processeurs plus lents et moins de mémoire disponible par rapport aux ordinateurs de bureau. Ces limitations signifient que traiter le chargement des polices différemment selon le type d'appareil peut avoir du sens.

Bureau : Le préchargement des polices améliore les performances de rendu sur les appareils disposant d'une meilleure bande passante et d'une plus grande puissance de traitement. Utilisez font-display: optional pour minimiser le blocage et éliminer les problèmes de changement de police. Cela garantit que la police n'est utilisée que si elle est disponible dans les 100 ms suivant la demande, tandis que le préchargement assure que la cible est atteinte.
Mobile : Ne préchargez pas la police en raison de la concurrence réseau. Utilisez font-display: swap pour un rendu de texte plus rapide. Cette approche affiche immédiatement les polices de secours (fallback) pendant que la police personnalisée continue de charger en arrière-plan, offrant une meilleure expérience sur les appareils moins puissants.

Implémentation utilisant <link rel="preload"> et Media Queries

Au lieu de charger la police universellement, vous pouvez utiliser l'attribut media dans la balise <link> du HTML avec le CSS pour appliquer différentes stratégies de police basées sur les types d'appareils.

Structure HTML

<head>

  <!-- Précharger la police pour bureau uniquement -->
  <link rel="preload" href="/fonts/custom-font.woff2" 
        as="font" crossorigin="anonymous" 
        media="(min-width: 768px)">

  <style>
    /* Paramètres globaux de police */
    @font-face {
        font-family: 'CustomFont';
        src: url('/fonts/custom-font.woff2') format('woff2');
        font-display: swap;
    }

    /* Paramètres de police pour bureau */
    @media (min-width: 767px) {
      @font-face {
        font-display: optional;
      }
    }

    body {
      font-family: 'CustomFont', sans-serif;
    }
  </style>
</head>

Avantages de cette approche

Focus sur l'UX Bureau : Le bureau effectue le rendu avec la police web immédiatement, empêchant le FOUT ou FOIT.
Focus sur la performance Mobile : font-display: swap garantit que les utilisateurs voient le texte immédiatement, même si la police personnalisée n'est pas encore chargée.
Simplicité Déclarative : Évite le JavaScript, réduisant la complexité et améliorant la maintenabilité.

Cas d'utilisation réel

Comme indiqué dans l'intro : cette stratégie est basée sur un exemple réel que j'ai rencontré. Un site e-commerce ciblant à la fois les utilisateurs de bureau et mobiles a implémenté cette stratégie. Le résultat :

Bureau : CLS et UX améliorés avec des polices stylisées apparaissant presque immédiatement.
Mobile : Un First Contentful Paint et un Largest Contentful Paint plus rapides ont assuré une expérience utilisateur rapide, même sur des connexions plus lentes.