Liste de contrôle des performances frontales 2021 – Smashing Magazine


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 l’utilisation des polices système de l’interface utilisateur en premier lieu. Nous devons simplement nous assurer de vérifiez qu’ils s’affichent correctement sur diverses plateformes. Si ce n’est pas le cas, il est fort probable que les polices Web que nous diffusons incluent des glyphes, des fonctionnalités et des poids supplémentaires qui ne sont pas utilisés. Nous pouvons demander à notre fonderie de types polices Web de sous-ensemble ou si nous utilisons des polices open-source, sous-définissez-les nous-mêmes avec Glyphhanger ou Policesquirrel. Nous pouvons même automatiser l’ensemble de notre flux de travail avec Peter Müller police secondaire, 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.

Prise en charge de WOFF2 C’est génial, 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 options de chargement des polices Web, et nous pouvons choisir l’une des stratégies de Zach Leatherman. “Guide complet des stratégies de chargement des polices, “(extraits de code également disponibles en tant que Recettes de chargement de polices Web).

Les meilleures options à considérer aujourd’hui sont probablement Critical FOFT avec preload et Méthode “The Compromise”. Les deux utilisent un rendu en deux étapes pour fournir des polices Web par étapes – tout 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 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 min et étude de cas pour mettre vos polices en ordre.

En général, il peut être judicieux d’utiliser le preload astuce de ressource pour précharger les polices, mais dans votre balisage, incluez les astuces après le lien vers les CSS et JavaScript critiques. Avec preload, Il y a un puzzle de priorités, alors pensez à vous injecter rel="preload" éléments dans le DOM juste avant les scripts de blocage externes. Selon Andy Davies, «les ressources injectées à l’aide d’un script sont masqué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 le preload astuce. “Sinon, le chargement de la police vous coûtera dans le premier temps de rendu.

Une capture d'écran de la diapositive 93 montrant deux exemples d'images avec un titre à côté d'elles indiquant
Quand tout est critique, rien n’est critique. préchargez une seule ou au maximum deux polices de chaque famille. (Crédit d’image: Zach Leatherman – diapo 93) (Grand aperçu)

C’est une bonne idée de être sélectif et choisissez 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 judicieux de retarder le chargement de certaines polices si elles sont moins critiques.

Il est devenu assez courant d’utiliser local() value (qui fait référence à une police locale par son nom) lors de la définition d’un font-family dans le @font-face règle:

/* Warning! Not a good idea! */
@font-face {
  font-family: Open Sans;
  src: local('Open Sans Regular'),
       local('OpenSans-Regular'),
       url('opensans.woff2') format ('woff2'),
       url('opensans.woff') format('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. police immédiatement. Comme Bram Stein a noté, “bien qu’une police locale corresponde au nom d’une police Web, il est fort probable que n’est pas la même police. De nombreuses polices Web diffèrent de leur version “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, les caractères semblant très différents. Donc, selon Bram, il vaut mieux ne jamais mélanger les polices installées localement et les polices Web dans @font-face règles. Google Fonts a emboîté le pas en désactivation local() sur les résultats CSS pour tous les utilisateurs, autres que les demandes Android pour Roboto.

Personne n’aime attendre que le contenu soit affiché. Avec le font-display Descripteur CSS, 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 ça.)

Cependant, si vous voulez minimiser l’impact des reflux de texte, nous pourrions utiliser le 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 FontFace objet, puis essayez de les récupérer tous, puis appliquez-les à la page. De cette façon, nous regrouper tous les repeints en chargeant toutes les polices de manière asynchrone, puis en passant des polices de secours à la police Web exactement une fois. Jeter un coup d’œil à Explication de Zach, à partir de 32:15, et le extrait de code):

/* Load two web fonts using JavaScript */
/* Zach Leatherman: https://noti.st/zachleat/KNaZEg/the-five-whys-of-web-font-loading-performance#sWkN4u4 */

// Remove existing @font-face blocks
// Create two
let font = new FontFace("Noto Serif", /* ... */);
let fontBold = new FontFace("Noto Serif, /* ... */);

// Load two fonts
let fonts = await Promise.all([
  font.load(),
  fontBold.load()
])

// Group repaints and render both fonts at the same time!
fonts.forEach(font => documents.fonts.add(font));

Pour lancer une récupération très précoce des polices avec l’API de chargement de polices utilisée, Adrian Bece suggère pour ajouter un espace insécable nbsp; au sommet de la body, et cachez-le visuellement avec aria-visibility: hidden et un .hidden classe:


  
  
  


Cela va de pair avec le 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--loaded):not(.no-js) {
  font-family: [fallback-system-font];
  /* Fallback font styles */
}

.wf-merriweather--loaded,
.no-js {
  font-family: "[web-font-name]";
  /* Webfont styles */
}

/* Accessible hiding */
.hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 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 en fournit quelques techniques pour rendre Lighthouse heureux, avec un Chargeur de polices Gatsby Omni, un plugin performant de chargement de polices asynchrone et de gestion de Flash Of Unstyled Text (FOUT) pour Gatsby.

