Améliorez le commerce électronique mobile : rendez votre site Web plus rapide

Diverses statistiques notent la différence que chaque seconde de temps de chargement apporte au taux de conversion d'une boutique de commerce électronique. Personnellement, je suis un peu sceptique quant à bon nombre de ces statistiques, car de nombreux autres facteurs peuvent influencer le taux de conversion d'un magasin. Cependant, avec la prédominance du commerce électronique mobile et de la navigation sur la navigation sur ordinateur pour presque tous les sites Web de vente au détail, il est clairement important qu'une boutique de commerce électronique soit aussi rapide que possible, car la vitesse affectera directement l'expérience de l'utilisateur.

Il existe de nombreuses façons d'optimiser le front-end de votre site Web. certaines complexes et coûteuses, d'autres assez simples. Vous constaterez souvent que vous pouvez obtenir rapidement et facilement de gros gains, mais que vous finirez par obtenir des rendements décroissants et des améliorations incrémentielles plus petites.

Jusqu'où vous irez dépend vraiment de la taille de vos revenus en ligne et du montant de revenus supplémentaires provenant du commerce électronique mobile que vous êtes susceptible de réaliser grâce aux petites améliorations incrémentielles.

Améliorer le taux de conversion de 0,1 % va générer un retour sur investissement beaucoup plus important pour un grand détaillant que pour un plus petit.

Optimisez les images pour une expérience de commerce électronique mobile de premier ordre

L'optimisation des images est un domaine dans lequel une réduction importante du temps de chargement des pages peut être rapidement et facilement obtenue. Je vois souvent un conflit entre les graphistes, les marchandiseurs et les responsables du commerce électronique en ce qui concerne la qualité et la taille des images. Un graphiste veut l'image la plus grande et la plus haute résolution possible, et ne tiendra pas toujours compte des implications de vitesse d'une image qu'il crée. Un marchandiseur est susceptible de vouloir les images de produits les plus grandes et les plus hautes résolutions, tandis que le responsable du commerce électronique peut être le seul à avoir la visibilité et l'appréciation de la vitesse globale de la page.

L'optimisation de l'image est toujours un équilibre entre la qualité et la taille du fichier. Plus la qualité de l'image est élevée, plus la taille du fichier est élevée. La taille native et la complexité de l'image ont également un impact sur la taille du fichier. Une image avec un arrière-plan détaillé et complexe aura probablement une taille de fichier beaucoup plus importante qu'une image avec un arrière-plan uni.

Les concepteurs aiment souvent créer des bannières à fort impact pour un site Web en utilisant de nombreuses couleurs et un arrière-plan qui n'est pas simplement une couleur unie. Cela peut avoir un impact visuel important, mais la conséquence sera une taille de fichier beaucoup plus élevée qu'une bannière similaire avec un fond uni. L'introduction d'écrans haute résolution comme l'écran Retina d'Apple rend l'équilibre encore plus difficile à maintenir car les écrans mettent en évidence les imperfections des images de qualité inférieure.

Il est important que tous les membres de l'équipe aient une idée de l'optimisation du front-end et de l'impact que toute décision graphique aura sur la taille des images et donc sur la vitesse de la page.

Alors que les outils de conception standard tels que Photoshop permettent aux concepteurs d'optimiser les images, il existe un certain nombre de services tiers disponibles qui peuvent optimiser automatiquement les images sur votre site Web. Akamai et Ampliance proposent tous deux des services de gestion d'images qui optimisent vos images en fonction d'un ensemble de règles configurées. Ils peuvent même transformer des fichiers jpeg en images WebP pour prendre en charge les navigateurs afin de garantir que la taille des fichiers est aussi petite que possible.

Chez Envoy, nous avons récemment testé le gestionnaire d'images d'Akamai sur le site Web d'un client et constaté une réduction moyenne de 80 % de la taille des fichiers des images PLP, sans dégradation notable de la qualité visuelle. Cela a entraîné une énorme baisse du poids global des pages PLP (page de liste de produits) et un grand bond immédiat dans leurs scores Google Pagespeed. Si vous ne souhaitez pas utiliser un service tiers pour cela, vous pouvez implémenter un outil open source comme Thumbor, qui est un service que vous installez localement sur vos serveurs Web. Des outils comme celui-ci optimisent automatiquement vos images à la volée, puis les mettent en cache dans un référentiel.

