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 font-display 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 une règle CSS @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. Il dégrade le LCP, car le plus grand élément de texte ne peut être mesuré qu’une fois la police chargée. Le remplacement de la police de secours par la police Web peut aussi modifier les retours à la ligne et provoquer des décalages de mise en page (CLS).

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

Pour éviter le texte invisible, ajoutez font-display: swap à vos déclarations @font-face. Le navigateur affiche alors immédiatement le texte avec une police système, puis utilise la police Web dès qu’elle est chargée.

/* 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 font-display 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 fichier de mise en page theme.liquid. Voici comment les trouver et les corriger :

1. Aller à Boutique en ligne → Thèmes → Modifier le code
2. Rechercher @font-face sur tous les fichiers (cochez base.css, theme.css, et theme.liquid)
3. Ajoutez font-display: swap; à chaque déclaration @font-face.
4. Si vous utilisez Google Fonts via une URL, ajoutez &display=swap 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 font-display: swap, 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 guide des indications de ressources.

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. Importez les fichiers dans le dossier assets de votre thème Shopify.

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 — Si vous n'utilisez que 10 icônes de Font Awesome (180KB), passez plutôt aux SVG en ligne.

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 est pratique, mais l'auto-hébergement de vos polices depuis le CDN de Shopify est plus rapide pour deux raisons :

1. Aucune recherche DNS supplémentaire — Le chargement depuis fonts.googleapis.com nécessite une recherche DNS et une connexion TLS aux serveurs de Google. En hébergeant les polices dans le dossier assets de votre thème, vous utilisez le CDN de Shopify, auquel votre navigateur est déjà connecté.
2. Pas de CSS bloquant le rendu — La balise Google Fonts <link> charge un fichier CSS qui bloque le rendu. Avec des polices auto-hébergées, les déclarations @font-face peuvent être intégrées directement au CSS du thème, ce qui élimine cette requête supplémentaire.

Comment auto-héberger les polices Google sur Shopify

1. Utilisez Google Webfonts Helper pour télécharger les fichiers WOFF2.
2. Importez les fichiers de polices dans le dossier assets de votre thème.
3. Supprimez la balise Google Fonts <link> de theme.liquid.
4. Ajoutez des déclarations @font-face en utilisant le filtre Shopify qui génère les URL des fichiers du thème.

<!-- In theme.liquid or base.css -->
<style>
  @font-face {
    font-family: 'Inter';
    src: url('{{ "inter-v12-latin-regular.woff2" | asset_url }}') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Inter';
    src: url('{{ "inter-v12-latin-700.woff2" | asset_url }}') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
</style>

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

Avec font-display: swap, le navigateur affiche d’abord le texte avec une police système de secours, puis avec votre police Web. Si leurs dimensions diffèrent, le changement de police modifie les retours à la ligne et déplace les éléments de la page, ce qui dégrade le score CLS.

Utilisez les propriétés CSS size-adjust, ascent-override et descent-override pour rapprocher au maximum les dimensions de la police de secours de celles 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 calculent les valeurs de remplacement exactes pour toute combinaison de police web + de secours. Cette technique peut réduire le CLS de 'font-swap' de 0.05-0.15 à presque zéro.

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 recevoir des attributs 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 ces changements, exécutez un autre test de vitesse pour mesurer l’amélioration. Les résultats typiques sont un LCP plus rapide de 200 à 800 ms et une réduction mesurable du CLS. Dans une approche globale de l’optimisation de la vitesse Shopify, les polices sont un élément à traiter avec les images, les scripts tiers et le CSS bloquant le rendu.

Foire aux questions

Les polices : un levier de performance souvent négligé

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 font-display: swap, 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.