Comment réduire la charge des polices sur Shopify sans casser la conception de la marque

Solution rapide avec Thunder

Si PageSpeed Insights affiche des avertissements de police, la voie la plus rapide consiste à installer Thunder, testez les mêmes URL de produits et de collections, et observez si LCP, FCP, et le rendu du texte s'améliorent. Thunder est construit à partir de recherches sur la vitesse à travers 20,000+ optimisés Shopify boutiques et gère le travail courant de chargement des ressources que la plupart des marchands ne devraient pas modifier manuellement.

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

Les polices affectent la vitesse car le texte ne peut pas être affiché proprement tant que le navigateur ne sait pas quelle police de caractères, quel fichier et quel comportement de repli utiliser. Si votre thème demande plusieurs familles de polices à partir d'un domaine externe, le navigateur doit ouvrir des connexions, télécharger une feuille de style, découvrir les fichiers de police réels, puis récupérer chaque fichier WOFF2. Sur mobile, cette chaîne peut entrer en concurrence directe avec l'image principale qui détermine 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 font-weight 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 peut servir des actifs depuis son CDN, ce qui est généralement plus rapide que de récupérer du CSS d'un hébergeur de polices tiers sur chaque page. Téléchargez les fichiers WOFF2 exacts dont vous avez besoin dans les actifs du thème, puis définissez-les en 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 theme.liquid.

4. Préchargez une police critique, pas le système de typographie complet

Le préchargement est utile lorsque le premier texte visible nécessite un fichier spécifique. Il est nuisible de précharger chaque graisse de police, car ces téléchargements peuvent voler de la bande passante à votre image LCP. Commencez avec une seule police :

<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

Ce qu'il ne faut pas casser lors de la réduction de la charge de police

Ne supprimez pas les polices utilisées dans le tiroir du panier, la navigation, les badges de produits, le sélecteur de localisation ou le guide des tailles sans vérifier ces états. Ne préchargez pas les polices qui n'apparaissent qu'en dessous de la ligne de flottaison. N'empilez pas plusieurs applications d'optimisation de polices sur une réécriture au niveau du thème. Et ne jugez pas le succès à partir d'une seule exécution de Lighthouse ; utilisez les médianes avant et après et les tendances réelles du tableau de bord des performances web de Shopify.

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