La livraison des polices Web est-elle optimisée? La première question qui mérite d'être posée est de savoir si nous pouvons nous en sortir avec en utilisant les polices système d'interface utilisateur en premier lieu – nous devons simplement nous assurer de vérifiez qu'ils apparaissent correctement sur différentes plates-formes. Si ce n’est pas le cas, il y a de fortes chances que les polices Web que nous proposons incluent des glyphes, des fonctionnalités et des poids supplémentaires qui ne sont pas utilisés. Nous pouvons demander à notre fonderie de types de sous-ensembles de polices Web ou, si nous utilisons des polices open-source, de les sous-ensembles seuls avec Glyphhanger ou Fontsquirrel . Nous pouvons même automatiser l'ensemble de notre flux de travail avec la sous-police de Peter Müller un outil de ligne de commande qui analyse statiquement votre page afin de générer les sous-ensembles de polices Web les plus optimaux, puis les injecter dans nos pages.
WOFF2 le support est excellent, et nous pouvons utiliser WOFF comme solution de secours pour les navigateurs qui ne le prennent pas en charge – ou peut-être que les anciens navigateurs pourraient recevoir des polices système. Il y a beaucoup, beaucoup, beaucoup d'options pour le chargement de polices Web, et nous pouvons choisir l'une des stratégies du « Guide complet des stratégies de chargement de polices » de Zach Leatherman (extraits de code également disponible en tant que Recettes de chargement de polices Web ).
Les meilleures options à considérer aujourd'hui sont probablement Critical FOFT avec précharge et Méthode "The Compromise" . Tous deux utilisent un rendu en deux étapes pour fournir des polices Web par étapes – d'abord un petit sur-sous-ensemble nécessaire pour rendre la page rapide et précise avec la police Web, puis charger le reste de la famille de manière asynchrone. La différence est que la technique "The Compromise" charge le polyfill de manière asynchrone uniquement si événements de chargement de police ne sont pas pris en charge, vous n'avez donc pas besoin de charger le polyfill par défaut. Besoin d'une victoire rapide? Zach Leatherman a un tutoriel rapide de 23 minutes et une étude de cas pour mettre vos polices dans l'ordre.
En général, il peut être judicieux d'utiliser l'astuce de ressource précharge pour préchargez les polices, mais incluez dans votre balisage les conseils après le lien vers les CSS et JavaScript critiques. Avec précharge il y a un puzzle de priorités alors pensez à injecter des éléments rel = "preload" dans le DOM juste avant les scripts de blocage externes. Selon Andy Davies, «les ressources injectées à l'aide d'un script sont cachées du navigateur jusqu'à ce que le script s'exécute, et nous pouvons utiliser ce comportement pour retarder le moment où le navigateur découvre l'indication de précharge ». Sinon, le chargement de la police vous coûtera dans le premier temps de rendu.
Quand tout est critique , rien n'est critique. préchargez une seule ou au maximum deux polices de chaque famille. (Crédit image: Zach Leatherman – diapositive 93) ( Grand aperçu )
C'est une bonne idée de être sélectif et de choisir les fichiers qui comptent le plus, par exemple ceux qui sont essentiels pour le rendu ou qui vous aideraient à éviter les reflets de texte visibles et perturbateurs. En général, Zach conseille de précharger une ou deux polices de chaque famille – il est également logique de retarder le chargement de certaines polices si elles sont moins critiques.
Il est devenu assez courant d'utiliser local () valeur (qui fait référence à une police locale par son nom) lors de la définition d'une font-family dans la règle @ font-face :
/ * Attention! Pas une bonne idée! * /
@ font-face {
famille de polices: Open Sans;
src: local ('Open Sans Regular'),
local ('OpenSans-Regular'),
format url ('opensans.woff2') ('woff2'),
format url ('opensans.woff') ('woff');
}
L'idée est raisonnable: certaines polices open-source populaires telles que Open Sans sont préinstallées avec certains pilotes ou applications, donc si la police est disponible localement, le navigateur n'a pas besoin de télécharger la police Web et peut afficher la police locale immédiatement. Comme Bram Stein l'a noté "bien qu'une police locale corresponde au nom d'une police Web, il est fort probable que ne soit pas la même police . De nombreuses polices Web diffèrent de leur version" de bureau " . Le texte peut être rendu différemment, certains caractères peuvent revenir à d'autres polices, les fonctionnalités OpenType peuvent être totalement absentes, ou la hauteur de ligne peut être différente. "
De plus, à mesure que les polices évoluent avec le temps, la version installée localement peut être très différente de la police Web, avec des caractères très différents. Ainsi, selon Bram, il vaut mieux ne jamais mélanger les polices installées localement et les polices Web dans les règles @ font-face . Google Fonts a emboîté le pas en désactivant local () sur les résultats CSS pour tous les utilisateurs à l'exception des requêtes Android pour Roboto.
Personne n'aime attendre que le contenu soit affiché. Avec le descripteur CSS font-display nous pouvons contrôler le comportement de chargement des polices et permettre au contenu d'être lisible immédiatement (avec font-display: optional ) ou presque immédiatement (avec un timeout de 3s, tant que la police est téléchargée avec succès – avec font-display: swap ). (Eh bien, c'est un un peu plus compliqué que cela .)
Cependant, si vous voulez minimiser l'impact des redistributions de texte nous pourrions utiliser l'API de chargement de polices ( pris en charge dans tous les navigateurs modernes ). Plus précisément, cela signifie que pour chaque police, nous créerions un objet FontFace puis essayer de les récupérer tous, puis de les appliquer à la page. De cette façon, nous regroupons tous les repeints en chargeant toutes les polices de manière asynchrone, puis nous passons des polices de secours à la police Web exactement une fois. Jetez un œil à l'explication de Zach à partir de 32:15, et l'extrait de code ):
/ * Charger deux polices Web à l'aide de JavaScript * /
/ * Zach Leatherman: https://noti.st/zachleat/KNaZEg/the-five-whys-of-web-font-loading-performance#sWkN4u4 * /
// Supprimer les blocs @ font-face existants
// Créer deux
let font = new FontFace ("Noto Serif", / * ... * /);
let fontBold = new FontFace ("Noto Serif, / * ... * /);
// Charger deux polices
let fonts = attendre Promise.all ([
font.load(),
fontBold.load()
])
// Groupe repeint et rend les deux polices en même temps!
fonts.forEach (font => documents.fonts.add (font));
Pour lancer une extraction très précoce des polices avec l'API de chargement de polices en cours d'utilisation, Adrian Bece suggère d'ajouter un espace insécable nbsp; en haut du ] body et masquez-le visuellement avec aria-visibilité: hidden et un .hidden class:
Cela va avec CSS qui a différentes familles de polices déclarées pour différents états de chargement, avec le changement déclenché par l'API de chargement de polices une fois que les polices ont été chargées avec succès:
body: not (.wf-merriweather - chargé) : pas (.no-js) {
famille de polices: [fallback-system-font];
/ * Styles de police de remplacement * /
}
.wf-merriweather - chargé,
.no-js {
famille de polices: "[web-font-name]";
/ * Styles de polices Web * /
}
/ * Cache accessible * /
.hidden {
position: absolue;
débordement caché;
clip: rect (0 0 0 0);
hauteur: 1px;
largeur: 1px;
marge: -1px;
rembourrage: 0;
bordure: 0;
}
Si vous vous êtes déjà demandé pourquoi malgré toutes vos optimisations, Lighthouse suggère toujours d'éliminer les ressources bloquant le rendu (polices), dans le même article Adrian Bece fournit quelques techniques pour rendre Lighthouse heureux ainsi qu'un Gatsby Omni Font Loader un plugin performant de chargement de polices asynchrone et de gestion Flash Of Unstyled Text (FOUT) pour Gatsby.
Ceci est assez important d'autant plus que depuis Chrome v86 (sorti en octobre 2020), des ressources intersites comme les polices ne peuvent plus être partagées sur le même CDN – en raison du cache de navigateur partitionné . Ce comportement était un comportement par défaut dans Safari pendant des années.
La stratégie d’Harry est de préchauffer d’abord l’origine des polices. Ensuite, nous lançons une extraction asynchrone à haute priorité pour le fichier CSS. Ensuite, nous lançons une extraction asynchrone de faible priorité qui n'est appliquée à la page qu'après son arrivée (avec une astuce de feuille de style d'impression ). Enfin, si JavaScript n'est pas supporté, on retombe à la méthode d'origine.
Un petit mot d'avertissement cependant. Si vous utilisez font-display: optional il peut être sous-optimal d'utiliser également la précharge car cela déclenchera cette demande de police Web tôt (provoquant le réseau congestion si vous avez d'autres ressources de chemin critique qui doivent être récupérées). Utilisez preconnect pour des demandes de polices cross-origin plus rapides, mais soyez prudent avec le préchargement car le préchargement de polices d'une origine différente entraîne des conflits de réseau. Toutes ces techniques sont couvertes dans les recettes de chargement de polices Web de Zach .
D'un autre côté, il peut être judicieux de désactiver les polices Web (ou au moins une seconde Stage render) si l'utilisateur a activé Réduire le mouvement dans les préférences d'accessibilité ou a choisi le Mode d'économie de données (voir l'en-tête Save-Data ), ou lorsque l'utilisateur a une connectivité lente (via Network Information API ).
Nous pouvons également utiliser la requête multimédia CSS prefers-reduction-data à et non ] définissent les déclarations de polices si l'utilisateur a opté pour le mode d'économie de données (il existe également d'autres cas d'utilisation ). La requête multimédia exposerait essentiellement si l'en-tête de requête Save-Data de l'extension HTTP Client Hint est activé / désactivé pour permettre une utilisation avec CSS. Actuellement pris en charge uniquement dans Chrome et Edge derrière un indicateur .
Metrics? Pour mesurer les performances de chargement des polices Web, considérez la métrique All Text Visible (la moment où toutes les polices sont chargées et tout le contenu est affiché dans les polices Web), Time to Real Italics ainsi que Web Font Reflow Count après le premier rendu. Évidemment, plus les deux métriques sont faibles, meilleure est la performance.
Qu'en est-il des polices variables pourriez-vous demander? Il est important de noter que les polices variables peuvent nécessiter une considération de performances significatives . Ils nous donnent un espace de conception beaucoup plus large pour les choix typographiques, mais cela se fait au prix d'une seule demande en série par opposition à un certain nombre de demandes de fichiers individuels.
Alors que les polices variables réduisent considérablement la taille de fichier combinée globale de la police cette seule requête peut être lente, bloquant le rendu de tout le contenu sur une page. Le sous-ensemble et la division de la police en jeux de caractères sont donc toujours importants. Du bon côté cependant, avec une police variable en place, nous obtiendrons exactement une redistribution par défaut, donc aucun JavaScript ne sera nécessaire pour regrouper les repeints.
Maintenant, qu'est-ce qui ferait une stratégie de chargement de polices Web à toute épreuve alors? Sous-définissez les polices et préparez-les pour le rendu en 2 étapes, déclarez-les avec un descripteur font-display utilisez l'API de chargement de polices pour regrouper les repeints et stocker les polices dans le cache d'un agent de service persistant. Lors de la première visite, injectez le préchargement des scripts juste avant le blocage des scripts externes. Vous pouvez revenir au Font Face Observer de Bram Stein si nécessaire. Et si vous souhaitez mesurer les performances de chargement des polices, Andreas Marschke explore le suivi des performances avec Font API et UserTiming API .
Alternativement, pour émuler une police Web pour une police de remplacement, nous pouvons utiliser @ font-face descriptors pour remplacer les métriques de police ( demo activé dans Chrome 87). (Notez cependant que les ajustements sont compliqués avec des piles de polices compliquées.)
L'avenir semble-t-il prometteur? Avec l'enrichissement progressif des polices nous pourrions éventuellement "télécharger uniquement la partie requise de la police sur une page donnée, et pour les demandes ultérieures pour cette police" patcher "dynamiquement le téléchargement original avec des ensembles supplémentaires de glyphes selon les besoins lors des pages vues successives », comme l'explique Jason Pamental. Incremental Transfer Demo est déjà disponible, et c'est travail en cours .
