Optimisation de la vitesse du site Shopify

Vous avez certainement pu constater que le trafic sur mobile - sur votre boutique Shopify - est largement supérieur que celui venant des appareils type ordinateur, mais on ne peut pas en dire autant au niveau de la conversion e-commerce. Améliorez la vitesse de chargement de votre boutique e-commerce Shopify, et sur mobile (surtout).

Shopify : Service technique et design, Performance et vitesse du site | Demandez un devis gratuit | *Avis clients

Qu'est-ce qui est inclu :

La vitesse de chargement est aussi affectée par le choix du thème et/ou du nombre d'applications installées. Avec ce service, nous optimisons la vitesse de votre site Shopify – surtout pour le format et les connexions mobile.

Améliorez la vitesse de votre site Shopify, sur mobile comme sur desktop, en mesurant avec PageSpeed Insights / LightHouse / WebPageTest.org / GTmetrix et la Google Search Console. La meilleure mesure reste celle que vos utilisateurs affichent sur leurs appareils mobile, tablettes et ordinateurs, mesurable avec Google Analytics ou Lighthouse si vous avez un trafic important.

Nous travaillons le CSS, le JavaScript, les applications, les images (les GIFs surtout), les vidéos, et nous remplacerons certaines applications par un code personnalisé léger. Nous mettrons les plans et les objectifs ensemble avant de commencer, tout en vous guidant avec le processus.

Prendre conseil 👇

Optimiser la vitesse du site Shopify

• Configuration des applications.

• Travail du CSS critique qui bloque le rendu et des emplacements / priorités des scripts Javascript.

• Configuration et choix des priorités loading des Javascript.

• Identification et optimisation des images et vidéos qui coincent la vitesse de chaque page.

• Ajout d’applications ou de code personnalisé essentiel pour le bon fonctionnement, ou qui remplace des applications lourdes en poids (dépend du site et du thème).

• Configurations de base du SEO et conseils SEO e-commerce.

• Plus un redesign de l’accueil et page produit : remise en forme du layout (mise en page) dans le but d’accélérer la vitesse du site.

En clair, si vous avez un Slider par exemple ou une vidéo YouTube intégrée d’une façon non-optimisée, ou tout autre élément qui ralentit la page et la vitesse du site, nous le retravaillerons pour nous approcher de la fonctionnalité requise tout en allégeant le code et le nombre de requêtes que la page fait aux serveurs.

Mesurer le mesurable

⚠️ Attention, il existe plusieurs applications Shopify qui promettent les meilleurs résultats de mesure sur PageSpeed, Lighthouse, GTmetrix ou WebPageTest. Certaines de ces applications sont en train de carrément tricher la lecture de ces outils de mesures, en injectant des code - souvent Javascript - qui donne l'instruction aux robots de ces outils de voir la page différement de ce qu'elle est en réalité, et donc il n'y a aucune optimisation faite et vos utilisateurs ne sentiront aucune amélioration avec le délai de chargement. Non seulement inutiles, mais dangereuses aux "yeux" de Googlebot et autres robots de certains moteurs de recherche.

En cas de doute, n'hésitez-pas à venir poser la question et obtenir notre conseil gratuitement. ✉️

Shopify, une excellente plateforme

Sachez qu'avec Shopify, vous êtes déjà sur une plateforme optimisée en matière de code, structure, CDN, ergonomie mobile, etc. Se sont surtout les thèmes et les applications tiers qui viennent ajouter du poids souvent pas nécessaire, sans parler des fameux GIFs qui consomment toute la bande passante des utilisateurs sur 3G par ex. Donc la grande majorité du travail est faite pour vous déjà, reste à l'utiliser (Shopify) comme il faut et bien choisir / paramétrer ses thèmes et applications.

Pourquoi installer une application quand vous pouvez le faire faire sur mesure ? Je pense surtout aux accordéons, les tabs, les formulaires de contacts, les swatchs des couleurs, les timers, etc.

Ajouter du code utile sans le poids qui vient avec, partagez vos idées.

Questions / Réponses

Q : On me dit qu’il est impossible d’optimiser Shopify

Bien sûr que c’est possible, mais ça dépend largement de votre site, par ex s’il charge 3 GIFs de 5Mo chacune sur une seule et même page, s’il fait tourner 10 applications, alors forcément votre page sera lente. Mais pas que ça, envoyez un message avec votre URL et je vous présente notre plan avant de travailler.

Q : De quels accès aurions-nous besoin ?

