A/B testing : ces secondes de chargement qui coûtent des millions

A/B testing : ces secondes de chargement qui coûtent des millions

Personne n’aime un site lent.

Vos visiteurs disposent de terminaux rapides et n’apprécient pas d’attendre injustement lorsqu’ils naviguent sur votre site. Nous avons tous beaucoup à faire (et trop peu de temps pour y parvenir, mais c’est un autre problème).

Cela peut sembler anodin, mais une petite seconde de chargement peut affecter votre taux de conversion. Le problème ? Des sommes astronomiques de manque à gagner chaque année. Une seconde de chargement supplémentaire sur Amazon entrainerait par exemple une perte de 1,6 milliards de dollars par an !

J’ai votre attention ?

Interesting - Temps de chargement

Dans cet article, je souligne les conséquences d’un temps de chargement trop long sur votre stratégie d’optimisation de la conversion et vous propose des pistes pour ne plus subir ce fléau.

Temps de lecture : 9 minutes.

Comment se décompose la vitesse de chargement d’un site ?

Il faut bien distinguer le temps de chargement du temps d’affichage.

  • Le temps de chargement : cela représente le temps nécessaire pour télécharger tous les éléments d’une page. Le poids des fichiers et la qualité de la connexion des visiteurs sont concernés. Vous n’avez aucune emprise sur la connexion de vos visiteurs, mais vous pouvez optimiser la taille de vos fichiers pour qu’ils soient plus rapides à charger.
  • Le temps d’affichage : c’est le temps nécessaire pour afficher les éléments téléchargés sur le navigateur du visiteur. Le code de votre site et le terminal utilisé par le visiteur sont responsables. À nouveau, vous n’êtes pas responsable de la qualité du terminal utilisé par vos visiteurs (bien que vous devez vous assurer que les éléments de votre site soient compatibles avec tous les terminaux), mais vous avez le contrôle de la qualité de votre code.

Quelle vitesse de chargement faut-il viser ?

Vous ne pouvez pas atteindre l’immédiateté théorique. Pour autant, la tendance indique que vous ne devriez pas excéder 3 secondes.

Strangeloop rapporte qu’une seconde de délai diminue vos conversions de 7%.

Le temps, c’est de l’argent. Et si un visiteur doit attendre longtemps pour que vos pages chargent, vous le perdrez.

Pourcentages - temps de chargement

Après avoir analysé le temps de chargement de près de 2000 sites e-commerces, Strangeloop indique pourtant que la vitesse moyenne de chargement est de 10 secondes, tant les pages sont complexes. Vous l’avez compris, c’est beaucoup trop.

Ce n’est pas tout.

No way - temps de chargement

Vous devez aussi prendre en compte la vitesse du chargement de vos pages sur mobile.

Le mobile : nouvelle corde sensible de votre croissance web

Il représente plus de la moitié du trafic en France en 2017. Il est devenu un point d’entrée essentiel. Pourtant, une majorité de nos clients nous rapporte que le taux de conversion mobile est encore loin de celui observé sur desktop.

Par ailleurs, une étude Google indique que 61% des mobinautes utilisent leur téléphone pour effectuer des recherches pour ensuite passer une commande cross-canal sur desktop.

Or, sur mobile, on tend à être (encore) plus impatient que sur desktop. Près de 9 mobinautes sur 10 attendent en effet qu’une page web charge au moins aussi rapidement sur mobile que sur desktop.

Mobile - temps de chargement

Mais tout le monde n’a pas la patience de CK Louis…

J’ai pu en faire l’expérience il y a quelques semaines. En déplacement dans une zone à la couverture réseau relativement faible, j’ai dû attendre plusieurs dizaines de secondes pour lancer une vidéo YouTube

Wait - Temps de chargement

Moralité ? Pensez l’expérience de navigation de façon à satisfaire vos visiteurs plutôt que de les frustrer. Et si vous proposez une expérience mobile à part entière, ne misez pas uniquement sur le support vidéo.

Comment savoir si mon site est lent ?

Pour tester la vitesse de chargement des pages de votre site, je ne peux que vous conseiller Toolspingdom.com, qui saura identifier en quelques secondes les éléments d’une page qui demandent du temps pour charger.

Beaucoup d’internautes se forgent une opinion sur une enseigne une fois confrontés à la vitesse d’affichage de son site. Une étude CDNetworks indique que 71% des internautes sont moins enclins à faire confiance à une marque dont le site est lent.

Comment rendre votre site plus rapide ?

Loin de moi l’envie de vous laisser dans le doute, je vous propose 8 astuces pour réduire le temps de chargement et optimiser la vitesse d’affichage de vos pages. Ces astuces sont indépendantes les unes des autres et vous n’êtes pas forcés de toutes les mettre à exécution. Cela dit, je vous y invite fortement si vous voulez grappiller quelques dixièmes de seconde ça et là.

Optimiser la vitesse d’affichage des éléments

