Menu et LCP : comment la navigation bloque votre plus grand élément de contenu

Chargement des polices de menu : prévenir les décalages de mise en page et le texte invisible

Stratégies font-display pour les menus de navigation—équilibrer la cohérence de marque avec LCP et CLS.

Vous avez passé des heures à choisir la typographie parfaite pour votre boutique. Les étiquettes du menu utilisent une sans-serif personnalisée qui correspond exactement à votre marque. Mais chaque fois que vous testez votre boutique sur mobile, vous voyez un flash de texte invisible où le menu devrait être, suivi d’un décalage de mise en page quand la police se charge enfin. Votre score CLS est 0,18, ce que Google marque comme « à améliorer », et vous suspectez que la police du menu en est la cause.

Le problème n’est pas la police elle-même. C’est la façon dont le navigateur gère le chargement de la police. Par défaut, la plupart des navigateurs masquent le texte jusqu’à ce que les polices personnalisées aient fini de télécharger, ce qui peut prendre 300 à 800 millisecondes sur une connexion mobile lente. La zone du menu reste vide, la page semble cassée, et quand la police apparaît enfin, elle décale tout ce qui est en dessous. Cela affecte à la fois LCP (car le contenu important est retardé) et CLS (car la mise en page bouge).

Cet article explique les cinq stratégies font-display, celle qui fonctionne mieux pour les menus de navigation, et comment implémenter un chargement de polices qui ne casse ni votre marque ni vos Web Vitals.

Lecture rapide

Les navigateurs masquent le texte lors du téléchargement de la police par défaut, causant un Flash of Invisible Text (FOIT).
font-display contrôle si le texte s'affiche immédiatement ou attend la police personnalisée.
font-display: swap est le meilleur choix pour le texte du menu—affiche la police de secours immédiatement, échange quand prêt.
Les polices système (déjà installées sur l'appareil) ont zéro coût de chargement et éliminent complètement FOIT/FOUT.
Le préchargement de polices peut réduire le délai mais n'élimine pas le risque de décalage de mise en page.

Les deux problèmes du chargement de polices : FOIT et FOUT

Quand un navigateur rencontre une police web personnalisée, il doit décider quoi faire avec le texte qui utilise cette police pendant que le fichier de police se télécharge. Il y a deux comportements possibles, chacun avec ses compromis.

Flash of Invisible Text (FOIT)

Le navigateur masque le texte jusqu’à ce que la police se charge. L’espace texte est réservé, mais rien n’apparaît. Si la police prend 500 millisecondes à télécharger, l’utilisateur regarde un espace blanc pendant une demi-seconde. C’est le comportement par défaut dans la plupart des navigateurs.

FOIT est mauvais pour LCP parce que le contenu texte important n’est pas visible jusqu’à ce que la police se charge. C’est aussi mauvais pour l’utilisabilité—les utilisateurs ne peuvent pas lire le menu, ce qui peut leur faire penser que la page est cassée.

Flash of Unstyled Text (FOUT)

Le navigateur affiche le texte immédiatement en utilisant une police de secours (généralement une police système comme Arial ou Helvetica), puis échange vers la police personnalisée une fois qu’elle se charge. Le texte est lisible tout de suite, mais l’échange peut causer un décalage de mise en page si la police de secours et la police personnalisée ont des dimensions différentes.

FOUT est meilleur pour LCP (le texte apparaît immédiatement) mais peut affecter CLS s’il n’est pas géré correctement. La clé est d’adapter les dimensions de la police de secours à la police personnalisée aussi précisément que possible.

Les cinq stratégies font-display

La propriété CSS font-display contrôle comment les navigateurs gèrent la période de chargement de la police. Il y a cinq valeurs possibles, chacune avec un comportement de minutage et de secours différent.

Valeur	Comportement	Optimal pour
`auto`	Le navigateur décide (généralement FOIT pendant 3 secondes, puis FOUT)	Non recommandé—imprévisible
`block`	FOIT jusqu’à 3 secondes, puis échange	Texte décoratif où la police de marque est critique
`swap`	FOUT immédiatement—affiche police de secours, échange quand prêt	Texte du corps, menus de navigation
`fallback`	FOIT pendant 100ms, puis FOUT pendant 3s, puis reste sur la police de secours	Titres où la police importe mais la vitesse aussi
`optional`	FOIT pendant 100ms, puis utilise police de secours si elle n’est pas prête, jamais d’échange	Texte critique pour la performance

Pour les menus de navigation, font-display: swap est presque toujours le bon choix. Cela rend le menu lisible immédiatement (bon pour LCP et l’utilisabilité) et échange vers la police de marque dès qu’elle se charge (bon pour la cohérence de marque). Le risque est un décalage de mise en page, que nous allons aborder dans un moment.

Comment utiliser font-display dans votre feuille de styles

Si votre police est définie dans votre CSS en utilisant @font-face, ajoutez la propriété font-display :

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brandfont.woff2') format('woff2');
  font-display: swap;
}

