11 façons d'optimiser votre site de commerce électronique pour la vitesse

En tant qu'entreprise de commerce électronique, l'optimisation des performances de votre site devrait être l'une de vos principales priorités.

C'est parce que vos conversions sont directement affectées par la vitesse à laquelle vos pages se chargent. Les consommateurs d'aujourd'hui s'attendent à des sites incroyablement rapides. Si votre boutique en ligne est lente pour une raison quelconque, vous courez le risque de perdre des clients et, en fin de compte, des revenus.

En fait, vous perdrez 20% de vos visiteurs s'ils subissent un retard de 3 secondes dans le temps de chargement des pages, selon une étude de 2016 du groupe Aberdeen.

À quelle vitesse est rapide ? En moyenne, les sites Web mondiaux de vente au détail fonctionnant en 2017 entre le Black Friday et le 3 janvier étaient visuellement complets et prêts à l'emploi en 2,5 secondes, selon la société de gestion des performances numériques Dynatrace.

Voici quelques moyens clés pour vous assurer que votre site est optimisé pour la vitesse :

1. Limiter le nombre de recherches DNS

Chaque fois que votre site de commerce électronique se charge, le navigateur doit trouver l'adresse IP qui correspond à votre nom de domaine. C'est ce qu'on appelle une recherche DNS (système de noms de domaine).

Le navigateur doit rechercher votre domaine principal ainsi que tous les domaines de votre page qui proviennent d'une source externe, telle qu'un flux Twitter ou une vidéo YouTube intégrée. Par conséquent, réduire le nombre de requêtes vers des sources externes sur votre site minimisera les différentes recherches DNS que le client doit effectuer, ce qui pourrait retarder le chargement initial de la page. Au lieu de créer des hyperliens vers des images, par exemple, vous pouvez les héberger sur votre serveur à la place.

Vous pouvez également rechercher un fournisseur DNS plus rapide, modifier les valeurs TTL (durée de vie) pour tirer parti de la mise en cache DNS ou déplacer autant de ressources que possible vers un réseau de diffusion de contenu (nous en parlerons plus tard).

2. Investissez dans de meilleures recherches d'hébergement Web

