Introduction
La vitesse de chargement de ta boutique Shopify est cruciale pour l'expérience utilisateur et tes conversions. Selon Google, 53% des visiteurs mobiles abandonnent un site qui met plus de 3 secondes à charger.
Dans cet article, je partage les 5 techniques que j'utilise pour optimiser les performances de mes projets clients.
1. Optimiser les Images
Les images représentent souvent plus de 50% du poids total d'une page. Voici comment les optimiser :
- Utilise le format WebP ou AVIF au lieu de JPEG/PNG
- Implémente le lazy loading natif
- Définis des dimensions explicites pour éviter le CLS
{{ image | image_url: width: 800 | image_tag: loading: 'lazy', width: 800, height: 600 }}2. Minimiser les Scripts Tiers
Chaque application Shopify ajoute des scripts qui impactent les performances. Audite régulièrement tes apps :
- Supprime les applications inutilisées
- Charge les scripts en asynchrone quand c'est possible
- Utilise des alternatives plus légères
3. Activer le Lazy Loading des Sections
Shopify permet de charger les sections "below the fold" de manière différée :
{% section 'featured-collection' %}Ajoute l'attribut loading="lazy" aux sections non critiques.
4. Utiliser un CDN pour les Assets
Shopify utilise déjà Fastly comme CDN, mais assure-toi de :
- Ne pas créer de redirections inutiles
- Utiliser les URL optimisées
| asset_url - Précharger les fonts critiques
5. Optimiser le Code Liquid
Le code Liquid mal optimisé peut ralentir le rendu côté serveur :
- Évite les boucles imbriquées
- Utilise
{% cache %}pour les données statiques - Limite les appels API dans les templates
Conclusion
En appliquant ces 5 techniques, j'ai réussi à améliorer les scores PageSpeed de mes clients de 40% en moyenne. La vitesse n'est pas qu'une métrique technique, c'est un facteur direct de conversion.
Besoin d'aide pour optimiser ta boutique ? Contacte-moi pour un audit gratuit.