Maintenant, nous sommes nombreux à utiliser un CDN ou un hôte tiers pour charger les polices Web. En général, c’est toujours mieux vaut auto-hébergez tous vos actifs statiques si vous le pouvez, pensez à utiliser google-webfonts-helper, un moyen sans tracas d’auto-héberger Google Fonts. Et si ce n’est pas possible, vous pouvez peut-être proxy les fichiers Google Font via l’origine de la page.

Ceci est assez important d’autant plus que depuis Chrome v86 (sorti en octobre 2020), des ressources intersites comme les polices ne peuvent pas être partagées sur le même CDN plus – en raison de la cache de navigateur partitionné. Ce comportement était un comportement par défaut dans Safari pendant des années.

Mais si ce n’est pas possible du tout, il existe un moyen d’y accéder les polices Google les plus rapides possibles avec l’extrait de Harry Roberts:














La stratégie d’Harry consiste à 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 un truc de feuille de style d’impression). Enfin, si JavaScript n’est pas pris en charge, nous revenons à la méthode d’origine.

Ah, à propos de Google Fonts: vous pouvez rasez jusqu’à 90% de la taille des demandes Google Fonts par déclarer uniquement les caractères dont vous avez besoin avec &text. De plus, le la prise en charge de l’affichage des polices a été ajoutée récemment à Google Fonts également, afin que nous puissions l’utiliser immédiatement.

Un petit mot d’avertissement cependant. Si tu utilises font-display: optional, il pourrait être sous-optimal utiliser également preload car cela déclenchera cette demande de police Web tôt (provoquant la congestion du réseau si vous avez d’autres ressources de chemin critique qui doivent être récupérées). Utilisation preconnect pour des demandes de polices cross-origin plus rapides, mais soyez prudent avec preload car le préchargement de polices d’une origine différente entraîne des conflits de réseau. Toutes ces techniques sont couvertes par Zach Recettes de chargement de polices Web.

D’un autre côté, il peut être judicieux de désactiver les polices Web (ou au moins le rendu de la deuxième étape) si l’utilisateur a activé Réduire le mouvement dans les préférences d’accessibilité ou a opté pour Mode économiseur de données (voir Save-Data entête), ou lorsque l’utilisateur a une connectivité lente (via API d’informations sur le réseau).

Nous pouvons également utiliser le prefers-reduced-data Requête multimédia CSS à ne pas définir les déclarations de police si l’utilisateur a opté pour le mode d’économie de données (il y a d’autres cas d’utilisation aussi). La requête multimédia exposerait essentiellement si le Save-Data L’en-tête de requête 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 drapeau.

Métrique? Pour mesurer les performances de chargement des polices Web, tenez compte du Tout le texte visible métrique (le moment où toutes les polices sont chargées et tout le contenu est affiché dans les polices Web), Temps pour les vrais italiques aussi bien que Nombre de redistribution des polices Web après le premier rendu. De toute évidence, plus les deux paramètres sont bas, meilleures sont les performances.

Qu’en est-il de polices variables, pourriez-vous demander? Il est important de noter que variable les polices peuvent nécessiter un considération de performance significative. 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éduire considérablement la taille globale combinée des fichiers de polices, cette seule requête peut être lente, bloquant le rendu de tout 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 un stratégie de chargement de polices Web à l’épreuve des balles puis? Sous-définissez les polices et préparez-les pour le rendu en 2 étapes, déclarez-les avec un font-display descripteur, utilisez l’API de chargement de polices pour regrouper les repeints et stocker les polices dans le cache d’un agent de service permanent. Lors de la première visite, injectez le préchargement des scripts juste avant le blocage des scripts externes. Vous pourriez vous rabattre sur celui de Bram Stein Observateur de visage de police si nécessaire. Et si vous souhaitez mesurer les performances de chargement des polices, Andreas Marschke explore suivi des performances avec Font API et UserTiming API.

Enfin, n’oubliez pas d’inclure unicode-range pour décomposer une grande police en polices plus petites spécifiques à une langue et utiliser Monica Dinculescu font-style-matcher pour minimiser un décalage discordant dans la mise en page, en raison des écarts de taille entre les polices de secours et les polices Web.

Alternativement, pour émuler une police Web pour une police de secours, nous pouvons utiliser @ descripteurs font-face pour remplacer les métriques de police (démo, activé dans Chrome 87). (Notez que les ajustements sont compliqués avec des piles de polices compliquées.)

L’avenir semble-t-il radieux? Avec enrichissement progressif des polices, éventuellement, nous pourrions être en mesure de “télécharger uniquement la partie requise de la police sur une page donnée, et pour les demandes ultérieures de cette police de” patcher “dynamiquement le téléchargement original avec des jeux supplémentaires de glyphes selon les besoins sur les pages vues successives”, comme Jason Pamental l’explique. Démo de transfert incrémentiel est déjà disponible, et c’est travail en cours.



Close Menu