Pages plus rapides, ventes plus fortes: optimisation des vitesses des sites de commerce électronique

Pour les détaillants en ligne, le problème de site / panier abandonné a de nombreux facteurs. Réduire le nombre de clics vers la caisse, éliminer les surprises dans l’affichage des prix et offrir des options de paiement aux clients sont des moyens bien connus de lutter contre l’abandon des paniers sur un site de commerce électronique, mais les commerçants intelligents recherchent toujours des moyens d’empêcher les clients potentiels de quitter le site avant faire un achat.

Recherche de Google (parmi d’autres enquêtes menées au cours des dernières années) suggère que la corrélation entre les temps de chargement des pages et les taux de conversion est forte, en particulier sur les pages Web mobiles. En bref, les temps de chargement lents arrêtent les ventes sur leurs traces.

L’accélération du chargement des pages peut avoir un impact énorme sur votre entreprise. Vérifiez juste Outil de test de mon site de Google, qui peut vous aider à estimer l’impact du temps de chargement sur les revenus en fonction du nombre de visiteurs sur votre site, de votre taux de conversion moyen et de la valeur moyenne des commandes. En fonction de vos résultats, vous souhaiterez peut-être commencer petit ou sauter dans les ajustements de site de gros pour récupérer les revenus perdus à l’abandon du site. Passons en revue les changements axés sur la vitesse à trois niveaux de difficulté différents.

Niveau un: des changements simples mais rapides que vous pouvez effectuer vous-même

Les images sur votre site Web créent le plus grand besoin de transfert de données lorsque quelqu’un charge votre page sur son navigateur. L’une des modifications les plus simples que vous puissiez apporter à votre site Web consiste à limiter les données chargées lors de la navigation d’un visiteur dans les listes de produits. Cela ne signifie pas nécessairement que vous devez supprimer des images, cela signifie simplement que vous devez être plus intelligent sur la façon dont elles sont utilisées.

La façon la plus simple de le faire est de vous assurer que le navigateur de votre client charge la bonne taille d’image pour ses besoins. S’ils sont sur mobile, ils n’ont pas besoin des images de produits de la même taille que sur le bureau. Vous pouvez ajouter manuellement des images de tailles différentes et définir des paramètres pour leur affichage, mais votre plate-forme de commerce électronique devrait offrir un moyen de rendre les images adaptées à l’appareil du client. Vous téléchargez l’image de la plus haute qualité dont vous disposez et l’utilisateur obtient la taille dont il a besoin en fonction de l’appareil qu’il utilise.

Une autre meilleure pratique consiste à limiter le nombre d’éléments affichés en même temps sur chaque page. Ne chargez pas 100 résultats par page alors que seulement 15 peuvent s’afficher à l’écran à la fois. Utilisez plutôt les boutons «Charger plus» et laissez les acheteurs dire à votre site quand ils sont prêts à en savoir plus. Cela permet aux acheteurs de faire défiler des segments de vos listes de produits, sans se sentir intimidé par des dizaines de pages de résultats à parcourir, tout en gardant les temps de chargement ultra rapides. Votre page n’aura besoin de charger qu’une poignée d’images à un moment où l’utilisateur est prêt à les visualiser, et leur défilement global et l’expérience d’achat seront simplifiés.

Niveau deux: vous pourriez avoir besoin de l’aide de vos partenaires

Comme pour les images, la réduction de la quantité d’autres données à charger lors de la première visite d’un utilisateur sur votre site Web contribuera à accélérer son expérience. Le contenu qu’ils rencontrent en premier sur votre site est appelé contenu «au-dessus de la ligne de flottaison» et devrait être ce qui se charge en premier. Vous pourriez être surpris d’apprendre que de nombreux sites Web chargent des widgets tiers avant d’accéder au contenu réel.

Il est facile d’identifier la façon dont votre code HTML est structuré. Il vous suffit d’ouvrir les outils de développement sur votre navigateur et de parcourir le code de la page. En haut, vous voulez que CSS se charge d’abord, qui apparaît comme . Cela contrôle l’apparence de base de votre site et vous pouvez utiliser CSS à la place de certaines images ou graphiques pour rendre vos pages encore moins lourdes à charger. Ensuite, vous voulez voir le de votre page – le contenu que votre client attend – ou, potentiellement, certains fichiers javascript,