Le texte du titre principal disparaissait pendant un peu moins d’une demi-seconde avant de réapparaître, sur presque tous les chargements de la page d’accueil d’un cabinet d’architecture. Ce comportement, connu sous le nom de Flash of Invisible Text, se produit lorsque le navigateur choisit de masquer le texte plutôt que de l’afficher avec une police de secours, en attendant que la police déclarée en CSS finisse de se charger.
Le thème du site déclarait sa police variable via une règle @font-face classique, placée dans un fichier CSS chargé de façon tout à fait standard dans le <head> du document. Le problème ne venait pas d’un chargement anormalement lent de ce fichier, mais de l’ordre dans lequel le navigateur découvre les ressources dont il a besoin.
Comprendre pourquoi la police arrive en retard
Un navigateur télécharge le HTML, puis découvre progressivement les ressources qu’il référence : feuilles de style, scripts, images. Une police déclarée dans une feuille CSS n’est demandée qu’une fois cette feuille elle-même téléchargée et interprétée, et seulement si une règle du document utilise effectivement cette police sur un élément visible. Ce mécanisme, appelé découverte tardive, ajoute un aller-retour réseau complet avant même que le téléchargement de la police ne commence : d’abord le CSS, puis, seulement après son analyse, la police elle-même.
Le constat mesuré dans les outils de développement
L’onglet réseau des outils de développement du navigateur a permis de visualiser la chronologie exacte : le fichier CSS terminait son téléchargement à 210 millisecondes, l’analyse de ses règles commençait aussitôt, et la police n’était demandée qu’à 240 millisecondes, pour se terminer à 690 millisecondes. Pendant tout cet intervalle, le texte du titre restait invisible, le navigateur appliquant par défaut un délai de blocage avant de basculer sur une police de secours.
Le correctif : un en-tête de préchargement explicite
La balise <link rel="preload">, ajoutée directement dans le <head> avant la feuille de style concernée, indique au navigateur qu’il doit commencer à télécharger la police sans attendre la découverte via le CSS :
<link
rel="preload"
href="/wp-content/themes/wpm-cabinet/fonts/titre-variable.woff2"
as="font"
type="font/woff2"
crossorigin
>Sur WordPress, cet ajout a été effectué via le hook wp_head, avec une priorité suffisamment haute pour apparaître tôt dans le document :
add_action( 'wp_head', function () {
$url = get_theme_file_uri( 'fonts/titre-variable.woff2' );
printf(
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>',
esc_url( $url )
);
}, 1 );L’attribut crossorigin est nécessaire même pour un fichier servi depuis le même domaine : les polices sont soumises à une politique de partage de ressources spécifique, et son absence provoquerait un second téléchargement silencieux, le navigateur ignorant le fichier préchargé sans cet attribut.
Ce que le préchargement a changé concrètement
- Le téléchargement de la police démarre désormais en parallèle du fichier CSS, dès l’analyse du
<head>, sans attendre la fin de son téléchargement. - Le délai avant affichage du texte est tombé de 480 à moins de 40 millisecondes, un intervalle qui ne provoque plus de bascule visible vers une police de secours.
- Aucune modification du fichier CSS d’origine n’a été nécessaire : la règle
@font-facereste identique, seul l’ordre de découverte a changé.
Une précaution à ne pas oublier
Précharger une police qui n’est finalement pas utilisée sur la page — par exemple une variante grasse déclarée mais jamais appliquée dans le CSS visible — gaspille de la bande passante sans bénéfice. Le préchargement doit donc être limité à la police effectivement affichée au premier rendu, le titre principal dans ce cas, et non à l’ensemble des variantes disponibles dans la famille de police.
Précharger une ressource ne l’accélère pas : cela avance simplement le moment où le navigateur commence à la demander, ce qui suffit souvent à masquer entièrement l’attente.
En résumé
Le texte invisible pendant près d’une demi-seconde ne venait ni d’un fichier trop lourd ni d’un serveur lent, mais d’un ordre de découverte défavorable : la police n’était demandée qu’après lecture complète du CSS qui la déclarait. Un simple en-tête de préchargement, ajouté avant la feuille de style, a suffi à faire disparaître le problème sans toucher au reste de l’intégration.