Utiliser un CDN

Les réseaux de diffusion de contenu (CDN) sont des services qui mettent en cache votre contenu sur un réseau de serveurs communément appelé la périphérie. Ces serveurs sont normalement hébergés à l'échelle mondiale dans de nombreux emplacements pour garantir que votre contenu est mis en cache dans un emplacement physiquement plus proche des utilisateurs que vos serveurs d'origine. Alors que les CDN sont souvent utilisés uniquement pour mettre en cache des images, du CSS, du JavaScript et des vidéos, vous pouvez également les utiliser pour mettre en cache des pages HTML complètes.

En mettant en cache des pages HTML complètes, vous pouvez considérablement accélérer la livraison des pages à vos utilisateurs. Comme le code HTML est mis en cache, votre application Web d'origine n'a pas à créer la page et à la renvoyer à l'utilisateur chaque fois qu'elle est demandée et le serveur de cache CDN (point de présence) est susceptible d'être physiquement plus proche de l'utilisateur que votre origine. les serveurs. Les CDN disposent également d'une technologie pour compresser et accélérer la livraison de contenu aux utilisateurs, ce qui se traduit par une expérience beaucoup plus rapide.

Les CDN peuvent également réduire considérablement la charge sur vos serveurs d'origine. Une page PLP est souvent une page gourmande en processeur que votre application Web doit générer à la volée. Il peut contenir un grand nombre de produits et de facettes, ce qui représente un grand nombre de traitements. Dans la plupart des cas, une page PLP ne changera pas d'une heure à l'autre, il est donc parfaitement possible de mettre cette page en cache pendant une heure. Plutôt que d'avoir à générer cette page des milliers de fois en une heure, votre serveur d'origine devra le faire une fois. En réalité, cela ne fonctionne pas tout à fait comme ça car de nombreux CDN auront plusieurs caches indépendants, mais vous pouvez toujours vous attendre à un déchargement d'environ 60 %. Cela signifie que vos serveurs et applications d'origine recevront 60 % de demandes en moins que sans le CDN en place.

Utiliser des outils d'analyse de la vitesse pour optimiser l'expérience de commerce électronique mobile

Il existe un certain nombre d'outils en ligne gratuits et payants qui peuvent analyser une page Web et fournir des recommandations sur la façon de rendre votre site Web plus rapide. Les trois outils gratuits les plus utilisés sont probablement Google PageSpeed ​​Insights, Yslow et Webpagetest. Chacun de ces outils est légèrement différent, mais tous analysent votre URL et envoient un rapport contenant des recommandations, ainsi qu'un score.

Ces outils peuvent être très utiles pour vous montrer rapidement quels éléments d'une page Web la ralentissent, et certains outils vous donnent même des solutions pour résoudre ces problèmes. Bien qu'ils ne soient pas exhaustifs, ils constituent un moyen rapide et facile de trouver les changements qui peuvent avoir un impact important.

Minimiser l'utilisation de scripts tiers

La plupart des sites Web de commerce électronique B2C contiennent une multitude de ressources tierces, allant des scripts de suivi du réseau d'affiliation aux tests MVT. Ils peuvent contenir un flux Twitter, un suivi Facebook ou même des polices externes. Ces ressources externes peuvent considérablement ralentir un site Web si elles ne sont pas gérées avec beaucoup de soin.

Lorsque vous utilisez un analyseur de vitesse de page Web, vous constaterez souvent que ces ressources apparaissent constamment dans la liste des éléments qui contribuent à la vitesse de la page. L'un des plus grands défis est que vous n'avez aucun contrôle sur la taille et l'optimisation de ces ressources, car elles sont développées et hébergées par des tiers.

