Optimisez le chargement de vos fonts | Performances Web
Les polices de votre site impactent aussi bien l’apparence de votre site que sa lisibilité. Leurs chargements sont un processus indispensable pour votre site ou il perdra son identité ou pire… son contenu ! Cet article se consacre à rassembler et détailler les meilleures pratiques de chargement des polices sur le plan de la performance pour votre site internet. J’aborderai particulièrement les fonts personnalisées, chargées sur votre serveur, mais j’inclurai également quelques recommandations pour les polices externes hébergées sur des CDN comme Google Fonts.
Les 4 étapes pour charger correctement vos polices web
- Utiliser les bons formats de police
- Précharger les polices
- Utiliser la bonne déclaration font-face
- Préférer le FOUT au FOIT lors du chargement
1. Utilisez le bon format pour vos fonts
Le meilleur format, et celui qui est recommandé est .woff2 !
Pour des raisons de compatibilité avec Internet Explorer vous pouvez également opter pour le format .woff, moins performant, mais toujours plus que les autres méthodes qui sont déconseillées.
Voici l’ordre d’usage à prioriser pour vos polices, de la meilleure à la moins bonne, en cliquant sur les liens, vous aurez accès au tableau des navigateurs compatibles :
- .woff2 : Format fortement compressé et hautement recommandé pour votre site web.
- .woff : Format compressé recommandé en fallback si le navigateur de votre internaute ne prend pas en charge .woff2, par exemple Internet Explorer.
- .otf : Format non compressé, pensez à le convertir en .woff2 et .woff, si jamais vous devez l’utiliser sur votre site, pensez à la compresser avec Gzip ou Zopfli.
- .ttf : Format non compressé le plus courant sur internet, convertissez-le en .woff2 et .woff, si vous devez l’utiliser sur votre site, pensez à le compresser avec Gzip ou Zopfli.
- .eot : Format compressé pour Internet Explorer uniquement. Déconseillé.
- .svg : Format qui ne devrait servir que pour les vecteurs graphiques de votre site (logo, icônes… etc). Déconseillé.
Convertissez vos polices en .woff2 et .woff en ligne
De nombreux outils en ligne permettent de convertir vos polices, personnellement j’utilise https://kombu.kanejaku.org/. En voici un aperçu ou j’ai converti une police .TTF en .WOFF2 et obtenu un gain de 67%.
La plupart des sites de polices, gratuites ou payantes, proposent leurs polices en .TTF ou en .OTF, donc ayez le reflex de les convertir avant des les transférer sur votre serveur.
2. Préchargez vos polices
Pour appeler vos polices, favorisez l’appel via <link href=""> dans le <head> de votre HTML plutôt que l’appel via votre CSS avec la règle@import car celle-ci empêche le chargement parallèle de données, ralentissant ainsi la vitesse de chargement globale de votre site.
Je vous recommande de déférer toutes vos polices dans le footer, et de ne précharger que 1–2 polices vraiment importantes dans le haut de votre page, soit au dessus de la ligne de flottaison.
Voici un exemple complet des attributs à intégrer lors d’appel de vos polices :
<!-- Précharger woff2 -->
<link rel="preload" as="font" href="/fonts/ma-police.woff2" type="font/woff2" crossorigin="anonymous"><!-- Précharger woff pour la compatibilité -->
<link rel="preload" as="font" href="/fonts/ma-police.woff" type="font/woff" crossorigin="anonymous">
Dans l’exemple ci-dessus, les attributs rel="preload" as="font" va demander au navigateur de démarrer le chargement des ressources requises dès que possible. Ils vont également dire au navigateur qu’il s’agit de fonts, donc il pourra les prioriser correctement dans sa file d’attente de chargement.
L’attribut crossorigin="" est important, car sans ce dernier le navigateur peut ignorer le pré-chargement de la police.
L’indice preload à un impact important sur la vitesse de chargement de votre site. Les navigateurs compatibles démarreront le chargement de la police dès qu’ils liront l’indice preload ou prefetch sur votre fichier HTML et n’attendent donc pas le chargement du CSS.
3. Utiliser la bonne déclaration font-face
Voici un exemple complet d’une déclaration font-face CSS selon les recommandations de Google:
@font-face {
font-family: 'Custom Font';
font-weight: 400;
font-style: normal;
font-display: swap; /* Utiliser le FOUT */
unicode-range: U+000-5FF; /* Ne charger que les glyphes utilisés*/
src: local('Custom Font'),
url('/fonts/custom-font.woff2') format('woff2'),
url('/fonts/custom-font.woff') format('woff');
}Comme vous pouvez le voir, nous n’utilisons que les formats de polices compressés (.woff et .woff2) et nous indiquons aux navigateurs de ne charger que les glyphes requis (latin de U+000 jusqu’à U+5FF).
La fonction local() permet aux utilisateurs d’utiliser la copie locale de la police présente sur leur périphérique plutôt que de la charger, ceci uniquement s’ils la possèdent bien sûr. Par exemple la police Roboto, utilisée par plus de 26 millions de sites web, est pré-installée sur les appareils Android tout comme Arial est présent par défaut sur Windows ou encore Helvetica sur les Mac. La fonction local() permet donc un chargement accéléré pour les appareils concernés.
L’ordre des directives est également important, .WOFF2 est chargée en priorité si le navigateur est compatible, sinon il chargera .WOFF.
Générer des règles font-face en ligne
Personnellement j’utilise : https://transfonter.org/
4. Préférer le FOUT au FOIT lors du chargement de votre page
Les polices sont souvent des fichiers assez larges (~100ko), même lorsqu’elles sont compressées (Gzip ou Zopfli ~30ko). Durant l’attente du chargement de la police, certains navigateurs masquent le texte jusqu’au chargement complet de votre police, c’est ce que l’on appelle un Flash Of Invisible Text (FOIT).
Vous pouvez éviter ce ‘flash’ peu recommandé d’un point de vue UX et SEO et offrir à vos internautes le Flash Of Unstyled Text (FOUT) permettant d’utiliser la police par défaut du navigateur présente sur le système pendant le temps du chargement et ensuite elle est remplacée par la police désirée. Idéal pour conserver la lecture de l’internaute.
Dans l’exemple @font-face ci dessus vous constater la directive font-display: swap permettant d’activer cet événement (le FOUT).
Pour les polices de tiers comme Google fonts vous pouvez simplement la renseigner de la manière suivante, proposée par défaut par fonts.google.com :
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">Si un navigateur n’est pas compatible avec font-display ou la directive ci-dessus, alors il adoptera son comportement par défaut pour charger les polices.
Comportement par défaut des navigateurs si une police n’est pas chargée
Edge utilise une police par défaut jusqu’à la fin du chargement de la police désirée et procède à un remplacement par cette dernière (FOUT). Edge n’est pas compatible avec la règle CSSfont-display.
Chrome, Firefox et Opera masquent le texte jusqu’à 3s (FOIT). Si le texte n’est pas prêt, ils utiliseront une police locale sur le système et feront un remplacement à la fin du chargement de la police (FOUT). Chrome, Firefox et Opéra sont compatible avec font-display.
Safari masque le texte jusqu’au chargement de la police (FOIT). Safari est compatible avec font-display.
Chargement idéal de polices uniquement issues de Google Fonts (ou d’autres tiers)
De plus en plus de designer / développeurs font confiance à Google pour dessiner leurs sites. En effet cela représente de nombreux avantages face à peu d’inconvénients :
Vos internautes ont peut être déjà dans leurs cache navigateur la police que vous utilisez car elle est également utilisées sur un autre site. Gmail, Youtube ainsi que tous les sites Google reposent sur la police Roboto. Pour rappel, elle est d’ailleurs présente dans les terminaux Android et Chrome OS. Cela signifie un gain de perception pour vos internautes.
Le chargement d’une police via les serveurs de Google = CDN, c’est un bon moyen d’externaliser sur un serveur au top (probablement meilleur que le votre) le chargement d’une ressource de votre site.
Toutefois cela crée aussi pour vous une dépendance critique aux serveurs de Google, s’ils sont down (cela ne m’est jamais arrivé), votre site peut potentiellement se retrouver en Arial, le cauchemar !
Si votre site repose sur un hébergement plus sur ou plus rapide que celui de Google (whoa !), mieux vaut télécharger la police et l’héberger sur son serveur, ce qui réduit l’intérêt du service. De la même manière, multiplier les tiers serait une mauvaise idée car vous augmenteriez trop significativement le volume de requêtes.
Voici la meilleure pratique possible si 100% des polices de votre site sont d’un tiers:
- Appelez toutes vos polices en footer en utilisant les mêmes requêtes que celles vue plus haut. Mais préchargez la connexion aux serveurs de nom de domaines.
<!-- Code en HEAD, la police, elle, sera dans le footer -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">Test en condition réelle
Le site FreeCodeCamp a réalisé un test de ces pratiques avec 2 versions d’une page:
Si vous avez cliqué sur chacun des liens vous avez peut-être perçu la différence, mais regardons en détails le chargement de chaque page:
0.81s de gagné pour un contenu identique !
Pour comparer avec Google PageSpeed Insight; la page standard obtient un score de 36, la page optimisé un score de 43 ! Mon expérience personnelle m’a donnée l’habitude de dire qu’entre un site chargeant beaucoup de polices (~8) avec la règle@import et un site ayant une livraison optimisée et utilisant le strict volume nécessaire de police (~3), on peut gagner facilement 10 points sur l’outil de Google. Cela en changeant très peu de chose !
Ajoutons par ailleurs qu’un internaute ayant une connexion internet plus basse, donc chargeant moins vite les pages, bénéficierait quand même d’une expérience utilisateur améliorée grâce au FOUT et / ou à la fonction local() permettant d’afficher le contenu texte avant même le chargement des polices, le top pour diminuer le taux de rebond.
