Assurez-vous que le texte reste visible pendant le chargement des polices Web

C’est Google PageSpeed Insights ou LightHouse qui vous le dit : « Assurez-vous que le texte reste visible pendant le chargement des polices Web« . Sachez que vous n’êtes pas seul à recevoir cette recommandation lors du test de performance web. Notez que cet article fait partie de toute une série que nous vous conseillons sur les recommandations pour améliorer sa note Google PageSpeed Insights.

Vous souhaitez donc optimiser le temps de chargement de votre site web. Il va falloir travailler sur le chargement des polices, des fichiers .otf, .eot, .woff ou .woff2 qui ralentissent votre site. Retrouvez sur cet article toutes les solutions pour optimiser vos typographies et accélérer votre site.

Commençons par le commencement, nous sommes l’agence web 36 Pixels, spécialisés sur le CMS WordPress et sur le framework Vue.js. En combinant ces 2 solutions, nous arrivons à créer les sites WordPress les plus rapides. Si cela vous intéresse, contactez-nous !

Voici le programme :

• Quels sont les différents formats de fichier de typographie ?
• Comment rendre le texte visible pendant le chargement d’une police ?
• Comment améliorer le temps de chargement d’une Google Font ?
• Comment s’assurer que le texte reste visible pendant le chargement des polices Web sous WordPress ?
• Comment améliorer le chargement des polices sous Vue.js ?
• Quels gains espérer en optimisant le chargement des polices ?

Quels sont les différents formats de fichier de typographie ?

Si vous souhaitez optimiser le chargement de vos polices web pour accélérer votre site, il va falloir dans un premier temps faire un peu de théorie. Sachez qu’il existe plusieurs formats de police qui cohabitent sur le web. Tous les formats n’ont pas le même support par les navigateurs et/ou le même poids de fichier. Petit tour d’horizon…

Le TTF : TrueType Fonts

Le format de police ttf, TrueType Fonts, a été crée dans les année 80 par 2 entreprises prometteuses à l’époque : Apple et Microsoft. C’est donc un format très reconnu qui est compatible avec tous les systèmes, navigateurs et autres. Le site canIuse indique que l’utilisation du format de police TTF est compatible avec 97% des navigations

Seul défaut du format TTF, son poids. Le TrueType Fonts n’est pas du tout compressé et il n’est pas conseillé de le proposer en priorité à ses utilisateurs sur le web.

L’OTF : l’OpenType Fonts

L’OTF, l’OpenType Font est un format de police propriétaire, appartenant à l’entreprise Microsoft. Il a été développé conjointement avec l’entreprise Adobe et c’est une évolution du format TTF. Développé aussi dans les années 80, il n’a pas été pensé pour être compressé ou optimisé. Résultat, son poids est important.

C’est surtout un format typographie qui est surtout pensée pour le design, et qui donne un maximum de latitude aux graphistes. Il n’est pas conseillé de le proposer en priorité sur le web.

97% des navigations sur le web sont compatible avec l’OpenType Fonts selon le site canIuse

Le woff : Web Open Font Format

Le woff est un format de police open source, bonne nouvelle ! Il a été développé bien plus tardivement que les 2 formats de police ci-dessus, en 2009, par plusieurs entreprises dont Mozilla.

Le Web Open Font format a été pensé spécifiquement pour le web. Il est basé sur une évolution du TTF et du OTF mais avec l’objectif d’être compressé au maximum. Il améliore donc la vitesse de chargement d’une page.

Le format de police woff est supporté par 97% des navigations avec seulement les vieilles version Internet Explorer qui ne le supporte pas (inférieur à ie8).

Le woff2 : Web Open Font Format 2

Le woff2 est une évolution du format woff1. Il est pensé pour être encore plus compressé que le woff et présente un gain de l’ordre de 30%.

Le woff2 est un format de police qui a un support un peu moins élevé que le woff avec 93% des navigations qui sont compatibles. A noter que toutes les versions d’Internet Explorer ne le reconnaissent pas.

Le EOT : Embedded OpenType Fonts

Développé spécifiquement pour Internet Explorer, ce format de police, propriété de Microsoft est une évolution de l’OTF en plus compressé. Internet Explorer n’existe plus. Donc l’EOT n’a pas plus qu’un intérêt minime…

Ce défaut est aussi un avantage. Il peut être intéressant d’utiliser le format EOT en typographie alternative dans le cas d’une utilisation du woff2. En effet, si l’on exclut Opéra Mini (1% des utilisation sur le web), la combinaison de l’EOT et du Woff2 permet d’atteindre un support de 99% des navigations.

SVG : Scalable Vector Graphics Fonts

Le SVG est un format de police un peu particulier. Il est aussi utilisé pour les images. Son principe de base est d’utiliser les formes vectorielles pour enregistrer le design des caractères. C’est un format extrêmement léger.

Ce n’est pas un format à utiliser sur le web et il est considéré comme déprécié. Chrome 38 a été la dernière version à supporter le SVG font et un peu moins de 17% des navigations sur le web sont aujourd’hui compatible.

En résumé sur les formats de police.

Nous sommes en 2020 (au moins), il faut être moderne. Oublions les formats EOT, OTF, TTF. Concentrons-nous sur le format Woff et Woff2. A eux deux, le site créé avec ces polices sera correctement visible sur 97% des navigations.

Et IE9 ? Le navigateur le plus important laissé de coté est bien IE9. Mais sa dernière mise à jour à eu lieu en 2015. Et c’est aussi un navigateur dont le créateur Microsoft à demandé en janvier 2019 à tous ses utilisateurs de ne plus l’utiliser pour des raisons de sécurité. Donc nous pouvons très bien nous en passer

