WLS-2023-Final.pdf

Transcript

1. Devenir le Sherlock de la
   web performance
   We ❤️ Speed
   10/05/2023
   Ludovic LEFEBVRE
   Product Owner
   

   View Slide

2. Peaksys, filiale Tech de Cdiscount
   Nous sommes des constructeurs de plateforme, à l’échelle
   20 millions
   de visiteurs uniques/mois
   1 milliard
   de recherches moteur/an
   + de 1000
   commandes/minute
   lors du Black Friday
   15 000
   vendeurs
   100 millions
   de produits
   9700
   mouvements
   d’offre / seconde
   + 150 000
   colis/jour lors du Black Friday
   700 ms
   Temps de descente d’une
   commande aux entrepôts
   3200
   Vendeurs actifs
   100 millions
   d’impressions/jour
   + 100 000
   requêtes filtrées/seconde
   30%
   d’économie de trafic via le
   blocage des robots
   Leader Français
   du E-commerce
   Filiale dédiée aux
   Solutions marketplace
   Filiale dédiée à
   la logistique
   filiale dédiée au
   marketing digital
   filiale dédiée à la
   cybersécurité
   ACTIVITÉ B2B
   ACTIVITÉ B2C
   650 passionné(e)s de tech 1 changement en production toutes les 7 minutes
   

   View Slide

3. View Slide

4. Objectif
   WLS – 10/05/2023 4
   Résolution
   d’anomalies
   Création de plans
   d’optimisation
   Acquérir la méthode « Sherlock »
   

   View Slide

5. La pyramide de la connaissance
   5
   WLS – 10/05/2023
   DONNÉES =
   Collection de signaux
   INFORMATIONS =
   Données organisées
   CONNAISSANCES =
   Informations contextualisées, synthétiques,
   riches de sens et reproductibles
   SAGESSE =
   Actionnable, Permet la compréhension
   Données
   FUTUR PRESENT
   

   View Slide

6. Cause(s) Phénomène Effet(s)
   WLS – 10/05/2023 6
   Application de la logique formelle
   Principe de causalité
   ADBUCTION
   P1
   => P2
   P2
   P1
   est probable
   DÉDUCTION
   P1
   => P2
   P1
   P2
   INDUCTION
   Pour i = 1, …, n
   Pi
   => Qi
   P => Q
   ADBUCTION
   ↑ TTFB => ↑ FCP
   ↑ FCP
   ↑ TTFB
   DÉDUCTION
   ↓ TTFB => ↓ FCP
   ↓ TTFB
   ↓ FCP
   INDUCTION
   i
   Pour i = 1, …, n
   =>
   =>
   

   View Slide

7. Devenir maître de la déduction
   WLS – 10/05/2023 7
   Cas pratique de la courbe de distribution
   [0-50]
   [150-200]
   [300-350]
   [450-500]
   [600-650]
   [750-800]
   [900-950]
   [1050-1100]
   [1200-1250]
   [1350-1400]
   [1500-1550]
   [1650-1700]
   [1800-1850]
   [1950-2000]
   [2100-2150]
   [2250-2300]
   [2400-2450]
   [2550-2600]
   [2700-2750]
   [2850-2900]
   [3000-3050]
   [3150-3200]
   [3300-3350]
   [3450-3500]
   [3600-3650]
   [3750-3800]
   [3900-3950]
   [4050-4100]
   [4200-4250]
   [4350-4400]
   [4500-4550]
   [4650-4700]
   [4800-4850]
   [4950-5000]
   [5100-5150]
   [5250-5300]
   [5400-5450]
   [5550-5600]
   

   View Slide

8. Devenir maître de la déduction
   WLS – 10/05/2023 8
   Cas pratique de la courbe de distribution
   

   View Slide

9. Devenir maître de la déduction
   WLS – 10/05/2023 9
   Cas pratique de la courbe de distribution
   

   View Slide

10. Les étapes de l’investigation
    10
    « Lorsque vous avez éliminé l'impossible, ce
    qui reste, si improbable soit-il, est
    nécessairement la vérité.»
    Le signe des quatre
    WLS – 10/05/2023
    

    View Slide

11. Les étapes de l’investigation
    WLS – 10/05/2023 11
    La méthode OHERIC(A)
    Observations
    

    View Slide

12. Les étapes de l’investigation
    WLS – 10/05/2023 12
    1 3
    2 4
    Observations Hypothèses Expérimentations Conclusions
    

    View Slide

13. Devenir maître de l’observation
    « Vous voyez mais vous n’observez pas »
    WLS – 10/05/2023 13
    Varier ses sources d’information
    Un scandale en Bohême
    Utilisateurs
    • RUM
    • Biz Analytics
    • UX analytics
    Infrastructure
    • APM
    • Observabilité
    • Synthétique
    Change
    • Release
    • OPS
    • Opérationnel
    

    View Slide

14. Devenir maître de l’observation
    WLS – 10/05/2023 14
    Développer son outillage
    - / + Représentatif
    - / + Données d’analyses
    

    View Slide

