Note : Ce contenu a été créé avant que Fabernovel ne fasse partie du groupe EY, le 5 juillet 2022.

27 % de conversions en plus pour 1 seconde de chargement en moins !

Saviez-vous qu’en 2016 en France, 53% du trafic web provenait du mobile ? Et qu’en 2017, 50% du commerce en ligne sera effectué sur mobile ? Cependant pour profiter des opportunités liées au mobile, la vitesse n’est plus une option. Et pour cause, elle influence la perception des utilisateurs vis-à-vis d’une marque (53% des visites sont abandonnées si les pages prennent plus de 3 secondes à se charger), impacte les performances business d’une marque (27% de conversions en plus pour 1 seconde de chargement en moins), et est un critère indirect de référencement naturel de votre site dans la mesure où elle améliore l’exploration des robots (l’association SEO camp a pu interroger près de 500 professionnels du référencement est a classé deuxième la rapidité des sites web et mobile en termes de priorité pour l’année 2017). De la vitesse oui, mais comment la mesurer ?

100 ms de temps de chargement supplémentaire, 1% de vente en moins pour Amazon

La jungle des indicateurs de performance

First Byte, Start Render, DOM Loading, Speed Index, Fully Loaded, la liste des indicateurs de performance est longue et toutes ces metriques ont leur importance. Mais si nous devions n’en choisir qu’une seule ? Le Speed Index ! Pourquoi ? parce que le Speed Index permet une mise en lumière du temps de chargement des éléments situés au-dessus de la ligne de flottaison, c’est à dire dans la partie visible de la page, et ainsi une meilleure appréciation de l’expérience utilisateur. La preuve en image !

Si, in fine, le résultat des situations A et B est le même : une page chargée à 100% en 12 secondes, les comportements entre t-0% et t-100% des situations A et B sont radicalement différents d’un point de vue expérience utilisateur, puisqu’au bout d’une seconde seulement la page A est affichée à 90% (et permet ainsi à l’utilisateur de commencer sa navigation sur la page) contre 20% pour la page B. Le Speed Index permet de traduire cette différence majeure ce qui n’est pas le cas des autres metriques, comme le _Start Render _(temps nécessaire au chargement du premier élément d’une page) ou le Fully Loaded (temps nécessaire au chargement de l’intégralité des éléments d’une page, tags compris) qui resteraient quasiment inchangés d’une situation à une autre.

Interpréter les chiffres

Sur mobile, est considéré comme “très bon” un Speed Index inférieur à 2000. Or en analysant le Speed Index du top 100 des e-commerçants Français, le constat est sans appel : aucun ne possède un Speed Index inférieur à 3 000, 46% ont un Speed Index “Très mauvais” (supérieur à 10 000), 22% ont un Speed Index “Mauvais” (entre 5 000 et 10 000), et 31% ont un Speed Index “Passable” (entre 3 000 et 5 000).

Pourtant ces mauvais scores sont la plupart du temps facilement optimisables. Et pour preuve, au terme de notre hackathon, des diminutions du Speed Index allant jusqu’à 60% ont pu être relevées, et la majorité des acteurs présents ont pu positionner leur Speed Index entre 2 000 et 4 000.

Optimisation du temps de chargement mobile

Dessine-moi une image

Vos pages sont longues à charger ? Regardez du côté de vos images ! En effet, la majorité du poids des pages sur le web est liée aux images. Aussi, pour optimiser son temps de chargement sur mobile il est nécessaire de renoncer à quelques détails sur les images pour plus de performance :

• Chargez des images optimisées à la taille de votre écran mobile. En chargeant des images plus grandes que nécessaire puis en les redimensionnant via le navigateur, vous allongez vos temps de chargement. Privilégiez plutôt l’utilisation d’attributs comme srcset pour charger vos images dans plusieurs dimensions.
• Pensez également à compresser les fichiers volumineux, pouvant diminuer leur poid jusqu’à 70%
• Attention aux images (/éléments) chargé(e)s sur desktop qui ne se chargent pas sur mobile ! Faîtes attention à supprimer sur mobile les éléments (images, vidéos, etc) présents sur votre site desktop qui n’ont pas vocation à apparaître ou ne peuvent pas être affichés sur mobile. Ces derniers, sans être visibles, seront néanmoins chargés et impacteront négativement (et inutilement) votre temps de chargement. Une erreur très, voire trop, fréquente et facilement optimisable !
• Chargez à la demande vos images grâce au Lazy Loading. Le Lazy Loading permet le déclenchement du chargement de l’image uniquement lorsque l’utilisateur en a besoin. On évite ainsi le chargement, parfois lourd, d’images en bas de page, ou simplement en dessous de la ligne de flottaison.
• Bannissez l’utilisation de sliders sur mobile. En plus d’être source de mauvaise performance avec le chargement de plusieurs images et l’exécution de JavaScript, les sliders sont la garantie d’une expérience utilisateur non optimisée. Et pour preuve, parmi les 3 ou 4 images composants un slider, seule la première capte la majorité des clics, les images suivantes détournent simplement l’attention de l’utilisateur (qui dans la plupart du temps n’a pas le temps de lire l’intégralité des informations présentes sur le slide avant que celui-ci ne bouge.
• Pensez à remplacer vos sliders par...

L’optimisation du chemin critique

Quand on optimise le chemin critique, l’important est d’optimiser le temps de chargement des éléments au dessus de la ligne de flottaison. Plusieurs options :

• La réduction du nombre de requêtes_ : faites le tri !_
• Le temps de chargement est dépendant du nombre d’éléments (requêtes) à appeler : images, feuilles de styles, flash, etc. Plus le nombre de requêtes est important, plus le temps de chargement sera conséquent. Or on déplore un nombre important de requêtes obsolètes laissées dans le code source telles que le tag d’un ancien partenaire d’affiliation qui continue à être chargé, ou un fichier CSS ou JS qui n’est plus utilisé mais toujours présent dans le code et continuant à être appelé, freinant inutilement le chargement des pages. L’optimisation de son temps de chargement sur mobile (comme sur le web) passe donc pas la suppression de ces requêtes.
• La minification
• La minification consiste en l’élimination des caractères superflus tels que les sauts de ligne, les commentaires ou les espaces au sein du code source, permettant ainsi une réduction du poids des fichiers, et donc du temps nécessaire pour les charger.Exemple de code source indenté et commenté :
• Exemple de code source minifié :
• La mise en cache navigateur
• La mise en cache navigateur (côté client) permet une optimisation considérable du temps de chargement en sauvegardant lors de la première visite d’un internaute une partie des composants à générer, diminuant ainsi le nombre d’éléments à charger lors des visites ultérieures.

Et vous, qu’attendez-vous pour optimiser votre site mobile ?