Dans les coulisses
Lego et iPhone : les plus fréquentes recherches de la clientèle
par Manuel Wenk
Qu'est-ce que la chasse aux mammouths a à voir avec le page speed ?
2/10/2019
Traduction: Stéphanie Casada
Des temps de chargement rapides sont importants pour les sites web. Nous voulons vous voir naviguer à la vitesse de la lumière dans l'univers de Digitec Galaxus. Les clics de rage ou les palpitations cardiaques causés par la lenteur des temps de chargement font définitivement partie du passé. Nous travaillons dur pour nous assurer qu'à l'avenir, nous serons l'une des boutiques en ligne d'Europe avec les temps de chargement les plus rapides.
L'homme en tant qu'être complexe est le produit de son génome, le même qu'il y a 10 000 ans. Même si l'environnement a changé. Nous vivons dans un monde entièrement numérisé où nous ne chassons plus les mammouths. Le page speed est donc très important pour deux raisons :
- Les limitations humaines : notre mémoire à court terme est distraite. Nous ne prêtons pas d'importance aux choses insignifiantes. Le page speed est important pour que nous n'oubliions pas ce que nous voulons lorsque nous naviguons d'un site web à l'autre et que nous appelons un site à chargement lent.
- Les ambitions humaines : nous voulons contrôler nos actions. Surtout lorsque nous interagissons avec les ordinateurs. Le page speed est important pour que nous n'ayons pas à nous soumettre aux caprices d'un ordinateur.
Un fait amusant à ce sujet : selon une étude, les temps de chargement lents sont si stressants pour une personne que leur charge cognitive peut être comparée à celle d'un film d'horreur. Nous avons justement de bons films d'horreur à vous proposer, mais, rassurez-vous, ce n'est pas l'expérience que nous souhaitons vous offrir sur notre boutique en ligne.
Ce qui s'est passé jusqu'à présent : it's mobile, stupid !
Avons-nous, chez Digitec Galaxus, mis les flèches de côté et arrêté de courir après les fossiles poilus ? Pas vraiment. Nous avons encore du pain sur la planche en termes de page speed. Cela s'explique également par le fait que le sujet n'a cessé de gagner en priorité ces dernières années, y compris d'un point de vue technique. Deux développements y ont largement contribué :
- Les pages ou les applications web sont aujourd'hui matures et fortement développées. Elles permettent au client de profiter pleinement du site. De telles interactions exigent de la logique et du code, basés sur des technologies telles que JavaScript.
- Depuis quelques années, les internautes naviguent principalement sur leur smartphone. Les smartphones ont généralement moins de puissance disponible pour exécuter des applications qu'un ordinateur de bureau. Si les pages web lourdes en JavaScript ne sont pas exécutées aussi rapidement ou affichées de manière interactive, l'expérience perd en qualité.
Selon le modèle RAIL de Google, le temps de chargement (load) d'un site fait partie des quatre dimensions pertinentes pour évaluer et concevoir l'expérience de performance perçue d'un site web. Quelles sont les trois autres dimensions ? La réactivité, l'animation et l'inactivité. Ces points tentent de refléter l'expérience de performance perçue pour vous en tant que client.
Le frontend-stack isomorphe apporte de la vitesse
Il est important de comprendre que le temps de chargement n'est pas un moment unique dans l'animation de chargement d'un site web – c'est plus une expérience holistique dans la construction visuelle et interactive d'un site web. Il ne peut par conséquent pas être mesuré qu'avec une seule métrique. Afin de mesurer notre temps de chargement de manière optimale, nous adhérons au concept de Google et nous nous orientons aux "indicateurs de performance centrés sur l'utilisateur" dans la zone "load" du modèle RAIL. Les indicateurs de performance centrés sur l'utilisateur décrivent le succès des clients comme des indicateurs de temps basés sur des jalons, des secondes.
Afin de définir les métriques, il est important de connaître les besoins sous-jacents du client pour pouvoir les mesurer. Lors du chargement d'un site web, un client a besoin d'une réponse rapide, surtout à trois étapes clés, afin de pouvoir évaluer son expérience avec la page comme positive.
| Jalons | Besoins des clients |
|---|---|
| 1 | Se passe-t-il quelque chose quand je saisis quelque chose ? La navigation a-t-elle été lancée avec succès ? Le serveur a-t-il répondu ? |
| 2 | Ce que je vois en premier est utile ? Les éléments les plus importants d'une page sont-ils affichés en premier ? |
| 3 | Les éléments visuels affichés sont-ils utiles ? Puis-je interagir avec eux ? |
Avec le passage de notre frontend à un frontend-stack isomorphe (article en allemand), la page n'est plus rendue immédiatement sur le serveur, mais progressivement sur le client. Ça nous donne la possibilité d'attribuer une valeur individuelle à chaque pixel du site. Il est facile de comprendre que nous voulons afficher les éléments visuels dans le viewport le plus rapidement et le plus efficacement possible.
Afin de mesurer les besoins des clients et de comprendre quand un site web joue un retour visuel sous forme d'éléments rendus, nous étendons notre tableau avec les trois métriques suivantes et leur signification :
| Jalons | Métriques | Significations | |
|---|---|---|---|
| 1 | Se passe-t-il quelque chose ? | First Contentful Paint | Le First Contentful Paint marque le moment où le texte ou les images sont visibles pour la première fois pour l'utilisateur. |
| 2 | Est-ce utile ? | First Meaningful Paint | Le First Meaningful Paint (FMP) marque le moment où les éléments les plus importants de la page sont visibles pour l'utilisateur. |
| 3 | Puis-je interagir ? | Time to Interactive & First Input Delay | Le Time to Interactive (TTI) marque le moment où l'application est à la fois affichée visuellement et répond de manière fiable aux commentaires des utilisateurs.
Le First Input Delay (FID) mesure le délai qu'un client subit lors d'une première interaction, lorsque la page (ou certaines parties de celle-ci) n'est pas encore interactive. |
Les métriques peuvent être illustrées sur un axe temporel d'une animation de chargement d'une page web comme suit :
Valeurs mesurées : c'est le mélange qui compte
La mesure de ces métriques peut provenir de deux sources de données : les données réelles des clients et les mesures dites synthétiques.
Les données clients réelles, également appelées RUM (Real User Monitoring), utilisent les données des clients réels lorsqu'ils appellent une page. Donc de vous tous, que vous êtes en train de surfer sur notre boutique en ligne, à côté d'une antenne 5G ou dans un tunnel de montagne. Pour nous, c'est la pure vérité et représente exactement l'expérience que vous vivez.
Les mesures synthétiques, quant à elles, représentent des mesures qui ont lieu dans le cadre de simulations et tentent donc de modéliser l'expérience vécue par le client. Les outils connus pour ça sont Lighthouse de Google ou WebPageTest.org. Avec différents paramètres, les performances de chargement des pages web peuvent être mesurées à l'aide de critères tels que la vitesse de l'appareil ou du réseau.
Nous nous sommes mis d'accord sur des budgets clairs afin de pouvoir mettre en perspective les mesures de performance. Ça nous permet de voir page après page si les temps de chargement répondent à nos exigences pour une expérience utilisateur de qualité. Nos budgets sont des chiffres absolus, que nous voulons atteindre au 95e centile. Ainsi, 95 % de toutes les pages vues devraient fonctionner plus rapidement que le budget dans les mesures individuelles. Par conséquent, nous pouvons étendre notre tableau comme suit :
| Jalons | Métriques | Budget (95 pourcentiles) | Mesure | |
|---|---|---|---|---|
| 1 | Se passe-t-il quelque chose ? | First Contentful Paint | <1 s | RUM |
| 2 | Est-ce utile ? | First Meaningful Paint | <3 s | RUM |
| 3 | Puis-je interagir ? | Time to Interactive | <5 s | Synthétique |
| 3 | Puis-je interagir ? | First Input Delay | <100 ms | RUM |
Les budgets sont les normes de l'industrie et sont utilisés aujourd'hui comme point de référence pour évaluer la performance des pages. Les budgets sont largement basés sur le travail passionnant de Robert B. Miller "Response Time in Man-Computer Conversational Transactions de 1968.
Lors de l'interprétation des valeurs mesurées avec les budgets, la performance des pages ne doit pas, comme mentionné plus haut, être comprise comme un moment unique dans l'animation de chargement d'un site web. La combinaison de toutes les métriques est combinée dans le produit final pour créer une expérience utilisateur holistique et satisfaisante.
Un investissement pour l'avenir
Outre les avantages élémentaires d'un site web perçu plus rapidement pour le client, les pages rapides jouent également un rôle primordial pour la visibilité. Nous parlons là de l'évaluation de nos pages par des moteurs de recherche tels que Google. Avec le lancement de l'initiative "Let's make the web faster" en 2009, Google investit massivement dans les sites web rapides et conviviaux, et préfère les sites web à chargement rapide dans son classement. La performance est un facteur de classement important parmi tant d'autres.
Nous accordons de plus en plus d'importance à ce sujet. C'est la raison pour laquelle nous ajustons notre base de code afin de réaliser d'autres améliorations en termes de vitesse. Nous vous tenons au courant.
Michael Rudin
Product Owner
michael.rudin@digitecgalaxus.chObsédé par la résolution des problèmes numériques. L’outcome l'emporte sur l’output. Je ne suis pas aveuglément toutes les tendances technologiques. Je ne simule jamais le succès d'un produit avec des ICP aléatoires. Je n'abandonne jamais parce qu'une idée n’a pas abouti. La vie est une expérience. Amen.
16 commentaires
later