Mobile Marketing - Mobile-first : la vitesse, un enjeu principal - 3 octobre 2016

Mobile-first : la vitesse, un enjeu principal

Le Mobile est officiellement passé n°1 auprès des 15-34 ans. Chez les 35-49 ans, l’ordinateur reste encore l’outil le plus populaire. Mais cela peut vite évoluer au regard de la forte poussée du smartphone au sein de cette cible avec une hausse annuelle de 14,6%1

usage multi-ecran
La colonne rose représente l’usage du Desktop, l’orange celui du Mobile et le violet celui de la tablette.

Formation Growth Hacking

On touche du bout du doigt l’ère du Mobile-first dans les usages. Malgré tout, une frustration apparaît chez les mobinautes : la vitesse de chargement.

Le concept Mobile-first consiste à concevoir un site en pensant avant tout au Mobile, puis adapter progressivement celui-ci pour les écrans plus larges.

La vitesse : frustration principale des mobinautes

Selon une étude de Google parue en avril 2015, la lenteur du chargement des pages web sur Mobile est ce que les mobinautes apprécient le moins (46%).

lenteur site mobile
Ils s’attendent à ce qu’une page web se charge (au moins) aussi vite sur Mobile que sur Desktop (71%). Mais 46% d’entre eux estiment qu’aujourd’hui, les pages se chargent moins vite sur Mobile que sur ordinateur. Ce sentiment se vérifie-t-il ? Les sites sont-ils réellement plus lents sur Mobile que sur Desktop ? Et si oui, dans quelle mesure ?

J’ai réalisé quelques tests sur les 10 premiers sites du classement webperf du JDN. Il s’agit des 10 sites e-commerce les plus performants parmi les 40 sites les plus visités en France.

Pour cette petite étude, je me suis intéressée à 3 métriques :

  • Le Loading Time est le temps de chargement global de la page (tous les scripts sont chargés. On a atteint le “onload”). Mais si le Loading Time peut être une métrique intéressante techniquement, elle n’est en revanche pas représentative de l’expérience utilisateur. Il est en effet rare qu’un internaute attende le chargement total de la page pour commencer à interagir avec lui.

Voilà pourquoi j’ai intégré une analyse des deux métriques suivantes :

  • Le Start Render est le moment où la page blanche laisse place aux premiers éléments de la page web3 ;
  • Le Speed Index est un score qui indique le rythme auquel les éléments au-dessus de la ligne de flottaison s’affichent. Plus le score est bas, plus la page est affichée rapidement. Elle est la métrique qui représente le mieux la perception de vitesse d’un internaute.3

Voici un exemple plus concret :
Speed Index

Conditions du test

  • Outil utilisé : webpagetest.org ;
  • Panel : les 10 premiers sites du classement webperf paru sur le JDN pour le mois de juin 2016  ;
  • Pages testées : des pages “produit” ;
  • Nombre de run pour chaque test : 10 ;
  • Localisation : Paris ;
  • Navigateur : Chrome ;
  • Connexion utilisée : ADSL (7 Mbps) vs 3G (2,7 Mbps).

Pour voir les données brutes, cliquez ici >>

Le Loading Time

En moyenne, le Loading Time est plus de deux fois plus élevé (+172,07%) sur Mobile que sur Desktop.

loading time e-commerce

L’écart le plus élevé a été relevé sur le site de Brico Dépôt (+264,36% sur Mobile en comparaison au Desktop). L’écart le plus faible a, quant à lui, été relevé sur le site de Leroy Merlin (+85,48% sur Mobile).

Le Start Render

En moyenne, le Start Render est lui trois fois plus élevé (+224,55%) sur Mobile que sur Desktop.

Start Render e-commerce

Toys’R’Us est le site dont l’écart sur le Start Render entre Desktop et Mobile est le plus important. Le Start Render sur Desktop est de 1,116 seconde contre 7,088 secondes sur Mobile (soit une augmentation de plus de 500%). L’écart le moins important est celui du site LDLC qui passe de 1,393 secondes sur Desktop à 3,687 secondes sur Mobile (soit une augmentation de 164%).

NB. Le site de LDLC a une particularité : une redirection de www.ldlc.com vers m.ldlc.com est effectuée lorsque la page www est chargée. Cela n’est pas une pratique recommandée, car l’expérience utilisateur, lors de cette première connexion, est ralentie. En revanche, une fois que l’utilisateur est sur m.ldlc.com, il y restera et il n’y aura plus de redirection.

filmstrip LDLC
Aussi, si cette redirection JS n’avait pas lieu, le Start Render du site Mobile serait seulement de 2,893 secondes. Le gain estimé serait donc de 0,794 seconde.

Le Speed Index

