Héberger soi-même les polices Google pour de meilleurs Core Web Vitals

Héberger soi-même les polices Google pour de meilleurs Core Web Vitals

Alors que les propriétaires de sites web et les développeurs s'efforcent d'optimiser leurs pages pour une meilleure user experience et un meilleur classement dans les moteurs de recherche, les Core Web Vitals sont devenus un ensemble de métriques crucial. Les polices Google, bien qu'offrant une gamme variée d'options typographiques, peuvent parfois avoir un impact négatif sur les Core Web Vitals. Dans cet article, nous explorerons pourquoi l'hébergement autonome des polices Google peut être bénéfique pour les performances de votre site web, en particulier par rapport aux Core Web Vitals. Nous fournirons également des exemples et des meilleures pratiques pour démontrer comment l'hébergement autonome des polices peut conduire à des améliorations significatives.

Comprendre les Core Web Vitals

Les Core Web Vitals sont un ensemble de trois métriques de performance qui mesurent différents aspects de la vitesse de chargement des pages web, de l'interactivité et de la stabilité visuelle :

1. Largest Contentful Paint (LCP) : Le LCP mesure le temps nécessaire pour que le plus grand élément d'une page web (généralement une image ou un bloc de texte) devienne visible dans le viewport. Un LCP idéal devrait se produire dans les 2,5 premières secondes pour assurer un affichage rapide du contenu.

2. First Input Delay (FID) : Le FID évalue le délai entre la première interaction d'un utilisateur avec une page (par exemple, cliquer sur un bouton) et la réponse du navigateur à cette interaction. Un bon FID devrait être inférieur à 100 ms pour une user experience fluide.

3. Cumulative Layout Shift (CLS) : Le CLS mesure la quantité de décalage de mise en page inattendu qui se produit pendant le chargement de la page. Une valeur CLS faible (inférieure à 0,1) indique une expérience visuelle stable, car les utilisateurs n'aiment pas que le contenu se déplace de manière inattendue pendant qu'ils essaient de lire ou d'interagir avec la page.

Impact des polices Google sur les Core Web Vitals

Les polices Google, souvent incluses dans les pages web pour améliorer la typographie et le design, peuvent avoir un impact significatif sur les Core Web Vitals, principalement sur le Largest Contentful Paint (LCP) et le Cumulative Layout Shift (CLS) :

Pour la plupart des gens à qui je parle, c'est une nouvelle information. Le CDN de Google est censé être le meilleur au monde. Alors pourquoi les polices Google sont-elles mauvaises pour le pagespeed ?

1. La feuille de style n'est jamais dans le cache du navigateur pour les nouveaux visiteurs. Le premier problème avec les polices Google est qu'elles dépendent d'une feuille de style externe hébergée par fonts.google.com ou fonts.googleapis.com. Cette feuille de style ne peut pas être réutilisée par différents domaines (comme beaucoup de gens semblent le penser). Cela signifie que la feuille de style bloquant le rendu n'est jamais servie à partir du cache ultra-rapide du navigateur pour les nouveaux visiteurs et ralentira toujours un peu la partie rendu de la page. 

2. Cela nécessite 2 connexions à 2 nouveaux serveurs. Le deuxième problème est que pour télécharger le fichier CSS et les fichiers de police, nous devons nous connecter à 2 serveurs différents. Chaque connexion initiale à un nouveau serveur entraîne une surcharge importante et prend un peu plus de temps. Du temps que nous aurions pu économiser en servant les fichiers à partir de notre connexion déjà ouverte à notre serveur. Pour éviter cela, Google conseille de se pré-connecter à leurs domaines. Cela atténuera un peu le problème, mais c'est encore loin d'être parfait
   

3. Vous avez un contrôle limité sur l'attribut font-display. Bien que Google fonts vous permette de définir l'attribut font-display, vous ne pouvez le définir que globalement. Cela signifie que tous les fichiers woff2 auront le même réglage de font-display 
   

4. L'emplacement final du fichier woff2 est inconnu. Cela signifie que nous ne pouvons pas précharger nos polices les plus importantes. Cela signifie que nos fichiers de police sont mis en file d'attente pour le téléchargement relativement tard et que nous aurons probablement un décalage de mise en page visible causé par le flash of unstyled text (FOUT)

5. Vous n'avez aucun contrôle sur les fichiers de police. 

Avantages de l'hébergement autonome des polices Google

L'hébergement autonome des polices Google implique de servir les fichiers de police à partir de vos propres serveurs au lieu de dépendre des serveurs externes de Google. Cette approche peut apporter plusieurs avantages, en particulier par rapport aux Core Web Vitals :

