Chargement responsive des polices web, une nouvelle stratégie
Optimisation du chargement des polices pour les appareils mobiles plus lents avec le préchargement responsive et les déclarations font-face responsives
Font display responsive & stratégie de préchargement responsive des polices
En tant que spécialiste Core Web Vitals, je vois différentes solutions créatives chaque jour. 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 a du sens pour certains sites.
Cet article explique comment implémenter le préchargement responsive des polices pour les ordinateurs de bureau avec font display:optional pour éliminer le Flash Of Unstyled Text (FOUT) tout en chargeant la police de manière standard pour mobile 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 anticipé des polices
Lors de l'optimisation des Core Web Vitals, il y a une règle simple qui 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 Core Web Vitals, en particulier pour certains types d'appareils, vous devrez peut-être trouver un équilibre entre UX et l'amélioration du LCP.
Considérons 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 retardent le timing de l'image.
La stratégie responsive des polices à la rescousse !
Dans des cas comme celui-ci où il y a beaucoup de concurrence réseau précoce, il est logique de distinguer les types d'appareils. En général, les ordinateurs de bureau plus rapides sur des connexions filaires (et des connexions réseau plus rapides) peuvent gérer plus de ressources réseau précoces simultanément et il est tout à fait logique de précharger certains fichiers de polices critiques.
Les appareils mobiles, en revanche, peuvent être utilisés pendant le trajet vers le 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.
- Desktop : Le préchargement des polices améliore les performances de rendu sur les appareils disposant d'une meilleure bande passante et 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 requête, tandis que le préchargement garantit que l'objectif est atteint.
- 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 les polices fallback immédiatement tandis que la police personnalisée continue de se charger en arrière-plan, offrant une meilleure expérience sur les appareils moins puissants.
Implémentation avec <link rel="preload"> et les Media Queries
Au lieu de charger la police universellement, vous pouvez utiliser l'attribut media dans la balise <link> du HTML ainsi que le CSS pour appliquer différentes stratégies de polices selon les types d'appareils.
Structure HTML
<head>
<!-- Preload font for desktop only -->
<link rel="preload" href="/fonts/custom-font.woff2"
as="font" crossorigin="anonymous"
media="(min-width: 768px)">
<style>
/* Global font settings */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: swap;
}
/* Desktop font settings */
@media (min-width: 767px) {
@font-face {
font-display: optional;
}
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>
</head>
Avantages de cette approche
- Focus sur le UX Desktop : Le bureau affiche la police web immédiatement, empêchant le FOUT ou le FOIT.
- Focus sur la performance Mobile :
font-display: swapgarantit 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 JavaScript, réduisant la complexité et améliorant la maintenabilité.
Cas d'utilisation concret
Comme mentionné dans l'introduction : cette stratégie est basée sur un exemple concret que j'ai rencontré. Un site e-commerce ciblant à la fois les utilisateurs desktop et mobile a implémenté cette stratégie. Le résultat :
- Desktop : Amélioration du CLS et de l'UX 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.
Performance degrades unless you guard it.
I do not just fix the metrics. I set up the monitoring, the budgets, and the processes so your team keeps them green after I leave.
Start the Engagement