15. Agir avec froideur
    WLS – 10/05/2023 15
    L’analyse est une science exacte
    « Bâtir une théorie avant d’avoir des données est une erreur monumentale.
    Insensiblement on se met à torturer les faits pour qu’ils collent avec les
    théories, alors que ce sont les théories qui doivent coller avec les faits.»
    Un scandale en Bohême
    Population
    • Device
    • Bande
    passante
    • Navigateur
    • …
    Comportement
    • Pages ciblées
    • Actions
    utilisateurs
    Infrastructure
    • Composants
    délivrant le
    service
    • Fournisseur
    tiers
    

    View Slide

16. Devenir maître de l’observation
    WLS – 10/05/2023 16
    Stigmergie : mécanisme de coordination indirecte entre les agents
    

    View Slide

17. Devenir maître de l’observation
    WLS – 10/05/2023 17
    Comment cartographier vos utilisateurs ?
    Chargement Interactivité
    Stabilité visuelle
    Devenir maître de l’observation
    WLS – 10/05/2023 17
    

    View Slide

18. Les étapes de l’investigation
    WLS – 10/05/2023 18
    1 3
    2 4
    Observations Hypothèses Expérimentations Conclusions
    

    View Slide

19. LCP
    FCP
    Les marqueurs du chargement
    WLS – 10/05/2023 20
    Vérifier la rapidité
    0ms 250ms 500ms 750ms 1000ms 1250ms 1500ms 1750ms 2000ms
    TTFB
    

    View Slide

20. LCP
    FCP
    Les marqueurs du chargement
    WLS – 10/05/2023 21
    Vérifier la rapidité
    0ms 250ms 500ms 750ms 1000ms 1250ms 1500ms 1750ms 2000ms
    TTFB
    ↑ TTFB => ↑ FCP => ↑ LCP
    ↑ LCP
    ↑ TTFB ou ↑ FCP
    TTFB < FCP < LCP
    

    View Slide

21. Les marqueurs du chargement
    WLS – 10/05/2023 22
    Vérifier la stabilité
    L’élément LCP change => ↑ LCP
    

    View Slide

22. Les marqueurs du chargement
    WLS – 10/05/2023 23
    Vérifier la stabilité
    Local Synthétique RUM
    ! ∀𝑈𝑠𝑒𝑟 𝐿𝐶𝑃𝑘 == 𝐿𝐶𝑃 ⇒ ↑ LCP
    

    View Slide

23. Probabilité
    Les marqueurs du chargement
    WLS – 10/05/2023 25
    Principales règles pour le LCP
    Implications
    ◼ TTFB < FCP < LCP
    ◼ Pas de système de cache => ↑ LCP
    ◼ ↑ Poids de l'image => ↑ LCP
    ◼ Absence de Préload => ↑ LCP
    ◼ TypeOf(LCP) != Attendu Biz => ↑ LCP
    ◼ Chargement dynamique => ↑ LCP
    ◼ ! ∀𝑈𝑠𝑒𝑟 𝐿𝐶𝑃𝑘 == 𝐿𝐶𝑃 ⇒ ↑ LCP
    ◼ Le LCP change => ↑ LCP
    ◼ Plusieurs images LCP éligibles de
    même taille => ↑ LCP
    Portabilité d’outillage
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    Rapide
    Pertinent
    Stable
    High
    Medium
    Medium
    Low
    High
    Medium
    High
    Medium
    Low
    

    View Slide

24. Titre de la présentation - Date 26
    Les marqueurs des LCP
    Enquête #654
    Observations Hypothèses Expérimentations Conclusions
    Contexte :
    • 100% des utilisateurs
    • Uniquement sur les pages listes
    de recherche
    • Pas de livraison le jour de
    l’anomalie
    LCP +20%
    

    View Slide

25. Titre de la présentation - Date 27
    Les marqueurs des LCP
    Enquête #654
    Observations Hypothèses Expérimentations Conclusions
    Rapide :
    TTFBPertinent :
    Absence de Préload => ↑ LCP
    Stable :
    Plusieurs images LCP éligibles de
    même taille => ↑ LCP
    

    View Slide

26. Titre de la présentation - Date 28
    Les marqueurs des LCP
    Enquête #654
    Observations Hypothèses Expérimentations Conclusions
    Stable :
    Le LCP change => ↑ LCP
    

    View Slide

27. Titre de la présentation - Date 29
    Les marqueurs des LCP
    Enquête #654
    Observations Hypothèses Expérimentations Conclusions
    1. Animation commerciale
    2. Changement du LCP
    3. Bascule sur une image plus
    petite
    4. Image non priorisée
    5. Dégradation du LCP
    

    View Slide

28. Probabilité
    Les marqueurs de la stabilité visuelle
    WLS – 10/05/2023 33
    Principales règles pour le CLS
    Implications
    ◼ Images sans dimensions
    ◼ Chargement de FONT
    ◼ …
    ◼ Animation lente
    ◼ Non réservation d’espace
    ◼ …
    Portabilité d’outillage
    High
    Medium
    High
    Low
    Prévisible
    Non intrusif
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    

    View Slide