1. Vitesse de livraison des polices améliorée : L'hébergement autonome des polices réduit la dépendance aux serveurs externes, ce qui conduit à une livraison plus rapide des polices et, par conséquent, à un rendu plus rapide du contenu textuel. Cette amélioration peut avoir un impact positif sur le LCP, garantissant que le plus grand élément de texte devienne visible plus rapidement.

2. Réduction des Layout Shifts : En hébergeant vous-même les polices Google, vous pouvez contrôler la façon dont la police est chargée et affichée, minimisant ainsi les risques de layout shifts causés par un rendu de police retardé. Cela aide à améliorer la stabilité visuelle globale de votre page web et affecte positivement le CLS.

Meilleures pratiques pour l'hébergement autonome des polices Google

Pour optimiser vos polices Google auto-hébergées pour de meilleures performances Core Web Vitals, envisagez de mettre en œuvre les meilleures pratiques suivantes :

1. Utiliser le format WOFF2 : Utilisez uniquement le format de fichier WOFF2, car il offre une meilleure compression et des temps de chargement plus rapides, contribuant à améliorer les valeurs LCP et CLS.

2. Sous-ensemble de polices : Pour réduire davantage la taille des fichiers de police, envisagez d'utiliser le sous-ensemble de polices, qui consiste à n'inclure que les caractères nécessaires au contenu de votre page web. Cela peut conduire à un chargement de police plus rapide et à de meilleurs Core Web Vitals.

3. Attribut Font-Display stratégique : Configurez l'attribut font-display de manière stratégique pour contrôler le rendu du texte pendant le chargement de la police. La valeur "swap", par exemple, accélérera le First Contentful Paint en garantissant que les polices de secours sont affichées jusqu'à ce que la police web soit entièrement chargée. La valeur "optional" empêchera les layout shifts en n'échangeant jamais le fichier de police. Un mélange stratégique de ces deux optimisera souvent à la fois le Cumulative Layout Shift et le First Contentful Paint.

4. Précharger les polices : Assurez-vous que les polices sont disponibles le plus tôt possible en préchargeant les polices les plus importantes avec le mécanisme link preload
   
   

   <link rel="preload" as="font" href="fonts.woff2" crossorigin>

Comment héberger soi-même une police Google (de la bonne manière)

Le téléchargement et l'hébergement autonome d'une police Google sont un processus simple. Gardez à l'esprit que vous devez toujours vérifier la licence et les droits d'utilisation de la police avant de la télécharger et de l'utiliser sur votre site web ou vos projets. De nombreuses polices Google sont disponibles sous des licences open source, mais certaines peuvent avoir des restrictions pour une utilisation commerciale.

Voici un exemple de la façon de télécharger et d'héberger soi-même une police Google :

1. Allez sur le site web de Google Fonts à https://fonts.google.com/.

2. Sélectionnez la police que vous souhaitez utiliser et choisissez les tailles de police que vous souhaitez inclure. 

3. Sur la page de la police, dans la barre supérieure, cliquez sur le bouton 'selected families'. Vous y trouverez le lien vers la feuille de style hébergée par Google. 
   
   

   

4. Copiez l'URL de cette feuille de style et ouvrez-la dans votre navigateur. Vous verrez maintenant toutes les déclarations font-face disponibles pour la police. 
   
   

   

5. Vous remarquerez peut-être qu'il y a plus d'un fichier woff2 même si nous n'avons utilisé qu'un seul fichier de police. C'est parce qu'il y a un fichier de police différent pour différentes plages unicode. Pour savoir quelles polices nous devrions télécharger, vous devez temporairement ajouter la feuille de style hébergée par Google à votre site web. Utilisez le raccourci Ctrl-Shift-I pour ouvrir vos chrome devtools. Naviguez vers l'onglet network et cliquez sur Font. Actualisez maintenant la page (Ctrl-r) pour voir quelle police est déclenchée pour le téléchargement.
   
   

6. Faites correspondre ce nom de fichier de police au fichier woff2 correspondant dans la StyleSheet. Parfait ! Maintenant vous savez quel fichier de police est utilisé pour votre site web !
   

7. L'étape suivante consiste à copier l'utilisation complète de la police et à l'ouvrir dans votre navigateur. Cela déclenchera un téléchargement pour ce fichier de police. Copiez ce fichier sur votre site web.
   

8. Copiez le CSS pour la webfont utilisée à l'étape 7 et collez-le dans votre feuille de style. N'oubliez pas de changer l'URL du CDN de Google vers votre propre serveur (par exemple '/fonts/roboto400.woff2')

9. Préchargez la police (si c'est une police visuellement importante)

Vous avez maintenant téléchargé et auto-hébergé avec succès la police Google de votre choix. N'oubliez pas de respecter les conditions de licence de la police et d'attribuer la police comme requis par la licence si nécessaire.

Un exemple concret