Améliorer le temps de chargement d’un site web

D’après plusieurs études réalisées par les entreprises Akamaï et Gomez[1] (spécialistes dans la mise à disposition de serveurs de cache[2]), au-delà de 3 secondes de temps de chargement d’une page web, 40% des internautes l’auront quittée, ce qui peut représenter un manque à gagner significatif, notamment pour les entreprises de e-commerce.
Le temps de chargement d’une page Internet est donc une composante essentielle de la satisfaction client.
Dans une volonté d’avoir des sites Internet de plus en plus centrés sur le client, les entreprises de e-commerce ne doivent plus se contenter de proposer des produits de qualité, mais elles doivent bien penser le parcours-client.

Pour comprendre pourquoi  une page internet met autant de temps à se charger, il faut d’abord voir en détails comment elle fonctionne.

Lorsqu’un internaute tape l’URL d’un site web, le DNS (Domain Name System) va permettre de retrouver l’adresse IP du serveur correspondant. La requête va se diriger vers le serveur web, qui va répondre par différents objets : le HTML, le CSS, les images, le Java Script, les polices d’écritures, etc…
Ainsi, les premiers éléments de la page vont s’afficher petit à petit, pendant que le DOM (Document Object Model – le squelette du site internet) se charge. C’est grâce à lui que l’on sait où doit s’afficher chaque objet.

Lorsque cette étape est réalisée, les derniers scripts s’exécutent, et cette étape finie, on considère alors que la page est chargée.
C’est donc l’ensemble de ces étapes qui affectent le temps de chargement d’une page web.

Les KPI décrites ci-dessous correspondent aux attentes du marché, et permettent donc d’atteindre ses objectifs de temps de chargement.

Les règles à suivre ou KPI

Aujourd’hui, l’objectif de chargement d’une page web entière doit être de 3 secondes en version bureau, 5 secondes en mobile 4G, et 10 secondes en mobile 3G.
Deux autres notions sont également importantes :

• Le start render, c’est-à-dire le temps avant début du rendu : c’est le temps mesuré entre le début de la requête de l’utilisateur et l’affichage du premier élément de la page (image, texte, etc…)
• Le Speed Index, qui est une métrique de Google, est le temps moyen pour que chaque partie visible d’une page puisse s’afficher (valeur en milliseconde)

Les différents objectifs à atteindre, selon les mêmes études d’Akamaï et Gomez (attente pour un client se connectant pour la première fois sur le site), sont les suivants :

Trending

SCIM : un standard de l’approvisionnement d’identités

Ainsi, lors de la création d’un nouveau site Internet, la première étape est de réfléchir au poids de chaque page du site. Il faut prévoir un poids de 1,5 Mo pour une page affichée sur un site classique, et 1 Mo pour une page affichée sur un site mobile.
Les règles à suivre [1] sont les suivantes :

Suivre ces recommandations permettra à la page web de se charger dans les temps attendus par les visiteurs du site.

Les actions à mener pour améliorer son temps de chargement

Il y a plusieurs actions à mener du côté des images, du Java Script, du réseau, du serveur, du CSS ainsi que des polices de caractères pour améliorer les performances d’un site Internet.

Le traitement des images
L’idée est d’utiliser le moins d’images possible, et les images les moins lourdes possible. Dans ce domaine, le credo est donc le suivant : des images plus légères et moins nombreuses. Ainsi, chaque image devrait peser moins de 100 Ko.
Côté format, le JPEG est préconisé, car son poids est significativement moins important que celui des autres formats disponibles. (Les PNG peuvent être utilisés s’il y a des effets de transparences sur une image, mais cela a des conséquences sur son poids). Les JPEG progressives sont aussi intéressantes car elles permettent un affichage beaucoup plus rapide pour les visiteurs, notamment ceux ayant une connexion internet bas débit :

L’image située à droite va s’afficher directement, dans une moins bonne qualité, et va devenir de plus en plus précise durant son chargement. A l’inverse, le JPEG « classique » (à gauche) va se charger petit à petit mais aura une qualité optimale dès le départ.

Il existe de nombreux logiciels ou sites qui peuvent aider à optimiser les images, par exemple le site kraken.io, en améliorant par exemple le poids des images. Attention, cependant, à ne pas aller trop loin dans l’optimisation : cela pourrait accentuer la pixellisation des images.

Image optimisée :

Image trop optimisée :

Un autre point d’attention est le dimensionnement des images selon l’appareil utilisé : mobile ou ordinateur. Il ne faut pas que la même image soit affichée pour le desktop et pour le mobile. Sinon, en plus de charger une image plus lourde, le mobile devra redimensionner l’image pour qu’elle soit visible, ce qui influera d’autant sur le temps de chargement de la page. Dans ce cas, il est conseillé d’utiliser un DIS (Dynamic Image Service). Enfin, il est important de mettre en place une logique de lazyloading : cette technique permet de prioriser l’affichage des images, et donc d’afficher en premier lieu celles qui se trouvent au-dessus de la ligne de flottaison (la partie visible lorsque l’on arrive sur la page). L’idée est donc de ne pas charger toutes les images dès le début, mais de charger la page par morceaux, dépendamment des actions du visiteur.

L’utilisation de third-parties et de scripts

Un autre moyen pour optimiser les performances d’un site Internet est de surveiller l’utilisation des scripts ou de third-parties sur son site (fonctionnalités proposées par des agences externes).

