Préchargement des polices

L'auteur de l'article, dont nous publions la traduction aujourd'hui, souhaite expliquer pourquoi il précharge les polices même s'il ne le devrait pas.

Lorsqu'il a créé le site sur lequel l' original de ce matériel a été publié, il n'utilisait aucune de ses propres polices. Cela affecterait inévitablement les performances du site, mais pas beaucoup. L'auteur de l'article dit qu'il s'est efforcé de créer un site Web rapide. Cependant, à la fin, il a été décidé d'utiliser une police spéciale pour les titres de page et en même temps essayer de faire en sorte que cette solution affecte le moins possible les performances du projet.

Pour commencer

Pour commencer, j'ai décidé de rendre le fichier de police le plus petit possible. J'ai donc créé un sous-ensemble de cette police. En d'autres termes, je n'ai sélectionné dans la police que les caractères nécessaires aux mots du titre.

En conséquence, j'ai obtenu un fichier très compact, dont la taille était inférieure à 2 Ko. De plus, je l'ai placé au même endroit que tous les autres éléments du site, ce qui m'a permis de me débarrasser des dépendances tierces et du temps passé à me connecter à un autre domaine.

Et enfin, le lien vers le fichier de police a été placé dans le code CSS intégré à la page, en haut du code HTML, et non dans le fichier CSS externe.

Cela signifie que le navigateur peut détecter et télécharger le fichier de police sans avoir à télécharger une feuille de style externe. C'est d'ailleurs une raison courante pour laquelle les polices se chargent plus tard que nécessaire.

Surprise

Étant donné que des polices spéciales sont nécessaires pour afficher du texte, le navigateur doit les traiter comme des ressources hautement prioritaires.

En conséquence, je m'attendais à ce que le fichier de police se charge très rapidement. Les pages de ma ressource étaient, en tout cas, assez «légères», donc j'ai pensé que rien ne devait empêcher le chargement du fichier de police.

Lorsque j'ai analysé le site, j'ai été légèrement choqué.

Donc, en regardant le site à l'aide des outils de développement Chrome et en l'examinant dans Webpagetest, j'ai constaté que la police haute priorité était chargée après les images - des ressources de faible priorité.


Les images sont téléchargées avant le téléchargement des polices

Cela me semblait complètement absurde.

Je savais avec certitude que le navigateur, avant de télécharger la police, peut attendre jusqu'à ce qu'il découvre que la police est nécessaire pour afficher la page. Mais l'élément dans lequel ma police a été utilisée était situé tout en haut de la page, à l'intérieur de la <header> , bien plus haut que les balises contenant des images qui ont été chargées avant le téléchargement de la police. L'élément correspondant se trouvait non seulement dans le code de la page, mais également dans l'arborescence DOM.

Préchargement des polices comme solution au problème

L'attribut de preload indique au navigateur qu'il doit précharger la ressource correspondante nécessaire pour afficher la page actuelle.

L'utilisation de cet attribut est un bon moyen de télécharger rapidement des ressources importantes qui seraient autrement découvertes par le navigateur ultérieurement.

Les fichiers de polices sont un excellent exemple d'utilisation de ce mécanisme. Si le lien vers le fichier de police est créé dans une feuille de style externe, le navigateur ne détectera pas la police tant qu'il n'aura pas chargé cette feuille de style.

L'utilisation de l'attribut de preload appliqué aux fichiers de polices indique au navigateur qu'il aura besoin des polices appropriées lorsqu'il affichera la page.
De plus, ce mécanisme est très facile à implémenter en utilisant l'élément <link> .

 <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin> 

Alternativement, vous pouvez ajouter la directive de précharge à l'en-tête de réponse (bien que, sauf indication contraire, certains serveurs ou CDN peuvent interpréter cette conception comme une demande lancée par le serveur pour transférer des ressources vers le client).

Je ne m'attendais pas à ce que sur ce site je doive utiliser des mécanismes de préchargement des ressources. Mon code CSS est très modeste, je l'ai intégré dans le code HTML de la page, afin que les pages soient affichées plus rapidement par les navigateurs lors de la première visite sur le site. Étant donné que ma police ne dépendait pas du chargement d'un fichier CSS externe, le navigateur aurait en tout cas dû le détecter très tôt et sans «conseils» sur le préchargement.

Cependant, j'ai découvert que le préchargement de la police conduisait à la restauration de la justice, au fait que le fichier de police était maintenant chargé avant le téléchargement des fichiers image.

Voici le diagramme en cascade de Webpagetest - J'ai mis en évidence les endroits où le travail avec le fichier de police est affiché. En haut de la figure, le préchargement n'est pas utilisé. En bas - utilisé.


Préchargement et utilisation du fichier de police.

