Charger les polices rapidement

Chez Buffer, nous expérimentons constamment des moyens d'améliorer nos produits et d'essayer de nouvelles idées. Nous avons récemment lancé la Start Pageune belle page de destination flexible et adaptée aux mobiles que vous pouvez créer en quelques minutes et mettre à jour en quelques secondes. En tant qu'ingénieur logiciel dans l'équipe de Buffer, j'ai abordé une longue liste de projets amusants, y compris la page de démarrage. Une chose que j'aime dans ce projet, c'est qu'au fur et à mesure que nous approfondissons le contenu et la personnalisation générés par les utilisateurs, nous découvrons de nouveaux défis d'ingénierie que nous n'avions jamais rencontrés auparavant dans nos frontends. Dans ce cas, nous voulions introduire 13 nouvelles options de polices (pour un total de 16 polices) et nous voulions nous assurer qu'elles se chargeaient bien et rapidement. En travaillant là-dessus, j'ai appris tellement de choses que je ne savais pas sur les polices. Dans cet article, je souhaite donc partager davantage sur la façon dont nous avons procédé pour toute personne confrontée à des défis similaires.

Les polices bloquent le rendu

Commençons par le « pourquoi ». Les polices sont généralement des ressources assez légères, qui sont généralement mises en cache dans le navigateur, alors pourquoi est-il important d'assurer une stratégie de chargement rapide ? Parce que les polices sont des requêtes synchrones de haute priorité, ce qui signifie qu'elles bloquent le rendu. Si nous pouvons charger les polices rapidement et/ou de manière asynchrone, nous pouvons améliorer la vitesse du site.

FOUT et FOIT

D'accord, vous ne voulez donc pas bloquer votre rendu, vous avez généralement le choix entre deux stratégies pour gérer le texte chargé avant sa police personnalisée :

FOUT – Flash Of Unstyled Text
Rend le texte mais avec une police de secours. Les polices Google peuvent désormais revenir avec display=swap qui demande au navigateur d'utiliser la police de secours pour afficher le texte jusqu'à ce que la police personnalisée soit entièrement téléchargée. Si vous voulez être méticuleux, vous pouvez trouver une meilleure police de secours en utilisant cette application : Font Style Matcher

FOIT – Flash Of Invisible Text
Ici, le texte est rendu avec une police invisible jusqu'à la police personnalisée a été entièrement téléchargée. Celui-ci est plus logique à utiliser pour quelque chose comme un logo où la marque serait affectée si elle était rendue avec une police de secours (bien que pour un logo, j'utiliserais un SVG mais des exemples !)

L'astuce pour les polices rapides

Le conseil général de nos jours est de se préconnecter au serveur de polices :

puis de précharger les polices :

Enfin, comme solution de repli, demandez les polices de manière asynchrone en définissant le support sur « imprimer » pour les navigateurs qui ne prennent pas en charge rel="preload" (environ 12% des navigateurs en 2021)

Cela fonctionne car une feuille de style ordinaire bloque le rendu mais une impression la feuille de style se voit attribuer la priorité au repos. Une fois chargé, le média du lien est appliqué à tous.

L'hébergement de vos propres polices est le plus rapide, mais Google Fonts fait beaucoup pour vous :

• Renvoie plusieurs alphabets
• Renvoie un fichier css personnalisé à l'agent utilisateur qui l'a demandé
• Lorsque vous avez plusieurs polices, il est préférable de faire une demande pour que ce soit plus rapide
• Vous pouvez personnaliser vos demandes pour cibler des poids de police et des formats spécifiques (gras, italique, fin)

API de chargement de polices[19659004] Il existe une nouvelle API de chargement de polices CSS qui peut demander des polices à la demande, mais j'ai trouvé que cela ne fonctionne pas bien avec Google Fonts car vous avez besoin de l'URL source des polices et de l'URL Google Fonts que vous obtenez n'est pas la source, c'est la demande. Google, avec Typekit, dispose d'une bibliothèque appelée Web Font Loaderqui fonctionne comme l'API de chargement de polices mais fonctionne mieux avec les polices Google.

Alors, qu'avons-nous fait dans la page de démarrage ?

Nous avons mis en œuvre la stratégie populaire pour le constructeur (l'application elle-même) et bien que nous ayons quelques FOUT au premier chargement (rappelez-vous la mise en cache du navigateur !), C'est très minime, voire pas du tout. Pour les pages générées, nous récupérons les polices utilisées dans le thème avant de générer le code HTML afin de ne pouvoir injecter que les polices dont nous avons besoin. Cela rend nos pages générées beaucoup plus rapides et plus légères. Nous sommes impatients de voir comment cette expérience se déroulera et si les gens souhaitent obtenir plus d'options de police. Si tel est le cas, nous pourrions très bien envisager une stratégie plus dynamique (comme charger uniquement les polices actuellement utilisées au chargement, puis envoyer une autre demande si un utilisateur clique sur Apparence pour modifier ses polices). Une autre option que nous pourrions envisager consiste à implémenter un moyen de demander plusieurs polices si nous les hébergeons nous-mêmes.

C'est tout pour l'instant ! Merci d'être arrivé jusqu'ici, j'espère que cela vous a intéressé ! Vous savez quelque chose de bien sur les polices que je n'ai pas mentionné ici ? Partagez-le avec nous sur Twitter.

Ressources :
Les polices Google les plus rapides
Chargement des polices Google et de toute autre police Web le plus rapidement possible au début de 2021
FOIT vs FOUT : une comparaison sur le chargement des polices Web
Trucs CSS – font-display