WLS-2023-Final.pdf

Transcript

1. Devenir le Sherlock de la web performance We ❤️ Speed 10/05/2023 Ludovic LEFEBVRE Product Owner
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
4. Objectif WLS – 10/05/2023 4 Résolution d’anomalies Création de plans d’optimisation Acquérir la méthode « Sherlock »
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
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 => =>
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]
8. Devenir maître de la déduction WLS – 10/05/2023 8 Cas pratique de la courbe de distribution
9. Devenir maître de la déduction WLS – 10/05/2023 9 Cas pratique de la courbe de distribution
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
11. Les étapes de l’investigation WLS – 10/05/2023 11 La méthode OHERIC(A) Observations
12. Les étapes de l’investigation WLS – 10/05/2023 12 1 3 2 4 Observations Hypothèses Expérimentations Conclusions
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
14. Devenir maître de l’observation WLS – 10/05/2023 14 Développer son outillage - / + Représentatif - / + Données d’analyses
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
16. Devenir maître de l’observation WLS – 10/05/2023 16 Stigmergie : mécanisme de coordination indirecte entre les agents
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
18. Les étapes de l’investigation WLS – 10/05/2023 18 1 3 2 4 Observations Hypothèses Expérimentations Conclusions
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
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
21. Les marqueurs du chargement WLS – 10/05/2023 22 Vérifier la stabilité L’élément LCP change => ↑ LCP
22. Les marqueurs du chargement WLS – 10/05/2023 23 Vérifier la stabilité Local Synthétique RUM ! ∀𝑈𝑠𝑒𝑟 𝐿𝐶𝑃𝑘 == 𝐿𝐶𝑃 ⇒ ↑ LCP
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
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%
25. Titre de la présentation - Date 27 Les marqueurs des LCP Enquête #654 Observations Hypothèses Expérimentations Conclusions Rapide : TTFB<FCP<LCP Pertinent : Absence de Préload => ↑ LCP Stable : Plusieurs images LCP éligibles de même taille => ↑ LCP
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
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
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
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%
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
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
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
33. Les étapes de l’investigation WLS – 10/05/2023 40 1 3 2 4 Observations Hypothèses Expérimentations Conclusions
34. L’épreuve de la réalité WLS – 10/05/2023 41 Où intervenir ?
35. Reconstitution WLS – 10/05/2023 42 Savoir reproduire pour prédire
36. Reconstitution 43 Test en situation : AB Test WLS – 10/05/2023
37. Les étapes de l’investigation WLS – 10/05/2023 44 1 3 2 4 Observations Hypothèses Expérimentations Conclusions
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
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
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
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
42. Conclusions TL ; TR WLS – 10/05/2023 Observation Hypothèses Expérimenta tions Local Synthétique RUM
43. 50 https://github.com/Ludovic33Fr/SherlockList Conclusions TL ; TR WLS – 10/05/2023
44. Questions WLS – 10/05/2023 51