En moyenne, le Speed Index est lui aussi trois fois plus élevé (+207,32%) sur Mobile que sur Desktop.

Speed Index e-commerce

L’écart le plus important revient une nouvelle fois au site de Toys’R’Us qui passe de 1694 sur Desktop à 9013 sur Mobile (soit une augmentation de plus de 400%). L’écart le plus faible, quant à lui, est relevé sur le site de Leroy Merlin qui passe de 2690 sur Desktop à 3949 sur Mobile (soit une augmentation de 46,8%). Rappelons que plus le score est bas, plus la page s’est affichée rapidement.

NB. L’impact de la redirection de www.ldlc.com vers m.ldlc.com est parlant ici. Le Speed Index Mobile est de 8209. Si LDLC choisissait de remédier à cette redirection tardive, le Speed Index ne serait alors que de 3078. L’augmentation du Speed Index entre le site Desktop et le site Mobile ne serait plus de 292%, mais seulement de 43% ! Pour mieux comprendre, voici une illustration du chargement de la page avec et sans la redirection :

filmstrip redirection LDLC

Les 10 sites e-commerce testés ici se chargent effectivement bien moins vite sur Mobile que sur Desktop.

Le décalage entre les attentes des mobinautes et les résultats des tests ici sont frappants. En effet, 60% des mobinautes estiment qu’une page web doit se charger en moins de 3 secondes sur un Mobile. 74% déclarent être prêts à patienter jusqu’à 5 secondes. Au-delà de ce délai, ils préfèrent quitter le site en question.

Or, dans les mesures que je viens de présenter, aucun site ne dispose d’un Loading Time en dessous des 8 secondes ! Les Start Render eux-mêmes ne descendent jamais en dessous des 3,69 secondes. (Je rappelle qu’il s’agit du moment où le premier élément de la page s’affiche. La page n’est donc pas remplie.)

Les attentes des mobinautes sont particulièrement élevées en comparaison à l’état actuel de la performance sur Mobile. Ainsi, si les entreprises souhaitent améliorer l’expérience utilisateur sur Mobile, une attention particulière devra être portée à la performance.

D’où viennent ces lenteurs ?

Internet : un réseau compliqué

Internet est composé de milliers de réseaux connectés les uns aux autres. Cela implique donc de nombreuses interdépendances et de nombreuses interconnexions qui peuvent occasionner des ralentissements. Plus la chaîne est longue, plus il y a de maillons qui peuvent présenter une faille.

Une mauvaise connexion mobile

Si la 2G et la 3G couvrent la majorité du territoire, la 4G, elle, est loin derrière comme le montre les derniers chiffres de l’Arcep datant de juillet 2016 :

couverture reseau mobile
Source : Arcep

Et quand bien même on disposerait de la 4G, la latence Mobile moyenne en France reste deux fois plus importante qu’une latence de connexion ADSL :

Latence mobile moyenne en France

latence mobile

Latence ADSL moyenne en France

latence adsl
Source : baromètre de Nperf

L’obésité du web

En octobre 2000, le poids moyen d’une page web était de 89 Ko (images et scripts compris). Aujourd’hui, le poids moyen est passé à 2,6 Mo. En 15 ans, le poids des pages web a donc été multiplié par 30 ! Et ce chiffre ne cesse d’augmenter. Avec toujours plus de trackers, widgets et données à charger, le web est devenu obèse et il ralentit.

Le code du site web

En 2007, Steve Souder a publié « High Performance Web Sites », un livre qui a bousculé le web. Depuis, les bonnes pratiques dont il parle dans son livre sont plus ou moins appliquées sur les sites web. Mais depuis 2007, il s’en est passé des choses : les smartphones ont vu le jour, modifiant alors notre usage du web, puis ce fut le tour des tablettes d’apparaître dans notre quotidien. Notre bon vieux protocole a lui aussi évolué en début d’année en laissant la place au HTTP/2 (dont l’un des axes est l’accélération du web).

Alors évidemment, les pratiques webperf aussi doivent évoluer. Certaines sont devenues inefficaces, voire contre-productives. Il est donc important de mettre à jour ses connaissances et ses pratiques en la matière pour avoir un site Mobile rapide.

Comment y remédier ?

Si on ne peut pas améliorer la latence ou les débits, on peut en revanche optimiser son site Mobile pour lui donner toutes les chances d’être rapide. C’est d’ailleurs la démarche entreprise par Google qui a lancé AMP (Accelerated Mobile Pages) il y a quelques mois sur les sites d’actualité. Dans un article paru sur le JDN en avril dernier, on peut constater les gains que permet la solution de Google.