Les third-parties permettent de proposer de nouvelles fonctionnalités aux visiteurs du site Internet, et peuvent donc faire la différence avec les sites concurrents. Cependant, chaque third-partie, selon la façon dont elle s’intègre au site et/ou si elle nécessite l’ajout de fichiers (ajoutant ainsi un poids supplémentaire), peut impacter les performances d’affichage du site Internet.
Par exemple, l’ajout d’un outil permettant l’affichage en temps réel d’images de clients arborant les produits vendus par l’entreprise, intéressant pour la communication de la marque, peut avoir un impact de plusieurs secondes sur le temps de chargement du site. Il est donc primordial d’étudier le ratio avantages/inconvénients des third parties.

Outre les thirds parties, il est important de repasser régulièrement sur les scripts associés au site web afin de vérifier la pertinence de leur utilisation. En effet, certaines fonctionnalités utilisées les mois précédents, peuvent ne plus être d’actualité. Certains outils de développeur, comme Chrome, permettent de consulter le taux d’utilisation des scripts, et permettent d’avoir un ordre d’idée sur les fichiers à retravailler :

En rouge, il est indiqué le pourcentage des fichiers du script qui ne sont pas utilisés, et en vert le pourcentage du fichier utilisé.
Ainsi, il est facile de retrouver les fichiers qui sont presque inutilisés, et d’étudier l’intérêt du maintien de ces scripts. Dans l’exemple ci-dessus, le premier fichier est particulièrement peu utilisé, il serait intéressant de l’optimiser.

Enfin, pour  optimiser au maximum scripts et third parties, il est conseillé de distinguer ceux dont l’utilisation est nécessaire dès le début du chargement du site et ceux qui peuvent attendre la fin du chargement.
Par exemple, une third party de notation de produits utilise un système de notation allant de 1 à 5 étoiles, donnant rapidement un avis sur la qualité du produit. Cette fonctionnalité peut être considérée comme importante pour le site, mais n’est pas forcément nécessaire au début du chargement de la page. Ainsi, il est possible de retarder son chargement, à l’aide du mot clé « defer » ou « async ».
Dans ce cas, les étoiles de notations ne seront disponibles qu’à la fin du chargement de la page, et non plus au début. En contrepartie, les autres éléments du site s’afficheront plus rapidement.

L’optimisation des serveurs

Côté serveur, plusieurs optimisations sont nécessaires afin d’assurer un temps de chargement correct.
D’abord, le passage de toutes les requêtes en HTTP2 est un prérequis. En effet, contrairement à l’HTTP1, sa version 2 permet d’effectuer plusieurs requêtes en parallèle, et non plus par queue. Par exemple, alors qu’en HTTP1, chaque image sera chargée à la suite des autres, en HTTP2, toutes les images seront chargées en même temps.

Autre optimisation possible : l’activation de la compression GZIP.
De la même manière que la compression communément utilisée pour l’envoi de dossiers volumineux, la compression GZIP côté serveur va permettre de réduire le poids des ressources du site (HTML, CSS, script, etc…). Côté client, les ressources seront décompressées puis affichées sur le navigateur.
En plus de cette compression, la deuxième étape pour réduire le poids de ces ressources est la minification.
La minification consiste à réduire le poids des ressources, en supprimant toute la partie superflue du code pour les machines. Ainsi, la minification va supprimer tous les commentaires dans le code, les espaces, les sauts de lignes, le nom des variables pour ne correspondre qu’à une seule lettre, etc…
L’ensemble de ces actions va également permettre de gagner de précieux Kilos octets.

Dans le cas de visiteurs réguliers du site web, il est préférable de mettre en place une politique de cache. Le cache intégré dans le navigateur de l’internaute va permettre de conserver en mémoire une grande partie des ressources du site, et éviter de devoir recharger l’ensemble de la page à chaque fois.
Ainsi, il y a un double gain : moins de charge serveur, et moins de charge client.

En suivant l’ensemble de ces bonnes pratiques, un site web de e-commerce devrait atteindre des performances d’affichage satisfaisantes pour ses visiteurs. L’optimisation du poids des images et la mise en place de lazyloading sont des problématiques que l’on retrouve très souvent sur un site considéré comme lent sur la version bureau, et encore plus sur la version mobile.

Le sujet de la performance se doit à la fois d’être réfléchi en amont lors de la phase projet, mais aussi pendant toute la vie du site. Il est bien plus facile de dégrader des performances que de les améliorer.
Il est donc conseillé de mettre en place des outils de monitoring, afin d’aider les équipes RUN à traquer les performances. Lors d’évolutions du site, il est important de sensibiliser les équipes métier à ce type de problématique.

Néanmoins, il ne faut pas oublier que le temps de chargement est un sujet théorique, et certains sites peuvent avoir des problèmes de lenteur bien spécifiques, et qui peuvent dépasser les éléments d’optimisations mis en avant dans cet article.

Enfin, les sites mobiles deviennent de plus en plus primordiaux pour les sites e-commerce, dépassant le trafic sur site classique. Il peut être intéressant de réfléchir à la mise en place de nouvelles technologies qui ont pour but d’accélérer le chargement sur ce type de support. Par exemple, la technologie Google AMP (Accelered Mobile Page), en plus de fournir des outils optimisés mobiles, oblige les développeurs à suivre de bonnes pratiques. Les temps de chargement sont alors facilement divisés par deux.

Grâce à son expertise, HeadMind Partners Business Consulting est capable d’accompagner ses clients dans leurs projets E-commerce, qu’il s’agisse de la définition d’une stratégie ou de la création ou refonte d’un site de e-commerce.

Article écrit par Lou-Evans DESVAUX, Associate consultant

[1] https://www.performancebudget.io

[1] https://neilpatel.com/blog/loading-time/?wide=1

[2] La mise en cache permet d’accélérer le chargement d’une page web