Optimisation des polices Shopify : Correction des polices bloquant le rendu en 5 étapes

La solution la plus rapide pour les polices bloquant le rendu

Avant de plonger dans l'optimisation manuelle des polices, il existe un chemin plus simple. Thunder Page Speed Optimizer gère automatiquement l'optimisation du chargement des polices — aucune modification du code de thème n'est requise :

• Diffère les téléchargements de polices non critiques afin qu'ils ne bloquent pas le rendu
• Applique la valeur optimale affichage des polices Comportement pour une visibilité immédiate du texte
• Gère la priorité de chargement des polices avec toutes les autres ressources
• Fonctionne avec n'importe quel thème Shopify — Dawn, Debut, personnalisé ou sur mesure

Les commerçants constatent généralement une amélioration de la vitesse de plus de 27 points qui inclut l'optimisation des polices dans le cadre du package. Les forfaits commencent à 19,99 $/mois avec un essai gratuit. Testez gratuitement la vitesse de votre boutique pour voir comment les polices affectent actuellement vos scores.

Pourquoi les polices Web bloquent le rendu sur Shopify

Lorsque votre boutique Shopify charge une police Web, le navigateur suit un processus spécifique qui crée un goulot d'étranglement de rendu :

1. Le navigateur analyse le HTML et rencontre un CSS Règle @font-face
2. Le navigateur découvre qu'il a besoin d'un fichier de police qui n'est pas mis en cache localement
3. Le navigateur lance un téléchargement du fichier de police (50-150 Ko par poids)
4. Le navigateur masque tout le texte utilisant cette police jusqu'à la fin du téléchargement
5. Une fois téléchargé, le navigateur restitue le texte, provoquant un "flash" visible

Cette étape 4 est le problème. Sur une connexion mobile 3G, le téléchargement d'une police de 120 Ko peut prendre 1 à 3 secondes. Pendant tout ce temps, votre titre, les titres de vos produits et le corps du texte sont invisible. Les utilisateurs voient une page vierge avec des images mais aucun texte lisible.

Ce texte invisible est appelé FOIT — Flash of Invisible Text. Cela fait directement mal à votre Plus grande peinture à contenu (LCP) Score score car le plus grand élément de texte ne peut pas être mesuré avant le chargement de la police. Cela peut aussi causer Changement de mise en page cumulatif (CLS) lorsque la police de secours passe à la police Web et que le texte est redistribué.

Quel est le poids des polices de thème Shopify ?

La plupart des thèmes Shopify chargent plus de données de police que les commerçants ne le pensent :

Cette dernière ligne ? Nous le voyons régulièrement. Stocke le chargement de polices Google avec plusieurs familles, ainsi qu'une police de marque personnalisée et une police d'icônes. Chaque fichier est une requête HTTP distincte qui bloque le rendu.

Correctif n°1 : utilisez font-display pour arrêter le texte invisible

L'optimisation de police la plus efficace consiste à ajouter affichage des polices : échange à votre @font-face déclarations. Cela indique au navigateur : "Affichez immédiatement le texte avec une police système, puis remplacez la police Web lorsqu'elle est prête."

