We Love Speed et l’organisation idéale d’un projet de performance web

author

Wendy Carré

9 février 2021 | 6 minutes - Temps de lecture

Le 28 janvier dernier, Contentsquare a participé à We Love Speed, un événement dédié à la web performance. Pourquoi on en parle ? Et bien parce que la performance d’un site influence aussi l’expérience utilisateur ! Et vous n’êtes pas sans savoir que, dès que l’on parle d’expérience, Contentsquare répond présent ! 

We Love Speed : pourquoi vous devriez vous intéresser à la webperf

We Love Speed

We Love Speed rassemble chaque année les professionnels du web, les experts de la performance web (ou webperf) de différentes industries (eCommerce, bien sûr, mais aussi la Presse, par exemple) pour échanger et discuter sur les enjeux de la webperf, les best practices et les tendances.

We love Speed édition 2019

Édition précédente de We Love Speed (2019)

La webperf, qu’est-ce que c’est ? 

La performance web d’un site englobe tout ce qu’une marque pourra faire pour améliorer la réactivité de son dispositif web, lors du chargement comme pendant son utilisation. Voici quelques exemples :

  • S’assurer que les serveurs sont suffisamment proches des visiteurs et répondent rapidement ;
  • Améliorer la progressivité de l’affichage au-dessus de la ligne de flottaison (Speed Index) ;
  • Imaginer et implémenter son site de manière à ce qu’il réponde rapidement aux interactions des utilisateurs et utilisatrices.

C’est un des grands sujets d’UX permettant de réduire la frustration des visiteurs, à l’instar de la réduction des erreurs techniques (HTTP, JavaScript, API), et fonctionnelles (messages d’erreur affichés aux utilisateurs et utilisatrices).

Pourquoi c’est important ?

Pour le référencement

La webperf fait partie des critères pris en compte par Google pour le référencement de votre site depuis 2010. Et à chaque mise à jour de Google, elle devient un critère de plus en plus important. Google a d’ailleurs annoncé sa prochaine mise à jour pour 2021 et elle incluera notamment les Core Web Vitals d'un site (ou Signaux Web Essentiels) dans le classement des résultats de recherche. Les Core Web Vitals mesurent les performances d’affichage de la page (LCP), de son interactivité (FID) et de sa stabilité visuelle (CLS). La webperf de votre site aura donc une influence sur votre positionnement dans Google, et ce n’est pas rien !

Pour l’expérience utilisateur !

Au-delà du positionnement de votre site sur Google, proposer un site performant c’est aussi contribuer à une bonne expérience utilisateur. Au cœur de cette problématique de performance, on trouve notamment le temps de chargement : 100 millisecondes perdues peuvent se traduire par une baisse de 7 % du taux de conversion. Un retard de 2 secondes à peine peut entraîner un taux de rebond deux fois plus important. La vitesse de chargement fait même partie des critères n°1 des utilisateurs ! À la vue des ces chiffres, on comprend tout l’intérêt des marques pour ce sujet. Une mauvaise performance web pouvant accroître les taux de sortie de site prématurés et réduire la conversion, elle est donc un critère essentiel. 

Exemple d'outil permettant d'analyser les performances de votre site - Dareboost

La performance web est-elle une utopie concrète ?

Quel serait le modèle idéal à appliquer pour une bonne gestion de la performance web ? Voilà le questionnement de Boris Schapira, Customer Success Manager chez Contentsquare et spécialiste de la web performance. Boris a animé une des sessions de l’événement en partageant son utopie de la webperf. Alors que la webperf est souvent vue comme particulièrement technique et dont la valeur ajoutée n’est pas toujours bien visible par toute l’entreprise, Boris a tenu à prouver le contraire afin d’encourager la prise en main de ce sujet par tous. Il nous a démontré sa vision d’une bonne gestion de la webperf.

Comment plaire aux robots de Google ?

Optimisez les performances de votre site Web 🚀
Laissez vous guider par nos conseils 💡
Séduire les algorithmes des moteurs de recherche 🔎🔎

Découvrir le guide

Cette vision idéale peut se résumer en 8 points :

1. Faire de la webperf un objectif commun à tous

La performance web doit être envisagée comme un projet d’équipe et non individuel. Étant un sujet parfois complexe, elle doit être portée par plusieurs parties prenantes pour être efficacement traitée. Notamment, ce n’est qu’en impliquant différents métiers que les dégradations de performance d’un site peuvent être anticipées dès la conception des fonctionnalités. 

2. Favoriser les optimisations actionnables

Il est important de s’assurer que les premières actions menées par une équipe s’impliquant dans la performance web aient un impact. Afin d’engager chaque partie prenante, mieux vaut commencer par des optimisations dont les résultats sont visibles rapidement, même si ce ne sont pas des actions facilement accessibles aux équipes en question. Il y a une marche à monter et dire le contraire dessert souvent l’optimisation.

3. Créer un consensus de bonnes pratiques

Chaque test, chaque score comporte ses limites et chaque recommandation évolue dans le temps. Le contexte de chaque entreprise est également à prendre en compte, ce qui est valable pour l’une, ne l’est pas forcément pour l’autre. En agrégeant différentes sources de mesures et de bonnes pratiques, on assure une meilleure flexibilité et une meilleure pertinence au projet.