29. Titre de la présentation - Date 34
    Les marqueurs des CLS
    Enquête #159
    Observations Hypothèses Expérimentations Conclusions
    Contexte :
    • 80% des utilisateurs
    • 100% sur Desktop
    • Sur l’ensemble des fiches
    produits
    • CLS : 0,5% -> 1,5%
    

    View Slide

30. Titre de la présentation - Date 35
    Les marqueurs des CLS
    Enquête #159
    Observations Hypothèses Expérimentations Conclusions
    Non intrusif :
    • Bannières, Publicité, Iframes
    Prévisible :
    • Chargement de FONT
    • Images sans dimensions
    Segmentation :
    • Par consentement
    

    View Slide

31. Titre de la présentation - Date 36
    Les marqueurs des CLS
    Enquête #159
    Observations Hypothèses Expérimentations Conclusions
    1. Validation du consentement
    2. Aller sur une fiche produit
    3. Déclenchement d’un tag (3rd party)
    4. Exécution et pose d’un pixel de tracking
    5. Décalage de l’ensemble du body
    

    View Slide

32. Probabilité
    Les marqueurs de l’interactivité
    WLS – 10/05/2023 38
    Principales règles pour le FID
    Implications
    ◼ ∃long Task => ↑ TBT
    ◼ Js non utilisé => ↑TBT
    ◼ …
    ◼ Changement zones d’interaction
    ◼ ↓LCP => ↑ FID
    ◼ …
    Portabilité d’outillage
    High
    Medium
    High
    Low
    Consommation
    Usage
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    Local Synthétique RUM
    • https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongTaskTiming
    • https://github.com/w3c/longtasks/blob/main/loaf-explainer.md
    

    View Slide

33. Les étapes de l’investigation
    WLS – 10/05/2023 40
    1 3
    2 4
    Observations Hypothèses Expérimentations Conclusions
    

    View Slide

34. L’épreuve de la réalité
    WLS – 10/05/2023 41
    Où intervenir ?
    

    View Slide

35. Reconstitution
    WLS – 10/05/2023 42
    Savoir reproduire pour prédire
    

    View Slide

36. Reconstitution
    43
    Test en situation : AB Test
    WLS – 10/05/2023
    

    View Slide

37. Les étapes de l’investigation
    WLS – 10/05/2023 44
    1 3
    2 4
    Observations Hypothèses Expérimentations Conclusions
    

    View Slide

38. Vers la résolution
    45
    Construire son plan d’optimisation
    LCP
    FCP
    TTFB
    H1.1 E1.1 C1.1
    H1.2 E1.2 C1.2
    H1.3 E1.3 C1.3
    H1.4 E1.4 C1.4
    H1.5 E1.5 C1.5
    H2.1 E2.1 C2.1
    H2.2 E2.2 C2.2
    H2.3 E2.3 C2.3
    H2.4 E2.4 C2.4
    H3.1 E3.1 C3.1
    H3.2 E3.2 C3.2
    H3.3 E3.3 C3.3
    H3.4 E3.4 C3.4
    H1.6 E1.6 C1.6
    WLS – 10/05/2023
    

    View Slide

39. Vers la résolution
    46
    Construire son plan d’optimisation
    LCP
    FCP
    TTFB
    H1.1 E1.1 C1.1
    H1.2 E1.2 C1.2 A1.2
    H1.3 E1.3 C1.3
    H1.4 E1.4 C1.4 A1.4
    H1.5 E1.5 C1.5
    H2.1 E2.1 C2.1 A2.1
    H2.2 E2.2 C2.2 A2.2
    H2.3 E2.3 C2.3 A2.3
    H2.4 E2.4 C2.4
    H3.1 E3.1 C3.1
    H3.2 E3.2 C3.2 A3.2
    H3.3 E3.3 C3.3 A3.4
    H3.4 E3.4 C3.4
    H1.6 E1.6 C1.6
    WLS – 10/05/2023
    

    View Slide

40. Vers la résolution
    47
    Construire son plan d’optimisation
    LCP
    FCP
    TTFB
    A1.2
    A1.4
    A2.1
    A2.2
    A2.3
    A3.2
    A3.4
    WLS – 10/05/2023
    High
    Medium
    Low
    High
    Low
    Medium
    Medium
    

    View Slide

41. Vers la résolution
    48
    Construire son plan d’optimisation
    LCP
    FCP
    TTFB
    A1.2
    A1.4
    A2.1
    A2.2
    A2.3
    A3.2
    A3.4
    WLS – 10/05/2023
    High
    Medium
    Low
    High
    Low
    Medium
    Medium
    

    View Slide

42. Conclusions
    TL ; TR
    WLS – 10/05/2023
    Observation
    Hypothèses
    Expérimenta
    tions
    Local
    Synthétique
    RUM
    

    View Slide

43. 50
    https://github.com/Ludovic33Fr/SherlockList
    Conclusions
    TL ; TR
    WLS – 10/05/2023
    

    View Slide

44. Questions
    WLS – 10/05/2023 51
    

    View Slide