Précharger les polices
đ Disponible Ă partir de WP Rocket 3.6
Cette option se trouve dans l'onglet Préchargement :
Dans cette documentation
Attention ! Lorsque l'option Supprimer les CSS inutilisés est activée, les polices préchargées sont supprimées.
Que fait l'option Précharger les polices ?
L'option Précharger les polices vous permet d'indiquer au navigateur de commencer à télécharger des polices qu'il ne découvrirait autrement que beaucoup plus tard. Cela est généralement dû au fait que la police est référencée dans un fichier CSS.
Précharger les polices améliorera le temps de chargement et la performance perçue.
Quelles polices dois-je précharger ?
Google PageSpeed Insights indiquera toutes les polices qui pourraient bénéficier de cette optimisation dans la rubrique Opportunité, Précharger les demandes clés :
Astuces : Désactivez l'option Optimiser le chargement du CSS, ou simplement contournez le cache et les optimisations de WP Rocket lors de l'exécution d'un test PageSpeed pour découvrir les fichiers candidats au préchargement des polices.
Ne préchargez pas tout !
La prĂ©chargement doit ĂȘtre utilisĂ© avec modĂ©ration pour Ă©viter de crĂ©er un "goulot dâĂ©tranglement". Ne prĂ©chargez que les polices qui, autrement, retarderaient le rendu de la page ou la performance perçue. Si vous prĂ©chargez trop de polices qui ne sont pas nĂ©cessaires immĂ©diatement, vous diminuerez les performances de votre site.
Préchargement en action
Lorsque vous entrez une URL de police pour le préchargement, WP Rocket appliquera la balise de préchargement comme suit, dans le <head> 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 mises en cache et aux pages non mises en cache.
Notez que les polices doivent ĂȘtre hĂ©bergĂ©es sur votre propre domaine, ou sur le domaine CDN que vous avez spĂ©cifiĂ© dans l'onglet CDN, pour que cette option fonctionne. Les polices externes comme les Google Fonts ne peuvent pas ĂȘtre insĂ©rĂ©es ici. Les Google Fonts sont dĂ©jĂ gĂ©rĂ©es par l'option : Optimiser les Google Fonts
Waterfall avant le préchargement de la police
Waterfall avec le préchargement de la police
Avertissement PageSpeed
Avertissements : Lighthouse n'a pas pu vérifier automatiquement la valeur `font-display` pour l'origine
Ceci est gĂ©nĂ©ralement causĂ© par des polices qui ne doivent pas ĂȘtre prĂ©chargĂ©es. Vous pouvez le vĂ©rifier dans Chrome car il affichera un avertissement comme celui-ci dans la console :
