1 of 20

SPArtacUX, le projet qui a ramené la performance web au coeur de l’UX ManoMano

2 of 20

Présentation

Qui suis-je ?

Dévelopeur JavaScript (TypeScript) full-stack

6 ans d’expérience (professionelle)

Membre de l’équipe Platform-Engineering chez

josselinbuils

josselinbuils

josselinbuils.me

3 of 20

  1. Contexte
  2. Performance
  3. Résultat

4 of 20

Contexte

L’épopée React chez ManoMano

On a besoin d’une stack front plus évolutive et qui permet de recruter plus facilement.

On a besoin de compatibilité SEO

et de plus d’autonomie pour les équipes.

+ Monolithe React

Monolithe

PHP/JS

+ Micro front-ends

5 of 20

Contexte

Impact sur la performance

Performance

Moyenne

Très moyenne

Un “détail” que nous avons quelque peu sous-estimé:

🐌

🐢

Product Page

  • Code source dupliqué
  • Code généré dupliqué
  • Orchestration plus complexe

Pourquoi ?

6 of 20

Contexte

C’est si important que ça la performance ?

Oui !

​

Une bonne performance signifie:

  • Utilisateur satisfait 😀 ➡ Meilleur taux de conversion 💰
  • Meilleur référencement naturel ➡ Moins de référencement payant 💰
  • Moins de données à transférer
    • Coût d’infrastructure plus bas 💰
    • Plus écologique 🌏
  • Meilleure image de marque 😎

7 of 20

Contexte

SPArtacUX

Pour tacler ces problèmes de performance, on a décidé de repartir d’une base saine, et ainsi naquit:

Single Page Application

User eXperience

SPArtacUX

Objectifs:

  • Améliorer l’expérience utilisateur 🧑
  • Augmenter le taux de conversion 💰

8 of 20

Contexte

Stack front

​

Pour avoir un socle fiable et performant ➜ Next.js, un framework React fournissant de nombreuses fonctionnalités comme le Server Side Rendering.

​

Pour rendre notre code plus robuste ➜ TypeScript, le langage de programmation typé transpilé en JavaScript.

​

Pour améliorer la gestion des styles ➜ Sass, le langage de script transpilé en CSS.

9 of 20

  • Contexte
  • Performance
  • Résultat

10 of 20

Performance

Par où commencer ? Par la mesure !

​

On mesure les Web Vitals, et plus particulièrement les Core Web Vitals.

Mais pas que ! Par exemple, on mesure aussi la taille des bundles JavaScript.

11 of 20

Performance

Comment on mesure ?

​

Beaucoup de choix mais pas forcément toujours pertinent.

Mesures ponctuelles

Lighthouse

WebPageTest

Real User Monitoring (RUM)

Chrome UX Report

Webpack Bundle Analyzer

Chrome

DevTools

12 of 20

Performance

Visualisation des mesures

​

DASHBOARDS

On utilise principalement des dashboards Datadog pour visualiser nos mesures de performance.

RAPPORTS

On génère aussi quelques rapports statiques.

13 of 20

Performance

Optimisation

​

TRACKING ALLÉGÉ

UTILISATION MASSIVE DU CACHE CDN

INTERFACE SIMPLIFIÉE ET RESPONSIVE

​

CDN

backend

❌

CHARGEMENT OPTIMISÉ DES ASSETS

14 of 20

Performance

Optimisation

​

LAZY LOADING

RÉDUCTION DE LA TAILLE DU DOM

OPTIMISATION DU CODE SPLITTING

​

LAZY HYDRATION

index.ts

index.ts

index.ts

❌

Pré-rendu côté serveur mais chunks JavaScript chargés au scroll côté client.

Réduction de la quantité de JavaScript inutilisée.

div

div

div

❌

15 of 20

  • Contexte
  • Performance
  • Résultat

16 of 20

Résultat

Comparons un parcour utilisateur

17 of 20

Résultat

Comparons un parcour utilisateur

​

18 of 20

Résultat

Quelques chiffres

​

CUSTOMER EFFORT SCORE

PAGES PERFORMANTES (Google)

TAUX DE CONVERSION

​

CLASSEMENT JDN E-COMMERCE

67,5

+8,5%

99,8%

+5,6 points

page d’accueil

0% avant

3ème

18ème en janvier

19 of 20

Résultat

Prochaine étape

​

Micro front-ends

20 of 20

Merci de votre attention 😁

Merci à Alexandre Sutra, Benjamin Aubertel et Lionnel Dupouy pour leur aide ❤️