Comment rendre le texte visible pendant le chargement d’une police ?

Connaissez-vous la propriété font-display ? Elle détermine le comportement de la page avant et pendant que les fonts sont téléchargées. Le comportement de votre navigateur est le suivant quand il tente de télécharger une police pour l’utiliser sur votre page :

• Temps 1 : tant que la police n’est pas téléchargée, tous les éléments de la page utilisant cette police utilisent une police invisible. Si la police est téléchargée, l’élément est affiché. On parle de blocage de la police.
• Temps 2 : si la police n’est pas téléchargée, les éléments utilisant cette police sont affichés avec une police alternative. Si la police est téléchargée, l’élément est affiché avec la police. On parle d’échange de la police.
• Temps 3 : si la police n’est pas téléchargée, le navigateur considère qu’il y a eu un souci et utilise une police alternative. On parle de remplacement de la police.

La propriété Font-display

La propriété font-display permet de modifier légèrement le comportement de votre navigateur durant le processus de chargement du police. Le problème vient majoritairement de la période de blocage qui rend le texte invisible.

L’idée est donc de rendre ce temps de blocage le plus petit possible et d’enchainer rapidement sur la période d’échange de la police. C’est ce que permet de faire la propriété font-display en lui associant la valeur swap. Cette propriété CSS est compatible avec 82% des navigations sur Internet, ce qui n’est pas énorme. Mais elle est en revanche non bloquante. C’est à dire que si le navigateur n’est pas compatible, principalement les navigateurs Microsoft, cela ne perturbera pas le comportement de la page.

Voici le code :

@font-face {
  font-family: 'Neon';
  font-style: normal;
  font-weight: 400;
  src: local('Neon'), 
       local('Pacifico-Regular'), 
       url(/assets/fonts/Neon.woff2) format('woff2'),
       url(/assets/fonts/Neon.woff) format('woff');
  font-display: swap;
}

Sachez tout de même que mettre en place le font-display:swap ne suffit pas totalement à optimiser une police. Cela ne fait que régler le problème de rendu des textes tant que la police n’est pas chargée. Optimiser vraiment le chargement d’une police mérite bien tout un article. Il arrivera bientôt sur le site.

Comment améliorer le temps de chargement d’une Google Font ?

Les Google Font, c’est la plaie ! Utiliser des Google Font présente des avantages mais aussi des inconvénients, notamment au niveau des performances web. Il y aurait tout un article à écrire sur le sujet de l’optimisation des Google Font.

Il y a quand même un bonne nouvelle concernant l’affichage du texte pendant le chargement des Google Font, c’est que le support de la propriété font-display à été mise en place en mai 2019.

Il convient donc de remplacer de changer quelques lignes dans votre code source pour le mettre en place sur votre site :

<!--ancien code-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--nouveau code-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

Comment s’assurer que le texte reste visible pendant le chargement des polices Web sous WordPress ?

Sous WordPress, il existe 2 procédures pour s’assurer que le texte reste visible pendant le chargement des polices en fonction du type de développement.

• Si vous avez utilisé des google fonts, vous pouvez activer le mode font-display swap facilement avec ce plugin : Swap Google Fonts Display
• Si vous passez par des polices web que vous avez importé dans votre projet, il vous faut repasser sur les lignes de code créées pour y ajouter la propriété font-display.

Comment améliorer le chargement des polices sous Vue.js ?

Vous le savez, nous sommes aussi un agence web Vue.js, framework JS que nous proposons à nos clients les plus exigeant en matière de temps de chargement.

Sous Vue.js, rien n’est vraiment prévu pour optimiser les polices. Les règles d’optimisation seront donc classiques et l’utilisation du font-display:swap produira les mêmes effets lors de son utilisation sur un site réalisé en Vue.js.

Quels gains espérer en optimisant le chargement des police ?

Quand Google PageSpeed Insights ou le plugin LightHouse vous propose d’optimiser le temps de chargement de votre site en jouant sur la propriété font-display, l’outil indique directement le gain de temps attendu. Sachez que ce gain n’exprime pas le temps de chargement final, mais le temps d’attente pour l’affichage du texte sur votre page.

Répondre à cette recommandation aura donc un effet positif sur l’optimisation du First Contentful Paint ou encore la réduction du First Meaningful Paint. Cela devrait aussi diminuer l’indice de vitesse du site.

Afficher le plus tôt possible le texte de la page aura un impact positif sur le ressenti de l’utilisateur. Et Nous en avons déjà parlé dans plusieurs de nos articles sur la performance web, le ressenti de l’utilisateur a un impact direct sur le taux de conversion de votre site.

En conclusion sur cette recommandation Google Page Speed

Vous l’aurez compris, modifier le mode de chargement de vos polices pour vous assurer que vos textes s’affichent le plus rapidement possible n’est pas très compliqué. Il suffit de mettre en place la propriété font-display à swap. Le gain ressenti par l’utilisateur sera important.

Il convient en revanche de s’attarder plus longuement sur la réduction du temps de chargement de vos polices web. Il y a de nombreuses autres optimisations à mettre en place sur votre site pour ne pas être pénalisé par des fichiers qui peuvent avoir un poids important.

Comme pour tous nos autres articles sur l’optimisation du temps de chargement et les actions à mettre en place pour améliorer son score Google PageSpeed Insights, si vous souhaitez laisser cela à des professionnels, contactez-nous !