Site #ecommerce performant : les enjeux techniques

1. La part de la performance web au sein d’un site e-commerce
2. Les thèmes à aborder pour optimiser son site e-commerce
3. Le poids de vos données
4. La mise en cache
5. La construction de votre page
6. Le contexte de vos visiteurs

Si vous êtes e­commerçant, parmi vos préoccupations principales figurent certainement le développement de la visibilité de votre site web et l’optimisation de votre taux de conversion.

Vous avez probablement lu de nombreux articles sur ces sujets, mais savez­-vous que le temps de chargement est un facteur essentiel pour le succès d’un site web ?

La part de la performance web au sein d’un site e-commerce

Les taux de conversion et le trafic sont fortement influencés par le temps de chargement, comme le montrent les résultats suivants, collectés sur un panel de sites web en 2010 :­ ­

Source: 90­Minute Optimization Life Cycle

Vous pouvez ainsi constater un lien étroit entre les performances techniques et performances commerciales de votre site e­commerce.

Les thèmes à aborder pour optimiser son site e-commerce

Quelles notions se cachent derrière le terme “optimisation des performances web” ?

Comme évoqué plus tôt, le temps de chargement est un sujet technique. Son optimisation fait intervenir de nombreux sujets qui nécessitent souvent une expertise importante.

Il faut toutefois noter qu’un certain nombre de techniques, parfois simples à mettre en œuvre à l’aide de plugins par exemple, permettent des gains conséquents, et ce sans modifier en profondeur votre site, ni vous faire changer d’hébergement.

Découvrons donc quelques points de vigilance :

Le poids de vos données

L’affichage d’un site web par un internaute implique le transit de nombreuses données sur le réseau Internet. Ce volume de données va directement impacter le temps de chargement de la page. Plusieurs techniques permettent de limiter la quantité de données qui transitent sur le réseau, sans pour autant nuire aux contenus de votre site. On peut citer :

• l’optimisation des images: Premièrement il faut noter que le choix du format (JPEG, PNG, etc) est très impactant, et dépend des caractéristiques de l’image. De plus, sous leur forme brute les images comportent le plus souvent des informations inutiles pour une utilisation web. Des outils existent pour les optimiser; comme par exemple optipng ou jpegtran.
• la minification de vos ressources : envoyez uniquement à vos visiteurs les données textuelles utiles à l’interprétation de la page (suppression des commentaires de code, des tabulations et espaces qui figurent dans le code, etc)
• la compression des données : il est possible de communiquer des données sous une forme plus compacte que leur forme originale. Cela requiert une opération de compression (assurée par le serveur web) puis de décompression (assurée par le navigateur de l’internaute). Ce mécanisme requiert de la puissance de calcul, mais cela reste peu coûteux étant donné les gains dans la communication réseau (on peut citer le classique Gzip).

La mise en cache

Après avoir mis en place toutes les bonnes pratiques permettant de diminuer le poids des pages, vous atteignez un volume incompressible (à moins évidemment de supprimer des contenus ou des fonctionnalités).

Cependant il reste une solution très intéressante à ce niveau : la mise en cache.

En effet, quand un internaute consulte votre site, son navigateur web est capable de conserver un certain nombre de contenus, comme les images par exemple. Ainsi, lors d’une nouvelle visite, le navigateur web n’a pas besoin de retourner chercher l’intégralité des contenus : cela va considérablement accélérer le chargement de la page.

La construction de votre page

Les points précédents ont permis de limiter les volumes de données qui transitent entre vos internautes et votre serveur. Cependant, de nombreuses optimisations sont envisageables à d’autres niveaux. Tous les contenus de votre site n’ont pas la même importance. Il est nécessaire de savoir lesquels sont prioritaires pour votre utilisateur (est-­il grave que le widget social soit présent dès l’affichage de la page ? ou bien peut­-il être retardé ?). Une fois les priorités établies, il est possible de mettre en œuvre des techniques comme le lazy-loading, qui consiste à charger les éléments uniquement au moment où ils deviennent nécessaires (scroll de l’utilisateur par exemple). Ainsi, l’affichage initial de la page n’est pas pénalisé par ces derniers, et est donc accéléré. Pour en savoir plus sur la construction des pages pour la performance, vous pouvez consulter cet article.

Le contexte de vos visiteurs

Les techniques évoquées ci­-dessus rendent la navigation sur votre site plus rapide et fluide.
Mais il faut par ailleurs prendre en compte le contexte dans lequel vos visiteurs accèdent au site : depuis quelle localisation, avec quel périphérique, quel navigateur ? Par exempl