Depuis fin août, AMP a réfléchi à intégrer des fonctionnalités dédiées aux sites e-commerce. Malgré tout, AMP ne supporte aujourd’hui qu’un nombre limité de fonctionnalités nécessaires à un site e-commerce et l’expérimentation ne se limite aujourd’hui qu’à la partie navigation d’un site de e-commerce.

Par ailleurs, AMP nécessite que l’on recode les pages avec une sémantique HTML spécifique. La solution ne semble donc être qu’à ses balbutiements pour les e-commerçants. En attendant, voici quelques informations qui vous aideront à réduire vos temps de chargement sur Mobile :

1. Quel site Mobile choisir ?

Il existe plusieurs types de sites Mobiles : le m.monsite.fr, le site responsive et le site adaptatif. Certes ces trois modèles vont permettre aux mobinautes de consulter le contenu de votre site, mais ils ne sont pas forcément égaux en termes de performance :

  • La première façon de faire un site Mobile, le m.monsite.fr, nécessite une double maintenance et les redirections ralentissent l’apparition du contenu ;
  • Le site en Responsive Design, quant à lui, peut être une fausse bonne idée. En effet, selon cette étude, 72% des sites en Responsive Design ont le même poids, peu importe la taille de l’écran ou la connexion (ADSL, 4G, Edge, etc.). Cela produit donc inévitablement quelques ralentissements ;
  • Le site adaptatif, quant à lui, a l’avantage de ne présenter qu’une URL tout en affichant des contenus différents selon le terminal utilisé.

2. Les images sont lourdes : évitons de les charger 5

Les images représentent en moyenne deux tiers du poids des pages. Elles ralentissent donc souvent le chargement de la page. Pour y remédier, il est possible de lazyloader les images. Cette méthode permet d’économiser le téléchargement d’images non affichées.

NB: L’image la plus importante à charger est celle indiquant justement que le chargement est en cours :

image loading on mobile

3. Les designs des sites Desktop et Mobile ne doivent pas toujours suivre les mêmes règles 4

Je ne remets pas en cause l’importance de la charte graphique bien sûr. Mais, parfois, il est nécessaire de faire des compromis. Par exemple, certaines fonts (ou polices de caractères) ne sont pas toutes natives aux systèmes (iOS ou Android). Certains formats de polices ne sont pas supportés par tous les navigateurs. Leur téléchargement peut donc devenir bloquant et ralentir le chargement de votre page.

4. Widget n’est pas synonyme de performance 4

Les widgets apportent de la valeur, et en ce sens, une certaine forme de performance : gagner en engagement (les boutons sociaux), en analyse de données (analytics et/ou AB tests) ou encore en revenu (les bannières publicitaires). Mais la performance technique, elle, peut pâtir du chargement de certains widgets. Qui dit site lent, dit baisse du taux de conversion. Il est alors nécessaire d’évaluer les gains et les pertes que génère l’installation de chaque widget. Je vous invite à lire cet article sur le Budget Performance pour savoir comment faire les bons compromis.

5. 3 techniques de mise en cache à connaître 5

Le cache HTTP : celle-ci est bien connue. Il s’agit de cacher le plus longtemps possible (un mois par exemple) les ressources statiques. Attention toutefois, cette méthode peut se révéler très volatile. Si la taille du cache est limitée, alors certains objets peuvent être évincés du cache au cours du temps.

Le localstorage : il s’agit d’une technique de stockage des données dans un navigateur web. Sa capacité d’enregistrement est plus importante que le cache HTTP. Cela s’explique par le fait que le cache HTTP vaut pour tous les sites alors que le localstorage stocke 5Mo (par défaut) et par site. Par ailleurs, le localstorage ne nécessite pas l’ajout de données dans l’en-tête de requête HTTP. En revanche, pour stocker plus que 5Mo, le navigateur doit demander la permission à l’utilisateur.

L’Application Cache (dit offline) : cette méthode permet de rapatrier l’ensemble de l’interface dès la première connexion. La navigation se fait ainsi en local et les mises à jour du contenu se font lorsque la connexion est rétablie. Une aubaine pour la navigation Mobile, mais qui sera probablement supplantée par la généralisation d’une nouvelle technologie, les Service Workers (technologie bien au-delà du scope de cet article 😉

Cette liste est évidemment loin d’être exhaustive. Ce ne sont là que quelques exemples de bonnes pratiques pour rendre la navigation des mobinautes la plus rapide possible.

Si vous avez des remarques ou si vous avez envie de partager des expériences ou de bonnes pratiques, rendez-vous en commentaire de l’article.

Au plaisir de vous lire 🙂

1C’est officiel, les Français sont désormais mobile first
2 Livre blanc : Marketing mobile
3Speed Index : métrique incontournable de l’expérience utilisateur
4Les 7 mythes de la performance sur mobile
5Le web mobile et la performance