Au cours des dernières semaines, par coïncidence au travail et dans des projets tiers, j'ai beaucoup appris sur les polices Web, ainsi que sur Google Fonts en particulier. Grâce à cela, je peux donner une réponse plus détaillée à une question qui me paraissait simple dans le passé: devriez-vous stocker des polices Google sur votre serveur?Objectivement parlant, j'avoue que les polices ne sont pas mon fort. Je préfère une approche plus pratique et ne me concentre pas sur le design (regardez ce site et assurez-vous qu'il l'est) et avant cela je ne ressentais pas le besoin d'utiliser des polices non standard. Bien sûr, ils ont l'air un peu plus agréables et «marquent» le texte. Mais pour le texte principal, cela n'a guère de sens. Je n'ai jamais évalué l'article (ou lié à son contenu différemment), simplement parce qu'une belle police a été utilisée pour le soumettre. Cependant, j'étais pleinement conscient de l'impact négatif des polices supplémentaires sur les performances et la vitesse de chargement des pages, alors je suis peut-être biaisé à cause de cela.Cependant, beaucoup peuvent être en désaccord avec moi, et les polices, qu'elles soient importantes pour moi personnellement ou non, sont régulièrement utilisées par de nombreux autres développeurs, et souvent elles n'ont tout simplement pas le choix. Voyons ce qui peut être fait pour ne pas perdre en vitesse sur le site, et laissons les designers heureux.Auto-hébergé vs ressources externes
Il y a quelques années, il était normal d'utiliser CDN pour connecter des ressources partagées (par exemple, jQuery avec code.jquery.com - et oui, ils l'utilisent encore beaucoup ). Pour clarifier, par CDN ici, je veux dire charger des ressources à partir du domaine de quelqu'un d'autre, pas de votre propre CDN.La raison en était que les navigateurs étaient censés limiter le nombre de connexions à chaque domaine (généralement à 6 connexions), donc l'utilisation d'un autre domaine vous a donné 6 autres connexions. Cela pouvait être vrai dans le passé (en particulier lorsque la restriction était <6 domaines) et avant que le HTTPS ne devienne la norme, ce qui augmentait considérablement les coûts de connexion. De plus, HTTP / 2bénéficie en fait de l'utilisation d'une connexion (surtout!), donc l'utilisation d'autres domaines est souvent une perte de performances plutôt qu'une acquisition.Une autre façon d'y parvenir était de diviser le domaine principal avec un ou plusieurs sous-domaines techniques (par exemple, assets.example.com), et dans ce cas, les polices n'apparaissent pas à nouveau sur votre domaine principal, d'où votre page Web est chargée. Néanmoins, cette méthode a les mêmes problèmes de connexion, donc cela ne peut pas être appelé un gain de performances, même si c'était le cas auparavant.Un autre avantage d'un CDN public était la forte probabilité que les visiteurs aient déjà cette version de jQuery conditionnelle dans le cache. Mais, encore une fois, je suis convaincu que c'est trop. Il y a tellement de bibliothèques et leurs versions, etLe cache du navigateur est plus petit qu'il n'y paraît, une telle correspondance est donc très peu probable. De plus, Safari utilise un cache HTTP unique pour chaque domaine visité, pour des raisons de confidentialité (cache à double clé), et Chrome introduira également cette fonction prochainement . Ainsi, il n'y a plus rien à discuter.Ce sujet se transforme en une conversation sur l'impact des CDN tiers sur la confidentialité. Vous ne savez pas comment et pourquoi ils suivent vos utilisateurs, ce qui ne peut pas arriver avec une solution auto-hébergée. Et les récentes innovations de la loi obligent de nombreux sites à répertorier explicitement tous les cookies utilisés sur le site. Ce n'est pas la tâche la plus simple lors de l'utilisation de CDN tiers.Depuis longtemps, je suis convaincu que les CDN tiers ou même le partage de vos propres domaines sont très loin du gain de performance promis. Trop souvent, vous pouvez trouver des sites où le domaine principal ne distribue que index.html, puis perdre beaucoup de temps à configurer de nouvelles connexions .Sans parler des implications de sécurité du téléchargement de ressources à partir de sites tiers. Oui, il y a le SRI , mais cela peut causer des problèmes inattendus , et honnêtement, je ne vois pas l'intérêt. S'il s'agit d'une ressource statique (où vous pouvez utiliser SRI), puis stockez-la localement, et si elle n'est pas statique (car le contenu peut changer), vous ne pouvez pas utiliser SRI.De plus, l'utilisation de ressources provenant de sources tierces menace de devenir un point de défaillance unique (SPOF) et de désactiver votre site. Cela s'est produit plus d'une fois , et bien qu'il puisse sembler peu probable que les polices Google tombent, elles peuvent être bloquées par les mandataires de l'entreprise ou par des pays entiers .En général, de plus en plus de gens conseillent de garder leurs ressources statiques à la maison , idéalement sur le domaine à partir duquel vous distribuez des pages Web. Les polices sont des ressources statiques, donc la même chose s'applique à elles, non? Eh bien, il s'avère que tout n'est pas si simple, car les polices ont leurs propres particularités et techniques d'optimisation, ce qui peut rendre le stockage local un peu plus compliqué ...Google Fonts et leur fonctionnement
Google Fonts est une ressource géniale si vous aimez les polices. 977 polices gratuites que tout le monde peut utiliser gratuitement. Les polices commerciales sont souvent ridiculement chères et généralement sous licence plutôt que vendues, c'est-à-dire que les frais sont facturés en fonction du nombre attendu de pages vues. Par conséquent, avoir autant de polices gratuites et si faciles à utiliser dans une collection est très utile.Mais ce n'est pas tout. Google Fonts, comme de nombreux fournisseurs de ressources pour les sites (voir l'exemple jQuery ci-dessus), fournit des CDN et stocke des polices que tout le monde peut utiliser directement à partir de ses serveurs. Cela signifie que vous pouvez commencer à utiliser des polices en ajoutant simplement une ligne de code sur votre site pour charger la feuille de style:<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Vous pouvez également ajouter plus de propriétés et de polices sur une seule ligne pour charger plusieurs polices et variantes de chacune d'entre elles:<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900%7CPoppins:300,400,700,900&display=swap" rel="stylesheet">
L'inconvénient est une baisse des performances (l'avantage est également dans les performances, mais ce n'est pas si évident, nous y arriverons). Le problème est que votre site (par exemple www.example.com ) charge une feuille de style à partir de fonts.googleapis.com, qui renvoie du CSS avec des règles de police. Voici la source du lien dans l'exemple ci-dessus:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Nous parlerons de ce que certains de ces paramètres signifient plus tard (et aussi de la raison pour laquelle il existe deux règles de police), mais pour l'instant cela signifie que vous pouvez utiliser cette police dans vos styles comme ceci:body {
font-family: 'Lato', sans-serif;
}
Cependant, vous devez maintenant vous connecter à fonts.googleapis.com, télécharger CSS, puis vous connecter à fonts.gstatic.com et télécharger les polices elles-mêmes (pourquoi Google ne peut pas héberger à la fois CSS et les polices sur le même domaine - je ne comprends vraiment pas!).Les polices sont souvent détectées par le navigateur avec un retard lors du chargement de la page (après tout, vous devez charger CSS pour trouver des liens vers celles-ci). Mais les polices Google sont découvertes encore plus tard, car CSS doit être téléchargé à partir d' un autre domaine, puis les polices du troisième domaine et, comme je l'ai mentionné, l'établissement d'une connexion HTTPS n'est pas non plus instantané. Cela peut être vu dans le diagramme en cascade ci-dessous généré par WebPageTest (notez que tous les tests ont été exécutés avec Chrome - 3GSlow):
La ligne 1 montre que le HTML est chargé en premier. Ensuite, dès qu'il est téléchargé et lu en moins de 2 secondes, le navigateur détecte la nécessité de charger le CSS Google Fonts et le charge à la ligne 4. Il faut une seconde pour établir une connexion, puis un fichier est téléchargé pendant 3,5 secondes. Enfin, le navigateur a découvert l'existence de notre police et la charge sur la ligne 6, après avoir perdu encore 1 ¼ de seconde sur le chemin de la connexion avec fonts.gstatic.com.Ainsi, l'utilisation de cette police de Google Fonts nous coûte trois secondes entières de productivité à partir du moment où le HTML est disponible, sans tenir compte du temps de téléchargement de la police elle-même!Accélérer les polices Google en préchargeant les ressources
Vous pouvez atténuer ce terrible impact sur les performances lors du chargement de CSS et de polices de deux domaines différents. Le premier domaine (pour CSS) doit être situé plus près du début du fichier index.html afin que le navigateur le lise dès que possible, mais le second est toujours masqué. Cependant, nous savons à quoi ressemblera ce domaine (fonts.gstatic.com), nous pouvons donc ouvrir la connexion à l'avance afin de gagner du temps sur la deuxième connexion plus tard:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Lors du nouveau test, nous voyons l'image suivante:
Ici, nous voyons que la connexion sur la ligne 5 est ouverte à l'avance, avant de charger CSS. Nous gagnons donc plus d'une seconde (téléchargement de polices en 4 secondes, pas 5.25), car nous avons réussi à éviter de perdre du temps lors de la connexion et les polices sont téléchargées immédiatement après la lecture des CSS Google Fonts.Vous pourriez penser que vous pouvez continuer et précharger la police entière, au lieu d'être content de ne rejoindre que le domaine, mais Google Fonts appelle les polices des hachages uniques. Dans l'exemple ci-dessus, la police téléchargée s'appelle S6uyw4BMUTPHjx4wXg.woff2, pas lato.woff2, donc le préchargement n'est pas possible sauf si vous voulez que votre site plante un jour lorsque Google décide soudainement de changer ce hachage.Dans tous les cas, si vous utilisez Google Fonts et n'avez pas l'intention de faire autre chose après avoir lu cette note, ajoutez au moins une connexion préliminaire au domaine, si ce n'est pas déjà fait. Ce n'est qu'une ligne de code et cela devrait améliorer considérablement les performances de votre page.En fait, Google Fonts donne une commande similaire dans les en-têtes HTTP lors du rendu CSS:
Mais dans de nombreux cas, cela n'aidera pas beaucoup, car au moment où vous recevez les en-têtes de réponse HTTP du serveur avec CSS, le navigateur sait déjà que vous souhaitez vous connecter à ce domaine pour télécharger des polices. Il est donc préférable pour vous de le spécifier dans le code HTML afin que la précharge fonctionne plus tôt (peu importe qu'elle soit dupliquée de cette manière, la deuxième tentative sera simplement ignorée). Cependant, si votre page est toujours en cours de traitement au moment de la réception des en-têtes du serveur CSS de Google Fonts et que le DOM n'est pas prêt (c'est peut-être un signe de trop de JavaScript sur votre page?), Cela peut aider à améliorer les performances lorsqu'il devient finalement clair quelle police à télécharger.Affichage des polices: échange
Dans le code de font-face ci-dessus, vous pouvez voir la police-display: swap; line. Il s'agit d'une instruction relativement nouvelle. Il peut être ajouté à la déclaration de police et il indiquera au navigateur d'utiliser d'abord la solution de repli, c'est-à-dire la police système (sans-serif dans cet exemple), puis la remplacer par la police réelle après l'avoir téléchargée. De cette façon, vous pouvez éviter les retards dans le chargement du contenu lorsque la police n'a pas encore été chargée et également améliorer les performances.Oui, cela conduit à une épidémie de texte sans style (FOUT) - les mêmes «sauts» de contenu pendant le chargement de la page, mais certaines personnes ne l'aiment pas (mon avis est d'accord, le contenu est plus important que le style, mais le texte sautant à travers la page est ennuyeux, cependant cela peut être atténué en modifiant la police de rechange). Une alternative est le texte flash invisible (FOIT). Dans ce cas, le texte est masqué jusqu'à ce que la police apparaisse, ce qui retarde évidemment le téléchargement et peut causer d'autres problèmes si du texte se charge, mais d'autres pas !Dans tous les cas, avant l'introduction de l'affichage des polices: swap, différents navigateurs traitaient cela différemment - certains, comme IE et Edge, utilisaient FOUT, d'autres utilisaient FOIT, et ils avaient des temps différents avant d'attendre que les polices attendent. Pour cette raison, si la police ne se chargeait pas, votre contenu pourrait rester invisible pendant longtemps. L'introduction de font-display: swap a permis aux développeurs de sites Web de décider par eux-mêmes comment cela se produirait. La plupart des navigateurs prennent en charge l' affichage de police: swap, à l'exception d'IE et Edge, mais comme mentionné ci-dessus, ils l'utilisent par défaut de toute façon. Les polices Google prennent également en charge diverses options d'affichage des polices et offrent l'affichage des polices: permuter par défaut.Donc, une autre astuce si vous utilisez les polices Google est de vérifier que vous avez le paramètre & display = swap dans l'URL, et si ce n'est pas le cas (il n'a été pris en charge que récemment), ajoutez-le:Par exemple, remplacez ceci:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
Sur ce:
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
Vous pouvez également spécifier l'une des autres valeurs d'affichage de police , par exemple facultative , si vous le souhaitez.Malheureusement, cela ne résout que la moitié du problème. Cette instruction est en CSS, qui renvoie les polices Google, elle n'est donc utile qu'après avoir téléchargé le fichier CSS. Ainsi, cela aide à faire face au retard lors du chargement des polices elles-mêmes, mais cela n'aide pas pendant que vous attendez le chargement de ce CSS. C'est donc une bonne amélioration (au moins pour ceux qui préfèrent FOUT), mais toujours pas la solution dans son ensemble.Google Fonts
J'ai aidé à créer Web Almanac (un aperçu fantastique de l'état d'Internet - voyez par vous-même si vous ne l'avez pas encore vu) et le lent téléchargement des polices Google sur notre site m'a énervé et je voulais le réparer. Surtout FOUT avec affichage de police: échange. Je me demandais si nous pouvions réduire l'impact de cela, et la solution locale semblait stocker des fichiers localement, éventuellement en utilisant le préchargement.Nous avons déjà utilisé les techniques ci-dessus (préchargement et affichage des polices: swap;), mais, bien sûr, il serait préférable de s'éloigner de la connexion CSS de l'extérieur. Nous savons ce qu'il y aura dans ce CSS. Alors, choisissez en toute confiance auto-hébergé? C'est là que ça devient intéressant ...J'ai trouvé un script pratique sur GitHub ( Google Font Download), ce qui m'a aidé à télécharger toutes les différentes options de police (car il y en avait beaucoup, jusqu'à 9 selon la page), puis à copier le CSS, qu'il affichait dans notre feuille de style principale, et à télécharger les polices sur le serveur. Il existe d' autres outils en ligne qui font de même. Tout semblait fonctionner, et nous nous sommes débarrassés du chargement CSS ennuyeux et de la nécessité de travailler avec deux domaines.Cependant, en y regardant de plus près, j'ai remarqué que les polices étaient plus grandes:
Comme vous pouvez le voir, il y a eu une augmentation significative de la taille (jusqu'à 74% supplémentaires pour certains d'entre eux!) Par rapport aux polices Google téléchargées (à droite) et aux polices placées localement (à gauche). Au début, je pensais que cela était dû à mon serveur Web local, par exemple, en raison de la désactivation de la compression. Mais les polices WOFF2 sont servies sans compression par le serveur Web - ou du moins il devrait l'être - puisque le format inclut la compression Brotli. De plus, la capture d'écran ci-dessus montre les octets téléchargés (noirs en haut), ainsi que les octets non compressés (légèrement plus légers en bas) pour chaque colonne (ils sont assez similaires dans les deux colonnes, car les polices sont vraiment envoyées sans compression par le serveur Web, mais les octets téléchargés incluent des en-têtes HTTP , donc ils sont un peu plus grands), et il y avait des différences dans les octets compressés et non compressés, donc ce n'est pas la question.La comparaison des règles de police de caractères obtenues à l'aide de l'outil avec celles d'origine a révélé une différence: deGoogle Fonts:
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Depuis l'outil de téléchargement:@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src:
local('Lato Regular'),
local('Lato-Regular'),
url('Lato_400.woff2') format('woff2'),
url('Lato_400.woff') format('woff');
}
La première différence est que nous avons perdu la police d'affichage: swap line, mais cela peut être corrigé sans problème. Beaucoup plus intéressant est le fait que Google Fonts distribue deux polices - et inclut différentes plages Unicode. Cela est dû au sous-ensemble de polices et réduit les fichiers de polices.Sous-ensemble de polices
Le sous-ensemble de polices est la suppression des caractères que vous n'allez pas utiliser pour réduire la taille du fichier de police. En règle générale, la plupart des occidentaux n'utilisent que des caractères latins, et télécharger une police avec tous les caractères que vous n'utiliserez probablement pas est irrationnel. J'en avais entendu parler auparavant, mais je n'ai jamais pensé à quel point cela pouvait être important! Google Fonts affiche automatiquement une police avec un ensemble de caractères latins et, si possible, connecte une deuxième police pour les caractères latins étendus (par exemple, Ā), qui ne sera téléchargée que si nécessaire.En fait, vous pouvez également demander une police spéciale qui ne contient que les caractères dont vous avez besoin avec le paramètre text:https://fonts.googleapis.com/css?family=Lato&text=ABCÀ en juger par d'autres observations, l'outil de chargement de polices que j'ai utilisé prend apparemment en charge le sous-ensemble de polices, mais uniquement pour l'ensemble de la «langue» (latin ou latin étendu), et il combine les deux sous-ensembles de caractères dans un seul fichier. À la fin, je suis retourné à l'utilisation de ce que mon navigateur utilisait et j'ai cessé d'utiliser cet outil. Cela a donné des tailles de fichier similaires (avec une légère différence en raison des en-têtes HTTP dans mon environnement de développement), mais j'ai rapidement constaté qu'il ne s'agissait pas uniquement d'un sous-ensemble de polices.Google Fonts distribue intelligemment les polices
Les polices Google ne rendent pas toujours le même CSS et cela dépend de l'agent utilisateur utilisé . Par exemple, pour Internet Explorer 11, il envoie les informations suivantes:@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wWA.woff) format('woff');
}
Ici, vous pouvez voir qu'il ne fournit que le format WOFF, car IE 11 ne prend pas en charge WOFF2 , et pour la même raison, la plage unicode n'est pas spécifiée. Il donne font-display: swap (comme je l'ai souligné dans l'URL pour CSS), bien que le navigateur ne le supporte pas, mais cela ne nuit pas.Ce n'est pas seulement le fabricant et la version du navigateur. Conseil de policeinclut des instructions supplémentaires dans le fichier de police, qui sont ensuite utilisées pour fournir le meilleur affichage de la police - en particulier sur les écrans à faible résolution ou pour les très petites tailles. L'affichage des polices est utilisé sur Windows, mais pas sur MacOS, donc selon le système d'exploitation avec lequel vous travaillez lors de la réception des polices Google, à l'aide d'un navigateur (même si vous utilisez Chrome sur chaque plate-forme), vous pouvez obtenir des fichiers de polices avec affichage ou sans lui. Si vous téléchargez la version Windows et l'utilisez vous-même, les utilisateurs de MacOS souffriront en fait de la nécessité de traiter de gros fichiers de polices remplis d'indices inutilisés, et si vous faites le contraire, vous risquez de faire en sorte que les utilisateurs de Windows souffrent d'un affichage des polices pire, sans indication de police.Lorsque j'ai utilisé Google Fonts et que j'ai téléchargé des polices pour une utilisation locale, je l'ai fait sur mon Mac, j'ai donc obtenu des fichiers plus petits. Lorsque j'ai utilisé l'outil, j'ai obtenu des polices complètes, avec des indices. C'était donc une autre raison de la grande différence de taille!L'indice de police est-il toujours pertinent, car les écrans haute définition sont devenus plus courants - c'est une bonne question, et de nombreuses polices sont initialement livrées sans allusion, car il faut beaucoup de temps pour les créer. Lorsqu'il est présent - il peut augmenter considérablement la taille de la police. Dans le cas de Lato, la taille est doublée. Cela vaut-il la charge de travail supplémentaire que vous rencontrerez en abandonnant les polices Google et en localisant les polices localement? C'est une autre décision que vous devez prendre pour vous-même.Ainsi, Google Fonts CDN est pris en charge par un script intelligent qui donne les polices les plus appropriées, les optimisant pour maintenir des performances maximales. En passant au stockage local des polices, vous devrez configurer tout cela vous-même, et vous risquez de perdre l'affichage correct de vos polices dans certains navigateurs si vous ne le faites pas.Pour Web Almanac, nous avons examiné les statistiques sur les navigateurs des visiteurs et décidé de ne prendre en charge que WOFF2, et d'utiliser également des versions de MacOS sans allusion, car elles pèsent deux fois moins. Ce CSS simplifié (d'autant plus que la plage unicode est prise en charge par tous les navigateurs qui prennent en charge WOFF2), et les utilisateurs d'IE 11 et d'autres anciens navigateurs voient par défaut sans-serif, ce qui ne semble pas très bon, mais à notre avis, les polices sont une amélioration progressive, et même sans elles, le site est encore plus qu'utilisable. En outre, les anciens navigateurs peuvent même bénéficier de l'utilisation des polices par défaut du système, car ils sont susceptibles d'être utilisés sur des machines plus anciennes et de faible puissance.Vous pouvez également apporter d'autres ajustements aux polices que vous utilisez si vous le souhaitez (vérifiez d'abord les licences!), Mais la copie des polices Google par défaut utilisées dans Chrome sur MacOS est probablement suffisante pour la plupart d'entre nous si vous souhaitez prendre en charge uniquement les navigateurs WOFF2 sans allusion. .Néanmoins, si nous nous installions sur Google Fonts, nous aurions alors WOFF (et même des formats plus anciens) et des indices si nécessaire, sans avoir besoin d'une configuration approfondie de substitution de la police correcte en fonction du navigateur. Ainsi, l'utilisation de Google Fonts pour les polices présente toujours certains avantages, et en choisissant le stockage local, vous les refusez. Cela s'applique également à toute amélioration future des polices Google .Améliorations futures des polices
Depuis que je me suis plongé dans le sujet des polices et j'ai averti que vous pourriez perdre tous les avantages futurs de Google Fonts en allant au stockage local, je veux m'éloigner un peu du sujet principal et parler d'autres choses intéressantes que j'ai découvertes. Quels sont les grands changements à venir dans le monde des polices? Eh bien, il y a deux changements qui sont actuellement en cours de discussion et qui peuvent affecter les polices à l'avenir (et peuvent donc être pris en charge par Google Fonts, éventuellement par défaut si vous choisissez d'utiliser ce service): les polices variables et l'enrichissement progressif des polices .Polices variables
Les polices variables vous permettent d'utiliser différents styles de police sans avoir à télécharger des fichiers individuels. J'ai mentionné plus tôt que Web Almanac utilise jusqu'à 9 fichiers de polices différents, mais en réalité il ne s'agit que de 2 polices. La raison est simple - le site utilise également des versions en gras, en italique, en gras et même plus fines de l'un ou des deux. De nombreuses variantes de la même police peuvent sembler inappropriées et vous pourriez penser que le navigateur lui-même fera face à la tâche de changer l'épaisseur du texte ou d'écrire en italique. Oui c'est possible. Mais chaque navigateur le fait un peu différemment, et les résultats peuvent être radicalement différents , donc beaucoup les appellent des «polices artificielles».La seule façon de garantir le même affichage est d'utiliser une «vraie police» spécifiquement pour chaque style dont vous avez besoin.Les polices variables standardisent l'affichage de diverses variantes de police et le besoin de fichiers supplémentaires disparaît. Théoriquement, nous pourrions remplacer ces 9 polices par 2 lorsque leurs versions de polices variables seront disponibles.Cela ouvre une tonne de possibilités d'utilisation des polices sur Internet. Bien qu'il me semble que les 9 options pour les deux polices sont trop, en réalité ce n'est pas trop, tandis que les polices variables permettraient des variations infinies. Sur les appareils mobiles, vous pouvez définir une épaisseur légèrement différente pour le "gras" que sur les ordinateurs de bureau et les tablettes. Polices variables avec quelques instructions CSS simplespermettre cela sans le coût des ressources pour télécharger une police supplémentaire. Récemment à DotCSS, Jason Pamental a parlé des polices variables et a montré comment obtenir une page magnifiquement conçue avec ce qui semble être beaucoup de polices différentes - le tout en utilisant un seul fichier!L'utilisation de polices variables signifie également le chargement de toutes les variantes de polices en même temps , évitant la confusion causée par les problèmes mentionnés précédemment. Cela entraîne également moins de redessins de la mise en page: sans polices variables, la page sera redessinée par le navigateur encore et encore à mesure que chaque variante de police se charge.Les polices variables ont un bon supportdans les navigateurs modernes, mais leur inconvénient est la grande taille, car le stockage de différentes variantes de police nécessite plus d'espace, comme c'est le cas avec l'indication de police. Cela dépend de la police, mais généralement ils sont deux fois plus grands après compression, donc pour justifier leur utilisation, vous devez avoir besoin d'au moins deux styles. Même ainsi, il serait préférable de préférer un fichier plus petit qui est téléchargé pour afficher le texte critique, plutôt qu'un fichier plus grand pour afficher tout le texte. Et encore une fois, l'utilisation de font-display: swap peut-elle être une solution moins problématique? C'est à chaque propriétaire de site d'en décider!Enrichissement progressif des polices
L'enrichissement progressif des polices , en substance, prend le sous-ensemble à un nouveau niveau et vous permet de télécharger des définitions de caractères supplémentaires selon les besoins sous la forme d'un flux d'informations supplémentaires qui complète la police actuellement chargée, mais n'ajoute pas de définition supplémentaire. Cela peut sembler un petit avantage pour nous occidentaux, mais pour d'autres langues - en particulier en Extrême-Orient - les fichiers de polices peuvent être très massifs (par exemple, 2 Mo ), en raison du grand nombre de caractères dans ces langues. Pour cette raison, les polices Web sont moins couramment utilisées dans ces pays et l'enrichissement progressif des polices peut avoir un effet positif sur la situation.L'enrichissement progressif des polices, si je comprends bien, est à un stade beaucoup plus précoce que les polices variables, mais il existedémo en ligne . Dans tous les cas, il s'agit d'un autre changement potentiellement intéressant lié aux polices.Google Fonts continuera-t-il de s'améliorer?
Étant donné le fonctionnement de Google Fonts, il est facile d'imaginer qu'il puisse continuer de croître avec de nouvelles améliorations, telles que celles décrites dans cet article (ou bien d'autres!), Rien qu'en changeant le CSS que vous donnez. Et il peut le faire judicieusement. Par exemple, déterminer si votre navigateur prend en charge les nouvelles technologies (comme il le fait maintenant avec le format de police - WOFF ou WOFF2), ou d'autres manières. Par exemple, si vous demandez plus de deux polices et donnez une police variable moins gourmande en ressources, vous pouvez automatiser et créer un lien vers le même fichier de polices dans plusieurs annonces de type police, et si vous ne demandez qu'une seule option, faites référence à une plus légère, police traditionnelle. Sons farfelus? Ils l'ont déjà fait avec une police.(Oswald)! Honnêtement, je ne sais pas si la même chose est possible avec l'enrichissement progressif des polices, car je ne comprends pas bien le principe de son travail, mais ce sera intéressant à voir.De plus, il convient de mentionner que l'utilisation de Google Fonts, lors de la mise à jour des polices, par exemple, pour ajouter de nouveaux jeux de caractères ou corriger des erreurs dans les glyphes, vous obtenez automatiquement de nouvelles polices. Avec le stockage local, cela ne fonctionnera pas - du moins pas sans intervention d'une seule main. Peut-être pourriez-vous regarder dans le sens des demandes de proxy via votre domaine et prendre ainsi le meilleur des deux options, mais cela sera très probablement plus lent et nécessitera une configuration et une gestion supplémentaires.D'un autre côté, le stockage local offre une stabilité, car certaines mises à jour peuvent affecter votre conception, par exemple, si un titre sur une ligne commence à s'étirer à deux en raison d'un changement de police. Il y a une catégorie de gens qui sont très en colère à cause de celaAvantages du stockage des polices locales
Nous avons donc discuté de nombreuses théories, et bien qu'il y ait des avantages potentiels évidents du stockage local, il y a aussi des difficultés à considérer, et donc l'utilisation de Google Fonts présente également des avantages évidents. Alors, l'auto-hébergement en vaut-il la peine? Cela dépend des commodités réelles dans une situation particulière. Si la différence de performances est insignifiante, il peut être utile de continuer à utiliser les polices Google, si elles sont importantes, respectivement.Pour Web Almanac, nous avons récemment sélectionné le stockage local de Google Fonts, et les tests ont montré des changements spectaculaires:
L'image inférieure contient des polices locales sur notre serveur de test, et vous pouvez voir que le temps de téléchargement a été divisé par deux - de 6 à 3 secondes! Après une analyse plus approfondie, j'ai vu que la productivité augmentait encore plus (3 ⅓ secondes d'économies)!Ce qui n'est pas si évident (mais ce que nous verrons plus tard) - à ce stade, les polices ne sont pas entièrement chargées sur aucune des images - avec le stockage local, cela prend 7,5 secondes et 10,5 secondes lors de l'utilisation de Google Fonts. Cependant, les polices utilisées sont assez similaires aux polices standard, et il n'y a pas de sauts notables dans la mise en page. Cela peut être vu dans le diagramme ci-dessous:
Le diagramme montre que la page avec stockage local (en rouge) est presque complètement chargée en 2,4 secondes, puis est mise à jour plusieurs fois au fur et à mesure du chargement des images, après quoi les polices sont également affichées. Oui, je voudrais que tout soit encore plus fluide, mais il est toujours impossible d'optimiser certains coûts de téléchargement de polices.La raison pour laquelle les améliorations sont vraiment tangibles est due à une chose que je n'ai pas prise en compte au début: le rendu des blocs CSS. Donc, s'il existe un lien vers Google Fonts CSS, le navigateur ne retarde pas seulement l'affichage du texte - il retarde l'affichage de tout le contenu de la page! La police est une amélioration progressive, nous pouvons donc afficher en toute sécurité le reste de la page, et même le texte lui-même (avec les polices standard / de secours), mais pas le navigateur - il voit juste qu'il y a du CSS et essaie de le charger, reportant le téléchargement le reste de la page. Il n'y a pas de chargement asynchrone pour CSS- mais peut-être devrait-il en être ainsi? Néanmoins, nous risquons qu'en cas de problème de connexion à Google Fonts, l'intégralité de votre site soit inaccessible jusqu'à ce que le navigateur cesse de traiter le lien!
Dans le tableau de comparaison ci-dessus, la ligne verte verticale Start Render se produit dès 6 secondes - car elle doit attendre que Google Fonts CSS se charge sur la ligne 12, passant la moitié du temps à se connecter au domaine et l'autre moitié à se charger.Comparez cela avec la version locale:
Ici, nous pouvons commencer le rendu dès que le CSS du site est chargé et traité en 2,5 secondes. En effet, il n'y a pas de retard dans la connexion au domaine Google Fonts.Dans les deux cas, nous voyons que le début du rendu se produit avant le chargement des polices, et grâce à la magie de font-display: swap, le texte est toujours visible. Par conséquent, au moins lors de l'utilisation de font-display: swap, il serait préférable que les polices Google ne soient pas chargées à l'aide du rendu de blocage CSS, mais, par exemple, chargées via JavaScript asynchrone, qui insère les polices CSS dans la page uniquement après comment ils sont téléchargés. Si le processus était implémenté de cette manière, les retards de rendu ne se produiraient pas, cependant, il y a toujours des retards de connexion et une longue attente pour que le texte s'affiche correctement.UPD: J'ai créé un problème sur GitHub Google Fonts avec une suggestion pour ajouter un moyen de télécharger Google Fonts sans bloquer le rendu - votez si vous le souhaitez aussi!Zach Leatherman préconise cette approche pour réduire le nombre de redessins , et montre que cela est également possible avec JavaScript seul, sans avoir besoin d'un fichier CSS. Ensuite, cela montre d'autres avantages de la gestion de vos polices avec JavaScript, par exemple, vous pouvez refuser de télécharger des polices du tout si le site est ouvert à partir d'un réseau lent (à l'aide de l' API d'informations réseau ), ou si l'utilisateur a activé les paramètres Save-Data ou Prefers-Reduced-Motion . . Fonctionnalités intéressantes!Préchargement des polices
Une fois que vous vous serez éloigné des URL hachées de Google, vous pourrez précharger la police pour améliorer encore les performances. Cependant, cette option présente des défauts potentiels, comme Andy Davies l'a expliqué dans l'article Preloading Fonts and the Puzzle of Priorities . Fondamentalement, en préchargeant les polices et en les déplaçant dans l'ordre de priorité, vous réduisez implicitement la priorité des autres téléchargements critiques (par exemple, CSS), et en raison d'une erreur dans Chrome, les polices peuvent même dépasser certaines d'entre elles.De plus, le préchargement lorsque la police ne sera pas utilisée entraînera une charge excessive inutile - par exemple, si la version locale existe et peut être utilisée en priorité, ou si le navigateur ne prend pas en charge ce format de police (bien que tous les navigateurs prenant en charge le préchargement prennent également en charge WOFF2 ) Parallèlement à la recommandation d'utiliser le préchargement, Google vous en avertit clairement , et il est agréable de voir qu'ils y prêtent attention.Lorsque vous utilisez la fonction font-display: swap, le besoin de précharge peut ne pas être aussi fort. Bien que dans ce cas, vous pouvez toujours gagner du temps en téléchargeant le nombre minimum requis de polices et en évitant ainsi FOUT et redessiner. Pour le moment, nous n'utilisons pas le préchargement dans Web Almanac et avant de commencer, nous avons besoin de quelques tests supplémentaires, mais pour l'instant je suis satisfait de ce qui est.Conclusion
Répondre à une question dans le titre de l'article: oui, ça vaut le coup, car le gain de performances est important. Bien sûr, vos résultats peuvent varier, car tout dépend du site particulier, alors testez, testez et testez à nouveau. Mais, je pense, c'est toujours la meilleure option, en termes de performances, pour la plupart des sites.Cependant, Google Fonts n'est pas seulement un référentiel de centaines de polices gratuites - c'est également un mécanisme de livraison intelligent qui utilise bon nombre des dernières techniques d'optimisation pour rendre les polices les plus appropriées avec un effort minimal de la part du propriétaire du site. En passant à l'auto-hébergé, idéalement, vous devez réimplémenter de nombreuses améliorations utiles, telles que l'affichage de la police: échange, suppression des indices de police (au moins pour certains navigateurs), ou sinon, vous ne pouvez que nuire aux performances des plus lourds fichiers de polices.Ce n'est pas une tâche facile (et Google Fonts le fait pour vous, oui). Mais comme l'utilisation du format WOFF2 est désormais la seule option réaliste et que les navigateurs prennent bien en charge la plupart des techniques d'optimisation, tout est devenu beaucoup plus facile qu'auparavant. Néanmoins, cela vaut la peine d'avoir des connaissances sur les polices Web avant de tout configurer (j'espère que ce message a aidé à cela!), Et en même temps, gardez un œil sur les nouveaux changements dans le monde des polices, car il y aura sans aucun doute de nouvelles améliorations.Eh bien, peut-être étions-nous trop soucieux d'optimisation et avec le stockage local, nous pouvons nous permettre d'utiliser la police complète, sans sous-ensemble et avec des indices? Sur le site Web de Google Fonts, vous pouvez télécharger n'importe quelle police et c'est relativement simple, bien qu'il soit étrange que l' archive n'inclue pas les formats WOFF et WOFF2lors de l'utilisation de cette méthode de chargement, qui est complètement incompréhensible pour moi! Cependant, si vous êtes vraiment intéressé à améliorer les performances (et vous devriez être intéressé!), Alors vous devriez essayer de faire la bonne chose. Cet article montre seulement que c'est un peu plus compliqué que de simplement télécharger et placer des polices sur votre site, comme je m'y attendais toujours.Wow, quelque chose de texte s'est avéré plus long que prévu! Mais j'espère que vous étiez aussi intéressé par la compréhension du sujet que vous l'êtes et que vous avez maintenant quelques nouvelles idées pour accélérer le téléchargement des polices sur votre site. Je vous recommande fortement de suivre Jason et Zach sur Twitter pour en savoir plus sur les polices et Andy pour en savoir plus sur la vitesse globale des applications Web.