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 page de démarrage, une page de destination magnifique, 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 connaissais pas sur les polices. Dans cet article, je souhaite donc partager davantage sur la façon dont nous avons procédé à cette tâche pour toute personne confrontée à des défis similaires.
Sommaire
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
Ok, donc vous ne voulez pas bloquer votre rendu, il y a généralement deux stratégies à choisir pour gérer le texte chargé avant sa police personnalisée :
FOUT – Flash de texte sans style
Restitue 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 de texte invisible
Ici, le texte est rendu avec une police invisible jusqu’à ce que la police personnalisée soit 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 :
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />puis préchargez les polices :
<link
rel="preload"
as="style"
href="https://fonts.googleapis.com/css2?family={your font families here}&display=swap"
/>Enfin, comme solution de repli, demandez les polices async en définissant le support sur « impression » pour les navigateurs qui ne prennent pas en charge rel="preload" (environ 12% des navigateurs en cette année 2021)
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family={your font families here}&display=swap"
media="print"
onload="this.media="all""
/>Cela fonctionne car une feuille de style normale bloque le rendu, mais une feuille de style d’impression se voit attribuer une priorité d’inactivité. 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 1 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
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, possède une bibliothèque appelée Web Font Loader, qui 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 le moment! 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
Astuces CSS – font-display