Saviez-vous qu’un chargement de police non optimisé ralentit le chargement de votre site web ? Découvrez dans cet article toutes les étapes de chargement d’une font, et comment mettre en place une stratégie d’optimisation pour améliorer les performances de votre site internet !
Pourquoi optimiser l’affichage d’une police sur sa page web ?
Avec l’arrivée des polices personnalisées sur les pages web, il est désormais possible d’avoir un rendu très esthétique. Une énorme avancée dans le webdesign, mais cela peut poser problème si la méthode de chargement n’est pas optimisée. En effet, un fichier de font mal chargé peut aller jusqu’à bloquer l’affichage des contenus, surtout sur les terminaux mobiles.
Dans une démarche d’éco-conception, je vous dévoile les meilleures techniques pour optimiser le chargement de vos fonts.
Quelles sont les étapes de chargement d’une font ?
Comment bien utiliser la déclaration @font-face ?
Pour que le navigateur comprenne quelle police il doit charger et afficher, il faut lui donner toutes les informations dont il a besoin. Il suffit pour cela d’ajouter une règle ‘font-face’ dans votre css, comme ceci :
@font-face {
font-family: 'Dosis', sans-serif;
src: url('/font/dosis-medium-webfont.woff2') format('woff'),
url('/font/dosis-medium-webfont.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
Cette déclaration doit au minimum comporter :
- Le nom de la font (c’est ce nom que vous utiliserez dans vos propriétés CSS)
- L’url où se situe le fichier
Les fichiers doivent être aux formats suivants :
- woff
- woff2
Des propriétés additionnelles peuvent être ajoutées, comme:
- La graisse
- Le style (italic, normal…)
Cette technique à l’avantage d’être pratique à l’utilisation, par exemple pour rajouter d’autres fichiers il suffit simplement de répéter la propriété url, et pour ajouter une variante de la font, par exemple du gras, il suffit de copier la déclaration et de changer l’url du fichier + la graisse.
Vous pouvez l’utiliser avec des webfont ou bien faire le choix d’héberger vous mêmes vos fonts pour gagner considérablement en performances !
Utiliser src:local
Vous savez maintenant communiquer au navigateur l’emplacement de la font afin qu’il la charge. Je vais maintenant vous apprendre à demander au navigateur d’aller d’abord vérifier si une version locale (sur le terminal de l’internaute) existe.
Pourquoi cette méthode ? C’est très simple : Le navigateur a besoin de télécharger le fichier de la font pour pouvoir l’afficher, ce qui rajoute du temps dans le chargement total du site. En demandant au navigateur d’utiliser la font de la machine de l’internaute, il l’aura instantanément à sa disposition et n’aura donc pas besoin de la télécharger sur le serveur.
Comment utiliser la propriété src:local ?
Il suffit d’ajouter la propriété dans votre déclaration font-face, et de bien la positionner avant la déclaration des urls de vos polices.
En reprenant notre déclaration de tout à l’heure nous obtenons ceci :
@font-face {
font-family: 'Dosis', sans-serif;
src: local('dosis-medium'),
url('/wp-content/themes/prod/font/dosis-medium-webfont.woff2') format('woff'),
url('/wp-content/themes/prod/font/dosis-medium-webfont.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
FOIT, FOUT : Eviter le texte invisible lors du chargement de la font
Les fichiers de police sont souvent lourds et peuvent être longs à charger. Pendant le chargement et en attendant que ceux-ci soit complètement disponibles, les navigateurs adoptent plusieurs comportements, jusqu’à rendre le texte invisible. Bien connaitre ces états est vital si vous souhaitez optimiser votre site internet et avoir de meilleurs performances.
Les deux cas à bien connaître sont le ‘FOIT’ et le ‘FOUT’.
Qu’est ce que l’état FOIT ?
Cet état signifie ‘Flash Of Invisible Text’.
Analysons son comportement :
- Tout d’abord, le navigateur effectue une requête (une demande) du ou des fichiers de la font
- Pendant que le fichier se charge, le texte est invisible, créant des espaces vides un peu partout sur la page
- Enfin lorsque la font est chargée, celle-ci s’affiche et le texte devient visible.
Qu’est ce que l’état FOUT ?
Cet état signifie ‘Flash Of Unstyled Text’’.
Analysons son comportement :
- Le navigateur effectue une requête (une demande) du ou des fichiers de la police.
- Pendant que le fichier se charge, le texte est affichée immédiatement, avec une police alternative.
- Enfin lorsque la font est chargée, celle-ci remplace la police alternative.
Comme vous le voyez, les comportements pendant le chargement d’une police peuvent être très différents, Et pour rajouter une contrainte supplémentaire, c’est le navigateur qui décide quel comportement adopter.
Voici les comportements par défauts des navigateurs :
- Chrome : Je rend invisible le texte jusqu’à 3 secondes. Si la police n’est toujours pas chargée, j’affiche une police alternative (FOIT)
- Firefox: Je rend invisible le texte jusqu’à 3 secondes. Si la police n’est toujours pas chargée, j’affiche une police alternative (FOIT)
- Edge: J’utilise une police alternative jusqu’à que la police soit chargée (FOUT)
- Safari: Je rend invisible le texte jusqu’à que la police soit chargée (FOIT)
Comment afficher immédiatement le texte sur votre page grâce à la propriété font-display ?
Heureusement une propriété nous permet d’avoir le contrôle sur ces étapes et de dire au navigateur quel comportement nous voulons qu’il adopte pendant le chargement de la police. Pour utiliser la propriété font-display, ajoutez la à votre déclaration @font-face :
@font-face {
font-family: 'Dosis', sans-serif;
font-display: swap;
src: local('dosis-medium'),
url('/wp-content/themes/prod/font/dosis-medium-webfont.woff2') format('woff'),
url('/wp-content/themes/prod/font/dosis-medium-webfont.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
Plusieurs valeurs sont disponibles, chacune ayant un comportement différent :
- auto: On laisse le choix au navigateur, c’est la valeur par défaut
- block : On demande au navigateur de cacher le texte jusqu’à que la police soit complètement chargée (FOIT)
- swap : On demande au navigateur d’afficher immédiatement une police alternative jusqu’à que la police soit chargée (FOUT)
- fallback: C’est une sorte de compromis entre les valeurs auto et swap. Première étape : on demande au navigateur de cacher le texte pour une trés courte période (environ 100ms) et d’afficher ensuite une police alternative. Deuxième étape : le navigateur essaie de charger la police. Si celle-ci met moins de 3 secondes à charger, elle sera ensuite affichée. Si elle met plus de 3 secondes, la police alternative reste en place.
- optional: Cache initialement le texte comme la valeur fallback pour une très courte période jusqu’à ce que la police soit complètement chargée. Mais donne le droit au navigateur de décider s’il est pertinent de télécharger la police, suivant la vitesse de connexion.
Pour finir : Précharger les fichiers
Voici la dernière astuce pour optimiser de A à Z vôtre chaine de rendu critique. Par défaut le navigateur va sélectionner les ‘meilleurs candidats’ qui devront être chargés en premier. Cela va comporter votre CSS, votre JS, et tant que ces fichiers ne seront pas complètement chargés, les fichiers de police devront attendre bien sagement.
Imaginons que votre css et js mettent au total 300ms pour se charger et s’exécuter, et qu’ensuite vos polices en mettent autant. En préchargeant vos polices, 300ms seront économisés car votre css et js ne seront plus bloquants. Et quand il est question de performances il n’y a pas de petites économies. Il faut toujours gratter ! 😉
Pour précharger vos fichiers, déclarez chaque fichier dans le head, comme ceci :
<head>
<link rel="preload" as="font" href="/chemin/font.woff2" crossorigin>
<link rel="preload" as="font" href="/chemin/font.woff" crossorigin>
</head>