4. Imaginer chaque optimisation comme une étape

Beaucoup d’optimisations sont liées entre elles, elles doivent donc être perçues comme des étapes pour avancer. C’est cet ensemble d’optimisations qu’il faut mesurer et piloter. Comme pour l’UX, certaines optimisations ne sont possibles que lorsque l’ensemble des fondamentaux ont d’abord été mis en place. C’est donc parfois un travail de longue haleine.

5. Motiver ses équipes

Les retombées commerciales suite à des optimisations de performance ne sont pas toujours au rendez-vous, notamment si vous partez d’un site ou d’une page extrêmement lent : les premiers résultats ne se feront pas voir tant que l’expérience ne sera pas suffisamment bonne, ce qui peut décourager les équipes. Motiver ses équipes même si les résultats ne sont pas immédiatement quantifiables est clé. La performance a des retombées diverses et non uniquement monétaires : elle peut permettre à l’utilisateur d’obtenir des informations ou d’accéder à des services plus rapidement et donc de créer de la satisfaction.

6. S’entraîner et persister

Se lancer dans la webperf est une course de fond qui nécessite de l’entraînement, c’est à force de pratiquer et de tester que les résultats seront visibles. 

7. Impliquer l’UX dans l’optimisation de la performance web

Certaines optimisations permettent d’améliorer un site d’un point de vue de sa performance mais cela ne veut pas forcément dire que cela conviendra aux utilisateurs. Par exemple, un ajout de panier qui s’enchaîne trop rapidement peut prêter à confusion et laisser le consommateur perplexe. En analysant les comportements en ligne, on peut trouver le parfait équilibre pour le client, entre bonne webperf et bonne UX.

8. Intégrer la webperf à chaque lancement de projet

Enfin, comme l’UX, la webperf doit faire partie intégrante de chaque refonte de site ou nouveau projet. Le chantier s'avèrera moins fastidieux si la webperf est prise en compte dès le départ. 

Comment plaire aux robots de Google ?

Optimisez les performances de votre site Web 🚀
Laissez vous guider par nos conseils 💡
Séduire les algorithmes des moteurs de recherche 🔎🔎

Découvrir le guide

Les 3 tips de We Love Speed pour votre webperf

Optimisez les polices

Lors de sa session, m4dz, aka Matthias Dugué, Tech Evangelist chez Alwaysdata, a démontré comment le choix de webfonts dans un design impacte la performance d’un site. Plus particulièrement, si ces polices sont hébergées par un service tiers comme Google Fonts. En effet, l’auto-hébergement de ses polices (entre autres) permet de gagner en performance et de ne pas être tributaire d’un CDN third-party. 

Checklist

Loading...!

Stéphanie Walter, UX Researcher & Product Designer, a consacré sa session aux écrans de chargement, d’erreurs ou de données manquantes. Elle explique, entre autres, comment optimiser les écrans de chargement et livre plusieurs conseils :

  • Optimiser le critical rendering path en chargeant d’abord tout ce qui va s’afficher en haut de page,
  • Prioriser l’affichage de contenu selon l’intérêt des utilisateurs en classant les contenus,
  • Plusieurs critères de tri peuvent être pris en compte : le temps de chargement, la pertinence du contenu…,
  • Adapter l’interface au réseau, si par exemple certains contenus sont très gourmands, proposer des alternatives selon la connexion.

Quant aux erreurs de chargement et pour éviter les fameux 404, Stéphanie donne 2 best practices : toujours guider l’utilisateur vers une solution alternative (et donc une opportunité business) et surtout, rester cohérent dans le ton et le branding.

De nouveaux formats d’images : JPEG XL et AVIF

Henri Helvetica, développeur freelance, est revenu sur les images, leur histoire et leur évolution. Indispensable au story telling, les images ont toujours fait partie intégrante du web. Il liste les différents formats disponibles aujourd’hui, leurs avantages et leurs inconvénients, et présente les futurs formats : JPEG XL et AVIF. JPEG XL offre une compression intéressante, tout en offrant des images de très bonne qualité. On dit même qu’on ne peut pas faire la différence avec l’image d’origine… prometteur ! Ce format est aussi entièrement responsive, plus besoin de stocker plusieurs versions d’une même image et il supporte le chargement progressif (affichant d’abord une version floue, puis s’affinant avec le temps), ce qui est excellent pour l’expérience utilisateur… Le format AVIF a lui été créé à usage gratuit et libre de droits et, comme le JPEG XL, il propose une compression d’une qualité inégalée (les fichiers sont de taille plus réduite mais quelques artefacts visuels peuvent apparaître). Quand on sait que le poids des images joue un rôle important dans la performance d’un site, s’intéresser à ces nouveaux formats peut s’avérer très utile, en choisissant en fonction de la nature de l’image le meilleur compromis entre expérience de chargement et qualité finale.

Vous l’aurez compris, la webperf est un sujet clé, à part entière et incontournable. Contentsquare propose d’ailleurs un outil dédié, Find & Fix, qui permet d’analyser les erreurs (API, JavaScript, textuel), de monitorer la performance web, et de surtout quantifier les impacts sur l’expérience client.

E-commerce mobile Contentsquare

Augmentez votre taux de conversion en analysant le comportement de vos visiteurs