La vitesse d’affichage des éléments dépend en partie de l’ergonomie de vos pages. Pour réaliser cet exercice, une solution d’A/B testing comme Kameleoon peut vous aider à mener à bien votre stratégie d’optimisation.

L’ennemi juré de l’A/B testing – L’effet flicker

L’A/B testing repose sur une rigueur mathématique irréprochable. Sa promesse est de vous faire découvrir quelle version d’une page fonctionne le mieux auprès de vos visiteurs (en fonction des objectifs que vous souhaitez atteindre).

Or, le temps d’affichage d’une page testée peut ruiner vos efforts. En cause, l’effet flicker (ou effet de clignotement). On parle d’effet flicker lorsque la variante est chargée après l’affichage de la page originale.

Flicker - Temps de chargement

Les conséquences peuvent être lourdes. Confronté à l’effet flicker, un visiteur peut se rendre compte qu’il est sujet à un test A/B ou pire, peut apercevoir une offre promotionnelle qui ne lui était pas destinée. La peine est triple :

  • Le visiteur peut perdre confiance en votre marque …
  • … et quitter votre site
  • Invalider vos tests A/B et vous faire perdre du temps et de l’argent.

Simon Chatelain - Temps de chargementDans la mesure du possible, restez sur la version synchrone du script pour éviter ce problème. Nous savons que certaines équipes IT s’opposent au chargement synchrone d’un script externe. L’option alternative est une intégration asynchrone qui peut causer un effet flicker”.

Simon Chatelain, Consultant Kameleoon.

Conscientes de cet enjeu, les équipes de Kameleoon ont développé un anti-flicker qui assure une expérience dénuée de tout clignotement que l’intégration soit synchrone ou asynchrone.

Pour les utilisateurs de Kameleoon : suivez notre guide d’installation du script Kameleoon.

Priorisez le contenu situé au-dessus de votre ligne de flottaison

Vous l’avez lu plus haut, une page d’un site e-commerce demande environ 10 secondes pour charger intégralement.

C’est le haut de la page qui s’affiche en premier aux yeux de vos visiteurs. Vous devez vous assurer que les éléments qui s’y trouvent chargent très vite.

Si les éléments situés sous votre ligne de flottaison demandent plus de temps pour charger, ce n’est pas si grave puisque ce ne sont pas les éléments que l’on remarquera en premier.

Frédéric de Todaro - Temps de chargement“Le cœur de votre message doit se trouver au-dessus de votre ligne de flottaison. C’est la stratégie adoptée par les équipes de Routard.com lorsqu’elles ont souhaité réaliser une refonte totale de leur page d’accueil”. 

Frédéric de Todaro, Head of Consulting, Kameleoon

Routard - Temps de chargement

La mise en place d’un test A/B a révélé un taux de rebond inférieur de 14% avec la variante B de la page web (à droite). Plus épurée, cette version place les informations les plus importantes en haut de page (destination et moteur de recherche).

Frédéric de Todaro - Temps de chargement“Priorisez également les scripts de votre page par ordre d’importance. Si vous faites de l’A/B testing, privilégiez le script de votre solution pour éviter tout problème de flickering”.

Frédéric de Todaro, Head of Consulting, Kameleoon

Réduire le temps de chargement

Compressez votre site

C’est une technique très répandue et il y a de fortes chances pour que votre site l’exploite déjà. Vérifiez le à cette adresse.

Si ce n’est pas déjà fait, vous devez le faire.

L’idée est de transformer vos fichiers (html, php, txt, etc.) en zip et d’en réduire jusqu’à 70% du poids sans réduire la qualité de vos images et vidéos.

Sur Apache :

Vous pouvez activer la compression en ajoutant ces quelques lignes de code dans votre fichier .htaccess.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

 

Vous n’utilisez pas Apache ? Il existe aussi un tutoriel pour votre serveur :

Si vous utilisez un autre serveur, renseignez-vous directement auprès de l’éditeur de la solution.

Optimisez vos images

Préoccupez vous de 3 éléments :

    • Le format : pour le web, privilégiez le format PNG. Évitez en revanche les images aux formats TIFF, BMP ou XBM.
    • La taille : plus une image est lourde, plus elle demande du temps pour charger, logique. Il existe de nombreuses solutions gratuites en ligne pour réduire la taille de vos images (Tinypng, compresspng, etc.) sans perdre en qualité. Par ailleurs, évitez d’uploader des visuels larges de plusieurs milliers de pixels sur une page web de 700 pixels de largeur.
    • La source : c’est le nom et la source de votre image.
      ex : <img src= »Kameleoon.png » alt= »Bienvenue ! » >Si cet élément est mauvais, l’image ne s’affichera pas du tout. 

Si vous utilisez WordPress, vous pouvez utiliser le plugin WP Smush.it pour réduire automatiquement la taille de vos images sans perte de qualité lors de l’upload.

