Chargement asynchrone de Typekit ::est-ce que ça vaut le coup, ou mieux vaut ne pas l'utiliser du tout ?

Question

J'essaie de réduire le temps de chargement des pages.

J'ai suivi le troisième exemple décrit ici pour charger de manière asynchrone le javascript TypeKit.

Pour que cela fonctionne, vous devez ajouter un .wf-loading #some-element {visibility: hidden;} à chaque élément qui utilise la police, et après 1) son chargement ou 2) après un temps défini (1 seconde), la police devient visible.

Le fait est que le CSS avec lequel je travaille a la police assignée à environ 200 éléments, donc 200 éléments de .wf-loading{ } (note:Je n'ai pas écrit ce CSS).

Je pense que cela ralentirait le temps de chargement plus que simplement le laisser se charger régulièrement, le DOM traversant autant de choses.Si tel est le cas, je supprimerai complètement Typekit et utiliserai une police standard.

Existe-t-il des outils que je peux utiliser pour exécuter des tests de performances sur ce genre de choses ?Ou est-ce que quelqu'un a testé ces choses ?

Answer 1

Vous ne modifiez pas réellement plus d’un seul élément DOM (le root ) avec cette approche.Cela signifie que nos navigateurs modernes s'appuieront sur leur super moteurs CSS rapides, de sorte que le nombre d’éléments impliqués n’aura aucun effet notable sur le chargement de la page.

En ce qui concerne le chargement et le scintillement des pages, la latence du réseau est généralement bien pire que la manipulation du DOM.Il y aura toujours un scintillement lors du tout premier chargement de page (non amorcée) pendant que le navigateur attend le téléchargement de la police.Assurez-vous simplement que votre police est mise en cache pour être réutilisée et essayez de garder sa taille de fichier aussi petite que possible.

J'ai emprunté cette voie il y a quelques années avec Cufon.En fin de compte, j'ai choisi le chemin le plus simple avec des performances acceptables et je me suis arrêté là.Il est facile de se laisser entraîner par l'optimisation du chargement des pages, mais il existe probablement des domaines d'amélioration plus prometteurs : fonctionnalités, bugs, refactoring, etc.

Answer 2

Le problème est, comme ils le mentionnent dans le Blog, les rares occasions (mais cela arrive certainement - certainement plus d'une fois pour moi) où le CDN Typekit échoue complètement et les utilisateurs ne voient qu'une page blanche.C’est à ce moment-là que vous souhaiterez utiliser le chargement asynchrone.