.menu-link {
  font-family: 'BrandFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

La pile font-family est importante. Listez votre police personnalisée en premier, puis les polices système comme secours. Cela garantit que le texte du menu apparaît instantanément dans une police système, puis échange vers votre police personnalisée quand elle se charge.

Si votre police est chargée depuis Google Fonts, ajoutez le paramètre display=swap à l’URL :

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

Google Fonts injectera automatiquement font-display: swap dans le CSS généré.

Prévenir le décalage de mise en page avec l’adaptation de la police de secours

Le problème avec font-display: swap est que si la police de secours et la police personnalisée ont des tailles ou des espacements différents, le texte va se reformater lors de l’échange, causant un décalage de mise en page. C’est particulièrement visible dans les menus de navigation, où même un petit décalage peut déplacer tout le contenu de la page.

La solution est d’ajuster la police de secours pour qu’elle corresponde aux dimensions de la police personnalisée en utilisant les propriétés size-adjust, ascent-override et descent-override. Ce sont des fonctionnalités CSS relativement nouvelles (supportées dans tous les navigateurs modernes depuis 2024) qui vous permettent d’affiner une police de secours pour qu’elle corresponde à une police personnalisée.

Voici un exemple :

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brandfont.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'BrandFont Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 95%;
  descent-override: 25%;
}

.menu-link {
  font-family: 'BrandFont', 'BrandFont Fallback', Arial, sans-serif;
}

La propriété size-adjust met à l’échelle la police de secours pour que sa hauteur x corresponde à la police personnalisée. Les propriétés ascent-override et descent-override ajustent l’espacement vertical.

Trouver les bonnes valeurs demande de tester. Des outils comme Fallback Font Generator de Simon Hearne automatisent ce processus. Vous entrez votre police personnalisée, et l’outil calcule les valeurs de redéfinition optimales pour les polices système courantes.

L’adaptation des polices de secours de cette façon réduit CLS du remplacement de police à presque zéro. Le texte échange toujours de la police de secours à la police personnalisée, mais la mise en page ne se décale pas parce que les dimensions sont identiques.

Polices système : l’alternative à coût zéro

La police la plus rapide est pas de police du tout—ou plutôt, une police système déjà installée sur l’appareil de l’utilisateur. Les polices système ont zéro coût de téléchargement, zéro coût d’analyse, et zéro risque de décalage de mise en page.

Voici une pile de polices système modernes qui a belle apparence sur toutes les plateformes :

.menu-link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
}

Cela vous donne :

San Francisco sur macOS et iOS
Segoe UI sur Windows
Roboto sur Android
Valeurs par défaut appropriées à la plateforme sur Linux

Les polices système ne sont pas aussi distinctives que les typographies personnalisées, mais elles sont épurées, lisibles et optimisées pour leurs plateformes. De nombreux sites à fort trafic (GitHub, Medium, WordPress.com) utilisent les polices système pour des raisons de performance.

Si vos directives de marque exigent une police personnalisée, envisagez d’utiliser les polices système pour le menu de navigation et de réserver la police personnalisée pour les titres, le texte héroïque ou le corps du texte où elle a plus d’impact visuel. Le menu est une interface fonctionnelle. Il n’a pas besoin de porter la marque aussi fortement qu’un titre.

Précharger les polices pour réduire la durée du FOUT

Même avec font-display: swap, il y a un délai entre l’apparition de la police de secours et l’échange vers la police personnalisée. Sur une connexion lente, cela peut être 500 millisecondes ou plus. Le préchargement du fichier de police dit au navigateur de le récupérer avec une priorité élevée au début du chargement de la page, ce qui réduit le délai d’échange.

<link rel="preload" href="/fonts/brandfont.woff2" as="font" type="font/woff2" crossorigin>

L’attribut crossorigin est requis même si la police est hébergée sur votre propre domaine, car les polices sont récupérées en mode CORS.

Le préchargement n’élimine pas FOUT, mais réduit sa durée. Si votre police de menu est petite (moins de 50KB) et critique pour la marque, le préchargement peut améliorer la performance perçue.

Attention : Le préchargement entre en concurrence avec d’autres ressources critiques comme le CSS et le JavaScript. Préchargez uniquement les polices utilisées au-dessus de la ligne de flottaison et vraiment essentielles. Le préchargement de trop nombreuses ressources peut ralentir le rendu initial.

Polices d’icônes vs SVG intégré

De nombreux menus de navigation utilisent des polices d’icônes (Font Awesome, Remix Icon, Material Icons) pour les flèches, les icônes de recherche et les icônes de hamburger. Les polices d’icônes sont juste des polices, donc elles ont les mêmes caractéristiques de chargement que les polices de texte : FOIT par défaut, risque de décalage de mise en page, et coût de téléchargement (souvent 50-150KB pour une police d’icônes complète).

SVG intégré est un meilleur choix pour les icônes de menu. Un SVG intégré fait partie du HTML, donc il apparaît immédiatement sans demande réseau et sans délai de chargement de police. Il se met aussi à l’échelle parfaitement et supporte le style CSS.

Voici un exemple :

