Réponse rapide : sur la plupart des boutiques Shopify, le problème de vitesse provient principalement des applications et des images, dans cet ordre, et la solution réside dans la suppression et la compression plutôt que dans une ingénierie sophistiquée. Ignorez le score de vitesse de l'administration ; mesurez le Largest Contentful Paint, l'Interaction to Next Paint et le Cumulative Layout Shift à partir de visiteurs réels, car ce sont les critères utilisés par Google et ceux qui ont une corrélation avec la conversion.

Mesurez les trois bons indicateurs

L'interface d'administration de Shopify affiche un score de vitesse. Il s'agit d'un score lab de Lighthouse — une charge simulée sur un appareil simulé — et il varie pour des raisons qui n'ont rien à voir avec vos visiteurs. Utile pour comparer votre boutique à elle-même le mois dernier ; ce n'est pas ce que Google utilise.

Google utilise des données terrain : ce qui s'est réellement passé pour de vraies personnes sur de vraies connexions.

Indicateur Mesure Seuil Coupable habituel sur Shopify
LCP Quand l'image principale ou le titre est affiché < 2,5s Image principale chargée paresseusement, non compressée ou derrière un carrousel
INP Rapidité de réponse de la page à un clic < 200ms JavaScript d'application s'exécutant sur le thread principal
CLS Ampleur des sauts de mise en page < 0,1 Images sans dimensions, bannières injectées tardivement, échanges de polices

Le rapport Core Web Vitals de la Search Console montre ces indicateurs à partir de vos propres visiteurs. PageSpeed Insights affiche à la fois des données terrain et des données lab pour une URL — lisez d'abord la section terrain et considérez la section lab comme un diagnostic du pourquoi.

Les applications sont généralement la plus grande ligne unique

Chaque application qui injecte un script ajoute des octets à télécharger, analyser et exécuter, et cela se produit sur chaque page, que cette page utilise l'application ou non. Douze applications ne représentent pas douze petits coûts ; elles se disputent toutes le même thread principal.

Auditez correctement :

  1. Listez chaque application installée et notez ce que chacune vous rapporte. Tout ce à quoi vous ne pouvez pas répondre est un candidat.
  2. Désinstallez les candidats.
  3. Ensuite, vérifiez le thème pour les résidus. C'est l'étape que les gens sautent. Désinstaller une application ne supprime pas toujours la balise de script qu'elle a ajoutée à theme.liquid, vous pouvez donc payer le coût de chargement d'une application que vous n'avez plus. Recherchez dans le thème le nom de l'application et le domaine CDN.
  4. Re-mesurez après chaque suppression, pas à la fin, pour savoir laquelle était importante.

Le simulateur de Googlebot montre le HTML brut qu'un crawler reçoit, ce qui est un moyen rapide de voir combien de votre page est un script tiers avant que quoi que ce soit ne soit rendu.

Images : compresser, dimensionner et arrêter le chargement différé du héros

Les images sont généralement les éléments les plus volumineux en octets sur une page Shopify et les plus faciles à réduire de moitié.

Le CDN de Shopify fait déjà plus que ce que la plupart des commerçants réalisent. Il sert automatiquement des fichiers WebP aux navigateurs qui les acceptent et redimensionne sur demande via des paramètres d'URL. Ce qu'il ne peut pas faire, c'est annuler un original de 4 Mo — il servira un format plus petit, pas une photographie plus petite. Compressez avant de télécharger.

Dimensionnez la demande à l'emplacement. Une image de 2 400px affichée dans une colonne de 600px gaspille les trois quarts de ses octets. Les URL d'image de Shopify acceptent ?width= — utilisez-le et fournissez un srcset pour que les téléphones ne téléchargent pas d'images de bureau.

Le héros est l'exception à toutes les règles de chargement différé. C'est presque toujours l'élément LCP, donc le charger en différé retarde l'image que Google chronomètre. Définissez-le avec loading="eager" et fetchpriority="high", et chargez en différé tout ce qui est en dessous de la ligne de flottaison. Les boutiques qui "ajoutent le chargement différé partout" et deviennent plus lentes ont presque toujours fait exactement cela.

Définissez toujours la largeur et la hauteur. Sans cela, le navigateur ne peut pas réserver d'espace, la page se réorganise lorsque l'image arrive, et cela provoque un CLS. SEO des images sur Shopify couvre le texte alternatif et le nom de fichier ; ceci concerne uniquement la performance.

Polices de caractères, et le coût invisible

Les polices de caractères personnalisées représentent un coût réel à chaque première visite. Trois règles couvrent la plupart des cas :

  • En envoyer moins. Deux familles et deux graisses chacune suffisent amplement. Quatre familles constituent une décision de design avec un coût en performance.
  • font-display: swap. Sinon, le texte est invisible pendant le chargement de la police — une page blanche qui semble cassée même si elle est rapide.
  • Préconnecter à l'hôte de la police. Une ligne dans theme.liquid qui économise une recherche DNS et une poignée de main TLS sur le chemin critique.

La bibliothèque de polices de Shopify est servie depuis la même origine que la vitrine, ce qui élimine entièrement le coût de connexion. À considérer si la police de votre marque n'est pas essentielle au chargement.

Ce que vous ne pouvez pas corriger, et devriez cesser d'essayer

Shopify contrôle le temps de réponse du serveur, le CDN, le processus de paiement et le JavaScript de la plateforme principale. Vous ne pouvez pas ajuster ces éléments, et une partie significative de tout rapport Lighthouse concernera ces aspects.

Cela est important pour la gestion des attentes : il y a un seuil, c'est le même pour chaque boutique sur la plateforme, et un "service d'optimisation de la vitesse" promettant de le dépasser vend autre chose. Ce qui vous appartient réellement, c'est tout ce qui se passe après l'arrivée du HTML — et dans une boutique riche en applications, c'est là que se trouve presque toute la perte évitable.

Un plan ordonné

Semaine 1 — mesurer et supprimer. Enregistrez LCP, INP et CLS à partir de la Search Console. Auditez les applications, désinstallez celles qui ne sont pas justifiables, recherchez les scripts résiduels dans le thème. Re-mesurez.

Semaine 2 — images. Compressez et téléchargez à nouveau les images principales de votre page d'accueil et de vos collections phares. Ajoutez une largeur et une hauteur explicites. Corrigez l'attribut de chargement des images principales. Réduisez les images du carrousel à ce qui est réellement visible.

Semaine 3 — polices et tiers. Réduisez les familles de polices et les graisses. Ajoutez preconnect. Différez tout script tiers restant qui n'est pas nécessaire pour le premier affichage.

Semaine 4 — re-mesurer et arrêter. Les données de terrain ont un décalage pouvant aller jusqu'à 28 jours, donc ne jugez pas la semaine 1 lors de la semaine 2. Lorsque les trois chiffres sont satisfaisants, arrêtez : une optimisation supplémentaire sur une boutique déjà performante est un effort qui serait plus rentable ailleurs.

Où se situe la vitesse par rapport au reste

La vitesse est un facteur décisif. Une page rapide qui répond mal à la requête perdra toujours face à une page lente qui y répond bien — c'est pourquoi "améliorer les Core Web Vitals" est rarement la priorité sur une boutique avec 2 000 produits et sans méta-descriptions.

Corrigez-le car les visiteurs abandonnent les boutiques lentes et parce que c'est un véritable critère de classement, mais hiérarchisez-le honnêtement. La checklist SEO Shopify le place dans l'ordre par rapport au reste, et l'audit gratuit vous dira si la vitesse est réellement votre contrainte principale ou simplement l'élément le plus visible sur lequel travailler.