Optimiser les Google Fonts

À propos de cette optimisation

Lorsque vous utilisez les Google Fonts sur votre site web, voilà ce qui se passe :

1. Il y a une première requête HTTP vers la feuille de style des polices de Google, hébergée sur fonts.googleapis.com. Il y a généralement une requête par fonte choisie.
2. Ensuite, à l'intérieur de cette feuille de style, la fonte elle-même est référencée et doit être téléchargée, à partir de fonts.gstatic.com

L'option Optimiser les Google Fonts fait trois choses pour optimiser ces requêtes :

1. Si la page comporte plusieurs requêtes à Google Fonts, elles seront combinées en une seule. Cela permettra de réduire légèrement le nombre total de requêtes HTTP. 
2. Ajoute le paramètre display=swap à la requête, pour satisfaire à la recommandation de PageSpeed de s'assurer que le texte reste visible pendant le chargement des polices. Cette optimisation sera appliquée même s'il n'y a qu'une seule requête de police sur votre page. 
3. Ajoute l'indication preconnect à la requête pour améliorer le temps de chargement des polices :
<link href="https://fonts.gstatic.com" crossorigin rel="preconnect" />

Attention ! Au final, chaque police que vous utilisez sur votre site doit être téléchargée par le navigateur du visiteur. Plus vous utilisez de polices, plus cela prend du temps. Cette option ne change rien à cela. Elle permet simplement une petite optimisation des demandes. Vous devez tout de même faire attention à ne pas ajouter trop de polices à votre site :)

Requêtes de font non optimisées

Dans la capture d'écran ci-dessous, il y a deux requêtes distinctes pour les polices Google (cliquez pour agrandir l'image).

Requête de font optimisée

Vous pouvez voir ici que les deux requêtes ont été combinées en une seule avec le paramètre ajouté display=swap (cliquez pour agrandir l'image).

L'indicateur de préconnexion est également ajouté : 

Google Font API v2

Google Fonts a récemment mis à jour son API. Il est donc possible que votre site utilise certaines polices avec l'API d'origine et d'autres avec l'API v2. Si tel est le cas, les requêtes seront combinées en requêtes uniques par API. En d'autres termes, une requête groupée pour les polices API v1 et une autre requête groupée pour les polices API v2. La version de l'API est reconnaissable dans l'URL : 

API d'origine :  https://fonts.googleapis.com/css
API v2:  https://fonts.googleapis.com/css2

Si vous utilisez le nouvel attribut  text, ces demandes ne sont pas compatibles avec la combinaison et resteront en tant que demandes individuelles. Par exemple:  https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

Mise à jour depuis les versions précédentes

Si l'option n'était pas activée sur la version précédente, elle ne sera pas activée après la mise à jour. 

Si vous souhaitez l'activer après la mise à jour, veuillez visiter l'onglet Outils et utiliser le bouton prévu à cet effet:

Désactiver cette option

Si vous souhaitez désactiver cette option, vous pouvez le faire avec le plugin d'aide ci-dessous.

📥   Télecharger (.zip):  WP Rocket | Disable Google Font Optimization

Développeurs : vous trouverez le code de ce plugin sur GitHub.

Modifier l'attribut d'affichage des polices Google

Pour modifier la valeur d'échange de l'attribut "display" qui est ajouté à l'URL créée à partir de la fonction "Combiner Google Fonts", utilisez simplement notre plugin WP Rocket Helper ci-dessous en remplaçant le "swap" par l'un des options auto, block, fallback, optionnel . Définir la valeur sur "auto" utilisera le comportement par défaut du navigateur.

📥   Télécharger (.zip) :  WP Rocket | Modifier l'attribut d'affichage des polices Google
Développeurs : Vous pouvez trouver le code pour ce plugin sur GitHub .

Le plugin d'assistance ci-dessus utilise le   rocket_combined_google_fonts_display filtre pour permettre de définir la valeur préférée.

Optimiser Google Fonts ne fonctionne pas

La fonctionnalité Optimiser les polices Google de WP Rocket ne fonctionnera pas dans les cas suivants :

• Lorsque les polices Google sont auto-hébergées, par exemple à l'aide d'un plug-in tel que OMGF | Héberger Google Fonts localement.
• Lorsque des polices Google sont ajoutées en tant qu'élément CSS intégré.