Zoé Lapras - Temps de chargementVotre temps est précieux. Celui de vos visiteurs aussi. Si un visiteur doit trop attendre pour voir les visuels d’une fiche produit, vous risquez de l’agacer et de le faire fuir. Avec Kameleoon, vous pouvez par exemple A/B tester l’impact de visuels moins gourmands sur votre taux de conversion”. 

Zoé Lapras, Consultante Kameleoon

Évitez les redirections

Une redirection crée de nouvelles requêtes HTTP et augmente par la même occasion le temps de chargement.

Si vous avez un site mobile : il y a des chances pour que vous ayez mis en place des redirections pour orienter les mobinautes de votre site principal, vers la version mobile.

Dans ce cas, préférez utiliser une redirection HTTP pour mener automatiquement les visiteurs vers la page mobile, sans aucun intermédiaire.

Exploitez la mémoire cache

Quand vous visitez un site, les éléments de la page sont stockés dans le cache de votre navigateur de manière temporaire. Cela permet de réduire le nombre de requêtes entre le serveur et vous et donc de charger les pages plus rapidement.

La première fois que vous arrivez sur un site, vous devez télécharger un fichier HTML, les images, les fichiers JavaScript, les feuilles de style, etc., avant de pouvoir naviguer correctement. Selon la complexité de la page, cela peut prendre beaucoup de temps.

Loading - temps de chargement

Une fois ces éléments stockés dans le cache du visiteur, la page charge beaucoup plus vite.

On estime toutefois que 60 à 70% de vos visiteurs arrivent sur votre site pour la première fois. D’où l’importance d’optimiser le temps de chargement des éléments de votre site dès la première visite et donc de suivre les points cités dans cet article.

Retirez les plugins que vous n’utilisez pas

Plus vous accumulez de plugins sur votre site, plus vous risquez de le ralentir. Par ailleurs, multiplier les plugins, c’est prendre le risque de rencontrer des problèmes de compatibilité entre les différentes solutions installées et donc, de ralentir voire de ruiner l’expérience de navigation de vos visiteurs.

Lorsqu’un plugin est activé, il provoque le chargement de fichiers CSS et de fichiers JavaScript. Si vous ne l’utilisez pas, ces fichiers chargés en vain viennent malgré tout ralentir le temps de chargement de votre site. Identifiez les plugins qui vous aident vraiment.

Frédéric de Todaro - Temps de chargement“Réalisez un benchmark des plugins installés sur votre site. Avec Kameleoon, vous pouvez A/B tester les conséquences de l’activation d’un plugin sur vos visiteurs. Auchan a par exemple testé l’utilisation d’un moteur de recommandations contextualisées en miroir de la recommandation des équipes en interne. Le taux de conversion a augmenté de 60% avec le module de personnalisation”.

Frédéric de Todaro, Head of Consulting, Kameleoon.

Réduisez la taille de vos cookies

Les cookies sont de petits fichiers qui permettent d’activer les données visiteurs. On les utilise entre autres pour reconnaître et personnaliser l’expérience de navigation des visiteurs d’un site.

Ces données de navigation sont en fait stockées dans le navigateur de vos visiteurs. En somme, plus vous utilisez de cookies, plus vous risquez d’encombrer le disque dur de vos visiteurs et de ralentir leur navigateur.

  • Supprimez les cookies que vous n’utilisez pas/plus
  • Réduisez la taille de vos cookies (Nicholas Radoi – GeoRanker – vous offre de bons conseils pour y parvenir).

Conclusion : la vitesse, ça compte

Chaque dixième de seconde compte. Il existe un grand nombre de techniques dédiées pour optimiser le temps de chargement de vos pages web et cette liste n’est évidemment pas exhaustive.

Notez également que la satisfaction de vos visiteurs et l’optimisation de vos taux de conversion ne sont pas les seules raisons de limiter le temps de chargement de votre site. Google ne jure que par la rapidité et vous risquez de perdre de précieuses places de référencement si vous n’allez pas dans ce sens.

À moins d’avoir l’exclusivité mondiale sur la vente des places d’un concert en hologrammes de Kurt Cobain, vos visiteurs risquent de ne pas patienter si votre site demande trop de temps et de ressources pour charger. Ils iront ailleurs.

Pour éviter cette alternative, téléchargez le livre blanc de l’A/B testing. Il vous offre les clés d’une stratégie d’optimisation rondement menée.
livre blanc ab testing kameleoon

Avez-vous d’autres techniques à partager ? N’hésitez pas à nous le faire remarquer en laissant un commentaire (d’ailleurs, si l’une des techniques mentionnées ci-dessus n’a pas fonctionné, faites-le nous également savoir).

Clément René

Content marketer chez Kameleoon, Clément analyse tous les retours d'expérience de nos clients et consultants et partage les meilleures pratiques en A/B testing et personnalisation.

Des articles qui pourraient vous intéresser