Vous devez vérifier périodiquement les ressources tierces appelées par votre site Web et vous assurer qu'elles sont toutes déclenchées au bon endroit et de la bonne manière, et que vous les utilisez réellement. J'ai vu de nombreux cas où un script de suivi pour un service qui n'est plus utilisé est toujours déclenché parce qu'il a été ajouté à l'aide de GTM et que quelqu'un a oublié de le supprimer lorsque le service a cessé d'être utilisé.

GoogleAMP

Le projet Google Accelerated Mobile Pages est une technologie de publication Web open source qui vise à améliorer la vitesse et les performances du contenu, spécifiquement diffusé sur les appareils mobiles. Dirigée par Google et initiée en 2015, la technologie AMP a été initialement conçue pour la diffusion de contenus d'actualités. Les pages AMP sont très légères et ont tendance à utiliser environ 10 fois moins de données que leurs homologues non AMP équivalentes, et se chargent souvent en moins d'une seconde. Il y a cependant un gros hic. Les pages AMP prennent en charge un ensemble très limité de fonctionnalités et ne sont donc pas appropriées pour de nombreuses applications, en particulier les sites Web de commerce électronique riches et fonctionnels.

Une poignée de détaillants ont essayé AMP pour le commerce électronique avec un succès mitigé. Bien qu'ils aient des pages beaucoup plus rapides, ils ont dû repenser complètement les fonctionnalités et l'expérience utilisateur autour des limitations d'AMP. Les zones complexes du site Web, telles que le paiement, ne peuvent pas être construites dans AMP, de sorte que l'utilisateur est redirigé vers le HTML standard ou le paiement d'une application Web progressive (PWA).

Bien que AMP soit un projet très intéressant et qu'il ait été bien adopté dans l'industrie de l'information, il n'a pas encore montré de réelle traction avec le commerce électronique. Si Google continue d'étendre les fonctionnalités disponibles, je peux voir cela devenir un outil viable pour le commerce électronique.

Soyez adaptatif

La plupart des sites Web de commerce électronique sont désormais conçus de manière réactive, la mise en page s'adaptant dynamiquement à l'écran sur lequel elle est visualisée. Ceci est certainement préférable à des versions mobiles et de bureau distinctes de votre site Web, et signifie généralement que votre site fonctionnera bien sur la multitude de tailles d'écran disponibles.

Cependant, avec une conception réactive, les mêmes actifs ont tendance à être utilisés quel que soit l'appareil sur lequel le site Web est consulté. Les bannières et les images de produits sont souvent simplement affichées dans une taille plus petite, voire masquées dans une vue mobile, mais le fichier volumineux est toujours téléchargé.

C'est là que des éléments de conception adaptative peuvent être utilisés. Plutôt que de créer une conception fluide qui change dynamiquement en fonction de la taille de l'écran, un site Web adaptatif a plusieurs mises en page fixes conçues pour des tailles d'écran spécifiques. Cela permet aux concepteurs de contrôler étroitement et d'optimiser l'expérience utilisateur pour chaque taille d'écran spécifique.

Bien que cela soit plus complexe et plus long à mettre en œuvre, l'un des principaux avantages de la vitesse est qu'au lieu de simplement afficher une image plus grande dans une taille plus petite sur un appareil mobile, vous chargez une image spécifique optimisée pour les mobiles sur cet appareil, ainsi réduisant le temps de chargement. Dans une conception réactive, vous pouvez masquer certains éléments du bureau lorsque le site est consulté sur mobile. Dans une conception adaptative, vous ne les chargez même pas du tout.

Une alternative pragmatique à l'adaptation complète consiste à utiliser JavaScript dans votre conception réactive pour détecter la taille d'écran utilisée et garantir que des images optimisées pour les mobiles sont demandées et affichées plutôt que d'afficher simplement des images plus grandes à une taille plus petite. Cela garantit que seuls les images et le contenu affichés sont demandés et donc téléchargés tout en offrant les avantages d'un design réactif.

Il existe une multitude de façons différentes d'accélérer les pages de votre site de commerce électronique mobile. Certains impliquent le développement, certains impliquent l'utilisation de services tiers, et certains impliquent un équilibre entre la conception et la fonction.