Obligatoire : Le tableau de bord Shopify avec accès Admin au code, thème et aux applications.  Optionnel : Google Search Console, Google Analytics.

Q : Pourquoi la Google Search Console comme outil ? Les autres utilisent d’autres outils.

On va mesurer avec les autres outils mais la GSC permer d’étudier la vitesse perçue par votre audience même, lorsque vous avez assez de trafic. C’est-à-dire, et concrètement, comment vos utilisateurs perçoivent la vitesse de votre site sur leurs appareils (smartphone, tablette, ordinateur) avec leur vitesse de connexion 4G/3G/ADSL/Fibre etc. En second plan, on optimise pour Google aussi, après tout c’est son crawler qui décide du ranking dans les SERP (pages des résultats de recherche) et du CPC (coût par clique) + Quality Score dans les annonces.

Q : Je n’ai qu’une “faible” amélioration d’1 seconde…

Demi-seconde ou 1 seconde n’est pas une faible amélioration, au contraire, c’est même énorme quand on vient de 4 ou 6 secondes. Il est rare d’avoir des sites très lent avec Shopify, mais pas impossible, dans ce cas il faudra travailler la mise en page et repenser l’essentiel au-dessus de la ligne de flottaison.

Q : Quelles pages va-t-on tester / améliorer ?

Sur Shopify, c’est les pages produits, collections et l'accueil, ou toute landing page que vous utiliser dans vos annonces.

Q : Les tests montrent que je n’ai pas d’amélioration

Très rare, limite impossible; ça veut dire qu’il n’y en avait pas à faire (chose possible pour maintes raisons), et dans ce cas vous serez remboursé/e si vous le souhaitez et les plus values seront automatiquement supprimés.

Autres questions non adressées ici ? On vous répond dans la journée ✉️

Est-ce je peux optimiser mon site Shopify sans savoir coder ?

Voici quelques optimisations que vous pouvez faire vous-même sans devoir coder:

 Toujours prendre des sauvegardes avant de modifier votre Shopify.

• Remplacer les GIFs avec des vidéos (après les avoir compressées), et éviter de les avoir en dessus de la ligne de flottaison. Téléverser les vidéos sur Shopify même au lieu de YouTube. Si l'utilisation de YouTube est nécessaire, il y a des moyens pour faire embarquer les vidéos sans "dépenser" une trentaine de requêtes pendant le chargement de la page (ce qui contribue au ralentissement) .

• S'assurer que toutes les applications installées sont vraiment nécessaires à la génération de chiffre (panier flottant par exemple, emailing, abandon panier, etc)ou vous font gagner beaucoup de temps (imprimer les labels packaging par ex, envoi des colis, …).

• Les images : téléverser des images de 800 pixels ou en-dessous, de toute façon la majorité des visites viennent des téléphones mobiles et pas besoin d'images qui pèsent 2 Mo de 2000 pixels de taille.

• Éviter les applications "pour faire beau" comme celle de l'effet de la neige en hiver par ex... s'il le faut, demandez-nous le code, il sera plus léger et fonctionnera aussi bien, selon votre thème.

• Éviter les thèmes avec les 50 mille options! Plus d'options = plus de lignes de code et de feuilles de style à charger mais au final on n'en utilise qu'une.

• Les "header band" (bannières du haut qui indiquent par exemple -30% durant le mois de novembre), assurez vous qu'elles ne causent pas un CLS qui va pousser tout le contenu de la page en bas sauf qu'il ne se charge pas en priorités.

Déroulement type d'une optimisation de vitesse pour une boutique Shopify

1. Questions / réponses

2. Devis

3. Réception du devis avec le plan de travail

4. Confirmation et paiement acompte

5. Accès et début du travail

6. Délai 3 à 15 jours selon le plan et le site.

7. Communication continue durant le travail.

8. Vérifications et testing

9. Paiement du solde et livraison à la fin du travail.

Bon à savoir

L’optimisation de la vitesse du site n’est pas une baguette magique. Il faut comprendre le site, les applications qu’il utilise et leur raison d'être (est-ce qu'elles servent vraiment le business), comprendre le business même et les priorités d'affichage (l'utilisateur cherche d'abord à voir le produit ou à voir une vidéo ou cherche-t-il des promos d'abord ?)… d’où viennent les vues, de quels appareils… let's go 👇

❗️On ne peut pas le répéter assez :  Toujours prendre des sauvegardes avant de modifier votre Shopify.