Guides
Performance
Garder une boutique rapide : images, applications et bonnes pratiques.
Faubourg est conçu pour être léger : il n’embarque aucune bibliothèque JavaScript externe, chaque composant ne charge que son propre code, et les pages sont conçues pour s’afficher avant que les scripts ne s’exécutent. Avant chaque version, les pages clés sont mesurées avec Lighthouse, selon la méthode du Theme Store.
La vitesse de votre boutique dépend aussi de ce que vous y ajoutez : applications, pixels de suivi, poids des images, nombre de sections. Le thème ne peut pas garantir un score à lui seul ; les sections ci-dessous disent ce qu’il fait et ce que vous pouvez faire.
Ce que fait le thème
- La première image de la page (bandeau principal, image avec texte, galerie produit) est chargée en priorité ; les images plus bas sont chargées au fil du défilement.
- Les images sont servies à la bonne taille pour chaque écran, par le CDN de Shopify.
- Les recommandations et les lecteurs YouTube / Vimeo ne se chargent qu’au moment où ils sont utiles. Les lecteurs utilisent le mode confidentialité avancée de YouTube et l’option « ne pas suivre » de Vimeo, qui limitent le suivi de vos clients.
- La place des images et des médias est réservée avant leur chargement, pour éviter que la mise en page ne bouge.
Ce qui ralentit une boutique
Au-delà du thème, la vitesse dépend de ce que vous ajoutez à votre boutique. Mesurez avant et après chaque changement pour trouver ce qui pèse le plus dans votre cas. Causes fréquentes :
- Les applications : beaucoup d’applications ajoutent des scripts aux pages de la boutique, parfois à toutes. Désinstallez celles que vous n’utilisez plus, et vérifiez qu’elles ont retiré leur code.
- Les pixels et outils de suivi (publicité, analyse) ajoutés dans ParamètresÉvénements clients.
- Les images trop lourdes : Shopify les optimise, mais une image de 20 Mo reste longue à traiter.
- Les vidéos en lecture automatique en haut de page.
Bonnes pratiques
- Importez des images d’environ 2 400 px de large pour les bandes pleine largeur et 1 600 à 2 000 px pour les produits. Inutile d’aller au-delà.
- Préférez un bandeau principal à une seule image à un diaporama de cinq images.
- Utilisez les réglages de point focal plutôt que des images recadrées pour chaque écran.
- Limitez le nombre de sections sur la page d’accueil à ce qui sert vraiment.
Le rapport de vitesse de la boutique se trouve dans Boutique en ligneThèmes et dans les rapports d’analyse. Il reflète l’expérience réelle de vos visiteurs, applications comprises.
Faubourg 1.1.0