Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WLS-2023-Final.pdf

Ludovic Lefebvre
May 12, 2023
110

 WLS-2023-Final.pdf

Ludovic Lefebvre

May 12, 2023
Tweet

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

  6. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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 full-size slide

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

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  43. Questions
    WLS – 10/05/2023 51

    View full-size slide