Vous prévoyez un replatforming de votre site Ecommerce, et vous comptez en profiter pour booster vos performances ? Excellent ! Pour vous aider sur ce chemin, nous vous avons préparé une check-list en 10 points clés sur lesquels nous vous recommandons de garder l'œil ouvert, avant et après la mise en production.
Pourquoi avant et après ? Parce que c’est une chose d’optimiser ses performances au moment d’une refonte, mais par expérience, nous savons qu’il n’est pas si simple de les maintenir dans la durée, notamment en ce qui concerne la vitesse de chargement.
Avant d’entrer dans le vif du sujet, rappelons en quoi la vitesse est cruciale pour votre plateforme Ecommerce.
L’importance évidente de la vitesse pour l’expérience utilisateur
La vitesse des pages web est cruciale pour l’expérience utilisateur. C’est l’exigence UX n°1, devant la qualité du design, selon une étude Google.
Outre l’expérience utilisateur, sachez que dans le retail, une autre étude de Google révèle qu’1 seconde de temps de chargement en plus peut faire baisser le taux de conversion de 20 % sur mobile. A l’inverse, économiser 0,1 seconde peut le faire augmenter de 8 %.
La lenteur d’une page web peut aussi faire fuir vos visiteurs, entraînant une augmentation de votre taux de rebond, et donc des pertes sur votre CA.
Concrètement, si une page web se charge en (source Deloitte) :
- 1 à 3 secondes, la probabilité de rebond est de 32 %
- 1 à 5 secondes, la probabilité de rebond est de 90 %
- 1 à 6 secondes, la probabilité de rebond est de 106 %
- 1 à 10 secondes, la probabilité de rebond est de 123 %
Et - fun & scary fact - une expérience montre que des pages web ralenties ont provoqué une augmentation de 38 % de la fréquence cardiaque d’utilisateurs de téléphone mobile, ce qui équivaut à l'anxiété ressentie lorsqu’on regarde un film d'horreur seul 😱
Vous aviez peut-être déjà conscience de ce lien entre expérience utilisateur et conversions, et de ce fait, si vous vous lancez dans un chantier de refonte ou de replatforming, ce n’est pas simplement pour que votre site soit “plus joli”.
Il y a très certainement des enjeux business et des attentes en termes de taux de conversion, et comme nous l’avons vu, cette variable est impactée par la vitesse de chargement. C’est pourquoi vos objectifs commerciaux et vos estimations de taux de conversion doivent être sous-tendus par des objectifs de performance !
En pratique, l’accélération des pages web a permis à la marque de prêt-à-porter Petit Bateau d’augmenter ses conversions de 10 %, et King Jouet de 5 %.
Par ailleurs, optimiser la vitesse de vos pages web peut faire baisser significativement le taux de rebond, c’est le cas de Villages Clubs du Soleil qui a réduit le sien de 20 %, grâce à notre solution d'optimisation des performances web.
Aussi, nous avons observé des taux de conversion améliorés de 32 % chez l’un de nos clients qui a également automatisé l’optimisation de ses temps de chargement.
La vitesse va donc bien au-delà du confort de navigation.
L’importance grandissante de la vitesse pour le SEO
Avec l’arrivée de la mise à jour Page Experience de Google, la vitesse prend encore un peu plus d’importance dans l’algorithme du moteur de recherche. En effet, de nouveaux indicateurs sont pris en compte pour évaluer la qualité de l’expérience utilisateur, qui s’invite dans l’univers du référencement.
Il s’agit des Core Web Vitals, 3 métriques qui mesurent la vitesse d’affichage (LCP), l’interactivité (FID) et la stabilité visuelle (CLS) (pour en savoir plus, consultez notre dossier complet sur les Core Web Vitals).
Ainsi, face à vos concurrents, si vos pages sont plus rapides, elles ont a priori plus de chances d’être mieux classées.
Par ailleurs, plus vos pages sont rapides, plus vous facilitez le travail d’indexation de Google. Nous avons pu l’observer avec Rue Du Commerce : l’amélioration de la vitesse de chargement a permis d’augmenter le nombre de pages crawlées pour ce géant du Ecommerce en France.
Vitesse et CMS ?
Mais revenons au sujet de la refonte : sachez que quelle que soit la solution de gestion des contenus que vous choisissez (Magento, Salesforce Commerce Cloud, Woo Commerce / WordPress, Hybris, Drupal, PrestaShop… ou CMS custom), il est important d’avoir conscience du fait votre CMS ne va pas rendre vos pages rapides Pourquoi ? Parce que votre CMS ne reste pas vierge, il accueille forcément des contenus (images, texte, vidéos…) et des outils marketing (Test A/B, outils de tracking, de recherche, de chat, de géolocalisation ou de personnalisation de contenus… et autres Third Parties, nous allons y revenir un peu plus tard). Ce sont tous ces éléments - souvent indispensables - qui font que vos pages vont prendre du poids et avoir besoin de générer des requêtes pour charger les éléments qui la composent.
Néanmoins, malgré ce contenu et ces services à valeur ajoutée, le ralentissement des pages n’est pas une fatalité.
Dans la check-list qui va suivre, voyons ce qu’il faut vérifier, et comment faire pour optimiser la vitesse d’affichage et l’interactivité sur votre site web, pour des utilisateurs et un Googlebot satisfaits de leur expérience.
Votre check-list web performance pour un site rapide
Pour commencer, si vous craignez que fixer des objectifs de vitesse ne ralentisse le déploiement de votre nouvelle plateforme, détrompez-vous !
N’oubliez pas que la performance est à intégrer à vos priorités dès le démarrage de votre projet de refonte, et pendant toute la durée de vie de votre site web.
Ce serait dommage de lancer un nouveau site web qui ne serait pas assez rapide, et dont vos visiteurs se détourneraient, frustrés, pour aller chez vos concurrents (en cas d'expérience négative, 43 % des visiteurs prévoient d’aller sur un site concurrent pour leur prochain achat).
1. Evaluez votre point de départ en matière de vitesse
Pour savoir d’où vous partez, mesurez la vitesse de vos pages et évaluez leur performance.
Vous pouvez vous concentrer sur des indicateurs tels que le poids des pages, des images, des Third Parties… Et observer des pages clés, ou établir des moyennes par types de pages (home, catégorie, produit…).
Des outils en ligne gratuits vous permettent de collecter ces données très facilement, comme par exemple WebPageTest, outil de référence dans la communauté webperf, dont nous expliquons comment lire les résultats dans cet article.
Sur WebPageTest, vous trouverez également des métriques de performance web telles que :
- le Speed Index (qui évalue la vitesse de chargement des éléments au-dessus de la ligne de flottaison),
- le Start Render et le First Contentful Paint (qui indiquent le moment où les premiers éléments apparaissent sur l’écran),
- les Core Web Vitals, dont nous parlions un peu plus tôt (qui comptent pour votre SEO).
Vous pouvez aussi observer votre score PageSpeed, Lighthouse, GTMetrix ou Dareboost et les suivre dans la durée.
Bref, “if you can’t measure it, you can’t improve it”.
2. Fixez des objectifs de performance et de vitesse
Une fois que vous avez identifié d’où vous partez, il vous reste à définir où vous allez. Pour cela, définissez des seuils de performance à atteindre ou à ne pas dépasser.
C’est ce qu’a fait l’un de nos clients : Rossignol s’est fixé pour objectif de diviser ses temps de chargement par 10 en moins de 6 mois - et les équipes y sont parvenu grâce aux recommandations délivrées dans notre audit de vitesse.
Ces objectifs étaient inscrits dans une démarche globale d'optimisation des taux de conversion que l'équipementier sportif a amélioré de 94 % en un an.
Vous pouvez aussi viser une place dans le classement webperf mobile mensuel du JDN, comme l’a fait l’éditeur de presse Uni-Médias qui a optimisé ses pages de façon à atteindre le niveau de performance du top 5.
Enfin, vous pouvez également vous appuyer sur un Budget performance.
Pour vous aider à préparer votre plan d’action, nous vous proposons une méthodologie pour estimer le temps et le budget à prévoir pour atteindre vos objectifs de vitesse si vous décidez de lancer les développements vous-mêmes.
Toutefois, si vous souhaitez que ces optimisations soient efficaces dans la durée, vous allez rapidement vous rendre compte que vous aurez tout intérêt à passer par une solution d’automatisation. C’est le constat qu’a fait But qui se repose désormais sur notre moteur, et évite ainsi de perdre du temps à recommencer régulièrement le même travail pour maintenir la vitesse de ses pages web.
Aussi, pour atteindre vos objectifs ou tenir votre Budget performance, ils doivent être partagés avec toutes les équipes : Technique, Marketing, Produit, E-commerce… afin que tout le monde travaille dans le même sens.
3. Profitez de votre refonte pour faire le point sur vos services tiers
Les Third Parties apportent de la valeur à votre site, et ils peuvent même être une source de revenus essentielle. Pourtant, si leur présence ne dégrade pas forcément la vitesse de vos pages, ils peuvent dans certains cas multiplier par 3 ou 4 le temps d’accès à une fonctionnalité.
Profitez de votre projet de refonte pour les lister, les hiérarchiser et les monitorer. C’est le moment de vérifier ce qu’apporte chaque service tiers. Vous vous rendrez peut-être compte que certains n’ont pas ou plus d’utilité, et que vous feriez mieux de les désactiver pour améliorer la performance et l’UX de votre site.
Votre refonte est aussi une bonne occasion de challenger vos fournisseurs de tiers ! Outre le management des scripts, vous avez aussi intérêt à comparer les solutions tierces en termes d’impact sur vos performances. C’est ce qu’a fait l’éditeur Cypok Medias, que nous avons accompagné pour optimiser la vitesse de ses pages web, et qui partage son retour d’expérience en tant que site dont le modèle économique repose essentiellement sur la publicité.
Pour manager efficacement vos services tiers, vous trouverez des conseils méthodologiques dans notre étude sur les Third Parties.
4. Revoyez votre stratégie de cache
A l’occasion de la nouvelle version de votre site, profitez-en pour revoir votre stratégie de cache. Cela fait partie des fondamentaux pour un site web performant. Vous réduisez ainsi le nombre de requêtes entre le serveur et le navigateur, et donc la latence.
Vos pages contiennent certainement du contenu statique et du contenu dynamique, c’est pourquoi vous devez miser sur un système de cache intelligent, qui vous permet de rendre les pages rapides grâce à une mise en cache, même si elles comportent des éléments personnalisés !
5. Optimisez vos images
Les images représentent en moyenne 50 % du poids des pages web. Dans certains secteurs d’activité, elles sont indispensables, et leur qualité doit être optimale pour favoriser une bonne image de marque et inciter à l’achat.
Pourtant, plus elles sont lourdes, plus elles entraînent de la latence. Alors, pour optimiser votre vitesse de chargement, vous devez réussir à compresser vos images sans perdre en qualité visuelle, voire les adapter selon la taille de l’écran.
Des solutions telles que des plugins sont proposées par certains CMS (comme WordPress), et pour aller plus loin, notre moteur permet de compresser intelligemment les images en plus des nombreuses autres fonctionnalités pour optimiser votre Frontend.
Voici un article détaillé pour vous familiariser avec le sujet de l'optimisation d’images.
6. Gérez vos redirections d’URL
Nouveau site, nouveau contenu… et peut-être un nouveau domaine ? Dans tous les cas, pensez à la mise en place de toutes les redirections d’URL nécessaires pour que vos utilisateurs retrouvent leur chemin vers les pages de votre site.
Google pourra aussi maintenir l’indexation de toutes vos pages même si l’URL est modifiée, et les liens présents sur d’autres plateformes (réseaux sociaux, partenaires, sites référents…) resteront valides.
Gagnez du temps pour traiter cet aspect de votre projet de refonte : sachez que notre moteur propose une fonctionnalité de réécriture et de redirection automatique des URL.
7. Auditez et renforcez votre sécurité
Prévoyez un audit complet de tous vos paramètres de sécurité et assurez-vous que vous disposez d'un pare-feu d'application Web (WAF) et d'une protection contre les robots malveillants (Fasterize propose un WAF parmi ses fonctionnalités).
Vérifiez aussi toutes vos règles de blocage et de limitation (par emplacement géographique, en-tête HTTP, URL de requête, user agent et IP client...), vos listes blanches, et toute autre règle qui régit l'accès à votre site.
Dans tous les cas, appuyez-vous sur des avis et conseils d’experts en sécurité plutôt que de vous lancer sans connaissances.
8. Testez régulièrement vos performances
Comme pour le SEO, la performance et la vitesse de votre site web doivent être observées et optimisées dans la durée. C’est impossible de rendre un site rapide “une bonne fois pour toutes”.
C’est d’ailleurs ce qu’à constaté Le Parisien : suite à une refonte permettant d’améliorer la vitesse de ses pages web, les performances se sont à nouveau dégradées de 25 % en près de 3 mois. L’équipe technique s’est donc tournée vers les experts webperf de Fasterize afin d’identifier les leviers d’amélioration pour remonter la pente.
9. Testez votre vitesse et vos tunnels de conversion en conditions réelles
Pour monitorer votre site sous toutes les coutures, soyez attentifs aux conditions de test. Pensez à effectuer des tests en conditions réelles, surtout en prévision des pics de trafic. Voici quelques conseils et techniques pour anticiper les pics de charge (notre moteur inclut une fonctionnalité pour automatiser la mise en place d’une page de débordement et soulager vos serveurs en cas de forte affluence).
Gardez aussi en tête que tous vos visiteurs ne sont pas forcément équipés d’appareils puissants sur des réseaux de qualité. Votre site offre certainement une expérience fluide sur un ordinateur en Wi-Fi, mais vous devez aussi penser à vos clients équipés de mobiles d’entrée de gamme en 3G.
Dans cet article, nous expliquons précisément les risques de JavaScript pour les mobiles d’entrée de gamme, mais aussi comment identifier les équipements de vos utilisateurs, et tester votre site pour vous assurer qu’il est bien Mobile First (un autre critère important pour Google).
Outre la vitesse, vous devez bien entendu tester l’ensemble des parcours, par tous les chemins possibles et sur tous les appareils, pour éliminer les frictions et les bugs.
Portez une attention particulière au checkout, les difficultés de navigation sont responsables de près de 20 % des abandons de panier. Vous n’avez sûrement pas déployé autant d’énergie et de moyens dans votre refonte pour perdre vos visiteurs si près de l’objectif final !
10. Détectez les anomalies, bugs et régressions de performance
Bugs techniques ou fonctionnels, Third Parties défaillants, problème de sécurité… Tout au long de son cycle de vie, votre site rencontre forcément des difficultés qui risquent de dégrader vos performances.
Equipez-vous de systèmes d’alerting pour détecter les anomalies en temps réel, et challengez régulièrement votre Budget performance et vos objectifs. Vous pourrez ainsi suivre les évolutions et les régressions de vos performances, et réagir au plus vite, avant que vos ventes ne soient affectées.
Un exemple à suivre si vous souhaitez gagner du temps : pour soulager ses équipes techniques, Celio a fait le choix de se reposer entièrement sur notre solution pour sécuriser sa plateforme, et assurer la disponibilité et la performance de son site Ecommerce, même pendant les pics de charge.
Refonte de site web : améliorer les performances… et les maintenir
La refonte d’un site web est un chantier complexe et fastidieux. Outre le socle technique, c’est l’occasion de partir sur de bonnes bases côté Frontend (compression des images, minification et concaténation des fichiers HTML, JS et CSS, mise en place d’une stratégie de cache, de techniques telles que le Lazyloading...). Mais il faut aussi savoir maintenir ces performances dans la durée pour garantir une expérience utilisateur optimale, faciliter le travail des moteurs de recherche, et prendre en compte l’usage toujours plus important du mobile. Et c’est là que le travail se corse.
Vous pouvez choisir de monitorer et optimiser la vitesse de votre site web en interne, mais évitez à tout prix les opérations commando !
Il faut savoir que maintenir la vitesse des pages nécessite des efforts en continu, et que cela implique aussi souvent de reprendre le même travail en cas de mise à jour ou d’évolution du site.
Alors, à moins d’avoir une équipe dédiée à la web performance, la meilleure option est de passer par une solution SaaS d’automatisation des optimisations Frontend telle que Fasterize. Vous avez ainsi l’assurance d’un site rapide en toutes circonstances, tout en permettant aux équipes techniques de se consacrer à des projets d’innovation et d’évolution de votre plateforme, au lieu de passer du temps à maintenir et réparer l’existant.
Par ailleurs, les optimisations s’articulent intelligemment les unes avec les autres, vous profitez des techniques les plus avancées en matière de performance web, et vous bénéficiez en plus d’un support et d’un accompagnement par des experts de la vitesse.
Le sujet vous intéresse ? Posez-nous vos questions ici !
Vous souhaitez en savoir plus sur la performance web
et ses impacts sur l’ensemble de votre stratégie digitale ?
