Name: Tremplin Numérique
Price range: $$$

L'optimisation de sites Web est d'une importance cruciale pour un bon classement dans Google et les autres moteurs de recherche, et lorsque vous êtes en concurrence avec le reste du monde, chaque milliseconde compte. Le report du chargement des polices de votre site peut vous donner un léger coup de pouce.

Les polices Web bloquent le rendu

Si une ressource bloque le rendu, elle doit être chargée avant que votre site n'atteigne sa première peinture satisfaisante. Les ressources bloquant le rendu doivent être réduites au minimum absolu pour tout site optimisé.

L'inconvénient ici est évident: si un client doit charger des ressources supplémentaires avant le chargement de votre site, il devra établir une connexion extra-sécurisée et une négociation TCP avant même de commencer à télécharger la ressource de blocage de rendu, ce qui peut ajouter des centaines de millisecondes à temps de chargement sur mobile. Si vous chargez de grandes ressources de blocage, vous mettez également vos temps de chargement à la merci de l'autre hôte.

La solution est de changer la façon dont les polices sont gérées. Par défaut, les polices ne sont pas facultatives et tout le texte est bloqué jusqu'à ce qu'il puisse être rendu avec la police correcte. Mais tous les utilisateurs ont des polices par défaut installées comme Arial et Times New Roman, il est donc possible d'afficher ces polices en premier, puis de les remplacer par la police Web une fois qu'elle est chargée.

Vous pouvez spécifier ce comportement dans votre @font-face en utilisant la directive font-display paramètre:

@font-face {
  font-display: swap;
}

Si vous utilisez Google Fonts, cependant, le font-face La directive sera définie dans le fichier CSS qu'ils vous donnent pour ajouter la police. Vous ne pouvez donc pas le modifier directement, mais heureusement, Google a récemment ajouté la prise en charge de font-display: swap dans l'API. Il doit être défini par défaut si vous ajoutez une nouvelle police, mais si vous avez ajouté la police il y a quelque temps, vous pouvez la mettre à jour en ajoutant le &display=swap Paramètre URL à la fin:

https://fonts.googleapis.com/css?family=Lobster&display=swap

C’est tout ce que vous devez faire. Une fois la police définie sur swap, il arrêtera le blocage du rendu. Vous pouvez remarquer que votre site se charge dans la police par défaut avant de clignoter rapidement vers la police mise à jour; pour minimiser ce problème, recherchez une police par défaut qui correspond le mieux à votre police Web principale. La plupart des utilisateurs de bureau ne le remarqueront probablement pas à côté du reste de la page, bien que si l'utilisateur utilise une connexion mobile lente, il se peut qu'il remarque la police apparaître une seconde plus tard.

Si vous n'essayez pas d'extraire toutes les millisecondes de performances, vous pouvez utiliser une option différente: font-display: fallback L'option rendra le bloc pendant un court laps de temps (pas plus de 100 ms dans la plupart des navigateurs), puis reviendra à l'échange chaque fois que la police décide de se charger. Cela élimine le problème de clignotement pour la plupart des utilisateurs de bureau avec de bonnes connexions, mais ajoute un pire cas ~ 100 ms (en fonction du navigateur) si la police ne se charge pas à temps.

Preconnect fonts.gstatic.com

Cette astuce n'affecte pas l'aspect bloquant le rendu des polices Web, mais elle accélère les polices Google en particulier.

Lorsqu'un client doit extraire une ressource d'une autre origine, il doit effectuer une négociation TCP et (si le site a été créé à un moment donné au cours de cette décennie) établir une connexion HTTPS sécurisée. Cela prend du temps, donc effectuer des allers-retours inutiles ralentira les téléchargements.

C'est exactement ce que font les polices Google. Tout d'abord, la feuille de style CSS de fonts.googleapis.com est chargé avec toutes les informations sur les polices. le src Le paramètre de la police est ensuite lu et le client se connecte à fonts.gstatic.com pour télécharger la police. Le problème ici est que le fichier de police que nous voulons est placé derrière la feuille de style CSS sur une autre origine.

Pour résoudre ce problème, vous pouvez vous reconnecterfonts.gstatic.com. La pré-connexion est spéciale link option qui indique au navigateur d'aller de l'avant et d'effectuer la prise de contact HTTPS avant de lui donner un lien à ouvrir. Cela réduit considérablement la latence d'effectuer deux allers-retours comme celui-ci.

Vous pouvez vous connecter avec les éléments suivants link étiquette:

le crossorigin indique au navigateur d'effectuer une négociation HTTPS, plutôt qu'une simple recherche DNS (le comportement par défaut).

Si vous servez des polices vous-même, vous devez vous assurer que votre Cache-Control les en-têtes sont définis correctement afin que vos polices soient chargées à partir du cache lorsqu'un utilisateur visite à nouveau. Vous pouvez également envisager d'utiliser un CDN si vous souhaitez héberger des polices vous-même, car cela réduira la latence des demandes d'objets statiques.