Si je vous disais qu'il est possible de réduire de 50% le temps de chargement d'une boutique Shopify sans toucher au design visuel ni modifier l'expérience utilisateur, vous me croiriez ? C'est exactement ce que j'ai testé sur plusieurs boutiques clientes et personnelles. Ici je vous partage une méthode pragmatique, technique mais accessible, centrée sur l'optimisation des performances côté front-end et serveur, sans changer la charte graphique ni le contenu visible.

Comprendre où est le temps perdu (mesurer avant d'agir)

La première étape que j'applique toujours, c'est de mesurer. Sans métriques, on touche n'importe quoi. J'utilise Lighthouse (dans Chrome DevTools), WebPageTest et la section "Online Store Speed" de Shopify. À partir de ces outils je récupère :

  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Time to Interactive (TTI)
  • Total Blocking Time (TBT)
  • Taille totale des ressources et nombre de requêtes

Ces indicateurs me montrent si le problème vient des images trop lourdes, d'un trop grand nombre de scripts tiers (apps), d'un CSS trop volumineux, ou du rendu bloquant (JS/CSS critiques).

Prioriser les gains rapides

J'aime organiser les actions en "quick wins" (gains rapides) et "optimisations poussées". Voici celles qui donnent le plus de résultats sans toucher au design :

  • Optimiser les images (WebP, responsive srcset, compression) — souvent 30 à 60% de la taille totale
  • Supprimer/limiter les scripts tiers (apps inutilisées ou injectées globalement)
  • Lazy-loading des images et iframes non critiques
  • Minifier et servir CSS/JS compressé (gzip/ Brotli) via CDN
  • Déférer/Async le JS non critique pour réduire le rendu bloquant

Actions concrètes (pas à pas)

Voici le plan que j'applique sur une boutique Shopify, étape par étape. Vous pouvez implémenter la plupart de ces points via le thème (Liquid) et la configuration Shopify, parfois avec l'aide d'apps spécialisées.

1) Optimisation des images sans changer le design

Les images représentent souvent la moitié du poids d'une page produit. Sur Shopify, je :

  • Active le format WebP en priorité avec des balises srcset pour desservir des images responsives. Shopify propose désormais un CDN d'images qui peut servir WebP automatiquement via les paramètres d'URL (ex. ?format=webp).
  • Génère des tailles adaptées (ex. 480, 768, 1024, 1600) et laisse le navigateur choisir via srcset et sizes.
  • Compresse avec des outils comme ImageOptim, Squoosh, ou des apps Shopify (Optimole, TinyIMG) si vous voulez automatiser.
  • Utilise le lazy-loading natif : <img loading="lazy" ...> pour toutes les images non visibles au-dessus de la ligne de flottaison.

2) Réduire et contrôler les scripts d’apps

Les apps Shopify peuvent injecter des scripts dans toutes les pages, parfois de façon non optimisée. J'ai constaté des réductions de 20-40% en désactivant ou en conditionnant leur chargement :

  • Audit : lister tous les scripts tiers avec DevTools > Network.
  • Désactiver les apps inutiles ou déplacer leur injection uniquement sur les pages nécessaires (ex. chat sur checkout exclu, scripts marketing uniquement sur landing pages).
  • Si l'app ne permet pas de désactivation fine, envisager un remplacement par un script plus léger ou une alternative plus performante.
  • Charger les scripts non critiques avec defer ou async dans Liquid : <script defer src="..."></script>.

3) Optimiser le CSS

Le CSS peut bloquer le rendu. Je procède ainsi :

  • Extraire et inline le CSS critique (quelques centaines de lignes ciblant lAbove-the-fold) directement dans le <head>. Le reste du CSS est chargé de manière asynchrone.
  • Minifier le CSS via des outils (cssnano) ou via build process si vous utilisez Slate/Theme Kit/Shopify CLI).
  • Supprimer les règles inutilisées (purgecss) si vous utilisez un framework CSS.

4) Activer la compression et CDN

Shopify utilise déjà un CDN et active souvent gzip/Brotli côté serveur, mais vérifiez :

  • Assurez-vous que les assets (JS/CSS/images) sont servis compressés. Vérifiez l'en-tête HTTP Content-Encoding.
  • Exploitez le CDN d'images de Shopify pour réduire la latence globale.

5) Mise en cache et headers

Configurer les headers de cache pour les ressources statiques (images, JS, CSS) est crucial. Même si Shopify gère beaucoup côté CDN, certaines ressources d'apps peuvent avoir des headers courts. Contrôlez et demandez aux fournisseurs d'apps s’ils peuvent allonger la TTL (Time-To-Live).

6) Charger intelligemment (Preconnect, Preload)

Pour améliorer le LCP sans changer le design, j'utilise :

  • <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin> pour les sources critiques (fonts, analytics, CDN).
  • <link rel="preload" as="image" href="..."> pour l'image principale du produit (LCP), afin qu'elle commence à charger tôt.

7) Alléger le DOM et optimiser Liquid

Un DOM trop lourd ou des boucles Liquid inefficaces ralentissent la page. Je :

  • Simplifie les sections et snippets en évitant les rendus répétitifs pour chaque produit listé.
  • Utilise la pagination côté serveur pour réduire le nombre d'éléments affichés par défaut.
  • Retire les éléments cachés qui restent dans le DOM si inutiles.

Outils et checks rapides

Avant/après, je recommande :

  • Lighthouse (score et recommandations)
  • WebPageTest (film strip, waterfall)
  • Chrome DevTools (Network, Coverage pour JS/CSS inutilisés)
  • Shopify Analyzer et rapports internes
Action Impact estimé
Optimisation images (WebP + srcset + lazy) 25-50% réduction taille page
Retirer scripts d'apps non nécessaires 10-30% réduction requêtes / blocage JS
Inline CSS critique + defer rest Amélioration LCP & TTI
Compression & CDN 5-15% réduction latence

Sur plusieurs projets, en combinant ces étapes, j'ai observé des réductions de temps de chargement allant de 40% à 70% selon l'état initial de la boutique. L'important n'est pas de tout faire en même temps, mais d'itérer : mesurer, appliquer une optimisation, mesurer à nouveau.

Si vous souhaitez, je peux examiner votre boutique (URL) et vous fournir une liste d'actions priorisées avec un gain estimé pour chacune. Sur Flyweb, j'essaie toujours de garder les optimisations pratiques, reproductibles et compatibles avec l'écosystème Shopify (apps, Liquid, CDN).