Solution rapide avec Thunder
If PageSpeed Insights shows font warnings, the fastest route is to install Thunder, test the same product and collection URLs, and watch whether LCP, FCP, and text rendering improve. Thunder is built from speed research across 20,000+ optimized Shopify stores and handles the common resource-loading work that most merchants should not be editing by hand.
Pour une image plus large des performances, associez-le au guide complet d'optimisation de la vitesse Shopify, le Guide de révision de la vitesse de l'application Guide d'optimisation des polices Shopify, et le Répartition des fonctionnalités de Thunder. Les polices ne sont qu’une partie des Core Web Vitals, mais elles peuvent discrètement freiner le nettoyage des magasins.
Pourquoi le chargement des polices nuit aux éléments essentiels du Web Shopify
Fonts affect speed because text cannot be painted cleanly until the browser knows which typeface, file, and fallback behavior to use. If your theme requests multiple font families from an external domain, the browser has to open connections, download a stylesheet, discover the actual font files, and then fetch each WOFF2 file. On mobile, that chain can compete directly with the hero image that determines La plus grande peinture de contenu.
Le modèle Shopify commun est lourd : une police de titre en régulier et en gras, une police de corps en régulier, moyen, semi-gras et gras, ainsi qu'une police d'icônes laissée par un constructeur de pages ou une application d'avis. Cela peut créer six à dix demandes de polices avant que l'acheteur n'ait lu le titre d'un produit. Le magasin peut paraître soigné après le chargement de tout, mais la première impression est retardée.
Les échanges de polices peuvent également provoquer des mouvements de mise en page. Si la police de secours est beaucoup plus large ou plus haute que la police de marque finale, les titres des produits, les lignes de prix, les boutons et les étiquettes de navigation peuvent changer. C'est pourquoi le travail des polices appartient à côté Correctifs CLS, pas seulement des correctifs LCP.
Manuel étape par étape : réduisez la charge des polices en toute sécurité
1. Inventoriez chaque demande de police
Ouvrez Chrome DevTools, chargez votre page d'accueil et une page produit, puis filtrez le panneau Réseau par "police". Notez chaque famille, poids, source et taille. Répétez l’opération sur la limitation mobile. Vous recherchez des doublons, des poids inutilisés, des polices d’application et d’anciennes polices d’icônes.
2. Conservez uniquement les pondérations utilisées par votre thème
De nombreux magasins chargent des variantes 300, 400, 500, 600, 700 et italique lorsque la conception n'utilise que 400 et 700. Recherchez le CSS de votre thème poids de la police avant de supprimer quoi que ce soit. Si aucun élément visible n'utilise 500 ou 600, supprimez ces fichiers.
3. Auto-héberger les polices importantes comme WOFF2
Shopify can serve assets from its CDN, which is usually faster than pulling CSS from a third-party font host on every page. Upload the exact WOFF2 files you need to theme assets, then define them in CSS:
@font-face {
font-family: 'Brand Sans';
src: url('{{ "brand-sans-regular.woff2" | asset_url }}') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Brand Sans';
src: url('{{ "brand-sans-bold.woff2" | asset_url }}') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
Dans un article Astro, nous pouvons afficher Liquid directement, mais dans un thème Shopify, cela appartient à votre feuille de style ou à un petit extrait de police chargé depuis thème.liquide.
4. Préchargez une police critique, pas le système de typographie complet
Preloading is useful when the first visible text needs a specific file. It is harmful when you preload every font weight because those downloads can steal bandwidth from your LCP image. Start with one font:
<link
rel="preload"
href="{{ 'brand-sans-regular.woff2' | asset_url }}"
as="font"
type="font/woff2"
crossorigin
>5. Faites correspondre les polices de secours pour réduire le décalage de mise en page
Utilisez une pile de secours avec des proportions similaires. Si la police de votre marque est une police sans empattement propre, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif se comporte généralement bien. Si la police de votre titre est condensée ou à contraste élevé, testez avant et après avec les bandes de films WebPageTest ou le panneau Performances.
Correction manuelle vs Thunder Fix
| Tâche | Correction manuelle | Correction du tonnerre |
|---|---|---|
| Rechercher les goulots d'étranglement des polices | Utilisez DevTools, PageSpeed et répétez les tests de page. | Utilisez le test de vitesse et l'analyse automatisée de la vitrine comme point de départ. |
| Améliorer l'ordre de chargement | Modifier thème.liquide, préchargez soigneusement et testez à nouveau LCP. | Améliore automatiquement la priorité des ressources courantes bloquant le rendu. |
| Évitez les typographies cassées | Comparez manuellement les modèles et le comportement de secours. | Applique les changements de performances sans nécessiter une refonte de la typographie. |
| Maintenir dans le temps | Répétez après les mises à jour du thème et les modifications de l'application. | Continue de fonctionner à mesure que les ressources de la vitrine changent. |
Ce qu'il ne faut pas casser lors de la réduction de la charge de police
Do not remove fonts used in the cart drawer, navigation, product badges, localization selector, or size guide without checking those states. Do not preload fonts that appear only below the fold. Do not stack multiple font optimization apps on top of a theme-level rewrite. And do not judge success from a single Lighthouse run; use before-and-after medians and real Shopify Web Performance Dashboard trends.
Si votre boutique dispose également de scripts lourds, corrigez les polices à côté Optimisation JavaScript de Shopify et nettoyage CSS et JavaScript inutilisé. Une configuration de police propre est utile, mais des scripts tiers lents peuvent toujours retarder le fil de discussion principal et donner l'impression que la page est bloquée.
FAQ
Comment réduire la charge des polices sur Shopify ?
Utilisez une ou deux familles de polices, conservez uniquement les poids que vous utilisez, servez les fichiers WOFF2, préchargez la police principale au-dessus de la ligne de flottaison, ajoutez l'affichage des polices : échangez, supprimez les polices d'applications ou d'icônes inutilisées et sous-définissez les polices personnalisées selon les caractères dont votre boutique a réellement besoin.
Le changement de police nuira-t-il au design de ma marque Shopify ?
C'est possible si vous supprimez la mauvaise famille ou le mauvais poids. L'approche sûre consiste à conserver la police principale de la marque pour les titres ou les clés de l'interface utilisateur, à déplacer le corps du texte vers une pile système rapide si cela est acceptable et à tester l'en-tête, la page produit, le panier et les flux adjacents à la caisse avant de publier.
Dois-je précharger chaque police Shopify ?
Non. Préchargez uniquement le fichier de police nécessaire pour le texte au-dessus de la ligne de flottaison, généralement la police normale du corps ou l'épaisseur du titre principal. Le préchargement de chaque poids entre en concurrence avec l'image du héros et peut aggraver le LCP.
Qu'est-ce que l'échange d'affichage de polices sur Shopify ?
font-display : swap indique au navigateur d'afficher le texte de secours immédiatement pendant le téléchargement de la police personnalisée. Cela évite le texte invisible et améliore généralement la vitesse perçue, bien que les visiteurs puissent voir un bref échange de polices.
Les polices Google ralentissent-elles Shopify ?
Ils le peuvent. Google Fonts ajoute des demandes externes de fichiers CSS et de polices. L'auto-hébergement uniquement des fichiers WOFF2 exacts dont vous avez besoin réduit souvent la surcharge de connexion et vous offre un meilleur contrôle du préchargement.
Thunder peut-il réduire automatiquement la charge des polices Shopify ?
Thunder Page Speed Optimizer améliore la priorité de chargement des polices, diffère les ressources non critiques et permet le rendu du contenu au-dessus de la ligne de flottaison plus tôt sans nécessiter de modifications du code du thème.
Réduisez la charge des polices Shopify sans devinettes
Commencez par un test de vitesse Shopify gratuit, puis installez Thunder pour automatiser les correctifs de chargement des ressources qui permettent aux polices, aux images, aux scripts et aux Core Web Vitals de mieux se comporter ensemble.