/* Before — browser hides text until font loads */
@font-face {
  font-family: 'MyBrandFont';
  src: url('/fonts/mybrandfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* After — text visible immediately, swaps when ready */
@font-face {
  font-family: 'MyBrandFont';
  src: url('/fonts/mybrandfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* ← This one line fixes FOIT */
}

font-display

Où ajouter l'affichage des polices dans Shopify

Dans la plupart des thèmes Shopify, les polices sont déclarées dans le fichier CSS du thème ou dans le Disposition thème.liquide . Voici comment les trouver et les réparer :

1. Aller à Boutique en ligne → Thèmes → Modifier le code
2. Rechercher @font-face sur tous les fichiers (cochez base.css, thème.css, et thème.liquide)
3. Ajouter affichage des polices : échange ; à chacun @font-face
4. Si vous utilisez Google Fonts via une URL, ajoutez &display=échange au paramètre URL

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

Correctif n°2 : préchargez votre police la plus critique

Même avec affichage des polices : échange, il y a encore un délai avant que la police Web ne remplace la solution de secours. Le préchargement de la police indique au navigateur de commencer à télécharger le fichier de police immédiatement — avant même d'analyser le CSS.

<!-- Add to theme.liquid <head> section -->
<link rel="preload" 
      href="{{ 'mybrandfont-regular.woff2' | asset_url }}" 
      as="font" 
      type="font/woff2" 
      crossorigin="anonymous">

Le préchargement de votre police de corps principale réduit généralement le délai d'échange de police de 200 à 500 ms, car le navigateur démarre le téléchargement pendant l'analyse HTML au lieu d'attendre qu'il rencontre la règle CSS. Pour en savoir plus sur le fonctionnement du préchargement, de la préconnexion et de la prélecture sur Shopify, consultez notre .

Correctif n°3 : sous-ensemble de polices pour supprimer les caractères inutilisés

Une police Web standard comprend des glyphes pour le latin, le latin étendu, le cyrillique, le grec, le vietnamien et divers symboles — plus de 600 caractères. Si votre boutique Shopify est en anglais, vous avez besoin de moins de 100 de ces caractères.

Le sous-ensemble de polices supprime les glyphes inutilisés, réduisant considérablement la taille du fichier : Police

Comment sous-ensembler les polices

Si vous utilisez Google Fonts, le sous-ensemble se produit automatiquement lorsque vous utilisez l'URL d'intégration standard : Google ne sert que les sous-ensembles de caractères dont le navigateur a besoin. Pour les polices auto-hébergées, utilisez ces approches :

Option 1 : Assistant Google Webfonts (le plus simple)

1. Visite Assistant des polices Web Google
2. Recherchez votre police
3. Sélectionnez uniquement les jeux de caractères dont vous avez besoin (généralement "latin")
4. Sélectionnez uniquement les poids que vous utilisez
5. Téléchargez les fichiers WOFF2 optimisés
6. Téléchargez sur votre thème Shopify Actifs

Option 2 : pyftsubset (pour les polices personnalisées)

# Install fonttools
pip install fonttools brotli

# Subset to Latin characters only
pyftsubset MyFont.ttf \
  --output-file=MyFont-subset.woff2 \
  --flavor=woff2 \
  --layout-features='kern,liga' \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD"

Option 3 : plage Unicode en CSS (sous-ensemble au niveau du navigateur)

Même sans sous-réglage au niveau du fichier, vous pouvez indiquer au navigateur quels caractères un fichier de police couvre. Le navigateur ne télécharge alors le fichier que si ces caractères apparaissent sur la page :

@font-face {
  font-family: 'MyBrandFont';
  src: url('mybrandfont-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

Correctif n°4 : Convertir au format WOFF2

WOFF2 est le format de police Web le plus compressé, offrant des fichiers 30 à 50 % plus petits que WOFF et 70 %+ plus petits que TTF/OTF. Chaque navigateur moderne prend en charge WOFF2 (98 %+ de support mondial).

Vérifiez votre thème Shopify pour les fichiers de polices dans des formats plus anciens :

• .ttf / .otf — Non compressé, 2 à 3 fois plus grand que WOFF2. Convertissez immédiatement.
• .woff — Algorithme compressé mais plus ancien. WOFF2 est 20 à 30 % plus petit.
• .eot — Format IE uniquement. Supprimez entièrement – ​​IE est mort.
• .woff2 — Déjà optimal. Gardez tel quel.

De nombreux thèmes Shopify incluent toujours des formats de police de secours pour des raisons de compatibilité. En 2026, vous pourrez utiliser en toute sécurité WOFF2 uniquement et éliminer les téléchargements de fichiers supplémentaires :

/* Old approach (unnecessary in 2026) */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.eot');
  src: url('myfont.eot?#iefix') format('embedded-opentype'),
       url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

/* Modern approach — WOFF2 only */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Correctif n°5 : réduire les poids et les familles de polices

Chaque poids de police est un téléchargement de fichier distinct. L’optimisation la plus rapide est souvent la plus simple : utilise moins de polices.

Auditez votre utilisation actuelle des polices

Ouvrez votre boutique dans Chrome DevTools (F12) → onglet Réseau → filtrer par « Police ». Vous verrez chaque fichier de police chargé. Résultats communs :

• Chargement des poids inutilisés — Le thème charge 300, 400, 500, 600, 700, 800 poids mais n'en utilise que 400 et 700. Supprimez le reste.
• Variantes italiques que personne n'utilise — À moins que votre conception n'utilise spécifiquement du texte en italique, ne chargez pas de fichiers de polices en italique.
• Familles de polices en double — Certains thèmes chargent à la fois la police hébergée de Shopify et une version Google Fonts de la même police.
• Polices d'icônes — If you only use 10 icons from Font Awesome (180KB), switch to inline SVGs instead.

Le Minimum Pratique

Pour la plupart des boutiques Shopify, vous avez besoin de :

• Corps du texte : 1 police, 2 graisses (normal 400 + gras 700)
• Rubriques : Même police ou 1 police supplémentaire, 1 graisse (gras ou semi-gras)
• Total : 2-3 fichiers de polices = 30-60 Ko

C'est tout. Trois fichiers de polices couvrant l’intégralité de votre conception. Comparez cela aux 8 à 12 fichiers chargés par de nombreux magasins : vous pouvez réduire la charge utile des polices de 70 % simplement en éliminant ce que vous n'utilisez pas réellement.

Polices auto-hébergées vs polices Google sur Shopify

Google Fonts is convenient, but self-hosting your fonts from Shopify's CDN is faster for two reasons:

1. Aucune recherche DNS supplémentaire — Chargement depuis fonts.googleapis.com Le dossier requires a DNS lookup + TLS connection to Google's servers. Self-hosting from your theme's utilise le CDN de Shopify, auquel votre navigateur est déjà connecté.
2. Pas de CSS bloquant le rendu — Les polices Google La balise Balises charge un fichier CSS qui bloque le rendu. Auto-hébergé Les déclarations @font-face peuvent être intégrées directement dans le CSS de votre thème, éliminant ainsi la requête supplémentaire.

Comment auto-héberger les polices Google sur Shopify

1. Utilisation Assistant des polices Web Google pour télécharger les fichiers WOFF2
2. Téléchargez des fichiers de polices sur votre thème
3. Supprimez les polices Google Balises de Déclarations thème.liquide
4. Ajouter @font-face utilisant le filtre d'URL d'actif de Shopify

Cela élimine 2-3 requêtes réseau (DNS + CSS + redirection de police) et supprime une ressource bloquant le rendu. Combinées au préchargement, les polices auto-hébergées peuvent se charger 300 à 500 ms plus rapidement que Google Fonts. Pour plus d'optimisations au niveau CSS, consultez notre Guide d'optimisation CSS Shopify.

Polices variables : un fichier pour tous les poids

Les polices variables sont un format plus récent qui regroupe toutes les épaisseurs (et parfois les largeurs et les styles) dans un seul fichier. Au lieu de charger des fichiers séparés pour les caractères réguliers, semi-gras et gras, un seul fichier de police variable gère tout.

Les polices variables sont particulièrement utiles lorsque vous utilisez plus de 3 graisses de la même famille. La requête HTTP unique est souvent plus rapide que le téléchargement de plusieurs fichiers plus petits, en particulier sur les connexions mobiles à latence élevée.

@font-face {
  font-family: 'Inter';
  src: url('inter-variable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;  /* Supports all weights */
  font-style: normal;
  font-display: swap;
}

Les polices Google les plus populaires proposent désormais des versions de polices variables. Vérifier fonts.google.com et filtre pour la prise en charge des polices variables.

Réduisez CLS avec la correspondance de polices de secours

Lors de l'utilisation affichage des polices : échange, le navigateur affiche d'abord le texte dans une police de secours du système, puis passe à votre police Web. Si les deux polices ont des tailles différentes, l'échange entraîne la redistribution du texte, ce qui modifie la mise en page et nuit à votre texte. Score CLS.

Le correctif : utilisez CSS ajustement de la taille, neutralisation de la montée, et neutralisation de la descente Les propriétés pour que votre police de secours corresponde le plus possible aux dimensions de la police Web :

/* Create a size-adjusted fallback that matches Inter */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Use both in your font stack */
body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}

Des outils comme Générateur de polices de secours calculate the exact override values for any web font + fallback combination. This technique can reduce font-swap CLS from 0.05-0.15 down to near zero.

Remplacez les polices d'icônes par des SVG

Font Awesome, Material Icons et les polices d'icônes similaires sont l'un des pires contrevenants au gonflement des polices. Une police d'icônes typique contient plus de 700 icônes de 150 à 300 Ko, mais la plupart des magasins n'en utilisent que 10 à 20.

Remplacez les polices d'icônes par des SVG en ligne :

• Gains de taille : 10 icônes SVG en ligne = ~ 5 Ko contre 180 Ko de fichier de police d'icône
• Aucun blocage de rendu : Les SVG s'affichent immédiatement avec le HTML — aucun téléchargement de police n'est nécessaire
• Pas de FOIT : Les icônes sont visibles dès la première peinture, pas après le chargement d'une police
• Meilleure accessibilité : Les SVG peuvent avoir des aria-label

La plupart des thèmes Shopify modernes (Dawn, Sense, Craft) utilisent déjà des SVG en ligne au lieu de polices d'icônes. Si votre thème charge toujours une bibliothèque de polices d'icônes, le passage aux SVG est l'une des optimisations les plus impactantes que vous puissiez réaliser. Vérifiez si votre thème se charge ressources bloquant le rendu comme les fichiers CSS de police d'icônes.

Liste de contrôle d'optimisation des polices Shopify

Parcourez cette liste de contrôle pour optimiser pleinement les polices de votre boutique Shopify :

Après avoir mis en œuvre ces changements, exécuter un autre test de vitesse pour mesurer l'amélioration. Résultats typiques : LCP 200 à 800 ms plus rapide et réduction mesurable du CLS. Pour une approche complète de Optimisation de la vitesse Shopify, les polices sont une pièce du puzzle aux côtés , scripts tiers, et CSS bloquant le rendu Les polices.

Foire aux questions

sont une victoire rapide cachée à la vue de tous

L'optimisation des polices Shopify est l'une des améliorations de performances les plus négligées. La plupart des magasins chargent 4 à 8 fichiers de polices totalisant 200 à 400 Ko alors qu'ils n'ont besoin que de 2 à 3 fichiers de 30 à 60 Ko. La nature bloquant le rendu des polices signifie que cela a un impact direct sur votre score LCP et sur l'expérience de chargement visible pour les clients.

L'approche manuelle fonctionne : ajouter affichage des polices : échange, sous-ensemble de WOFF2, auto-hébergement et préchargement. Mais si vous préférez ignorer les modifications du code, Thunder Page Speed Optimizer gère l'optimisation des polices dans le cadre de ses améliorations automatisées de la vitesse, ainsi que le report des scripts, les CSS critiques, etc.

Commencez par mesurer où vous en êtes. Exécutez votre test de vitesse Shopify gratuit et vérifiez comment les polices affectent vos performances. Suivez ensuite la liste de contrôle ci-dessus ou installez Thunder et laissez-le gérer le gros du travail. Pour une approche globale, consultez notre meilleures applications d'optimisation de vitesse pour 2026.