Comment utiliser l'application "Polices"

L'application Polices vous permet d’optimiser vos polices pour des chargements plus rapides et une meilleure expérience utilisateur. Elle offre des fonctionnalités telles que la génération de formats WOFF/WOFF2, le contrôle du rendu avec font-display, et la création de sous-ensembles de polices, améliorant ainsi les performances de votre site web.

Pourquoi optimiser ses fonts est important ?

Les polices de caractères, tout comme de nombreuses autres ressources telles que les feuilles de style (CSS) et les scripts Javascript, peuvent avoir un double impact : elles peuvent alourdir vos pages, les ralentir, et bloquer le rendu si votre stratégie de chargement et d'affichage n'est pas optimale.

Toute dégradation de la vitesse de chargement entraîne une baisse de vos métriques, ce qui rend la navigation désagréable pour les utilisateurs et peut avoir un impact négatif sur les indicateurs clés de l'expérience utilisateur mesurés par Google.

En savoir plus sur PageSpeed Insights : optimiser ses fonts pour la webperf

Comment utiliser l'application "Polices" ?

Fonts Face

La fonctionnalité Font Face va vous permettre d’optimiser le chargement des polices en générant les formats WOFF et WOFF2, sous-ensembler les ressources, les autohint et ajouter une déclaration font-display.

Insert Missing Format: Il est nécessaire d’ajouter les formats WOFF22 et WOFF manquant, au cas où votre font web ne se télécharge pas assez rapidement. Si en plus de ça, aucun texte n’apparaît, vos visiteurs peuvent penser que votre site rencontre des problèmes et quitter la page.

En utilisant ces formats, vous assurez une expérience cohérente et optimale pour tous les utilisateurs, en réduisant les temps de chargement des pages et en garantissant que les polices s'affichent correctement sur une variété d'appareils et de navigateurs.

Ces formats permettent de réduire jusqu’à 50% la taille des fichiers de polices et donc de diviser par deux leur temps de chargement.

Insert Font Display: Cette option permet de définir la manière dont les polices de caractères doivent être affichées lorsqu'elles sont chargées sur une page web.

Voici les différentes valeurs possibles pour font-display: auto, block, swap, fallback.

Chacune de ces options modifie le comportement de rendu des polices pendant le chargement, influençant ainsi la performance perçue du site.

Voici les différentes valeurs possibles :

1. Auto : C'est la valeur par défaut. Avec cette option, le navigateur décide de la meilleure méthode d'affichage des polices en fonction de divers facteurs tels que le temps de chargement et la priorité de rendu. Cela peut entraîner différents comportements selon les navigateurs.
2. Block : Lorsque vous utilisez cette option, la police est bloquée jusqu'à ce qu'elle soit entièrement téléchargée. Cela signifie que le texte utilisant cette police ne sera pas affiché tant que la police n'aura pas été téléchargée, ce qui peut entraîner un retard dans le rendu de la page.
3. Swap : Avec cette option, une police de secours est affichée immédiatement pendant que la police principale est en cours de téléchargement. Une fois que la police principale est téléchargée, elle est remplacée par cette dernière. Cela permet d'éviter un retard perceptible dans le rendu de la page.
4. Fallback : Cette option affiche d'abord une police de secours, puis la remplace par la police principale une fois qu'elle est téléchargée. C'est similaire à l'option "Swap", mais elle garantit que le texte est toujours lisible même si la police principale prend plus de temps à se charger.

Cette déclaration peut aider à optimiser l'expérience utilisateur en contrôlant la manière dont les polices sont chargées et affichées sur la page.

Extraire la source en ligne: Extraire la source des polices en ligne, permet de rapatrier les fichiers externes sur votre domaine, en procédant ainsi, on se passe des négociations DNS, ce qui permet de gagner quelques millisecondes au chargement.

Google Fonts

Cette fonctionnalité va vous permettre d’optimiser et d’améliorer le chargement CSS des polices Google.

Affichage des polices Google: Lorsque vous utilisez des polices Google dans votre site web, vous avez la possibilité de définir la manière dont ces polices doivent être affichées pendant le chargement de la page en utilisant l'option "font-display". Cette option permet de contrôler le comportement de rendu des polices avant qu'elles ne soient entièrement téléchargées.

Chargement asynchrone: Le chargement asynchrone des fichiers CSS permet de télécharger les feuilles de style en parallèle avec d'autres ressources de la page, améliorant ainsi les performances en réduisant les temps de chargement et en permettant un rendu plus rapide du contenu.

Subset

Le sous-ensemble de polices est le processus qui consiste à prendre un fichier de polices complet en entrée et à créer d'autres fichiers plus petits contenant uniquement les caractères nécessaires à l’affichage de vos pages, ce qui réduit la taille du fichier et améliore les performances du chargement de la page.

Plages Unicode: L'option "Plages Unicode" vous permet de choisir les ensembles de caractères à inclure dans la version réduite de la police. Par exemple, en sélectionnant "Latin", seuls les caractères appartenant à l'ensemble de caractères Latin seront conservés dans le fichier de police résultant.

Langues: L'option "Langues" vous permet de sélectionner les ensembles de caractères utilisés pour une langue spécifique. Cela signifie que vous pouvez choisir les caractères nécessaires pour une langue donnée et exclure les autres

Ces deux options réduisent la taille du fichier de police et améliorent les performances de chargement de la page.

Avantage webperf

Réduire la taille des fichiers de polices et optimiser leur chargement peut significativement améliorer des métriques telles que le Speed Index et le LCP, surtout si l'élément le plus grand de la page est un bloc de texte. Cela garantit une amélioration de vos autres métriques et de l'expérience utilisateur globale.