Précharger les polices

🚀 Disponible à partir de WP Rocket 3.6

Cette option se trouve dans l'onglet PrĂ©chargement :

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

Avec le préchargement, vous verrez la police demandée plus tÎt dans la cascade et cela devrait améliorer le temps de chargement et le FCP (First Content Paintful).

Waterfall avant le prĂ©chargement de la police

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

Waterfall avec le prĂ©chargement de la police

Les polices sont dĂ©sormais appelĂ©es en tĂȘte de liste, ce qui amĂ©liore les performances.

Cela a-t-il rĂ©pondu Ă  votre question ? Merci pour votre retour :) Une erreur est survenue lors de l’envoi de votre retour. Veuillez rĂ©essayer plus tard.