Optimiser les polices web avec Claude Code
Guide pratique pour optimiser les polices web avec Claude Code: preload, font-display, subset, CLS/LCP et vérification.
Une police lente devient un problème de rendu
Une police web donne une identité visuelle, mais elle peut aussi ralentir le premier affichage. Si elle arrive trop tard, le texte peut rester invisible, un titre peut changer de largeur, un bouton d’achat peut bouger et le LCP peut se dégrader. LCP signifie Largest Contentful Paint, c’est-à-dire le moment où le plus grand élément visible du premier écran est rendu. CLS signifie Cumulative Layout Shift, donc les déplacements inattendus de mise en page.
Le risque augmente avec les langues qui ont beaucoup de glyphes, comme le japonais, le chinois ou le coréen. Un fichier de police peut alors devenir plus lourd que tout le CSS critique. Claude Code peut aider, mais seulement si la demande est précise. “Optimise les polices” est trop vague. Il faut préciser quelles polices sont critiques, lesquelles peuvent rester en police système, quand utiliser preload, comment éviter CLS et quelles mesures prouvent le résultat.
Cet article prend un site Astro comme exemple. Il couvre la stratégie de chargement, preload, preconnect, font-display, les polices variables, le subsetting, self-host contre fournisseur tiers, les risques CLS/LCP, les vérifications de type Lighthouse et WebPageTest, et des prompts Claude Code utilisables. Pour les faits navigateur, reportez-vous à MDN surfont-display etrel="preload". Pour la vision performance, web.dev propose lesbonnes pratiques de fontes, l’articleOptimize web fonts et lesWeb Vitals.
Choisir la stratégie avant de modifier
La première décision n’est pas technique, elle est éditoriale et produit. Quel texte doit être visible immédiatement ? Quelle police sert vraiment la marque ? Le corps d’article peut-il utiliser une police système ? Les réponses évitent d’ajouter des hints partout.
| Cas d’usage | Stratégie | Pourquoi | Erreur fréquente |
|---|---|---|---|
| Blog multilingue | Corps en police système, titres avec police web subset | Le texte reste lisible si la police arrive tard | Appliquer la police décorative au corps |
| Tableau de bord SaaS | Variable font latine self-host | Plusieurs graisses dans un fichier | Garder italique, axes ou langues inutiles |
| Landing page | Preload uniquement du WOFF2 du titre LCP | Le message clé apparaît tôt | Précharger toutes les graisses |
| Icon font historique | Remplacer par SVG ou bibliothèque d’icônes | Retire une requête de police | Oublier le CSS en pseudo-éléments |
Pour un blog, la solution la plus solide est souvent sobre: rendre le corps immédiatement lisible et réserver la police de marque aux titres. Pour une application SaaS, une variable font comme Inter peut être efficace, car l’interface utilise souvent plusieurs graisses. Pour une page de vente, la police du titre et l’image hero se partagent le budget LCP. Lisez aussi l’article surl’optimisation d’images avec Claude Code et le guide plus large surla performance avec Claude Code.
Implémenter preload et preconnect dans Astro
preload est un signal fort. Utilisez-le pour un ou deux fichiers WOFF2 réellement présents dans le premier viewport. Ne préchargez pas toutes les graisses, toutes les variantes de langue ni les polices utilisées seulement après le scroll. Si vous servez les fichiers depuis votre domaine, preconnect est généralement inutile. Avec Google Fonts ou un autre fournisseur, preconnect peut aider pour l’origine CSS et l’origine des fichiers de police.
---
// src/layouts/BaseLayout.astro
const criticalFonts = [
{ href: "/fonts/inter-var-latin.woff2", type: "font/woff2" },
{ href: "/fonts/noto-sans-jp-latin-kana.woff2", type: "font/woff2" },
];
const usesGoogleFonts = false;
---
<html lang="fr">
<head>
{criticalFonts.map((font) => (
<link rel="preload" href={font.href} as="font" type={font.type} crossorigin />
))}
{usesGoogleFonts && <link rel="preconnect" href="https://fonts.googleapis.com" />}
{usesGoogleFonts && <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />}
<link rel="stylesheet" href="/styles/fonts.css" />
</head>
<body>
<slot />
</body>
</html>
Vérifiez ensuite le HTML généré. Le href doit correspondre au src de @font-face. La balise doit contenir as="font", type="font/woff2" et crossorigin. La police préchargée doit être utilisée rapidement. Un avertissement “preloaded but not used” indique que le preload doit probablement être retiré.
Utiliser font-display sans provoquer de CLS
font-display: swap affiche d’abord une police de secours, puis remplace par la police web quand elle arrive. Cela évite le texte invisible, mais peut provoquer un déplacement si les métriques diffèrent. optional peut convenir au texte non critique sur réseau lent, car le navigateur peut garder la police de secours.
/* public/styles/fonts.css */
@font-face {
font-family: "InterVariable";
src: url("/fonts/inter-var-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "NotoSansJPSubset";
src: url("/fonts/noto-sans-jp-latin-kana.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+3000-30FF, U+FF00-FFEF;
}
@font-face {
font-family: "InterFallback";
src: local("Arial");
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
:root {
--font-ui: "InterVariable", "InterFallback", system-ui, sans-serif;
--font-ja: "NotoSansJPSubset", "Hiragino Sans", "Yu Gothic", sans-serif;
}
body {
font-family: var(--font-ui);
}
article {
font-family: var(--font-ja);
}
Le descripteurunicode-range indique à quel ensemble de caractères une face s’applique. Il ne compresse pas le fichier. Pour réduire les octets, vous devez produire un WOFF2 plus petit.
Réduire les octets avec variable fonts et subsets
Une variable font peut remplacer plusieurs fichiers statiques lorsque vous utilisez plusieurs graisses. Elle n’est pas toujours plus légère. Si elle contient de nombreux axes, de l’italique et de grands jeux de caractères, elle peut rester lourde. Demandez à Claude Code de lister les graisses réellement utilisées avant de migrer.
Le subsetting consiste à créer un fichier de police avec seulement les caractères nécessaires. C’est très utile pour navigation, titres hero et CTA fixes. C’est plus risqué pour le corps d’article, car un nouveau texte peut introduire des caractères absents du subset.
# Create a WOFF2 subset with Latin, punctuation, kana, and full-width forms.
python -m pip install "fonttools[woff]"
mkdir -p public/fonts
pyftsubset ./vendor-fonts/NotoSansJP-Regular.ttf \
--output-file=./public/fonts/noto-sans-jp-latin-kana.woff2 \
--flavor=woff2 \
--layout-features='*' \
--unicodes="U+0000-00FF,U+3000-30FF,U+FF00-FFEF"
Cette commande ne couvre pas la majorité des kanji. Elle convient à un titre, un menu ou un libellé fixe, pas à un article japonais complet. Pour le corps, extrayez les caractères des fichiers MDX et utilisez --text-file, ou créez un subset séparé. Vérifiez aussi la licence avant self-host, modification ou redistribution.
Self-host ou fournisseur tiers
Self-host donne le contrôle sur les URL, les en-têtes de cache, le preload et le subsetting. Vous prenez aussi la responsabilité de la licence, des mises à jour et des scripts. Un fournisseur tiers est rapide à installer, mais ajoute des connexions externes et souvent une requête CSS avant le fichier de police.
| Critère | Self-host | Tiers |
|---|---|---|
| Connexion | Même origine | DNS, TLS, CSS externe, origine font |
| Cache | Contrôle complet | Dépend du fournisseur |
| Preload | Fichier exact | URL parfois décidée par CSS |
| Subsetting | Libre | Dépend du service |
| Exploitation | Plus de responsabilité | Plus simple, plus dépendant |
Pour une page sensible au revenu, self-host les polices critiques du premier écran et retardez les polices décoratives. En prototype, une police tierce est acceptable si vous chargez uniquement les graisses utilisées, ajoutez display=swap et supprimez toute double inclusion après migration.
Vérifier avec Lighthouse et une cascade type WebPageTest
Après l’implémentation, contrôlez l’ordre réseau. Lighthouse donne un signal sur LCP, CLS et les audits de polices. Ensuite, regardez la cascade comme dans WebPageTest: HTML, CSS, police critique, image hero, JavaScript. La police critique doit démarrer tôt sans bloquer le CSS ni retarder l’élément LCP.
URL="https://example.com/"
npx --yes lighthouse "$URL" \
--only-categories=performance \
--chrome-flags="--headless" \
--output=json \
--output-path=./lighthouse-fonts.json
node -e "const r=require('./lighthouse-fonts.json'); for (const id of ['largest-contentful-paint','cumulative-layout-shift','font-display']) console.log(id, r.audits[id]?.displayValue ?? r.audits[id]?.score ?? 'n/a')"
Cherchez ces signaux: un ou deux WOFF2 critiques seulement; aucun preload inutilisé; cache actif en visite répétée; titre et CTA stables pendant le swap; pas de CSS Google Fonts restant après self-host; pas de téléchargement double du même fichier.
Les pièges sont concrets. Une graisse bold est préchargée alors que le premier écran n’utilise que regular. Le subset oublie des chiffres pleine largeur ou de la ponctuation. font-display: swap est ajouté sans ajuster la police de secours. Une icon font continue à être chargée après migration SVG.
Prompts Claude Code sûrs
Séparez audit, implémentation et vérification. Commencez en lecture seule.
Audit web font loading in this Astro site. Do not edit files yet.
Find:
- @font-face, Google Fonts, Fontsource, and CSS import locations
- Font files used above the fold
- preload and preconnect hints that are missing or unnecessary
- CLS or LCP risks caused by font swapping
- Candidates for self-hosting, variable fonts, and subsetting
Return:
- A prioritized table of changes
- Files that should be edited and files that must not be touched
- Verification commands and residual risks
Puis limitez l’implémentation.
Implement web font optimization only in these files:
- src/layouts/BaseLayout.astro
- public/styles/fonts.css
- generated files under public/fonts/
Acceptance criteria:
- Preload only WOFF2 files used in the first viewport
- Do not add preconnect when fonts are self-hosted
- Every @font-face has a deliberate font-display value
- Fallback metrics are adjusted to reduce CLS
- Existing routes, article slugs, hero images, and unrelated content are untouched
Verification:
- npm run build
- node scripts/check-code-fences.mjs
- Lighthouse check for LCP, CLS, and font-display
- Report what could not be verified
Résultat pratique et CTA
Dans le flux de Masa, une consigne précise a mieux fonctionné qu’une demande générale. “Précharge seulement la police du titre LCP, garde le corps lisible en police système et signale les risques CLS” a produit des diffs plus petits. Sur une page japonaise, un subset latin et kana a stabilisé le premier écran, mais la couverture complète du corps a nécessité une extraction de caractères. La meilleure vérification a été une cascade mobile lente plus une observation manuelle du titre et du CTA.
Pour une équipe, ajoutez ces règles à CLAUDE.md. Commencez par lafiche gratuite pour les commandes sûres, utilisez lestemplates produits pour des prompts réutilisables, et regardez laformation Claude Code si vous voulez traiter Core Web Vitals, qualité éditoriale et CTA de monétisation ensemble.
Auto-contrôle avant publication: cet article inclut plus de trois cas d’usage, des exemples Astro/CSS/bash copiables, des liens officiels MDN et web.dev, des liens internes, des échecs concrets, un CTA naturel et une note de vérification réelle.
PDF gratuit: cheatsheet Claude Code
Saisissez votre email et téléchargez une page avec commandes, habitudes de review et workflow sûr.
Nous protégeons vos données et n'envoyons pas de spam.
À propos de l'auteur
Masa
Ingénieur spécialisé dans les workflows pratiques avec Claude Code.
Articles liés
Permission receipt Claude Code : portée, preuves et rollback
Modèle de permission receipt pour Claude Code : actions autorisées, limites d'approbation, commandes de preuve, rollback et CTAs revenus.
Agent Harness securise pour Claude Code et Codex : permissions, verification et rollback
Construisez un Agent Harness pratique pour Claude Code et Codex avec politiques, plan, verification et recuperation.
Sous-agents Claude Code : guide pratique pour déléguer sans perdre le contrôle
Guide pratique des sous-agents Claude Code pour répartir articles et code : règles, prompts, pièges et checklist.