6 astuces sous-estimées pour augmenter la vitesse de votre site de commerce électronique
Publié: 2022-05-03En ce qui concerne l'expérience utilisateur, la vitesse est l'un des éléments les plus importants qui déterminent le succès de votre site Web de commerce électronique. Chaque seconde devient précieuse, à tel point qu'une amélioration d'une seconde de la vitesse de votre site Web peut augmenter les transactions mobiles de 27 %.
Il existe quelques moyens éprouvés et bien connus pour accélérer votre boutique en ligne. Vous trouverez de nombreuses ressources qui mentionnent l'optimisation de la taille des images, la lecture des requêtes HTTP et le changement de vos services d'hébergement.
Ce blog approfondit ces techniques et fournit des techniques sous-estimées utiles qui peuvent réellement entraîner une augmentation notable de la vitesse de votre site Web de commerce électronique. Commençons.
1. Évaluer les extensions tierces
Chaque magasin de commerce électronique doit utiliser des extensions tierces d'une manière ou d'une autre. Bien que l'incorporation d'un nombre quelconque d'extensions n'ait rien à voir avec la vitesse du site et que la plupart d'entre elles permettent de rationaliser les performances de votre boutique en ligne, il est toujours préférable de surveiller ces extensions.
Lorsqu'ils sont livrés avec une énorme quantité de fonctionnalités personnalisées, un code instable et un mauvais contenu, la vitesse du site diminue considérablement. Vous pouvez contrôler ces extensions en procédant comme suit :
- Reconnaître les scripts ou les balises signalés comme étant lents et les corriger via Chrome DevTools
- Essayez d'utiliser les instructions asynchrones/différées ou les conseils de ressources dans la mesure du possible pour réduire le temps de chargement
- Testez minutieusement chaque modification JS sur un site intermédiaire avant qu'elle ne soit mise en ligne
2. Améliorer le temps au premier octet (TTFB)
Bien que nous puissions tolérer les feux rouges et les fours à micro-ondes jusqu'à deux minutes, nous ne pouvons pas supporter d'attendre qu'une page Web se charge pendant moins de trois secondes. C'est là que le « time to first byte » (TTFB) devient crucial.
TTFB fonctionne comme un élément réactif. Il n'indique pas que le site se chargera plus rapidement, mais seulement qu'il commencera à le faire. Un TTFB faible, en revanche, indique généralement qu'un site est plus rapide et plus réactif.
Pour une bonne expérience utilisateur, un site qui répond rapidement aux clics est essentiel. En fait, la réactivité du site peut être plus importante pour le référencement que le temps nécessaire au site pour se charger complètement. Selon Google, un TTFB inférieur à 200 millisecondes est excellent. Cependant, la version la plus récente de son outil PageSpeed ne déclenche pas d'alerte à moins que le temps ne dépasse 600 millisecondes.
Il y a une multitude de choses à examiner pour comprendre ce qui cause le retard de votre TTFB. Si vous constatez que vos ressources mettent beaucoup de temps à produire l'octet initial, vous devez analyser le problème et apporter les modifications nécessaires pour améliorer la vitesse de votre site. Voici quelques-unes des raisons les plus courantes pour lesquelles votre TTFB est plus lent que d'habitude :
- Problèmes de mise en réseau
- Problèmes de capacité du serveur (limitations d'E/S de disque, de RAM et de réseau)
- Configuration et conception de la base de données
Vous pouvez incorporer la mise en cache du navigateur ou un réseau de diffusion de contenu (discuté plus loin) pour réduire considérablement le TTFB.
3. Utilisez la mise en cache du navigateur
Lorsqu'un navigateur met en cache des fichiers cruciaux qui composent votre site, on parle de mise en cache du navigateur. Cela signifie que lorsqu'un visiteur revient sur votre site, son navigateur n'aura pas à télécharger à nouveau tous les fichiers de vos serveurs. Il lui suffit de demander certains fichiers ou même des parties de pages individuelles susceptibles d'avoir été modifiées (comme l'image du logo). Le nombre de requêtes adressées au serveur étant réduit, cela augmente considérablement les temps de chargement.
L'ajout d'un court morceau de code à vos en-têtes HTTP pour établir des périodes d'expiration pour certains fichiers est une méthode relativement simple pour activer la mise en cache. Comme les pages sont fréquemment soumises à des ajustements urgents concernant les prix pendant les campagnes, les avis sur les produits, les informations de livraison fournies par les services de messagerie internationaux, etc., la mise en cache du navigateur peut être un peu difficile pour les marchands en ligne.
Par conséquent, il est essentiel de faire la distinction entre les fichiers qui fournissent un matériel véritablement stable (styles CSS, logos, navigation, etc.) et les fichiers dont le contenu est susceptible de changer. Ensuite, vous pouvez coder au besoin. N'oubliez pas qu'il est parfaitement facile d'écrire des éléments de page particuliers tels que des en-têtes et des pieds de page, ainsi que des fichiers plus volumineux (comme des feuilles de style CSS) qui ne sont pas sensibles au temps, et le simple fait d'activer leur mise en cache améliorera la vitesse du site.
4. Utilisez un réseau de diffusion de contenu (CDN)
Un réseau de diffusion de contenu peut être défini comme un ensemble de serveurs situés partout dans le monde. Ils sont chargés de distribuer la charge de livraison au serveur le plus proche de l'emplacement de l'utilisateur, ce qui se traduit par des expériences utilisateur locales plus rapides. Un CDN est un composant non négociable pour les performances de la plate-forme alors que de plus en plus d'entreprises de commerce électronique se lancent dans le monde.
Les fichiers de votre site Web seront copiés et stockés sur ces serveurs après l'utilisation d'un CDN. Lorsque des consommateurs de différents continents (ou même pays) visitent votre boutique en ligne, toutes les données sont chargées à partir du serveur le plus proche d'eux, ce qui permet au site Web de se charger beaucoup plus rapidement.
Un CDN est un excellent choix pour les sites de commerce électronique à fort trafic. Les PoP haute densité leur permettent d'offrir plus d'informations statiques et événementielles à partir du cache. En conséquence, votre efficacité d'accès au cache s'améliore jusqu'à 90 % à 98 %, ce qui permet une meilleure expérience pour vos utilisateurs. Il améliore également les classements des moteurs de recherche grâce au réglage des mesures de performance. Une connexion CDN facilite la maintenance à long terme du site Web et vise à améliorer la vitesse globale du site Web.
5. Essayez le chargement paresseux
Si un site Web prend quelques secondes à se charger, vous pouvez améliorer l'expérience utilisateur en accélérant le haut de la page. Le chargement différé est une méthode qui fonctionne bien pour les sites qui ont beaucoup de contenu sous la ligne de flottaison. L'API est adoptée par 17 % des sites Web, ce qui est un nombre important compte tenu de son lancement en 2019. Grâce au chargement paresseux, elle chargera d'abord les images à l'intérieur de l'écran, puis toutes les autres images plus tard.
L'utilisateur n'aura pas à attendre longtemps pour accéder au site Web et les photographies se chargeront dès qu'elles seront disponibles. Cela réduira considérablement le temps de chargement des articles contenant un grand nombre de photos. Il est simple de configurer ce plugin. Des plugins tels que Lazy load, BJ Lazy load, WP Rocket et autres sont disponibles.
6. Développer des AMP et des PWA
Avec 52% du trafic Internet provenant des smartphones, il est important d'optimiser vos boutiques e-commerce pour ces appareils. Les pages mobiles accélérées (AMP) et les applications Web progressives (PWA) ont facilité l'augmentation de la vitesse du site sur les appareils mobiles.
Google a construit le framework de développement AMP, qui se compose d'un sous-ensemble HTML (AMP HTML), d'un framework JavaScript et d'un CDN facultatif, pour permettre aux développeurs de fournir des pages mobiles ultra-rapides sans investir des ressources considérables dans l'optimisation de la vitesse. Bien que AMP ait été créé en pensant aux sites Web basés sur le contenu, il devient de plus en plus populaire parmi les boutiques en ligne.
Une Progressive Web App (PWA) est une application Web accessible à l'aide d'un navigateur mobile. Ils imitent de nombreuses fonctionnalités des applications, telles que l'accès via une icône sur l'écran d'accueil mobile, un meilleur engagement (jusqu'à 400 %) et des notifications push, mais sans obliger les utilisateurs à installer quoi que ce soit sur leur téléphone.
Emballer
Toutes ces astuces sous-estimées sont garanties pour vous armer des moyens les plus efficaces d'améliorer la vitesse de votre site Web. Vous devriez essayer d'intégrer ces éléments dans votre site Web de commerce électronique pour transformer le trafic en revenus, minimiser le taux de désabonnement et simplement ravir vos clients avec une expérience utilisateur exceptionnelle.