[{"data":1,"prerenderedAt":1995},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fbudgets-de-performance-web-lier-les-metriques-aux-decisions":13},{"i18nKey":4,"paths":5},"tech-004-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fweb-performance-budgets-entscheidungsfindung","\u002Fen\u002Ftech\u002Fweb-performance-budgets-decision-framework","\u002Fes\u002Ftech\u002Fpresupuestos-de-rendimiento-web","\u002Ffr\u002Ftech\u002Fbudgets-de-performance-web-lier-les-metriques-aux-decisions","\u002Fit\u002Ftech\u002Fperformance-budget-collegare-al-meccanismo-decisionale","\u002Fru\u002Ftech\u002Fweb-performance-budgets-connecting-to-decision-making","\u002Ftr\u002Ftech\u002Fweb-performance-budgetlari-karar-mekanizmasina-baglamak",{"_path":9,"_dir":14,"_draft":15,"_partial":15,"_locale":16,"title":17,"description":18,"publishedAt":19,"modifiedAt":19,"category":14,"i18nKey":4,"tags":20,"readingTime":26,"author":27,"body":28,"_type":1989,"_id":1990,"_source":1991,"_file":1992,"_stem":1993,"_extension":1994},"tech",false,"","Budgets de Performance Web : Lier les Métriques aux Décisions Produit","Comment intégrer Lighthouse CI, RUM et les alertes de régression dans les processus métier pour construire une culture de performance basée sur les données.","2026-06-04",[21,22,23,24,25],"performance-web","lighthouse-ci","rum","core-web-vitals","budget-performance",8,"Roibase",{"type":29,"children":30,"toc":1981},"root",[31,39,46,51,60,165,170,175,181,186,194,450,466,877,882,898,904,909,917,1160,1173,1313,1318,1323,1329,1334,1342,1864,1869,1877,1912,1917,1923,1928,1936,1944,1949,1954,1960,1965,1970,1975],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","53 % des sites e-commerce perdent leurs utilisateurs lorsque le chargement dépasse 3 secondes (donnée Google 2025). Le budget de performance — des plafonds numériques comme « LCP ne doit pas dépasser 2,5 s » — devient une discipline obligatoire pour prévenir ces pertes. Pourtant, la plupart des équipes laissent ces budgets sur papier. Les régressions doivent arrêter automatiquement le pipeline de déploiement, les tableaux de bord RUM doivent figurer dans les revues de sprint hebdomadaires. La performance web n'est plus « l'affaire de l'équipe frontend » — elle devient une couche de données qui façonne les décisions produit.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"quest-ce-quun-budget-de-performance-et-ce-quil-nest-pas",[44],{"type":37,"value":45},"Qu'est-ce qu'un Budget de Performance, et ce qu'il N'est Pas",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Un budget de performance transforme les seuils de ralentissement acceptables en engagement numérique. Au lieu de l'objectif abstrait « la page doit être rapide », on obtient un contrat contraignant : « LCP \u003C 2,5 s, FID \u003C 100 ms, CLS \u003C 0,1 ». Une PR qui dépasse le budget ne peut pas être fusionnée — le CI échoue.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":32,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":37,"value":59},"Types de budget :",{"type":32,"tag":61,"props":62,"children":63},"table",{},[64,88],{"type":32,"tag":65,"props":66,"children":67},"thead",{},[68],{"type":32,"tag":69,"props":70,"children":71},"tr",{},[72,78,83],{"type":32,"tag":73,"props":74,"children":75},"th",{},[76],{"type":37,"value":77},"Type de Métrique",{"type":32,"tag":73,"props":79,"children":80},{},[81],{"type":37,"value":82},"Exemple de Budget",{"type":32,"tag":73,"props":84,"children":85},{},[86],{"type":37,"value":87},"Méthode de Mesure",{"type":32,"tag":89,"props":90,"children":91},"tbody",{},[92,111,129,147],{"type":32,"tag":69,"props":93,"children":94},{},[95,101,106],{"type":32,"tag":96,"props":97,"children":98},"td",{},[99],{"type":37,"value":100},"Core Web Vitals",{"type":32,"tag":96,"props":102,"children":103},{},[104],{"type":37,"value":105},"LCP \u003C 2,5 s",{"type":32,"tag":96,"props":107,"children":108},{},[109],{"type":37,"value":110},"Lighthouse CI, RUM (CrUX)",{"type":32,"tag":69,"props":112,"children":113},{},[114,119,124],{"type":32,"tag":96,"props":115,"children":116},{},[117],{"type":37,"value":118},"Timing",{"type":32,"tag":96,"props":120,"children":121},{},[122],{"type":37,"value":123},"TTI \u003C 3,5 s, TBT \u003C 200 ms",{"type":32,"tag":96,"props":125,"children":126},{},[127],{"type":37,"value":128},"Lighthouse, WebPageTest",{"type":32,"tag":69,"props":130,"children":131},{},[132,137,142],{"type":32,"tag":96,"props":133,"children":134},{},[135],{"type":37,"value":136},"Ressources",{"type":32,"tag":96,"props":138,"children":139},{},[140],{"type":37,"value":141},"Bundle JS \u003C 200 KB (gzip), Taille totale \u003C 1 MB",{"type":32,"tag":96,"props":143,"children":144},{},[145],{"type":37,"value":146},"Webpack Bundle Analyzer",{"type":32,"tag":69,"props":148,"children":149},{},[150,155,160],{"type":32,"tag":96,"props":151,"children":152},{},[153],{"type":37,"value":154},"Comptage",{"type":32,"tag":96,"props":156,"children":157},{},[158],{"type":37,"value":159},"Requêtes HTTP \u003C 50, Scripts tiers \u003C 5",{"type":32,"tag":96,"props":161,"children":162},{},[163],{"type":37,"value":164},"Network panel",{"type":32,"tag":33,"props":166,"children":167},{},[168],{"type":37,"value":169},"Un budget n'est pas un outil « qui bloque la performance » — c'est un outil « qui met la performance dans le bilan des coûts ». Quand un développeur ajoute une nouvelle bibliothèque d'analytics, il calcule : « cela nous coûte 15 KB + 200 ms de thread principal ». Quand un PM demande un nouveau widget carrousel, il reçoit le retour : « cela augmente le CLS de 0,08, il nous reste 0,02 du budget ».",{"type":32,"tag":33,"props":171,"children":172},{},[173],{"type":37,"value":174},"Sans budget, l'équipe travaille sur la performance « ressenti ». Le ressenti est subjectif. Le budget est objectif.",{"type":32,"tag":40,"props":176,"children":178},{"id":177},"installer-une-barrière-de-régression-avec-lighthouse-ci",[179],{"type":37,"value":180},"Installer une Barrière de Régression avec Lighthouse CI",{"type":32,"tag":33,"props":182,"children":183},{},[184],{"type":37,"value":185},"Lighthouse CI exécute automatiquement les scores Lighthouse à chaque commit et arrête le CI si le budget est dépassé. Il s'intègre à GitHub Actions, GitLab CI, Jenkins. Mise en place en 10 minutes — rendement : 10 ans de culture de performance.",{"type":32,"tag":33,"props":187,"children":188},{},[189],{"type":32,"tag":55,"props":190,"children":191},{},[192],{"type":37,"value":193},"Exemple de workflow GitHub Actions :",{"type":32,"tag":195,"props":196,"children":200},"pre",{"code":197,"language":198,"meta":16,"className":199,"style":16},"name: Lighthouse CI\non: [pull_request]\njobs:\n  lighthouse:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v3\n      - uses: actions\u002Fsetup-node@v3\n      - run: npm ci && npm run build\n      - run: npm install -g @lhci\u002Fcli\n      - run: lhci autorun\n        env:\n          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_TOKEN }}\n","yaml","language-yaml shiki shiki-themes github-dark",[201],{"type":32,"tag":202,"props":203,"children":204},"code",{"__ignoreMap":16},[205,229,254,268,281,299,312,335,355,377,398,419,432],{"type":32,"tag":206,"props":207,"children":210},"span",{"class":208,"line":209},"line",1,[211,217,223],{"type":32,"tag":206,"props":212,"children":214},{"style":213},"--shiki-default:#85E89D",[215],{"type":37,"value":216},"name",{"type":32,"tag":206,"props":218,"children":220},{"style":219},"--shiki-default:#E1E4E8",[221],{"type":37,"value":222},": ",{"type":32,"tag":206,"props":224,"children":226},{"style":225},"--shiki-default:#9ECBFF",[227],{"type":37,"value":228},"Lighthouse CI\n",{"type":32,"tag":206,"props":230,"children":232},{"class":208,"line":231},2,[233,239,244,249],{"type":32,"tag":206,"props":234,"children":236},{"style":235},"--shiki-default:#79B8FF",[237],{"type":37,"value":238},"on",{"type":32,"tag":206,"props":240,"children":241},{"style":219},[242],{"type":37,"value":243},": [",{"type":32,"tag":206,"props":245,"children":246},{"style":225},[247],{"type":37,"value":248},"pull_request",{"type":32,"tag":206,"props":250,"children":251},{"style":219},[252],{"type":37,"value":253},"]\n",{"type":32,"tag":206,"props":255,"children":257},{"class":208,"line":256},3,[258,263],{"type":32,"tag":206,"props":259,"children":260},{"style":213},[261],{"type":37,"value":262},"jobs",{"type":32,"tag":206,"props":264,"children":265},{"style":219},[266],{"type":37,"value":267},":\n",{"type":32,"tag":206,"props":269,"children":271},{"class":208,"line":270},4,[272,277],{"type":32,"tag":206,"props":273,"children":274},{"style":213},[275],{"type":37,"value":276},"  lighthouse",{"type":32,"tag":206,"props":278,"children":279},{"style":219},[280],{"type":37,"value":267},{"type":32,"tag":206,"props":282,"children":284},{"class":208,"line":283},5,[285,290,294],{"type":32,"tag":206,"props":286,"children":287},{"style":213},[288],{"type":37,"value":289},"    runs-on",{"type":32,"tag":206,"props":291,"children":292},{"style":219},[293],{"type":37,"value":222},{"type":32,"tag":206,"props":295,"children":296},{"style":225},[297],{"type":37,"value":298},"ubuntu-latest\n",{"type":32,"tag":206,"props":300,"children":302},{"class":208,"line":301},6,[303,308],{"type":32,"tag":206,"props":304,"children":305},{"style":213},[306],{"type":37,"value":307},"    steps",{"type":32,"tag":206,"props":309,"children":310},{"style":219},[311],{"type":37,"value":267},{"type":32,"tag":206,"props":313,"children":315},{"class":208,"line":314},7,[316,321,326,330],{"type":32,"tag":206,"props":317,"children":318},{"style":219},[319],{"type":37,"value":320},"      - ",{"type":32,"tag":206,"props":322,"children":323},{"style":213},[324],{"type":37,"value":325},"uses",{"type":32,"tag":206,"props":327,"children":328},{"style":219},[329],{"type":37,"value":222},{"type":32,"tag":206,"props":331,"children":332},{"style":225},[333],{"type":37,"value":334},"actions\u002Fcheckout@v3\n",{"type":32,"tag":206,"props":336,"children":337},{"class":208,"line":26},[338,342,346,350],{"type":32,"tag":206,"props":339,"children":340},{"style":219},[341],{"type":37,"value":320},{"type":32,"tag":206,"props":343,"children":344},{"style":213},[345],{"type":37,"value":325},{"type":32,"tag":206,"props":347,"children":348},{"style":219},[349],{"type":37,"value":222},{"type":32,"tag":206,"props":351,"children":352},{"style":225},[353],{"type":37,"value":354},"actions\u002Fsetup-node@v3\n",{"type":32,"tag":206,"props":356,"children":358},{"class":208,"line":357},9,[359,363,368,372],{"type":32,"tag":206,"props":360,"children":361},{"style":219},[362],{"type":37,"value":320},{"type":32,"tag":206,"props":364,"children":365},{"style":213},[366],{"type":37,"value":367},"run",{"type":32,"tag":206,"props":369,"children":370},{"style":219},[371],{"type":37,"value":222},{"type":32,"tag":206,"props":373,"children":374},{"style":225},[375],{"type":37,"value":376},"npm ci && npm run build\n",{"type":32,"tag":206,"props":378,"children":380},{"class":208,"line":379},10,[381,385,389,393],{"type":32,"tag":206,"props":382,"children":383},{"style":219},[384],{"type":37,"value":320},{"type":32,"tag":206,"props":386,"children":387},{"style":213},[388],{"type":37,"value":367},{"type":32,"tag":206,"props":390,"children":391},{"style":219},[392],{"type":37,"value":222},{"type":32,"tag":206,"props":394,"children":395},{"style":225},[396],{"type":37,"value":397},"npm install -g @lhci\u002Fcli\n",{"type":32,"tag":206,"props":399,"children":401},{"class":208,"line":400},11,[402,406,410,414],{"type":32,"tag":206,"props":403,"children":404},{"style":219},[405],{"type":37,"value":320},{"type":32,"tag":206,"props":407,"children":408},{"style":213},[409],{"type":37,"value":367},{"type":32,"tag":206,"props":411,"children":412},{"style":219},[413],{"type":37,"value":222},{"type":32,"tag":206,"props":415,"children":416},{"style":225},[417],{"type":37,"value":418},"lhci autorun\n",{"type":32,"tag":206,"props":420,"children":422},{"class":208,"line":421},12,[423,428],{"type":32,"tag":206,"props":424,"children":425},{"style":213},[426],{"type":37,"value":427},"        env",{"type":32,"tag":206,"props":429,"children":430},{"style":219},[431],{"type":37,"value":267},{"type":32,"tag":206,"props":433,"children":435},{"class":208,"line":434},13,[436,441,445],{"type":32,"tag":206,"props":437,"children":438},{"style":213},[439],{"type":37,"value":440},"          LHCI_GITHUB_APP_TOKEN",{"type":32,"tag":206,"props":442,"children":443},{"style":219},[444],{"type":37,"value":222},{"type":32,"tag":206,"props":446,"children":447},{"style":225},[448],{"type":37,"value":449},"${{ secrets.LHCI_TOKEN }}\n",{"type":32,"tag":33,"props":451,"children":452},{},[453],{"type":32,"tag":55,"props":454,"children":455},{},[456,458,464],{"type":37,"value":457},"Définition du budget dans ",{"type":32,"tag":202,"props":459,"children":461},{"className":460},[],[462],{"type":37,"value":463},".lighthouserc.json",{"type":37,"value":465}," :",{"type":32,"tag":195,"props":467,"children":471},{"code":468,"language":469,"meta":16,"className":470,"style":16},"{\n  \"ci\": {\n    \"collect\": {\n      \"url\": [\"http:\u002F\u002Flocalhost:3000\u002F\", \"http:\u002F\u002Flocalhost:3000\u002Fproduct\u002F123\"],\n      \"numberOfRuns\": 3\n    },\n    \"assert\": {\n      \"preset\": \"lighthouse:no-pwa\",\n      \"assertions\": {\n        \"first-contentful-paint\": [\"error\", {\"maxNumericValue\": 2000}],\n        \"largest-contentful-paint\": [\"error\", {\"maxNumericValue\": 2500}],\n        \"cumulative-layout-shift\": [\"error\", {\"maxNumericValue\": 0.1}],\n        \"total-blocking-time\": [\"error\", {\"maxNumericValue\": 200}],\n        \"interactive\": [\"error\", {\"maxNumericValue\": 3500}]\n      }\n    },\n    \"upload\": {\n      \"target\": \"temporary-public-storage\"\n    }\n  }\n}\n","json","language-json shiki shiki-themes github-dark",[472],{"type":32,"tag":202,"props":473,"children":474},{"__ignoreMap":16},[475,483,496,508,540,557,565,577,599,611,652,689,726,763,802,811,819,832,850,859,868],{"type":32,"tag":206,"props":476,"children":477},{"class":208,"line":209},[478],{"type":32,"tag":206,"props":479,"children":480},{"style":219},[481],{"type":37,"value":482},"{\n",{"type":32,"tag":206,"props":484,"children":485},{"class":208,"line":231},[486,491],{"type":32,"tag":206,"props":487,"children":488},{"style":235},[489],{"type":37,"value":490},"  \"ci\"",{"type":32,"tag":206,"props":492,"children":493},{"style":219},[494],{"type":37,"value":495},": {\n",{"type":32,"tag":206,"props":497,"children":498},{"class":208,"line":256},[499,504],{"type":32,"tag":206,"props":500,"children":501},{"style":235},[502],{"type":37,"value":503},"    \"collect\"",{"type":32,"tag":206,"props":505,"children":506},{"style":219},[507],{"type":37,"value":495},{"type":32,"tag":206,"props":509,"children":510},{"class":208,"line":270},[511,516,520,525,530,535],{"type":32,"tag":206,"props":512,"children":513},{"style":235},[514],{"type":37,"value":515},"      \"url\"",{"type":32,"tag":206,"props":517,"children":518},{"style":219},[519],{"type":37,"value":243},{"type":32,"tag":206,"props":521,"children":522},{"style":225},[523],{"type":37,"value":524},"\"http:\u002F\u002Flocalhost:3000\u002F\"",{"type":32,"tag":206,"props":526,"children":527},{"style":219},[528],{"type":37,"value":529},", ",{"type":32,"tag":206,"props":531,"children":532},{"style":225},[533],{"type":37,"value":534},"\"http:\u002F\u002Flocalhost:3000\u002Fproduct\u002F123\"",{"type":32,"tag":206,"props":536,"children":537},{"style":219},[538],{"type":37,"value":539},"],\n",{"type":32,"tag":206,"props":541,"children":542},{"class":208,"line":283},[543,548,552],{"type":32,"tag":206,"props":544,"children":545},{"style":235},[546],{"type":37,"value":547},"      \"numberOfRuns\"",{"type":32,"tag":206,"props":549,"children":550},{"style":219},[551],{"type":37,"value":222},{"type":32,"tag":206,"props":553,"children":554},{"style":235},[555],{"type":37,"value":556},"3\n",{"type":32,"tag":206,"props":558,"children":559},{"class":208,"line":301},[560],{"type":32,"tag":206,"props":561,"children":562},{"style":219},[563],{"type":37,"value":564},"    },\n",{"type":32,"tag":206,"props":566,"children":567},{"class":208,"line":314},[568,573],{"type":32,"tag":206,"props":569,"children":570},{"style":235},[571],{"type":37,"value":572},"    \"assert\"",{"type":32,"tag":206,"props":574,"children":575},{"style":219},[576],{"type":37,"value":495},{"type":32,"tag":206,"props":578,"children":579},{"class":208,"line":26},[580,585,589,594],{"type":32,"tag":206,"props":581,"children":582},{"style":235},[583],{"type":37,"value":584},"      \"preset\"",{"type":32,"tag":206,"props":586,"children":587},{"style":219},[588],{"type":37,"value":222},{"type":32,"tag":206,"props":590,"children":591},{"style":225},[592],{"type":37,"value":593},"\"lighthouse:no-pwa\"",{"type":32,"tag":206,"props":595,"children":596},{"style":219},[597],{"type":37,"value":598},",\n",{"type":32,"tag":206,"props":600,"children":601},{"class":208,"line":357},[602,607],{"type":32,"tag":206,"props":603,"children":604},{"style":235},[605],{"type":37,"value":606},"      \"assertions\"",{"type":32,"tag":206,"props":608,"children":609},{"style":219},[610],{"type":37,"value":495},{"type":32,"tag":206,"props":612,"children":613},{"class":208,"line":379},[614,619,623,628,633,638,642,647],{"type":32,"tag":206,"props":615,"children":616},{"style":235},[617],{"type":37,"value":618},"        \"first-contentful-paint\"",{"type":32,"tag":206,"props":620,"children":621},{"style":219},[622],{"type":37,"value":243},{"type":32,"tag":206,"props":624,"children":625},{"style":225},[626],{"type":37,"value":627},"\"error\"",{"type":32,"tag":206,"props":629,"children":630},{"style":219},[631],{"type":37,"value":632},", {",{"type":32,"tag":206,"props":634,"children":635},{"style":235},[636],{"type":37,"value":637},"\"maxNumericValue\"",{"type":32,"tag":206,"props":639,"children":640},{"style":219},[641],{"type":37,"value":222},{"type":32,"tag":206,"props":643,"children":644},{"style":235},[645],{"type":37,"value":646},"2000",{"type":32,"tag":206,"props":648,"children":649},{"style":219},[650],{"type":37,"value":651},"}],\n",{"type":32,"tag":206,"props":653,"children":654},{"class":208,"line":400},[655,660,664,668,672,676,680,685],{"type":32,"tag":206,"props":656,"children":657},{"style":235},[658],{"type":37,"value":659},"        \"largest-contentful-paint\"",{"type":32,"tag":206,"props":661,"children":662},{"style":219},[663],{"type":37,"value":243},{"type":32,"tag":206,"props":665,"children":666},{"style":225},[667],{"type":37,"value":627},{"type":32,"tag":206,"props":669,"children":670},{"style":219},[671],{"type":37,"value":632},{"type":32,"tag":206,"props":673,"children":674},{"style":235},[675],{"type":37,"value":637},{"type":32,"tag":206,"props":677,"children":678},{"style":219},[679],{"type":37,"value":222},{"type":32,"tag":206,"props":681,"children":682},{"style":235},[683],{"type":37,"value":684},"2500",{"type":32,"tag":206,"props":686,"children":687},{"style":219},[688],{"type":37,"value":651},{"type":32,"tag":206,"props":690,"children":691},{"class":208,"line":421},[692,697,701,705,709,713,717,722],{"type":32,"tag":206,"props":693,"children":694},{"style":235},[695],{"type":37,"value":696},"        \"cumulative-layout-shift\"",{"type":32,"tag":206,"props":698,"children":699},{"style":219},[700],{"type":37,"value":243},{"type":32,"tag":206,"props":702,"children":703},{"style":225},[704],{"type":37,"value":627},{"type":32,"tag":206,"props":706,"children":707},{"style":219},[708],{"type":37,"value":632},{"type":32,"tag":206,"props":710,"children":711},{"style":235},[712],{"type":37,"value":637},{"type":32,"tag":206,"props":714,"children":715},{"style":219},[716],{"type":37,"value":222},{"type":32,"tag":206,"props":718,"children":719},{"style":235},[720],{"type":37,"value":721},"0.1",{"type":32,"tag":206,"props":723,"children":724},{"style":219},[725],{"type":37,"value":651},{"type":32,"tag":206,"props":727,"children":728},{"class":208,"line":434},[729,734,738,742,746,750,754,759],{"type":32,"tag":206,"props":730,"children":731},{"style":235},[732],{"type":37,"value":733},"        \"total-blocking-time\"",{"type":32,"tag":206,"props":735,"children":736},{"style":219},[737],{"type":37,"value":243},{"type":32,"tag":206,"props":739,"children":740},{"style":225},[741],{"type":37,"value":627},{"type":32,"tag":206,"props":743,"children":744},{"style":219},[745],{"type":37,"value":632},{"type":32,"tag":206,"props":747,"children":748},{"style":235},[749],{"type":37,"value":637},{"type":32,"tag":206,"props":751,"children":752},{"style":219},[753],{"type":37,"value":222},{"type":32,"tag":206,"props":755,"children":756},{"style":235},[757],{"type":37,"value":758},"200",{"type":32,"tag":206,"props":760,"children":761},{"style":219},[762],{"type":37,"value":651},{"type":32,"tag":206,"props":764,"children":766},{"class":208,"line":765},14,[767,772,776,780,784,788,792,797],{"type":32,"tag":206,"props":768,"children":769},{"style":235},[770],{"type":37,"value":771},"        \"interactive\"",{"type":32,"tag":206,"props":773,"children":774},{"style":219},[775],{"type":37,"value":243},{"type":32,"tag":206,"props":777,"children":778},{"style":225},[779],{"type":37,"value":627},{"type":32,"tag":206,"props":781,"children":782},{"style":219},[783],{"type":37,"value":632},{"type":32,"tag":206,"props":785,"children":786},{"style":235},[787],{"type":37,"value":637},{"type":32,"tag":206,"props":789,"children":790},{"style":219},[791],{"type":37,"value":222},{"type":32,"tag":206,"props":793,"children":794},{"style":235},[795],{"type":37,"value":796},"3500",{"type":32,"tag":206,"props":798,"children":799},{"style":219},[800],{"type":37,"value":801},"}]\n",{"type":32,"tag":206,"props":803,"children":805},{"class":208,"line":804},15,[806],{"type":32,"tag":206,"props":807,"children":808},{"style":219},[809],{"type":37,"value":810},"      }\n",{"type":32,"tag":206,"props":812,"children":814},{"class":208,"line":813},16,[815],{"type":32,"tag":206,"props":816,"children":817},{"style":219},[818],{"type":37,"value":564},{"type":32,"tag":206,"props":820,"children":822},{"class":208,"line":821},17,[823,828],{"type":32,"tag":206,"props":824,"children":825},{"style":235},[826],{"type":37,"value":827},"    \"upload\"",{"type":32,"tag":206,"props":829,"children":830},{"style":219},[831],{"type":37,"value":495},{"type":32,"tag":206,"props":833,"children":835},{"class":208,"line":834},18,[836,841,845],{"type":32,"tag":206,"props":837,"children":838},{"style":235},[839],{"type":37,"value":840},"      \"target\"",{"type":32,"tag":206,"props":842,"children":843},{"style":219},[844],{"type":37,"value":222},{"type":32,"tag":206,"props":846,"children":847},{"style":225},[848],{"type":37,"value":849},"\"temporary-public-storage\"\n",{"type":32,"tag":206,"props":851,"children":853},{"class":208,"line":852},19,[854],{"type":32,"tag":206,"props":855,"children":856},{"style":219},[857],{"type":37,"value":858},"    }\n",{"type":32,"tag":206,"props":860,"children":862},{"class":208,"line":861},20,[863],{"type":32,"tag":206,"props":864,"children":865},{"style":219},[866],{"type":37,"value":867},"  }\n",{"type":32,"tag":206,"props":869,"children":871},{"class":208,"line":870},21,[872],{"type":32,"tag":206,"props":873,"children":874},{"style":219},[875],{"type":37,"value":876},"}\n",{"type":32,"tag":33,"props":878,"children":879},{},[880],{"type":37,"value":881},"Cette configuration prend la moyenne de 3 exécutions (Lighthouse affiche ±15 % de variance en une seule exécution) et peint la PR en rouge si le LCP dépasse 2,5 s. Le développeur ne peut pas fusionner. L'alerte Slack : « PR #432 LCP 2,8 s — budget 2,5 s — optimisez ou obtenez une exception du PM. »",{"type":32,"tag":33,"props":883,"children":884},{},[885,887,896],{"type":37,"value":886},"Roibase intègre la dimension technique des décisions produit dans son infrastructure de ",{"type":32,"tag":888,"props":889,"children":893},"a",{"href":890,"rel":891},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[892],"nofollow",[894],{"type":37,"value":895},"Commerce Headless",{"type":37,"value":897},", rendant visible l'empreinte de performance de chaque feature. Lighthouse CI porte ces chiffres au point de décision.",{"type":32,"tag":40,"props":899,"children":901},{"id":900},"rum-apporter-les-données-des-utilisateurs-réels-à-la-ligne-de-décision",[902],{"type":37,"value":903},"RUM : Apporter les Données des Utilisateurs Réels à la Ligne de Décision",{"type":32,"tag":33,"props":905,"children":906},{},[907],{"type":37,"value":908},"Les données Lighthouse en laboratoire — mesure en environnement contrôlé — fixent les conditions mais ne montrent pas le monde réel. RUM (Real User Monitoring) collecte les Web Vitals à partir du trafic de production. Le segment de 10 % sur connexion lente peut avoir un LCP de 5 s. Vous ne verrez pas cela en lab.",{"type":32,"tag":33,"props":910,"children":911},{},[912],{"type":32,"tag":55,"props":913,"children":914},{},[915],{"type":37,"value":916},"Exemple de stack RUM :",{"type":32,"tag":195,"props":918,"children":922},{"code":919,"language":920,"meta":16,"className":921,"style":16},"\u002F\u002F web-vitals library pour tous les Core Web Vitals\nimport {onCLS, onFID, onLCP} from 'web-vitals';\n\nfunction sendToAnalytics({name, value, id}) {\n  fetch('\u002Fapi\u002Fvitals', {\n    method: 'POST',\n    body: JSON.stringify({name, value, id, url: location.href}),\n    keepalive: true\n  });\n}\n\nonCLS(sendToAnalytics);\nonFID(sendToAnalytics);\nonLCP(sendToAnalytics);\n","javascript","language-javascript shiki shiki-themes github-dark",[923],{"type":32,"tag":202,"props":924,"children":925},{"__ignoreMap":16},[926,935,964,973,1020,1043,1060,1088,1101,1109,1116,1123,1136,1148],{"type":32,"tag":206,"props":927,"children":928},{"class":208,"line":209},[929],{"type":32,"tag":206,"props":930,"children":932},{"style":931},"--shiki-default:#6A737D",[933],{"type":37,"value":934},"\u002F\u002F web-vitals library pour tous les Core Web Vitals\n",{"type":32,"tag":206,"props":936,"children":937},{"class":208,"line":231},[938,944,949,954,959],{"type":32,"tag":206,"props":939,"children":941},{"style":940},"--shiki-default:#F97583",[942],{"type":37,"value":943},"import",{"type":32,"tag":206,"props":945,"children":946},{"style":219},[947],{"type":37,"value":948}," {onCLS, onFID, onLCP} ",{"type":32,"tag":206,"props":950,"children":951},{"style":940},[952],{"type":37,"value":953},"from",{"type":32,"tag":206,"props":955,"children":956},{"style":225},[957],{"type":37,"value":958}," 'web-vitals'",{"type":32,"tag":206,"props":960,"children":961},{"style":219},[962],{"type":37,"value":963},";\n",{"type":32,"tag":206,"props":965,"children":966},{"class":208,"line":256},[967],{"type":32,"tag":206,"props":968,"children":970},{"emptyLinePlaceholder":969},true,[971],{"type":37,"value":972},"\n",{"type":32,"tag":206,"props":974,"children":975},{"class":208,"line":270},[976,981,987,992,997,1001,1006,1010,1015],{"type":32,"tag":206,"props":977,"children":978},{"style":940},[979],{"type":37,"value":980},"function",{"type":32,"tag":206,"props":982,"children":984},{"style":983},"--shiki-default:#B392F0",[985],{"type":37,"value":986}," sendToAnalytics",{"type":32,"tag":206,"props":988,"children":989},{"style":219},[990],{"type":37,"value":991},"({",{"type":32,"tag":206,"props":993,"children":995},{"style":994},"--shiki-default:#FFAB70",[996],{"type":37,"value":216},{"type":32,"tag":206,"props":998,"children":999},{"style":219},[1000],{"type":37,"value":529},{"type":32,"tag":206,"props":1002,"children":1003},{"style":994},[1004],{"type":37,"value":1005},"value",{"type":32,"tag":206,"props":1007,"children":1008},{"style":219},[1009],{"type":37,"value":529},{"type":32,"tag":206,"props":1011,"children":1012},{"style":994},[1013],{"type":37,"value":1014},"id",{"type":32,"tag":206,"props":1016,"children":1017},{"style":219},[1018],{"type":37,"value":1019},"}) {\n",{"type":32,"tag":206,"props":1021,"children":1022},{"class":208,"line":283},[1023,1028,1033,1038],{"type":32,"tag":206,"props":1024,"children":1025},{"style":983},[1026],{"type":37,"value":1027},"  fetch",{"type":32,"tag":206,"props":1029,"children":1030},{"style":219},[1031],{"type":37,"value":1032},"(",{"type":32,"tag":206,"props":1034,"children":1035},{"style":225},[1036],{"type":37,"value":1037},"'\u002Fapi\u002Fvitals'",{"type":32,"tag":206,"props":1039,"children":1040},{"style":219},[1041],{"type":37,"value":1042},", {\n",{"type":32,"tag":206,"props":1044,"children":1045},{"class":208,"line":301},[1046,1051,1056],{"type":32,"tag":206,"props":1047,"children":1048},{"style":219},[1049],{"type":37,"value":1050},"    method: ",{"type":32,"tag":206,"props":1052,"children":1053},{"style":225},[1054],{"type":37,"value":1055},"'POST'",{"type":32,"tag":206,"props":1057,"children":1058},{"style":219},[1059],{"type":37,"value":598},{"type":32,"tag":206,"props":1061,"children":1062},{"class":208,"line":314},[1063,1068,1073,1078,1083],{"type":32,"tag":206,"props":1064,"children":1065},{"style":219},[1066],{"type":37,"value":1067},"    body: ",{"type":32,"tag":206,"props":1069,"children":1070},{"style":235},[1071],{"type":37,"value":1072},"JSON",{"type":32,"tag":206,"props":1074,"children":1075},{"style":219},[1076],{"type":37,"value":1077},".",{"type":32,"tag":206,"props":1079,"children":1080},{"style":983},[1081],{"type":37,"value":1082},"stringify",{"type":32,"tag":206,"props":1084,"children":1085},{"style":219},[1086],{"type":37,"value":1087},"({name, value, id, url: location.href}),\n",{"type":32,"tag":206,"props":1089,"children":1090},{"class":208,"line":26},[1091,1096],{"type":32,"tag":206,"props":1092,"children":1093},{"style":219},[1094],{"type":37,"value":1095},"    keepalive: ",{"type":32,"tag":206,"props":1097,"children":1098},{"style":235},[1099],{"type":37,"value":1100},"true\n",{"type":32,"tag":206,"props":1102,"children":1103},{"class":208,"line":357},[1104],{"type":32,"tag":206,"props":1105,"children":1106},{"style":219},[1107],{"type":37,"value":1108},"  });\n",{"type":32,"tag":206,"props":1110,"children":1111},{"class":208,"line":379},[1112],{"type":32,"tag":206,"props":1113,"children":1114},{"style":219},[1115],{"type":37,"value":876},{"type":32,"tag":206,"props":1117,"children":1118},{"class":208,"line":400},[1119],{"type":32,"tag":206,"props":1120,"children":1121},{"emptyLinePlaceholder":969},[1122],{"type":37,"value":972},{"type":32,"tag":206,"props":1124,"children":1125},{"class":208,"line":421},[1126,1131],{"type":32,"tag":206,"props":1127,"children":1128},{"style":983},[1129],{"type":37,"value":1130},"onCLS",{"type":32,"tag":206,"props":1132,"children":1133},{"style":219},[1134],{"type":37,"value":1135},"(sendToAnalytics);\n",{"type":32,"tag":206,"props":1137,"children":1138},{"class":208,"line":434},[1139,1144],{"type":32,"tag":206,"props":1140,"children":1141},{"style":983},[1142],{"type":37,"value":1143},"onFID",{"type":32,"tag":206,"props":1145,"children":1146},{"style":219},[1147],{"type":37,"value":1135},{"type":32,"tag":206,"props":1149,"children":1150},{"class":208,"line":765},[1151,1156],{"type":32,"tag":206,"props":1152,"children":1153},{"style":983},[1154],{"type":37,"value":1155},"onLCP",{"type":32,"tag":206,"props":1157,"children":1158},{"style":219},[1159],{"type":37,"value":1135},{"type":32,"tag":33,"props":1161,"children":1162},{},[1163,1165,1171],{"type":37,"value":1164},"Le backend ",{"type":32,"tag":202,"props":1166,"children":1168},{"className":1167},[],[1169],{"type":37,"value":1170},"\u002Fapi\u002Fvitals",{"type":37,"value":1172}," écrit ces données dans BigQuery. Le tableau de bord hebdomadaire figure dans la revue de sprint :",{"type":32,"tag":61,"props":1174,"children":1175},{},[1176,1212],{"type":32,"tag":65,"props":1177,"children":1178},{},[1179],{"type":32,"tag":69,"props":1180,"children":1181},{},[1182,1187,1192,1197,1202,1207],{"type":32,"tag":73,"props":1183,"children":1184},{},[1185],{"type":37,"value":1186},"Métrique",{"type":32,"tag":73,"props":1188,"children":1189},{},[1190],{"type":37,"value":1191},"p50",{"type":32,"tag":73,"props":1193,"children":1194},{},[1195],{"type":37,"value":1196},"p75",{"type":32,"tag":73,"props":1198,"children":1199},{},[1200],{"type":37,"value":1201},"p90",{"type":32,"tag":73,"props":1203,"children":1204},{},[1205],{"type":37,"value":1206},"Budget",{"type":32,"tag":73,"props":1208,"children":1209},{},[1210],{"type":37,"value":1211},"Statut",{"type":32,"tag":89,"props":1213,"children":1214},{},[1215,1248,1281],{"type":32,"tag":69,"props":1216,"children":1217},{},[1218,1223,1228,1233,1238,1243],{"type":32,"tag":96,"props":1219,"children":1220},{},[1221],{"type":37,"value":1222},"LCP",{"type":32,"tag":96,"props":1224,"children":1225},{},[1226],{"type":37,"value":1227},"2,1 s",{"type":32,"tag":96,"props":1229,"children":1230},{},[1231],{"type":37,"value":1232},"2,8 s",{"type":32,"tag":96,"props":1234,"children":1235},{},[1236],{"type":37,"value":1237},"4,2 s",{"type":32,"tag":96,"props":1239,"children":1240},{},[1241],{"type":37,"value":1242},"2,5 s (p75)",{"type":32,"tag":96,"props":1244,"children":1245},{},[1246],{"type":37,"value":1247},"⚠️ Dépassement 0,3 s",{"type":32,"tag":69,"props":1249,"children":1250},{},[1251,1256,1261,1266,1271,1276],{"type":32,"tag":96,"props":1252,"children":1253},{},[1254],{"type":37,"value":1255},"FID",{"type":32,"tag":96,"props":1257,"children":1258},{},[1259],{"type":37,"value":1260},"12 ms",{"type":32,"tag":96,"props":1262,"children":1263},{},[1264],{"type":37,"value":1265},"45 ms",{"type":32,"tag":96,"props":1267,"children":1268},{},[1269],{"type":37,"value":1270},"120 ms",{"type":32,"tag":96,"props":1272,"children":1273},{},[1274],{"type":37,"value":1275},"100 ms (p75)",{"type":32,"tag":96,"props":1277,"children":1278},{},[1279],{"type":37,"value":1280},"✅",{"type":32,"tag":69,"props":1282,"children":1283},{},[1284,1289,1294,1299,1304,1309],{"type":32,"tag":96,"props":1285,"children":1286},{},[1287],{"type":37,"value":1288},"CLS",{"type":32,"tag":96,"props":1290,"children":1291},{},[1292],{"type":37,"value":1293},"0,05",{"type":32,"tag":96,"props":1295,"children":1296},{},[1297],{"type":37,"value":1298},"0,09",{"type":32,"tag":96,"props":1300,"children":1301},{},[1302],{"type":37,"value":1303},"0,18",{"type":32,"tag":96,"props":1305,"children":1306},{},[1307],{"type":37,"value":1308},"0,1 (p75)",{"type":32,"tag":96,"props":1310,"children":1311},{},[1312],{"type":37,"value":1280},{"type":32,"tag":33,"props":1314,"children":1315},{},[1316],{"type":37,"value":1317},"Il y a un dépassement du budget LCP au p75 — le PM prend une décision : « L'optimisation du slider de la page d'accueil monte au sommet du sprint. On ne sort pas la nouvelle feature tant qu'on n'a pas ramené le LCP de 2,8 s à 2,3 s. »",{"type":32,"tag":33,"props":1319,"children":1320},{},[1321],{"type":37,"value":1322},"Quand vous fusionnez les données RUM avec la vélocité des sprints, vous produisez des métriques comme « 200 ms d'amélioration LCP par sprint ». L'équipe mesure la vélocité non pas par le nombre de features mais par « valeur livrée + amélioration de performance ».",{"type":32,"tag":40,"props":1324,"children":1326},{"id":1325},"système-dalerte-de-régression-attraper-les-dégradations-immédiatement",[1327],{"type":37,"value":1328},"Système d'Alerte de Régression : Attraper les Dégradations Immédiatement",{"type":32,"tag":33,"props":1330,"children":1331},{},[1332],{"type":37,"value":1333},"Détecter une régression de performance dans les 2 heures suivant un déploiement est critique. Exemple : un nouvel outil de test A\u002FB augmente le LCP de 1,2 s, entraînant une chute de conversion de 8 % dans un segment de trafic. Une alerte précoce résout le problème avec 1 rollback. Si vous le découvrez tard, c'est 1 semaine de perte de revenus.",{"type":32,"tag":33,"props":1335,"children":1336},{},[1337],{"type":32,"tag":55,"props":1338,"children":1339},{},[1340],{"type":37,"value":1341},"Règles d'alerte (BigQuery + Cloud Monitoring) :",{"type":32,"tag":195,"props":1343,"children":1347},{"code":1344,"language":1345,"meta":16,"className":1346,"style":16},"-- p75 LCP dernière 1 heure vs moyenne des 24 heures précédentes\nWITH current AS (\n  SELECT APPROX_QUANTILES(lcp, 100)[OFFSET(75)] AS lcp_p75\n  FROM vitals_table\n  WHERE timestamp > TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 1 HOUR)\n),\nbaseline AS (\n  SELECT APPROX_QUANTILES(lcp, 100)[OFFSET(75)] AS lcp_p75\n  FROM vitals_table\n  WHERE timestamp BETWEEN TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 25 HOUR)\n    AND TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 1 HOUR)\n)\nSELECT \n  c.lcp_p75 AS current_lcp,\n  b.lcp_p75 AS baseline_lcp,\n  (c.lcp_p75 - b.lcp_p75) \u002F b.lcp_p75 * 100 AS pct_change\nFROM current c, baseline b\nWHERE (c.lcp_p75 - b.lcp_p75) \u002F b.lcp_p75 > 0.15; -- alerte augmentation 15 %\n","sql","language-sql shiki shiki-themes github-dark",[1348],{"type":32,"tag":202,"props":1349,"children":1350},{"__ignoreMap":16},[1351,1359,1382,1414,1427,1475,1483,1499,1526,1537,1578,1610,1617,1630,1657,1682,1762,1775],{"type":32,"tag":206,"props":1352,"children":1353},{"class":208,"line":209},[1354],{"type":32,"tag":206,"props":1355,"children":1356},{"style":931},[1357],{"type":37,"value":1358},"-- p75 LCP dernière 1 heure vs moyenne des 24 heures précédentes\n",{"type":32,"tag":206,"props":1360,"children":1361},{"class":208,"line":231},[1362,1367,1372,1377],{"type":32,"tag":206,"props":1363,"children":1364},{"style":940},[1365],{"type":37,"value":1366},"WITH",{"type":32,"tag":206,"props":1368,"children":1369},{"style":219},[1370],{"type":37,"value":1371}," current ",{"type":32,"tag":206,"props":1373,"children":1374},{"style":940},[1375],{"type":37,"value":1376},"AS",{"type":32,"tag":206,"props":1378,"children":1379},{"style":219},[1380],{"type":37,"value":1381}," (\n",{"type":32,"tag":206,"props":1383,"children":1384},{"class":208,"line":256},[1385,1390,1395,1400,1405,1409],{"type":32,"tag":206,"props":1386,"children":1387},{"style":940},[1388],{"type":37,"value":1389},"  SELECT",{"type":32,"tag":206,"props":1391,"children":1392},{"style":219},[1393],{"type":37,"value":1394}," APPROX_QUANTILES(lcp, ",{"type":32,"tag":206,"props":1396,"children":1397},{"style":235},[1398],{"type":37,"value":1399},"100",{"type":32,"tag":206,"props":1401,"children":1402},{"style":219},[1403],{"type":37,"value":1404},")[OFFSET(75)] ",{"type":32,"tag":206,"props":1406,"children":1407},{"style":940},[1408],{"type":37,"value":1376},{"type":32,"tag":206,"props":1410,"children":1411},{"style":219},[1412],{"type":37,"value":1413}," lcp_p75\n",{"type":32,"tag":206,"props":1415,"children":1416},{"class":208,"line":270},[1417,1422],{"type":32,"tag":206,"props":1418,"children":1419},{"style":940},[1420],{"type":37,"value":1421},"  FROM",{"type":32,"tag":206,"props":1423,"children":1424},{"style":219},[1425],{"type":37,"value":1426}," vitals_table\n",{"type":32,"tag":206,"props":1428,"children":1429},{"class":208,"line":283},[1430,1435,1440,1445,1450,1455,1460,1465,1470],{"type":32,"tag":206,"props":1431,"children":1432},{"style":940},[1433],{"type":37,"value":1434},"  WHERE",{"type":32,"tag":206,"props":1436,"children":1437},{"style":940},[1438],{"type":37,"value":1439}," timestamp",{"type":32,"tag":206,"props":1441,"children":1442},{"style":940},[1443],{"type":37,"value":1444}," >",{"type":32,"tag":206,"props":1446,"children":1447},{"style":219},[1448],{"type":37,"value":1449}," TIMESTAMP_SUB(",{"type":32,"tag":206,"props":1451,"children":1452},{"style":235},[1453],{"type":37,"value":1454},"CURRENT_TIMESTAMP",{"type":32,"tag":206,"props":1456,"children":1457},{"style":219},[1458],{"type":37,"value":1459},"(), INTERVAL ",{"type":32,"tag":206,"props":1461,"children":1462},{"style":235},[1463],{"type":37,"value":1464},"1",{"type":32,"tag":206,"props":1466,"children":1467},{"style":940},[1468],{"type":37,"value":1469}," HOUR",{"type":32,"tag":206,"props":1471,"children":1472},{"style":219},[1473],{"type":37,"value":1474},")\n",{"type":32,"tag":206,"props":1476,"children":1477},{"class":208,"line":301},[1478],{"type":32,"tag":206,"props":1479,"children":1480},{"style":219},[1481],{"type":37,"value":1482},"),\n",{"type":32,"tag":206,"props":1484,"children":1485},{"class":208,"line":314},[1486,1491,1495],{"type":32,"tag":206,"props":1487,"children":1488},{"style":219},[1489],{"type":37,"value":1490},"baseline ",{"type":32,"tag":206,"props":1492,"children":1493},{"style":940},[1494],{"type":37,"value":1376},{"type":32,"tag":206,"props":1496,"children":1497},{"style":219},[1498],{"type":37,"value":1381},{"type":32,"tag":206,"props":1500,"children":1501},{"class":208,"line":26},[1502,1506,1510,1514,1518,1522],{"type":32,"tag":206,"props":1503,"children":1504},{"style":940},[1505],{"type":37,"value":1389},{"type":32,"tag":206,"props":1507,"children":1508},{"style":219},[1509],{"type":37,"value":1394},{"type":32,"tag":206,"props":1511,"children":1512},{"style":235},[1513],{"type":37,"value":1399},{"type":32,"tag":206,"props":1515,"children":1516},{"style":219},[1517],{"type":37,"value":1404},{"type":32,"tag":206,"props":1519,"children":1520},{"style":940},[1521],{"type":37,"value":1376},{"type":32,"tag":206,"props":1523,"children":1524},{"style":219},[1525],{"type":37,"value":1413},{"type":32,"tag":206,"props":1527,"children":1528},{"class":208,"line":357},[1529,1533],{"type":32,"tag":206,"props":1530,"children":1531},{"style":940},[1532],{"type":37,"value":1421},{"type":32,"tag":206,"props":1534,"children":1535},{"style":219},[1536],{"type":37,"value":1426},{"type":32,"tag":206,"props":1538,"children":1539},{"class":208,"line":379},[1540,1544,1548,1553,1557,1561,1565,1570,1574],{"type":32,"tag":206,"props":1541,"children":1542},{"style":940},[1543],{"type":37,"value":1434},{"type":32,"tag":206,"props":1545,"children":1546},{"style":940},[1547],{"type":37,"value":1439},{"type":32,"tag":206,"props":1549,"children":1550},{"style":940},[1551],{"type":37,"value":1552}," BETWEEN",{"type":32,"tag":206,"props":1554,"children":1555},{"style":219},[1556],{"type":37,"value":1449},{"type":32,"tag":206,"props":1558,"children":1559},{"style":235},[1560],{"type":37,"value":1454},{"type":32,"tag":206,"props":1562,"children":1563},{"style":219},[1564],{"type":37,"value":1459},{"type":32,"tag":206,"props":1566,"children":1567},{"style":235},[1568],{"type":37,"value":1569},"25",{"type":32,"tag":206,"props":1571,"children":1572},{"style":940},[1573],{"type":37,"value":1469},{"type":32,"tag":206,"props":1575,"children":1576},{"style":219},[1577],{"type":37,"value":1474},{"type":32,"tag":206,"props":1579,"children":1580},{"class":208,"line":400},[1581,1586,1590,1594,1598,1602,1606],{"type":32,"tag":206,"props":1582,"children":1583},{"style":940},[1584],{"type":37,"value":1585},"    AND",{"type":32,"tag":206,"props":1587,"children":1588},{"style":219},[1589],{"type":37,"value":1449},{"type":32,"tag":206,"props":1591,"children":1592},{"style":235},[1593],{"type":37,"value":1454},{"type":32,"tag":206,"props":1595,"children":1596},{"style":219},[1597],{"type":37,"value":1459},{"type":32,"tag":206,"props":1599,"children":1600},{"style":235},[1601],{"type":37,"value":1464},{"type":32,"tag":206,"props":1603,"children":1604},{"style":940},[1605],{"type":37,"value":1469},{"type":32,"tag":206,"props":1607,"children":1608},{"style":219},[1609],{"type":37,"value":1474},{"type":32,"tag":206,"props":1611,"children":1612},{"class":208,"line":421},[1613],{"type":32,"tag":206,"props":1614,"children":1615},{"style":219},[1616],{"type":37,"value":1474},{"type":32,"tag":206,"props":1618,"children":1619},{"class":208,"line":434},[1620,1625],{"type":32,"tag":206,"props":1621,"children":1622},{"style":940},[1623],{"type":37,"value":1624},"SELECT",{"type":32,"tag":206,"props":1626,"children":1627},{"style":219},[1628],{"type":37,"value":1629}," \n",{"type":32,"tag":206,"props":1631,"children":1632},{"class":208,"line":765},[1633,1638,1642,1647,1652],{"type":32,"tag":206,"props":1634,"children":1635},{"style":235},[1636],{"type":37,"value":1637},"  c",{"type":32,"tag":206,"props":1639,"children":1640},{"style":219},[1641],{"type":37,"value":1077},{"type":32,"tag":206,"props":1643,"children":1644},{"style":235},[1645],{"type":37,"value":1646},"lcp_p75",{"type":32,"tag":206,"props":1648,"children":1649},{"style":940},[1650],{"type":37,"value":1651}," AS",{"type":32,"tag":206,"props":1653,"children":1654},{"style":219},[1655],{"type":37,"value":1656}," current_lcp,\n",{"type":32,"tag":206,"props":1658,"children":1659},{"class":208,"line":804},[1660,1665,1669,1673,1677],{"type":32,"tag":206,"props":1661,"children":1662},{"style":235},[1663],{"type":37,"value":1664},"  b",{"type":32,"tag":206,"props":1666,"children":1667},{"style":219},[1668],{"type":37,"value":1077},{"type":32,"tag":206,"props":1670,"children":1671},{"style":235},[1672],{"type":37,"value":1646},{"type":32,"tag":206,"props":1674,"children":1675},{"style":940},[1676],{"type":37,"value":1651},{"type":32,"tag":206,"props":1678,"children":1679},{"style":219},[1680],{"type":37,"value":1681}," baseline_lcp,\n",{"type":32,"tag":206,"props":1683,"children":1684},{"class":208,"line":813},[1685,1690,1695,1699,1703,1708,1713,1717,1721,1726,1731,1735,1739,1743,1748,1753,1757],{"type":32,"tag":206,"props":1686,"children":1687},{"style":219},[1688],{"type":37,"value":1689},"  (",{"type":32,"tag":206,"props":1691,"children":1692},{"style":235},[1693],{"type":37,"value":1694},"c",{"type":32,"tag":206,"props":1696,"children":1697},{"style":219},[1698],{"type":37,"value":1077},{"type":32,"tag":206,"props":1700,"children":1701},{"style":235},[1702],{"type":37,"value":1646},{"type":32,"tag":206,"props":1704,"children":1705},{"style":940},[1706],{"type":37,"value":1707}," -",{"type":32,"tag":206,"props":1709,"children":1710},{"style":235},[1711],{"type":37,"value":1712}," b",{"type":32,"tag":206,"props":1714,"children":1715},{"style":219},[1716],{"type":37,"value":1077},{"type":32,"tag":206,"props":1718,"children":1719},{"style":235},[1720],{"type":37,"value":1646},{"type":32,"tag":206,"props":1722,"children":1723},{"style":219},[1724],{"type":37,"value":1725},") ",{"type":32,"tag":206,"props":1727,"children":1728},{"style":940},[1729],{"type":37,"value":1730},"\u002F",{"type":32,"tag":206,"props":1732,"children":1733},{"style":235},[1734],{"type":37,"value":1712},{"type":32,"tag":206,"props":1736,"children":1737},{"style":219},[1738],{"type":37,"value":1077},{"type":32,"tag":206,"props":1740,"children":1741},{"style":235},[1742],{"type":37,"value":1646},{"type":32,"tag":206,"props":1744,"children":1745},{"style":940},[1746],{"type":37,"value":1747}," *",{"type":32,"tag":206,"props":1749,"children":1750},{"style":235},[1751],{"type":37,"value":1752}," 100",{"type":32,"tag":206,"props":1754,"children":1755},{"style":940},[1756],{"type":37,"value":1651},{"type":32,"tag":206,"props":1758,"children":1759},{"style":219},[1760],{"type":37,"value":1761}," pct_change\n",{"type":32,"tag":206,"props":1763,"children":1764},{"class":208,"line":821},[1765,1770],{"type":32,"tag":206,"props":1766,"children":1767},{"style":940},[1768],{"type":37,"value":1769},"FROM",{"type":32,"tag":206,"props":1771,"children":1772},{"style":219},[1773],{"type":37,"value":1774}," current c, baseline b\n",{"type":32,"tag":206,"props":1776,"children":1777},{"class":208,"line":834},[1778,1783,1788,1792,1796,1800,1804,1808,1812,1816,1820,1824,1828,1832,1836,1840,1845,1849,1854,1859],{"type":32,"tag":206,"props":1779,"children":1780},{"style":940},[1781],{"type":37,"value":1782},"WHERE",{"type":32,"tag":206,"props":1784,"children":1785},{"style":219},[1786],{"type":37,"value":1787}," (",{"type":32,"tag":206,"props":1789,"children":1790},{"style":235},[1791],{"type":37,"value":1694},{"type":32,"tag":206,"props":1793,"children":1794},{"style":219},[1795],{"type":37,"value":1077},{"type":32,"tag":206,"props":1797,"children":1798},{"style":235},[1799],{"type":37,"value":1646},{"type":32,"tag":206,"props":1801,"children":1802},{"style":940},[1803],{"type":37,"value":1707},{"type":32,"tag":206,"props":1805,"children":1806},{"style":235},[1807],{"type":37,"value":1712},{"type":32,"tag":206,"props":1809,"children":1810},{"style":219},[1811],{"type":37,"value":1077},{"type":32,"tag":206,"props":1813,"children":1814},{"style":235},[1815],{"type":37,"value":1646},{"type":32,"tag":206,"props":1817,"children":1818},{"style":219},[1819],{"type":37,"value":1725},{"type":32,"tag":206,"props":1821,"children":1822},{"style":940},[1823],{"type":37,"value":1730},{"type":32,"tag":206,"props":1825,"children":1826},{"style":235},[1827],{"type":37,"value":1712},{"type":32,"tag":206,"props":1829,"children":1830},{"style":219},[1831],{"type":37,"value":1077},{"type":32,"tag":206,"props":1833,"children":1834},{"style":235},[1835],{"type":37,"value":1646},{"type":32,"tag":206,"props":1837,"children":1838},{"style":940},[1839],{"type":37,"value":1444},{"type":32,"tag":206,"props":1841,"children":1842},{"style":235},[1843],{"type":37,"value":1844}," 0",{"type":32,"tag":206,"props":1846,"children":1847},{"style":219},[1848],{"type":37,"value":1077},{"type":32,"tag":206,"props":1850,"children":1851},{"style":235},[1852],{"type":37,"value":1853},"15",{"type":32,"tag":206,"props":1855,"children":1856},{"style":219},[1857],{"type":37,"value":1858},"; ",{"type":32,"tag":206,"props":1860,"children":1861},{"style":931},[1862],{"type":37,"value":1863},"-- alerte augmentation 15 %\n",{"type":32,"tag":33,"props":1865,"children":1866},{},[1867],{"type":37,"value":1868},"Cette requête s'exécute toutes les 10 minutes via Cloud Scheduler. Si le seuil est dépassé, elle tombe dans le canal Slack #perf-alerts. L'équipe on-call commence l'analyse des causes racines dans les 30 minutes.",{"type":32,"tag":33,"props":1870,"children":1871},{},[1872],{"type":32,"tag":55,"props":1873,"children":1874},{},[1875],{"type":37,"value":1876},"Scénarios de régression typiques :",{"type":32,"tag":1878,"props":1879,"children":1880},"ol",{},[1881,1892,1902],{"type":32,"tag":1882,"props":1883,"children":1884},"li",{},[1885,1890],{"type":32,"tag":55,"props":1886,"children":1887},{},[1888],{"type":37,"value":1889},"Script tiers ajouté :",{"type":37,"value":1891}," Un vendor d'analytics bloque le thread principal pendant 180 ms → budget TBT dépassé",{"type":32,"tag":1882,"props":1893,"children":1894},{},[1895,1900],{"type":32,"tag":55,"props":1896,"children":1897},{},[1898],{"type":37,"value":1899},"Lazy-load d'image cassé :",{"type":37,"value":1901}," L'image candidate LCP devient lazy-loaded → LCP 1,2 s → 3,1 s",{"type":32,"tag":1882,"props":1903,"children":1904},{},[1905,1910],{"type":32,"tag":55,"props":1906,"children":1907},{},[1908],{"type":37,"value":1909},"Mauvaise séparation du bundle JS :",{"type":37,"value":1911}," Le CSS critique est différé → FCP 900 ms → 2,4 s",{"type":32,"tag":33,"props":1913,"children":1914},{},[1915],{"type":37,"value":1916},"Le but du système d'alerte est l'attribution — répondre à « quel déploiement a cassé quelle métrique ? » en 10 minutes.",{"type":32,"tag":40,"props":1918,"children":1920},{"id":1919},"lier-le-budget-au-backlog-produit",[1921],{"type":37,"value":1922},"Lier le Budget au Backlog Produit",{"type":32,"tag":33,"props":1924,"children":1925},{},[1926],{"type":37,"value":1927},"Plutôt que de faire du budget de performance une simple contrainte pour développeurs, il doit devenir une décision produit. Le PM commence à penser : « Cette feature coûte 40 KB de JS, il me reste 25 KB de budget — quelle ancienne feature vais-je supprimer ? »",{"type":32,"tag":33,"props":1929,"children":1930},{},[1931],{"type":32,"tag":55,"props":1932,"children":1933},{},[1934],{"type":37,"value":1935},"Template de compromis :",{"type":32,"tag":195,"props":1937,"children":1939},{"code":1938},"Feature : Carrousel de produits en page d'accueil (8 emplacements)\nImpact sur la Performance :\n  - JS : +32 KB (gzip)\n  - LCP : +180 ms (animation du carrousel)\n  - CLS : +0,04 (décalage d'image lazy)\n\nStatut du Budget AVANT :\n  - JS : 168 KB \u002F 200 KB (restant 32 KB)\n  - LCP : 2,3 s \u002F 2,5 s (restant 200 ms)\n  - CLS : 0,06 \u002F 0,1 (restant 0,04)\n\nStatut du Budget APRÈS :\n  - JS : 200 KB \u002F 200 KB ⚠️ PLEIN\n  - LCP : 2,48 s \u002F 2,5 s ⚠️ 20 ms restant\n  - CLS : 0,10 \u002F 0,1 ⚠️ PLEIN\n\nDécision : Approuvé (le test A\u002FB du carrousel montre +3 % CTR).\nCondition : Supprimer l'ancien rotateur de bannière (-28 KB).\n",[1940],{"type":32,"tag":202,"props":1941,"children":1942},{"__ignoreMap":16},[1943],{"type":37,"value":1938},{"type":32,"tag":33,"props":1945,"children":1946},{},[1947],{"type":37,"value":1948},"Le PM fait ce compromis de manière data-driven : « +3 % de CTR vaut-il 180 ms de LCP ? » La question est répondre par les données du funnel de conversion. Si oui, approuver. Si non, attendre au backlog une « amélioration neutre en performance ».",{"type":32,"tag":33,"props":1950,"children":1951},{},[1952],{"type":37,"value":1953},"L'équipe passe le backlog à l'audit de performance toutes les 2 semaines : « Quelle feature a le ROI de performance le plus bas ? » Exemple : les anciens boutons de partage social font 12 KB mais ne sont utilisés que 0,2 % du temps → suppression, budget libéré.",{"type":32,"tag":40,"props":1955,"children":1957},{"id":1956},"culture-de-performance-gestion-basée-sur-les-chiffres",[1958],{"type":37,"value":1959},"Culture de Performance : Gestion Basée sur les Chiffres",{"type":32,"tag":33,"props":1961,"children":1962},{},[1963],{"type":37,"value":1964},"Plutôt que de voir la performance web comme une « bonne pratique », il faut en faire un KPI. Quand les équipes intègrent « réduire le p75 LCP de 2,5 s à 2,0 s » dans les OKR trimestriels, l'amélioration de la performance devient un élément de travail suivi séparément de la vélocité des sprints.",{"type":32,"tag":33,"props":1966,"children":1967},{},[1968],{"type":37,"value":1969},"Les budgets de performance sont la pierre angulaire de cette culture. Le développeur se demande « reste-t-il du budget ? ». Le PM calcule « quelle est l'empreinte de performance ? ». Le CTO examine « quel est le changement LCP moyen par déploiement ? » dans la revue trimestrielle.",{"type":32,"tag":33,"props":1971,"children":1972},{},[1973],{"type":37,"value":1974},"Lighthouse CI tient la barrière, RUM dit la vérité, le système d'alerte détecte les dérives, les compromis du backlog rétablissent l'équilibre. Quand cette boucle se ferme, la performance cesse d'être « le problème de l'équipe technique » pour devenir une dimension mesurable du succès produit. Après 2026, quand les Web Vitals sont devenu un facteur de classement Google, les équipes qui n'avaient pas mis en place cette boucle ont perdu 40 % du trafic organique (benchmark Search Console 2025). Fixer un budget n'est plus un luxe — c'est une tactique de survie.",{"type":32,"tag":1976,"props":1977,"children":1978},"style",{},[1979],{"type":37,"value":1980},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":16,"searchDepth":256,"depth":256,"links":1982},[1983,1984,1985,1986,1987,1988],{"id":42,"depth":231,"text":45},{"id":177,"depth":231,"text":180},{"id":900,"depth":231,"text":903},{"id":1325,"depth":231,"text":1328},{"id":1919,"depth":231,"text":1922},{"id":1956,"depth":231,"text":1959},"markdown","content:fr:tech:budgets-de-performance-web-lier-les-metriques-aux-decisions.md","content","fr\u002Ftech\u002Fbudgets-de-performance-web-lier-les-metriques-aux-decisions.md","fr\u002Ftech\u002Fbudgets-de-performance-web-lier-les-metriques-aux-decisions","md",1782079501963]