<button class="menu-toggle" aria-label="Open menu">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <line x1="3" y1="12" x2="21" y2="12"></line>
    <line x1="3" y1="6" x2="21" y2="6"></line>
    <line x1="3" y1="18" x2="21" y2="18"></line>
  </svg>
</button>

Cette icône hamburger fait 200 octets. Une police d’icônes complète avec 2000 icônes que vous n’utiliserez jamais fait 150KB. SVG intégré élimine aussi le problème FOIT—l’icône apparaît instantanément parce qu’elle fait partie du HTML.

Les applications de menu modernes comme Navi+ utilisent SVG intégré pour toutes les icônes, ce qui est l’une des raisons pour lesquelles elles évitent les problèmes de décalage de mise en page qui affligent les menus basés sur des polices d’icônes.

Chargement de polices spécifique à Shopify

Les thèmes Shopify chargent généralement les polices de l’une de ces trois façons : depuis Google Fonts, depuis le CDN de Shopify (via le sélecteur de polices des paramètres du thème), ou depuis des fichiers de polices personnalisées dans le dossier assets du thème.

Google Fonts

Si votre thème utilise Google Fonts, assurez-vous que le paramètre display=swap est dans l’URL. Vérifiez theme.liquid pour une ligne comme celle-ci :

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600">

Changez-la en :

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">

Polices CDN Shopify

Si votre thème utilise le sélecteur de police intégré de Shopify (Paramètres > Typographie), Shopify sert les polices depuis son CDN et inclut automatiquement font-display: swap depuis 2023. Vous n’avez rien à faire.

Fichiers de polices personnalisées

Si vous avez téléchargé des fichiers de polices personnalisées dans le dossier assets de votre thème, ajoutez font-display: swap à la déclaration @font-face dans votre CSS.

Mesurer l’impact du chargement de polices

Utilisez Chrome DevTools pour voir comment les polices affectent votre LCP et CLS.

Vérifier FOIT

Ouvrez DevTools, allez dans l’onglet Réseau, filtrez par « Police », et rechargez la page. Regardez la zone du menu. Si le texte du menu est invisible pendant une période notable avant d’apparaître, vous avez FOIT. Ajoutez font-display: swap pour corriger.

Vérifier le décalage de mise en page

Ouvrez DevTools, allez dans l’onglet Performance, cliquez sur Enregistrer, rechargez la page, et arrêtez l’enregistrement. Regardez la section Expérience pour les barres rouges « Layout Shift ». Cliquez sur une pour voir quels éléments ont décalé. Si le texte du menu est listé, l’échange de police a causé un décalage de mise en page. Utilisez l’adaptation de police de secours pour corriger.

Mesurer CLS

Exécutez un test Lighthouse (dans DevTools ou PageSpeed Insights). Regardez le score CLS et le diagnostic « Éviter les grands décalages de mise en page ». Si les polices sont listées comme cause, vous avez besoin d’une meilleure adaptation de police de secours ou devriez envisager de passer à des polices système.

Gain rapideSi votre menu utilise une police personnalisée et vous voyez des problèmes CLS, essayez de passer à une pile de polices système comme test. Exécutez Lighthouse à nouveau. Si CLS baisse considérablement, la police personnalisée était le problème. Vous pouvez ensuite décider si la valeur de marque de la police personnalisée vaut le coût de performance, ou implémenter l'adaptation de police de secours pour obtenir les deux.

Un menu de navigation bien optimisé gère les polices de l’une de ces deux façons.

Option 1 : Polices système. Pas de polices personnalisées, zéro coût de téléchargement, zéro FOIT, zéro décalage de mise en page. Le menu apparaît instantanément avec du texte d’apparence native.

.menu-link {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

Option 2 : Police personnalisée avec swap et adaptation de police de secours. Le texte du menu apparaît immédiatement dans une police système, puis échange vers la police personnalisée sans décalage de mise en page.

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brandfont.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'BrandFont Fallback';
  src: local('Arial');
  size-adjust: 107%;
}

.menu-link {
  font-family: 'BrandFont', 'BrandFont Fallback', Arial, sans-serif;
}

Les deux approches résultent en un menu qui est lisible en moins d’une seconde de chargement de la page, ce que LCP mesure. La première approche est plus simple et plus rapide. La deuxième approche préserve la cohérence de marque avec un coût de performance minimal.

Pour les icônes, utilisez SVG intégré au lieu de polices d’icônes. Les icônes apparaissent instantanément, se mettent à l’échelle parfaitement, et coûtent quelques centaines d’octets au lieu de 150KB.

La plupart des boutiques qui passent du chargement de polices par défaut (FOIT, pas d’adaptation de police de secours) à l’un de ces modèles voient CLS baisser de 0,05 à 0,15 points et LCP s’améliorer de 200 à 400 millisecondes sur mobile. Le menu semble identique pour l’utilisateur, mais le navigateur le rend plus rapidement et plus régulièrement.

Cet article fait partie du guide plus large sur Menu et LCP : comment la navigation bloque votre plus grand élément de contenu.