Il serait peut-être plus utile de considérer le storyboard du processus de chargement de page (ici, pour plus de clarté, une imitation d'une connexion très lente a été utilisée).


Dans le storyboard supérieur, le préchargement n'est pas utilisé. En bas - utilisé

En passant, je note que j'ai utilisé la poignée font-display: fallback . Autrement dit, le titre a été initialement affiché à l'aide de la police de sauvegarde au cas où ma police se chargerait lentement. Cependant, pour ce test, j'ai désactivé cette fonctionnalité, car sinon, il serait très difficile de distinguer les étapes de chargement de la page.

Pourquoi cela a-t-il fonctionné?

Afin d'afficher une page Web, le navigateur doit créer l'arborescence DOM et l'arborescence CSSOM, qui sont ensuite utilisées pour créer l'arborescence de rendu.

Il preload que l'utilisation de l'élément <link> avec l'attribut preload pour télécharger la police permet au navigateur de commencer à créer CSSOM avant la fin du DOM.

Vous pouvez le voir dans les images suivantes, qui montrent une exploration du processus de chargement de page à l'aide des outils de développement Chrome.

Voici à quoi ressemble l'utilisation de matériaux de page sans utiliser la précharge. Tout d'abord, le DOM est créé et l'image est chargée, puis CSSOM est créé et la police est chargée.


Travailler avec la page sans utiliser la précharge

Et voici la même chose, mais avec l'utilisation du préchargement. Ici, le navigateur commence à créer CSSOM, commence à télécharger la police, puis il crée le DOM et commence à télécharger les images.


Utilisation de la page à l'aide de la précharge

Existe-t-il des alternatives au préchargement?

Supposons que je ne puisse pas utiliser l'attribut de preload pour augmenter la priorité du fichier de police. Que pouvais-je faire alors? Comment pouvez-vous réduire la priorité des images?

Par curiosité, j'ai essayé de mettre en œuvre l'idée ci-dessus et j'ai ajouté l'attribut loading="lazy" aux éléments décrivant les images. Dans Chrome 76 (le seul navigateur qui le supportait au moment de la rédaction), cela devrait réduire la priorité des images en dehors de la zone visible d'origine de la page.

Tester cette idée avec des outils de développement a montré que cela conduit au téléchargement des polices plus tôt. Peut-être que cela mérite d'être rappelé, car le niveau de prise en charge du navigateur pour les mécanismes de chargement paresseux augmente avec le temps.

Différents navigateurs se comportent différemment

J'ai testé le projet dans plusieurs navigateurs différents et sur plusieurs appareils. Lors des tests, j'ai découvert que iOS Safari (iPhone 8) présente le même comportement que Chrome. À savoir, les polices, par défaut, sont chargées après les images, mais l'utilisation de l'attribut de preload permet de corriger la situation.

Le problème du chargement tardif des polices s'est également produit dans Firefox, mais l'attribut de preload n'est pas encore pris en charge par ce navigateur par défaut, donc l'utilisation de l'attribut de preload lors de l'affichage d'un site dans Firefox n'a rien changé.

Dans Edge, les polices se chargent également plus tard que souhaité. Il y avait un sentiment que l'utilisation de Webload Pagetest en utilisant l'attribut de preload ne fonctionnait que partiellement. À savoir, il me semblait que cela ressemblait à un téléchargement de police double. Une fois chargé plus tôt, la deuxième fois plus tard.

Dans le paragraphe précédent, j'ai évoqué le fait que "j'avais une sensation", et que je "semblais". Le fait est que lorsque j'ai essayé de tester ce comportement à l'aide de ma propre version d'Edge, les téléchargements «doubles» ont disparu. Maintenant, j'ai le sentiment que l'utilisation de l'attribut de preload pas le chargement des polices. Cette différence dans le comportement de la page est peut-être le résultat de la correction d'une erreur dans Edge, bien que si tel est le cas, l'erreur a été corrigée au prix de la modification du mécanisme de préchargement des ressources.

Résumé

Ici, nous avons expliqué pourquoi le préchargement des polices ne fait pas de mal même si les liens vers leurs fichiers sont créés dans le code CSS intégré à la page.

Les navigateurs ne se comportent pas toujours comme nous le souhaitons ou comme nous nous y attendons. Mais nous avons des outils qui aident à influencer le comportement des navigateurs, à les incliner dans la direction dont nous avons besoin.

Je pensais que le préchargement des polices sur mon site est complètement inutile. De tout ce dont j'ai parlé, j'ai appris une leçon importante pour moi. Elle consiste dans le fait que vous ne devez jamais rien supposer.

En fin de compte, je peux dire que le préchargement des polices est un excellent moyen d'accélérer la sortie de texte sur les pages Web.

Chers lecteurs! Utilisez-vous des mécanismes de préchargement de polices dans vos projets Web?