Auto-héberger les Google Fonts

WP Rocket 3.18 introduit la fonctionnalité  Auto-héberger les Google Fonts, qui améliore la vitesse du site web en détectant les Google Fonts, styles et polices dans vos pages, et en les hébergeant localement à partir de votre propre serveur web.

Pour activer cette fonctionnalité, vous pouvez aller dans l'onglet Médias, cliquer sur la case à cocher  Auto-héberger les Google Fonts et enregistrer les modifications, comme ceci :

Cet article présente une vue d'ensemble de la fonctionnalité et de ses avantages, ainsi que d'autres informations utiles.

Aperçu des fonctionnalités

Après avoir activé cette fonctionnalité, WP Rocket détectera les polices Google sur une page, il en téléchargera une copie sur votre serveur, et il modifiera leurs chemins pour les servir depuis votre propre domaine au lieu de les charger depuis le CDN de Google.

Avantages des fonctionnalités

L'hébergement local des polices au lieu d'utiliser les serveurs de Google peut contribuer à accélérer votre site Web, car il réduit la dépendance à l'égard de ce service tiers, évitant ainsi les problèmes potentiels liés aux conditions du réseau.

En outre, en disposant de ce type de contrôle sur les polices de votre site web, vous pouvez éviter les changements de mise en page inattendus.

Enfin, en évitant la connexion et le transfert de données vers les serveurs de Google Fonts, votre site sera plus conforme au GDPR.

Bénéfices pour PageSpeed/Lighthouse

Dans la section PageSpeed, ces mesures et audits verront potentiellement un avantage à utiliser Auto-héberger les Google Fonts :

• Largest Contentful Paint
• Cumulative Layout Shift
• Ensure text remains visible during webfont load

Comment vérifier si Auto-héberger les Google Fonts fonctionne

Lorsque cette fonctionnalité est appliquée, vous verrez un changement dans les chemins d'accès aux polices Google.

Tous les fichiers CSS de Google Fonts, comme celui-ci :

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300&display=swap" rel="stylesheet">

Le fichier sera stocké localement dans le dossier de cache, comme ceci :

<link href="https://your-domain.com/wp-content/cache/fonts/1/google-fonts/css/2/f/b/1/d/3474.css" rel="stylesheet" data-wpr-hosted-gf-parameters="family=Roboto:ital,wght@0,100;0,300&display=swap">

En outre, tout fichier Google Fonts ressemble à ceci :

https://fonts.gstatic.com/s/caudex/v17/hash.woff2

Sera stocké localement comme ceci :

https://your-domain.com/wp-content/cache/fonts/1/google-fonts/fonts/s/caudex/v17/hash.woff2

Balisage compatible

Cette fonction recherche les Google Fonts présentes dans le code HTML de la page, en les comparant aux Google Fonts version 1 et Google Fonts version 2.

WP Rocket ne peut pas optimiser les Google Fonts ajoutées à partir des feuilles de style CSS, ou ajoutées plus tard à la page de manière dynamique.

Effacement automatique des polices hébergées localement

WP Rocket effacera les polices hébergées localement fonts CSS, c'est-à-dire celles situées dans le dossier /wp-content/cache/fonts/1/google-fonts/css/, lorsque :

• Le cache est vidé pour l'ensemble du site.
• Changement de l'option CDN.

Et, WP Rocket effacera les fichiers de police hébergés localement fichiers de police hébergés localement, ce sont ceux situés à /wp-content/cache/fonts/1/google-fonts/fonts/ lorsque :

• Changement de thème.
• Changer de domaine.

Effacement manuel des polices hébergées localement

Si nécessaire, vous pouvez effacer toutes les polices et les polices CSS en cliquant sur le bouton Effacer et précharger le cache dans le menu de la barre d'outils de WP Rocket.

En même temps que l'effacement et le préchargement du cache, WP Rocket effacera tous les fichiers de police.

Auto-héberger les Google Fonts and CSS optimisations

Lorsque l'option Auto-héberger les Google Fonts est activée ou désactivée, les CSS optimisés de ces optimisations seront également purgés pour refléter les changements :

• Le CSS utilisé à partir de l'option Supprimer les ressources CSS inutilisées.
• Le CSS minifié optimisé par l'option Minifier les fichiers CSS.

Comment exclure les polices de l'auto-hébergement Google Fonts

Si vous devez exclure une police de l'hébergement local de Auto-héberger les Google Fonts, vous pouvez ajouter à votre site l'extrait suivant :

add_filter( 'rocket_exclude_locally_host_fonts', function( $exclusions ) {
     $exclusions[] = 'your-target-font' ;
     return $exclusions ;
}) ;

Remplacez votre-fonte-cible par la valeur réelle de votre fichier de police.

Par exemple, compte tenu de ce fichier CSS :

<link href = "https://fonts.googleapis.com</em>/css2?<em style="background-color: initial;">family=Roboto&display=swap" rel="stylesheet" id="testRobo">

Pour l'exclure de la liste des Auto-héberger les Google Fonts, vous pouvez remplacer votre-fonte-cible par l'une des valeurs suivantes :

• family=Roboto, la famille.
• testRobo, un attribut.
• https://fonts.googleapis.com/css2?family=Roboto&display=swap, l'URL.

Vous pouvez également utiliser les caractères génériques (.*) ou .* pour faire correspondre un motif d'exclusion.

Imprimer les polices en tant que CSS interne

Les polices sont imprimées en tant que CSS interne.

Par défaut, WP Rocket stocke la police dans un fichier CSS, mais si nécessaire, il est possible de l'imprimer en tant que CSS interne, par en ajoutant le snippet suivant à votre site :

add_filter( 'rocket_host_fonts_locally_inline_css', function( $flag ){
	return true ;
} ) ;

Si vous avez besoin d'aide supplémentaire, vous pouvez contacter le support de WP Rocket.