Précharger les polices

Dans WP Rocket 3.19, la fonctionnalité Précharger les polices a été remaniée pour détecter et précharger automatiquement les polices utilisées dans les textes au-dessus de la ligne de flottaison d'une page.

Pour utiliser le Préchargement des polices sur votre site, veuillez l'activer dans l'onglet Médias, dans la section Polices, comme ceci :

Attention ! Le processus d'optimisation des polices est automatique mais pas immédiat, il est asynchrone.

Pour que l'ensemble du processus soit aussi automatique et rapide que possible, utilisez également l'option Supprimer les ressources CSS inutilisées.

Dans cet article, vous trouverez plus de détails sur la façon dont WP Rocket implémente le préchargement des polices.

Aperçu de la fonctionnalité

Une fois activée, la fonctionnalité Précharger les polices détecte et précharge les polices utilisées dans les textes au-dessus de la ligne de flottaison.

Cela signifie qu'il n'est pas nécessaire de spécifier manuellement les fichiers de polices.

De plus, les polices traitées par cette optimisation seront connues sous le nom de polices critiques, et elles font partie des Éléments prioritaires de WP Rocket.

Polices différentes pour mobile et PC

WP Rocket traite séparément les versions mobile et PC d'une page pour optimiser au mieux les polices. Ce processus repose sur l'option Cache mobile, qui est chargée de créer un ensemble spécifique de fichiers en cache pour mobile.

Approche asynchrone

Bien que Précharger les polices soit une fonctionnalité automatique, elle ne s'applique pas instantanément. Il s'agit d'une des optimisations asynchrones de WP Rocket, et elle suit ces étapes :

Un script est injecté dans la page à optimiser.
Lors de l'exécution du script au moment d'une visite, il détecte les polices critiques et les renvoie à WP Rocket.
WP Rocket ajoute les balises preload pour les fichiers de police lors de la prochaine génération du cache de la page.

Bénéfices de la fonctionnalité

L'objectif du Préchargement des polices est d'améliorer les performances de la page, en permettant un rendu fluide des composants textuels.

Cela est rendu possible grâce aux balises preload, utilisées par le navigateur pour prioriser le chargement des polices.

Cette fonctionnalité permet aussi d'éviter l'effet Flash of Unstyled Text (FOUT).

Avantages pour PageSpeed / Lighthouse

Les indicateurs et audits suivants devraient être améliorés :

Comment vérifier que le préchargement des polices fonctionne

La fonctionnalité Précharger les polices peut être vérifiée dans le code source des pages.

Présence du script de la fonctionnalité

Dans un premier temps, un script nommé wpr-beacon.min.js sera ajouté à la page.

Dans le code source de la page, il apparaîtra sous la forme :

<script data-name="wpr-wpr-beacon" src='https://votresite.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script>

Balise de la police préchargée

Chaque police est préchargée individuellement avec une balise link comme ceci :

<link rel="preload" data-rocket-preload as="font" href="chemin/vers/police.woff2" crossorigin>

L'attribut data-rocket-preload indique que WP Rocket est à l'origine de l'optimisation.

L'attribut crossorigin est ajouté uniquement si la police est hébergée en externe.

Purge automatique des polices critiques

Les scénarios suivants déclenchent la purge automatique des polices critiques :

Changement des permaliens : toutes les polices seront purgées.
Changement de thème : toutes les polices seront purgées.
Mise à jour d’un article : seules les polices spécifiques à l’article seront supprimées. Celles des contenus associés ne seront pas affectées.

Purge manuelle des polices critiques

Si vous apportez manuellement des modifications au CSS ou aux polices, vous devez purger manuellement les polices critiques via le menu WP Rocket.

Pour vider les polices de tout le site, dans le menu du haut, cliquez sur le bouton Vider les éléments prioritaires.

Et pour vider les polices d'une URL spécifique, visitez l’URL en étant connecté, puis cliquez sur le bouton Vider les éléments prioritaires pour cet URL.

Remarque : Ces actions videront les polices critiques et tous les autres Éléments prioritaires.

Préchargement des polices et suppression du CSS inutilisé

Lorsque Précharger les polices est activé, Supprimer les ressources CSS inutilisées ne préchargera pas toutes les polices utilisées. Cela s’explique par le fait que Précharger les polices agit uniquement sur les polices critiques cibles, ce qui est plus optimal.

Exclure des polices du préchargement

Utilisez le plugin d'aide suivant si vous souhaitez exclure certaines polices de cette optimisation :

📥 Télécharger (.zip): WP Rocket | Exclude Fonts from Preload Fonts
Développeur•euses : vous trouverez le code de ce plugin sur GitHub.

Attention ! Une modification manuelle du code est nécessaire avant l'utilisation !

Après avoir téléchargé le fichier zip du plugin, décompressez-le et ouvrez le fichier PHP dans un éditeur de texte.
Recherchez les polices que vous souhaitez exclure.

Remplacez la ligne 27 par le nom du fichier de police que vous souhaitez exclure, et supprimez les caractères // pour la décommenter :
```
//$exclusions[] = 'OpenSans.woff2'; 	
```
Si vous devez exclure d'autres éléments, vous pouvez continuer à ajouter autant de lignes que nécessaire.

En outre, vous pouvez exclure et inclure des extensions de polices en suivant les instructions des lignes 42 à 52.
Après avoir effectué vos modifications, sauvegardez le fichier PHP et ré-zippez le plugin.
Dans votre site WordPress, allez dans Extensions > Ajouter > Téléverser une extension et téléversez le fichier zip.
Activez-la et effacez les éléments prioritaires.

Dépannage et conflits connus

Veuillez consulter l’article sur les Éléments prioritaires pour plus d'informations sur le dépannage et les conflits connus.

Notes techniques

Cette fonctionnalité prend en charge uniquement les extensions woff2, woff et ttf.
Elle fonctionne pour les polices appliquées à des éléments textuels visibles.
WP Rocket ne précharge pas les polices non utilisées au-dessus de la ligne de flottaison ou dans des éléments cachés.
Les polices système ne sont pas optimisées car elles sont déjà présentes sur les navigateurs des visiteurs.
Les données sont stockées dans la table wp_wpr_preload_fonts.
Voir plus de détails techniques ici.

Avant WP Rocket 3.19

Dans les versions de WP Rocket antérieures à 3.19, la fonctionnalité Précharger les polices se trouve dans l’onglet Préchargement, et les polices doivent être ajoutées manuellement.

Dans ce cas, vous devez ajouter uniquement les polices listées dans l’audit Préchargement des requêtes clés de PageSpeed, lorsque vous contournez les optimisations de WP Rocket. Sinon, un trop grand nombre de polices préchargées pourrait causer un ralentissement et générer ces avertissements :

Warning: Lighthouse was unable to automatically check the 'font-display' value for the origin

The resource yourfont.woff was preloaded using a link preload but not used within a few seconds from the window’s load event.

Cependant, si vous utilisez Supprimer les ressources CSS inutilisées, les polices seront préchargées automatiquement, et la zone de texte Précharger les polices ne s’appliquera pas. Cette méthode est recommandée uniquement pour les versions antérieures à 3.19.

Pour toute autre question ou problème, veuillez contacter l'équipe de support de WP Rocket.