Le mode d'affichage CSS de votre police web à un impact direct sur le temps de chargement de votre site et donc, sur votre référencement SEO. Mais alors comment choisir et mettre en place la meilleure pratique, recommandée par Google, pour optimiser le temps de chargement de votre page ?
Comment gérer cette erreur Google Core Vitals (SEO) ?
Vous avez déjà fait un audit Google Core Vitals avec l'outil Google Lighthouse et avait eu cette erreur ?
"Ensure text remains visible during webfont load"
Traduit, cela signifie que Google vous recommande d'utiliser une fonction CSS particulière au texte affiché sur votre site. Pourquoi ? Afin que le contenu texte de votre site reste visible par l'utilisateur pendant le chargement des polices sur votre page web. Certes quelques mili-secondes, mais Google et vos utilisateurs, sont exigeants.
Pour corriger cette erreur, il y a une optimisation très simple. Il faut ajouter une fonction CSS à votre police web. La fonction est :
- font-display: SWAP;
Quelles sont les différentes fonctions des polices web ?
Ils existent par défaut plusieurs styles de font-display lorsqu'il s'agit de police d'affichage sur un site internet :
- font-display: auto;
- font-display: block;
- font-display: swap;
- font-display: fallback;
- font-display: optional;
Pour en savoir plus sur le rôle de chacune, cliquez-ici. Le site Mozilla dev les expliquent très bien.
Le meilleur (CSS) font-display pour optimiser le chargement de son site
Google est formel, son affichage préféré est l'affichage SWAP. Il permet de mettre une police "par défaut" pour assurer la lecture du contenu de votre site et de faire passer le chargement du style CSS de votre police (exemple : comfortaa) dans un second temps.
Exemple sur le micro-temps de chargement de la police sur notre site 👇
Cette fonction CSS est simple à mettre en place et elle va améliorer la performance des pages de votre site web.
Comment changer la fonction de la police sur Webflow ?
Les polices natives de Webflow et les polices téléchargées depuis la section Google Fonts dans l'interface Webflow ne vous permettent pas d'ajouter le mode SWAP. Il existe en revanche une technique rapide pour y avoir accès :
Webflow vous permet d'ajuster la fonctionnalité CSS font-display sur les polices importées depuis la section "custom fonts".
- Télécharger une police
- Importer la police dans "custom fonts"
- Choisir Font Display : Swap
- Cliquez sur Upload Font Files
⚠️ Si vous aviez déjà une police qui affectait vos éléments, pensez à bien "reset" ses attributs CSS pour ré-affecter votre "nouvelle" police.
Voilà, vous savez maintenant comment améliorer la vitesse de chargement de vos pages, grâce à un attribut CSS administrable rapidement.
{{custom-blog-cta}}
