Catégories
Astuces et Design

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érifier qu'elles 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 polices Web de sous-ensemble ou si nous utilisons des polices open-source, sous-définissez-les nous-mêmes 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.

La prise en charge de WOFF2 est excellente, 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 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 disponibles en tant que recettes de chargement de polices Web).

Les meilleures options à considérer aujourd'hui sont probablement le FOFT critique avec preload et la 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 requis 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 les é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 propose un didacticiel rapide de 23 minutes et une étude de cas pour mettre de l'ordre dans vos polices.

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 à 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 "Hiérarchisation des métriques: préchargez-en une de chaque famille"
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 – diapositive 93) (Grand aperçu)

C'est une bonne idée d'ê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 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 l’a noté Bram Stein, «bien qu’une police locale corresponde au nom d’une police Web, 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 peu plus compliqué que ça.)

Cependant, si vous souhaitez minimiser l'impact des redistributions de texte, nous pouvons utiliser 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 une seule fois. Jetez un œil à l'explication de Zach, à partir de 32:15, et à l'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 en cours d'utilisation, Adrian Bece suggère d'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 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 fournit quelques techniques pour rendre Lighthouse heureux, ainsi qu'un Gatsby Omni Font Loader, une police asynchrone performante chargement et plugin de gestion de Flash Of Unstyled Text (FOUT) pour Gatsby.

Désormais, nous sommes nombreux à utiliser un CDN ou un hôte tiers pour charger les polices Web. En général, il est toujours préférable d'héberger automatiquement tous vos éléments statiques si vous le pouvez, alors pensez à utiliser google-webfonts-helper, un moyen sans tracas d'auto-héberger des polices Google. Et si ce n'est pas possible, vous pouvez peut-être utiliser le proxy des fichiers Google Font via l'origine de la page.

Il convient de noter cependant que Google fait un peu de travail hors de la boîte, donc un serveur peut avoir besoin d'un peu d'ajustement pour éviter les retards (merci, Barry!)

Ceci est assez important d'autant plus que depuis Chrome v86 (publié en octobre 2020), les ressources intersites telles que les polices ne peuvent plus être partagées sur le même CDN – en raison du cache du 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'accéder aux 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 une astuce 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 requêtes Google Fonts en déclarant uniquement les caractères dont vous avez besoin avec &text. De plus, la prise en charge de l'affichage des polices a également été ajoutée récemment à Google Fonts, afin que nous puissions l'utiliser immédiatement.

Un petit mot d'avertissement cependant. Si tu utilises font-display: optional, il peut être sous-optimal d'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 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 le rendu de 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 header), ou lorsque l'utilisateur a une connectivité lente (via l'API Network Information).

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 existe également d'autres cas d'utilisation). 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), Time to Real Italics ainsi 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 les polices variables peuvent nécessiter une prise en compte significative des performances. 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 globale combinée des fichiers de police, cette seule demande 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 pouvez vous rabattre sur 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 les API Font et UserTiming.

Enfin, n'oubliez pas d'inclure unicode-range pour décomposer une grande police en polices plus petites spécifiques à une langue, et utilisez la correspondance de style de police de Monica Dinculescu pour minimiser un changement de mise en page discordant, en raison des écarts de taille entre les polices de remplacement et les polices Web.

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

L'avenir semble-t-il radieux? Avec l'enrichissement progressif des polices, nous pourrions éventuellement ê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 pour cette police de« patcher »dynamiquement le téléchargement d'origine avec des ensembles supplémentaires de glyphes selon les besoins sur les pages successives vues », comme l'explique Jason Pamental. La démo de transfert incrémentiel est déjà disponible et son travail est en cours.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *