5 priorités pour une refonte web réussie... et payante

La vitesse n'est pas seulement une question de confort, c'est un enjeu pour le taux de transformation. 20% des abandons de panier s'expliquent par des difficultés de navigation. La webperf devient un élément stratégique.

Redesign, optimisations UX pour maximiser les conversions, ajout de fonctionnalités pour améliorer l'expérience client, nouvelle stack technique pour plus de maintenabilité… Une refonte peut entraîner des investissements conséquents en termes de budget et d'énergie avec, naturellement, des attentes proportionnelles en matière de ROI. Mais comment tirer le meilleur parti d'une refonte et parvenir aux objectifs de performance fixés ? Un indice : la vitesse doit être au centre des priorités.

En effet, des études de Google révèlent que la vitesse est le critère UX le plus important pour les internautes, loin devant les qualités esthétiques, ou encore la facilité à trouver les informations recherchées ; par ailleurs, si au bout de 3 secondes le contenu d’une page ne s’affiche pas sur mobile, 53% des internautes quittent le site et ne reviennent pas. 

Aussi, les difficultés de navigation font partie des raisons principales pour lesquelles les visiteurs interrompent leurs achats (c’est la cause de près de 20% des abandons de panier selon une étude ComScore). Bref, la vitesse n’est pas seulement une question de confort, c’est un enjeu pour les taux de transformation et le CA. Et ce n’est pas tout, la vitesse devient aussi un critère pour le SEO puisque Google intègre 3 indicateurs de vitesse à son algorithme de classement. Ils sont regroupés sous le nom de Core Web Vitals, et permettent de mesurer la qualité de l’UX en prenant en compte la vitesse de chargement, notamment en évaluant l’affichage, l’interactivité et la stabilité visuelle.

Comme les frontières entre la web performance (ou webperf, soit toutes les techniques qui permettent d’accélérer un site web), le SEO et l’UX sont de plus en plus poreuses, penser “webperf by design” lors d’un projet de refonte, c’est l’assurance d’un site qui propose une expérience d’une qualité incomparable.

1. Soigner le design et optimiser les images

Une refonte est bien évidemment l’occasion de revoir le design graphique d’un site ainsi que son interface. Pour cela, les images ont un rôle important à jouer. D’ailleurs, elles prennent de plus en plus de place, et elles sont même indispensables pour illustrer des produits ou apporter des informations. Elles représentent en moyenne 50% du poids des pages, et parfois bien au-delà ! 

Pour conserver des pages rapides malgré la présence d’images, des techniques d’optimisation sont à portée de main, voici quelques exemples :

• La compression : elle permet de réduire le poids des images tout en préservant leur qualité visuelle (Trivago a réussi à réduire le poids de ses images de 80% grâce à une solution dédiée).
• Le Progressive JPEG : cette technique permet d’afficher rapidement les images, d’abord en basse qualité, puis en qualité optimale, ce qui est utile pour les grandes images qui peuvent alors apparaître plus vite dans le navigateur.
• Le Lazyloading : il s’agit de charger seulement ce qui est visible dans le viewport, plutôt que l’ensemble de la page, ce qui facilite un affichage rapide des éléments visibles par l’utilisateur.
• Les formats d’image de nouvelle génération : par exemple WebP, ou encore plus récemment AVIF qui offre de bien meilleures performances pour les temps de chargement avec des fichiers plus légers mais aussi de meilleure qualité.

2. Nettoyer et optimiser le code

Qu’il s’agisse d’un changement total de plateforme ou d’une optimisation de l’existant, il faut profiter d’une refonte pour faire le ménage. Comme pour les images, les fichiers CSS, JavaScript et HTML qui composent une page doivent être aussi légers que possible pour permettre un chargement rapide. Comment faire ? Voici deux techniques incontournables pour améliorer les temps de chargement :

• Concaténer les fichiers JS et CSS pour réduire le nombre de requêtes entre le serveur et le navigateur (limiter les allers-retours permet évidemment de gagner du temps),
• Minifier les fichiers HTML, JS et CSS, afin d’y supprimer tous les caractères inutiles, et ainsi réduire leur poids.

3. Monitorer et manager les scripts tiers

94% des sites web contiennent des scripts tiers (ou third parties) : pubs, trackers, web analytics, test A/B, modules de chat… Ils apportent de la valeur, mais ils peuvent aussi multiplier par deux ou trois le temps d’accès à une fonctionnalité (notre étude sur le sujet est à consulter ici). Il faut aussi veiller à ne charger que ce qui est réellement utile et utilisé (tree shaking, lazyloading, ...)

En termes d’impact sur la vitesse des pages, tous les third parties ne se valent pas, et ils ne sont pas non plus systématiquement responsables des lenteurs. Aussi, plus un site est rapide, plus il peut absorber facilement les millisecondes nécessaires aux tiers pour se charger et s’exécuter !

Alors, pour conserver des pages rapides, surveiller les tiers s’impose :

• Ceux qui ne sont pas utilisés doivent être identifiés et supprimés,
• Ceux qui sont utiles doivent pouvoir être désactivés à tout moment. Par exemple, si un tiers ne fonctionne plus pendant une période telle que le Black Friday, les soldes ou Noël, ils doivent pouvoir être désactivés. Ainsi, ils ne sont un un risque ni pour la vitesse du site, ni pour le tunnel d’achat en général.

4. Soigner la version mobile 

La version mobile des pages d’un site web doit aussi être une priorité. L’usage du mobile ne cesse d’augmenter. Selon une étude Statista, entre 2011 et 2018, la part des Français disposant d’un smartphone est passée de 17 à 75%.

Il faut savoir que la vitesse est plus difficile à optimiser sur les devices mobiles car les conditions de navigation sont plus aléatoires (qualité du réseau, puissance du téléphone…). Pourtant dans le secteur du retail, 1 seconde de chargement en plus peut faire baisser le taux de conversion jusqu’à 20%, toujours selon une étude Google. 

La vitesse des pages sur mobile doit être considérée avec la plus grande attention pour offrir une expérience optimale à tous les utilisateurs, quelles que soient leurs conditions de navigation et leur équipement. C’est d’autant plus important que Google est passé à un mode d’indexation Mobile First, c’est-à-dire qu’il crawle d’abord les pages comme s’il était un mobile. La vitesse sur mobile est donc autant un sujet UX que SEO.

Enfin, tester la vitesse sur des mobiles d’entrée de gamme est indispensable (notamment autour de JavaScript), car tous les utilisateurs ne sont pas forcément équipés des modèles les plus récents ou les plus puissants, et il faut en tenir compte. Alors, petit conseil : si ce n'est pas déjà fait, observez les devices les plus utilisés par vos visiteurs.

5. Définir une stratégie de cache et adopter un système de cache intelligent

Il existe trois types de cache : côté serveur (origine), navigateur, ou CDN (Content Delivery Network, pour rapprocher le contenu des utilisateurs). Une stratégie de cache consiste notamment à définir quel cache conserve quelles données pour combien de temps et comment ces caches sont mis à jour.

En pratique, un site comporte :

• Des contenus statiques, qui restent identiques pour tous les utilisateurs et qui peuvent donc être mis en cache,
• Des contenus dynamiques : paniers d’achat, contenus personnalisés en fonction de la zone géographique, des préférences enregistrées… Ces données sont différentes d’un utilisateur à l’autre et peuvent évoluer en cours de navigation, ce qui rend leur mise en cache complexe voire inappropriée.

La mise en cache est une technique à la fois essentielle et basique, mais sa gestion peut se révéler délicate sur des pages dynamiques. La tendance est aux contenus de plus en plus personnalisés pour mieux répondre aux attentes des clients, et ça ne doit pas être un frein pour optimiser les temps de chargement. En effet, grâce à un système de cache intelligent, les contenus statiques et les contenus dynamiques peuvent être distingués et correctement mis en cache.

La refonte : le bon moment pour optimiser durablement les temps de chargement

Une refonte est le moment idéal pour mettre en place toutes ces bonnes pratiques et techniques webperf, et décupler l’impact des efforts déployés pour un site plus performant. Les optimisations webperf peuvent être appliquées en interne, via l’installation de plugins selon le CMS, ou confiées à un prestataire externe. Mais attention, exactement comme pour le SEO, accélérer un site web et conserver de bons temps de chargement est un travail de longue haleine, et non un chantier à mener comme une opération commando.

Une refonte est un point de départ pour prendre de “bonnes résolutions” pour améliorer la vitesse, et comme toutes les bonnes résolutions… elles doivent être pérennes. En effet, pour que ces efforts soient payants à terme, toutes les équipes (DSI, marketing, e-commerce, Produit…) doivent penser “webperf by design” dans la durée. C’est pourquoi il y a tout intérêt à automatiser au maximum les bonnes pratiques et les techniques webperf. C’est le meilleur moyen pour gagner du temps et éviter de recommencer régulièrement le même travail. Il ne reste plus qu’à passer à l’action !