Un hébergement Web fiable et rapide est un facteur critique pour la vitesse de votre site. Et tous les hébergeurs ne sont pas créés égaux. Vous voudrez trouver un service capable de gérer les pics importants de trafic Web et de transactions (comme lors d'un grand lancement de produit ou de la période du Black Friday au CyberMonday).

Il n'y a pas de pire destin pour un site de commerce électronique que d'être inaccessible aux visiteurs. Un bon service d'hébergement garantira une disponibilité de 99,5% ou plus. Un hôte premium promettra une disponibilité aussi élevée que 99,99%.

Sans aucun doute, vous aurez besoin d'une certification SSL et d'une adresse IP dédiée.

3. Compressez vos photos

Les images représentent 50 à 75 % du poids total de votre site Web, mais étonnamment, environ 45 % des 100 meilleurs sites de commerce électronique ne prennent pas la peine de compresser leurs images. Ils devraient et vous devriez. Vous pouvez opter pour une compression sans perte qui réduit la taille de votre fichier sans couper la qualité.

Vous devez toujours définir les dimensions de l'image dans votre code afin que le navigateur n'ait pas besoin d'attendre le rendu complet de votre image avant de passer à d'autres éléments de la page. Il laissera simplement une boîte avec les dimensions prédéfinies et continuera à charger le site.

Compressez vos images dans Photoshop ou utilisez un compresseur d'images tel que TinyPNG ou Kraken.io.

4. Priorisez le chargement au-dessus de la ligne de flottaison

Étant donné que le haut de votre site sera la première chose que vos visiteurs verront, il est logique que tout ce qui se trouve « au-dessus de la ligne de flottaison » se charge plus rapidement que le reste du site Web. Un autre terme pour ce processus est le chargement paresseux. Il est particulièrement utile pour accélérer les sites Web d'une seule page contenant beaucoup d'images, qui sont devenus un choix de conception populaire pour de nombreuses marques.

Pour obtenir des instructions sur la façon d'activer le chargement différé, cliquez ici.

5. Cachez votre page

Au lieu de forcer un utilisateur à télécharger chaque composant de chaque page à chaque visite, la mise en cache permet aux éléments globaux d'être mis en cache par le navigateur afin que seuls les nouveaux éléments nécessitent une demande du navigateur.

La mise en cache accélère votre temps de chargement car les éléments de page tels que les index de recherche de site, les informations de catalogue, les informations utilisateur, les blocs de la barre latérale, les instructions de mise en page et les fichiers de traduction sont stockés par le navigateur. Ces éléments restent généralement les mêmes sur chaque page, il n'est donc pas nécessaire que le navigateur demande ces ressources à chaque fois que le visiteur clique sur une nouvelle page.

Pour activer la mise en cache du navigateur, vous devez modifier vos en-têtes HTTP afin de définir des délais d'expiration plus longs pour certains types de fichiers. Voici quelques recommandations des développeurs de Google.

6. Réduisez les requêtes HTTP

Environ 80% du temps de réponse du site Web est consacré au téléchargement d'éléments pour le front-end tels que des images, des feuilles de style, des scripts, des éléments Flash, etc. La réduction du nombre d'éléments réduit le nombre de requêtes HTTP nécessaires pour restituer entièrement la page. .

La façon la plus simple de le faire est simplement de simplifier la conception de votre site Web. Mais ce n'est pas une option viable dans de nombreux cas. Vous pouvez utiliser des sprites CSS et des images cliquables pour combiner plusieurs images en une seule image et, par conséquent, réduire le nombre de demandes d'images. Vous pouvez également combiner toutes les feuilles de style dans un seul fichier et combiner tous les CSS dans une seule feuille de style.

7. Utilisez la compression Gzip

Lorsqu'un visiteur accède à votre site, une demande est adressée à votre serveur pour livrer les fichiers. Il est logique que plus les fichiers sont volumineux, plus il faudra de temps pour arriver à votre navigateur.

La compression Gzip permet à votre serveur de compresser les fichiers du site avant de les renvoyer au navigateur, réduisant considérablement le temps de transfert. En fait, gzip peut réduire la taille des pages et des feuilles de style de 90 % !

La compression est activée via la configuration du serveur Web. Chaque serveur Web aura des instructions différentes. Suivez ce tutoriel Google pour plus de détails.

8. Tirez parti d'un réseau de diffusion de contenu

Si vous êtes une entreprise mondiale de commerce électronique avec des visiteurs du monde entier, vous devez absolument utiliser un réseau de diffusion de contenu pour optimiser les performances de votre site. Un CDN fonctionne en répartissant les nœuds de serveur dans le monde entier afin que les visiteurs de votre site puissent télécharger des ressources mises en cache sur le nœud le plus proche d'eux, améliorant ainsi l'efficacité et réduisant la latence de chargement.

Les fournisseurs de CDN disposent de canaux de réseau plus grands, de plus de serveurs situés dans le monde et de capacités d'appairage de réseau que vous n'en avez probablement. De plus, ils disposent d'équipes dédiées qui surveillent et optimisent en permanence leur infrastructure.

Choisir le bon CDN peut être délicat. Commencez avec ce guide.

9. Minifiez votre code

La minification est le processus consistant à supprimer tous les caractères inutiles tels que les espaces blancs et les lignes de votre code source sans affecter ses fonctionnalités, permettant aux navigateurs de charger les pages plus rapidement. Le processus implique des fichiers HTML, CSS et JavaScript et peut faire une grande différence pour accélérer vos temps de chargement. La minification réduit à la fois la taille de vos fichiers ainsi que le nombre de fichiers nécessaires.

Suivez ces ressources pour nettoyer votre code et faciliter le rendu de votre page par les navigateurs.

10. Utiliser le chargement asynchrone

Lorsqu'un navigateur charge une page, elle se déplace de haut en bas. Vous pouvez accélérer les choses en permettant à vos scripts tels que CSS et Javascript de se charger simultanément. C'est ce qu'on appelle le chargement asynchrone. Si vos scripts se chargent de manière synchrone, ils se chargent dans l'ordre dans lequel ils apparaissent sur la page, ce qui peut être un processus plus lent.

Suivez ce guide pour une compréhension de base de la façon d'activer le chargement asynchrone.

11. Surveillez en permanence la vitesse de votre site

Enfin, nous terminerons là où nous avons commencé : vous devez faire de la performance du site une priorité chaque jour. Cela signifie que vous devez surveiller en permanence votre site pour détecter les problèmes et rechercher des moyens d'optimiser la vitesse et l'efficacité.

PageSpeed ​​Insights de Google offre un bon outil pour analyser la vitesse de votre site sur mobile et ordinateur de bureau.

Un autre excellent outil pour examiner la vitesse du site est disponible auprès de Pingdom.

N'oubliez pas cette règle empirique : pour chaque seconde de plus qu'il faut à votre site pour se charger, vous perdrez 10 % de vos visiteurs. Aie.