Chargement réactif des polices web, une nouvelle stratégie
Optimiser le chargement des polices pour les appareils mobiles plus lents avec le préchargement réactif et les déclarations font-face réactives
Affichage réactif des polices & stratégie de préchargement réactif
\r\n\r\nEn 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 élégante qu'elle est pertinente 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 utilisant le chargement par défaut pour les mobiles et font-display: swap.
conseil : 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'user experience, 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 avec 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 met les 3 polices en concurrence pour les ressources réseau précoces et retarde 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 faire la distinction entre les types d'appareils. Généralement, les appareils de bureau plus rapides sur des connexions filaires (et 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 police critiques.
D'autre part, les appareils mobiles peuvent être utilisés pendant le trajet 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 qu'il peut être judicieux de traiter le chargement des polices différemment selon le type d'appareil.
\r\n- Desktop : 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 garantit que l'objectif est atteint. \r\n
- 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 fallback pendant que la police personnalisée continue de se charger en arrière-plan, offrant une meilleure expérience sur les appareils moins puissants. \r\n
Implémentation utilisant <link rel="preload"> et les Media Queries
\r\n\r\n Au lieu de charger la police de manière universelle, vous pouvez utiliser l'attribut media dans la balise <link> du HTML avec le CSS pour appliquer différentes stratégies de police en fonction des types d'appareils.\r\n
Structure HTML
\r\n<head>\r\n\r\n <!-- Preload font for desktop only -->\r\n <link rel="preload" href="/fonts/custom-font.woff2" \r\n as="font" crossorigin="anonymous" \r\n media="(min-width: 768px)">\r\n\r\n <style>\r\n /* Global font settings */\r\n @font-face {\r\n font-family: 'CustomFont';\r\n src: url('/fonts/custom-font.woff2') format('woff2');\r\n font-display: swap;\r\n }\r\n\r\n /* Desktop font settings */\r\n @media (min-width: 767px) {\r\n @font-face {\r\n font-display: optional;\r\n }\r\n }\r\n\r\n body {\r\n font-family: 'CustomFont', sans-serif;\r\n }\r\n </style>\r\n</head>\r\n\r\n Avantages de cette approche
\r\n- \r\n
- Focus sur l'UX Desktop : L'ordinateur de bureau effectue le rendu avec la police web immédiatement, empêchant le FOUT ou le FOIT. \r\n
- 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. \r\n - Simplicité déclarative : Évite le JavaScript, réduisant la complexité et améliorant la maintenabilité. \r\n
Cas d'utilisation réel
\r\nComme indiqué dans l'intro : cette stratégie est basée sur un exemple du monde réel 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 :\r\n
\r\n- \r\n
- Desktop : CLS et UX améliorés avec des polices stylisées apparaissant presque immédiatement. \r\n
- Mobile : First Contentful Paint et Largest Contentful Paint plus rapides ont garanti une user experience rapide, même sur des connexions plus lentes.
Lab data is not enough.
I analyze your field data to find the edge cases failing your user experience.
- Real User Data
- Edge Case Detection
- UX Focused
