Précharger les polices

e préchargement des polices permet de répondre à la recommandation PageSpeed de précharger les demandes clés. Cette fonction se trouve dans l'onglet Préchargement :

Comment utiliser le préchargement des polices

Le préchargement des polices vous permet d'indiquer au navigateur de commencer à télécharger des polices qu'il ne découvrirait autrement que bien plus tard. Cela est généralement dû au fait que la police est référencée dans un fichier CSS.

Le préchargement des polices améliorera le temps de chargement et les performances.

Quelles polices dois-je précharger ?

Google PageSpeed Insights signalera toutes les polices qui pourraient bénéficier de cette optimisation sous l'intitulé Opportunité Preload Key Requests:

Astuces : Contourner le cache et les optimisations de WP Rocket lors de l'exécution d'un test PageSpeed pour découvrir les candidats au préchargement des polices.

Faites un clic droit sur la police recommandée dans PageSpeed et copiez l'URL.
Collez l'URL dans le champ "Polices à précharger".
La police doit être hébergée sur votre propre domaine ou sur le domaine de votre CDN. Vous ne pouvez pas saisir ici des polices hébergées en externe, comme Google Fonts, car elles sont optimisées automatiquement : Optimiser les Google Fonts
L'URL de la police doit correspondre exactement à ce que PageSpeed fournit.

Ne préchargez pas tout !

Le préchargement doit être utilisé avec parcimonie pour éviter de créer un goulot d'étranglement. Ne préchargez que les polices qui, sinon, retarderaient le rendu de la page ou les performances perçues. Si vous préchargez trop de polices qui ne sont pas nécessaires immédiatement, vous diminuerez les performances de votre site.

Ne préchargez pas plusieurs formats pour la même police. Ajouter les formats .woff2, .woff, .ttf, .eot, .svg pour la même police obligera le navigateur à précharger plusieurs fichiers de police alors qu'il n'en a besoin que d'un seul (le .woff2 dans la plupart des cas).

Utilisation de préchargement des police avec Supprimer les ressources CSS inutilisées

Quand l'option Supprimer les ressources CSS inutilisées est activée, les polices préchargées seront désactivées.

En revanche, toutes les polices trouvées dans le CSS utilisé résultant seront préchargées et insérées dans la page avant le bloc CSS. Cela ne s'applique qu'aux polices du CSS utilisé, et non à celles de la case Précharger les polices.

En théorie, vous n'avez pas besoin de précharger manuellement les polices lorsque vous utilisez Supprimer les ressources CSS inutilisées.

En outre, vous pouvez empêcher certaines polices d'être préchargées lors de l'utilisation de Supprimer les ressources CSS inutilisées, ou désactiver le préchargement des polices (lié à Supprimer les ressources CSS inutilisées) comme indiqué ici.

Le préchargement en action

Lorsque vous saisissez une URL de police pour le préchargement, WP Rocket applique la balise de préchargement juste après la balise de clôture </title> ; de votre site :

<link rel="preload" as="font" href="https://example.com/wp-content/themes/paperback/inc/fontawesome/fonts/fontawesome-webfont.woff2" crossorigin><br>

Cette optimisation sera appliquée à la fois aux pages en cache et aux pages non mises en cache.

Avec le préchargement, vous verrez que la police est demandée plus tôt dans le waterfall et cela devrait améliorer le temps de chargement et le premier temps de peinture.

Waterfall avant le préchargement des polices

Notez que les polices sont demandées à peu près à mi-chemin, car le navigateur les découvre naturellement..

Waterfall avec préchargement des polices

Les polices sont maintenant demandées en haut, ce qui améliore les performances.

Avertissement de PageSpeed

Avertissements : Lighthouse n'a pas été en mesure de vérifier automatiquement le `font-display` value for the origin

Cela est généralement dû au préchargement de polices qui ne devraient pas être préchargées. Vous pouvez le vérifier dans Chrome car il affichera un avertissement comme celui-ci dans la console: