[{"data":1,"prerenderedAt":2693},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fbudgets-de-performance-web-mecanisme-de-decision":13},{"i18nKey":4,"paths":5},"tech-004-2026-07",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fweb-performance-budgets-in-ci-cd","\u002Fen\u002Ftech\u002Fweb-performance-budgets-decision-framework","\u002Fes\u002Ftech\u002Fpresupuestos-rendimiento-web-conectar-decision","\u002Ffr\u002Ftech\u002Fbudgets-de-performance-web-mecanismes-de-decision","\u002Fit\u002Ftech\u002Fweb-performance-budget-decision-mechanism","\u002Fru\u002Ftech\u002Fpresupuesti-proizvodstva-integraciya-v-pipeline","\u002Ftr\u002Ftech\u002Fweb-performance-budgetlari-karar-mekanizmasina-baglamak",{"_path":14,"_dir":15,"_draft":16,"_partial":16,"_locale":17,"title":18,"description":19,"publishedAt":20,"modifiedAt":20,"category":15,"i18nKey":4,"tags":21,"readingTime":27,"author":28,"body":29,"_type":2687,"_id":2688,"_source":2689,"_file":2690,"_stem":2691,"_extension":2692},"\u002Ffr\u002Ftech\u002Fbudgets-de-performance-web-mecanisme-de-decision","tech",false,"","Budgets de Performance Web : Les Lier au Mécanisme de Décision","Intégrer Lighthouse CI, RUM et les alarmes de régression de perf dans le pipeline CI\u002FCD pour arrêter le ralentissement au moment du déploiement — cas d'usage réels.","2026-07-30",[22,23,24,25,26],"web-performance","lighthouse-ci","rum","performance-budget","core-web-vitals",9,"Roibase",{"type":30,"children":31,"toc":2678},"root",[32,40,47,52,57,62,67,569,588,594,599,1106,1127,1132,1140,1153,1177,1183,1188,1193,1599,1612,1738,1743,1748,1755,1760,2292,2297,2305,2311,2316,2325,2360,2368,2398,2403,2408,2414,2419,2432,2672],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37],{"type":38,"value":39},"text","Découvrir une régression de performance après le déploiement en production, c'est comme être surpris par le taux de change après avoir fait une transaction : trop tard. Selon le rapport Commerce Signals de Google 2026, chaque 100 ms supplémentaires de LCP engendre une augmentation de 3,5 % des taux de rebond. Tout comme nous capturons les bugs avant le déploiement, nous devons capturer les ralentissements dans le pipeline CI\u002FCD lui-même. Cet article montre comment intégrer Lighthouse CI, RUM, la surveillance synthétique et les budgets de performance pour arrêter les déploiements — avec code et chiffres concrets.",{"type":33,"tag":41,"props":42,"children":44},"h2",{"id":43},"quest-ce-quun-budget-de-performance-et-pourquoi-cest-obligatoire-en-cicd",[45],{"type":38,"value":46},"Qu'est-ce qu'un Budget de Performance et Pourquoi c'est Obligatoire en CI\u002FCD",{"type":33,"tag":34,"props":48,"children":49},{},[50],{"type":38,"value":51},"Un budget de performance définit la limite supérieure des ressources que votre page peut consommer. Par exemple : « Page d'accueil : LCP \u003C 2s, Total Blocking Time \u003C 200ms, JS bundle \u003C 400KB ». Cela fonctionne comme un SLA : si un chiffre dépasse le seuil, le build échoue et le déploiement est bloqué.",{"type":33,"tag":34,"props":53,"children":54},{},[55],{"type":38,"value":56},"L'approche classique — générer un rapport Lighthouse manuel chaque fin de sprint et l'examiner — révélerait une régression avec deux semaines de retard. Avec la moderne approche, le budget est intégré à l'IC. À chaque pull request, Lighthouse CI s'exécute : il rend la page dans un Chromium headless, mesure les métriques de performance et les compare au budget. Si le budget est dépassé, l'action GitHub retourne une erreur et le merge est bloqué.",{"type":33,"tag":34,"props":58,"children":59},{},[60],{"type":38,"value":61},"Scénario concret : sur une vitrine Shopify Hydrogen, un nouveau widget de recommandation de produits augmente la taille du bundle de 340 KB à 510 KB. Le pipeline CI le détecte immédiatement et marque le PR en rouge. Le widget n'est déployé qu'après optimisation via lazy-loading. Sans cela, le code aurait atteint la production, causant 4 secondes de temps de blocage supplémentaire sur 3G mobile — deux jours de perte de chiffre d'affaires.",{"type":33,"tag":34,"props":63,"children":64},{},[65],{"type":38,"value":66},"Lighthouse CI récupère l'URL de déploiement de prévisualisation, la rend dans Chromium et mesure les Core Web Vitals + des métriques personnalisées par rapport à un fichier JSON de budget.",{"type":33,"tag":68,"props":69,"children":73},"pre",{"code":70,"language":71,"meta":17,"className":72,"style":17},"\u002F\u002F lighthouserc.json\n{\n  \"ci\": {\n    \"assert\": {\n      \"preset\": \"lighthouse:recommended\",\n      \"assertions\": {\n        \"largest-contentful-paint\": [\"error\", { \"maxNumericValue\": 2000 }],\n        \"total-blocking-time\": [\"error\", { \"maxNumericValue\": 200 }],\n        \"cumulative-layout-shift\": [\"error\", { \"maxNumericValue\": 0.1 }],\n        \"speed-index\": [\"error\", { \"maxNumericValue\": 3000 }],\n        \"resource-summary:script:size\": [\"error\", { \"maxNumericValue\": 400000 }]\n      }\n    },\n    \"collect\": {\n      \"numberOfRuns\": 3,\n      \"url\": [\"https:\u002F\u002Fpreview-{PR_NUMBER}.vercel.app\"],\n      \"settings\": {\n        \"throttling\": {\n          \"rttMs\": 150,\n          \"throughputKbps\": 1638.4,\n          \"cpuSlowdownMultiplier\": 4\n        }\n      }\n    }\n  }\n}\n","json","language-json shiki shiki-themes github-dark",[74],{"type":33,"tag":75,"props":76,"children":77},"code",{"__ignoreMap":17},[78,90,100,115,128,153,166,209,247,284,322,361,370,379,392,414,437,450,463,485,507,525,534,542,551,560],{"type":33,"tag":79,"props":80,"children":83},"span",{"class":81,"line":82},"line",1,[84],{"type":33,"tag":79,"props":85,"children":87},{"style":86},"--shiki-default:#6A737D",[88],{"type":38,"value":89},"\u002F\u002F lighthouserc.json\n",{"type":33,"tag":79,"props":91,"children":93},{"class":81,"line":92},2,[94],{"type":33,"tag":79,"props":95,"children":97},{"style":96},"--shiki-default:#E1E4E8",[98],{"type":38,"value":99},"{\n",{"type":33,"tag":79,"props":101,"children":103},{"class":81,"line":102},3,[104,110],{"type":33,"tag":79,"props":105,"children":107},{"style":106},"--shiki-default:#79B8FF",[108],{"type":38,"value":109},"  \"ci\"",{"type":33,"tag":79,"props":111,"children":112},{"style":96},[113],{"type":38,"value":114},": {\n",{"type":33,"tag":79,"props":116,"children":118},{"class":81,"line":117},4,[119,124],{"type":33,"tag":79,"props":120,"children":121},{"style":106},[122],{"type":38,"value":123},"    \"assert\"",{"type":33,"tag":79,"props":125,"children":126},{"style":96},[127],{"type":38,"value":114},{"type":33,"tag":79,"props":129,"children":131},{"class":81,"line":130},5,[132,137,142,148],{"type":33,"tag":79,"props":133,"children":134},{"style":106},[135],{"type":38,"value":136},"      \"preset\"",{"type":33,"tag":79,"props":138,"children":139},{"style":96},[140],{"type":38,"value":141},": ",{"type":33,"tag":79,"props":143,"children":145},{"style":144},"--shiki-default:#9ECBFF",[146],{"type":38,"value":147},"\"lighthouse:recommended\"",{"type":33,"tag":79,"props":149,"children":150},{"style":96},[151],{"type":38,"value":152},",\n",{"type":33,"tag":79,"props":154,"children":156},{"class":81,"line":155},6,[157,162],{"type":33,"tag":79,"props":158,"children":159},{"style":106},[160],{"type":38,"value":161},"      \"assertions\"",{"type":33,"tag":79,"props":163,"children":164},{"style":96},[165],{"type":38,"value":114},{"type":33,"tag":79,"props":167,"children":169},{"class":81,"line":168},7,[170,175,180,185,190,195,199,204],{"type":33,"tag":79,"props":171,"children":172},{"style":106},[173],{"type":38,"value":174},"        \"largest-contentful-paint\"",{"type":33,"tag":79,"props":176,"children":177},{"style":96},[178],{"type":38,"value":179},": [",{"type":33,"tag":79,"props":181,"children":182},{"style":144},[183],{"type":38,"value":184},"\"error\"",{"type":33,"tag":79,"props":186,"children":187},{"style":96},[188],{"type":38,"value":189},", { ",{"type":33,"tag":79,"props":191,"children":192},{"style":106},[193],{"type":38,"value":194},"\"maxNumericValue\"",{"type":33,"tag":79,"props":196,"children":197},{"style":96},[198],{"type":38,"value":141},{"type":33,"tag":79,"props":200,"children":201},{"style":106},[202],{"type":38,"value":203},"2000",{"type":33,"tag":79,"props":205,"children":206},{"style":96},[207],{"type":38,"value":208}," }],\n",{"type":33,"tag":79,"props":210,"children":212},{"class":81,"line":211},8,[213,218,222,226,230,234,238,243],{"type":33,"tag":79,"props":214,"children":215},{"style":106},[216],{"type":38,"value":217},"        \"total-blocking-time\"",{"type":33,"tag":79,"props":219,"children":220},{"style":96},[221],{"type":38,"value":179},{"type":33,"tag":79,"props":223,"children":224},{"style":144},[225],{"type":38,"value":184},{"type":33,"tag":79,"props":227,"children":228},{"style":96},[229],{"type":38,"value":189},{"type":33,"tag":79,"props":231,"children":232},{"style":106},[233],{"type":38,"value":194},{"type":33,"tag":79,"props":235,"children":236},{"style":96},[237],{"type":38,"value":141},{"type":33,"tag":79,"props":239,"children":240},{"style":106},[241],{"type":38,"value":242},"200",{"type":33,"tag":79,"props":244,"children":245},{"style":96},[246],{"type":38,"value":208},{"type":33,"tag":79,"props":248,"children":249},{"class":81,"line":27},[250,255,259,263,267,271,275,280],{"type":33,"tag":79,"props":251,"children":252},{"style":106},[253],{"type":38,"value":254},"        \"cumulative-layout-shift\"",{"type":33,"tag":79,"props":256,"children":257},{"style":96},[258],{"type":38,"value":179},{"type":33,"tag":79,"props":260,"children":261},{"style":144},[262],{"type":38,"value":184},{"type":33,"tag":79,"props":264,"children":265},{"style":96},[266],{"type":38,"value":189},{"type":33,"tag":79,"props":268,"children":269},{"style":106},[270],{"type":38,"value":194},{"type":33,"tag":79,"props":272,"children":273},{"style":96},[274],{"type":38,"value":141},{"type":33,"tag":79,"props":276,"children":277},{"style":106},[278],{"type":38,"value":279},"0.1",{"type":33,"tag":79,"props":281,"children":282},{"style":96},[283],{"type":38,"value":208},{"type":33,"tag":79,"props":285,"children":287},{"class":81,"line":286},10,[288,293,297,301,305,309,313,318],{"type":33,"tag":79,"props":289,"children":290},{"style":106},[291],{"type":38,"value":292},"        \"speed-index\"",{"type":33,"tag":79,"props":294,"children":295},{"style":96},[296],{"type":38,"value":179},{"type":33,"tag":79,"props":298,"children":299},{"style":144},[300],{"type":38,"value":184},{"type":33,"tag":79,"props":302,"children":303},{"style":96},[304],{"type":38,"value":189},{"type":33,"tag":79,"props":306,"children":307},{"style":106},[308],{"type":38,"value":194},{"type":33,"tag":79,"props":310,"children":311},{"style":96},[312],{"type":38,"value":141},{"type":33,"tag":79,"props":314,"children":315},{"style":106},[316],{"type":38,"value":317},"3000",{"type":33,"tag":79,"props":319,"children":320},{"style":96},[321],{"type":38,"value":208},{"type":33,"tag":79,"props":323,"children":325},{"class":81,"line":324},11,[326,331,335,339,343,347,351,356],{"type":33,"tag":79,"props":327,"children":328},{"style":106},[329],{"type":38,"value":330},"        \"resource-summary:script:size\"",{"type":33,"tag":79,"props":332,"children":333},{"style":96},[334],{"type":38,"value":179},{"type":33,"tag":79,"props":336,"children":337},{"style":144},[338],{"type":38,"value":184},{"type":33,"tag":79,"props":340,"children":341},{"style":96},[342],{"type":38,"value":189},{"type":33,"tag":79,"props":344,"children":345},{"style":106},[346],{"type":38,"value":194},{"type":33,"tag":79,"props":348,"children":349},{"style":96},[350],{"type":38,"value":141},{"type":33,"tag":79,"props":352,"children":353},{"style":106},[354],{"type":38,"value":355},"400000",{"type":33,"tag":79,"props":357,"children":358},{"style":96},[359],{"type":38,"value":360}," }]\n",{"type":33,"tag":79,"props":362,"children":364},{"class":81,"line":363},12,[365],{"type":33,"tag":79,"props":366,"children":367},{"style":96},[368],{"type":38,"value":369},"      }\n",{"type":33,"tag":79,"props":371,"children":373},{"class":81,"line":372},13,[374],{"type":33,"tag":79,"props":375,"children":376},{"style":96},[377],{"type":38,"value":378},"    },\n",{"type":33,"tag":79,"props":380,"children":382},{"class":81,"line":381},14,[383,388],{"type":33,"tag":79,"props":384,"children":385},{"style":106},[386],{"type":38,"value":387},"    \"collect\"",{"type":33,"tag":79,"props":389,"children":390},{"style":96},[391],{"type":38,"value":114},{"type":33,"tag":79,"props":393,"children":395},{"class":81,"line":394},15,[396,401,405,410],{"type":33,"tag":79,"props":397,"children":398},{"style":106},[399],{"type":38,"value":400},"      \"numberOfRuns\"",{"type":33,"tag":79,"props":402,"children":403},{"style":96},[404],{"type":38,"value":141},{"type":33,"tag":79,"props":406,"children":407},{"style":106},[408],{"type":38,"value":409},"3",{"type":33,"tag":79,"props":411,"children":412},{"style":96},[413],{"type":38,"value":152},{"type":33,"tag":79,"props":415,"children":417},{"class":81,"line":416},16,[418,423,427,432],{"type":33,"tag":79,"props":419,"children":420},{"style":106},[421],{"type":38,"value":422},"      \"url\"",{"type":33,"tag":79,"props":424,"children":425},{"style":96},[426],{"type":38,"value":179},{"type":33,"tag":79,"props":428,"children":429},{"style":144},[430],{"type":38,"value":431},"\"https:\u002F\u002Fpreview-{PR_NUMBER}.vercel.app\"",{"type":33,"tag":79,"props":433,"children":434},{"style":96},[435],{"type":38,"value":436},"],\n",{"type":33,"tag":79,"props":438,"children":440},{"class":81,"line":439},17,[441,446],{"type":33,"tag":79,"props":442,"children":443},{"style":106},[444],{"type":38,"value":445},"      \"settings\"",{"type":33,"tag":79,"props":447,"children":448},{"style":96},[449],{"type":38,"value":114},{"type":33,"tag":79,"props":451,"children":453},{"class":81,"line":452},18,[454,459],{"type":33,"tag":79,"props":455,"children":456},{"style":106},[457],{"type":38,"value":458},"        \"throttling\"",{"type":33,"tag":79,"props":460,"children":461},{"style":96},[462],{"type":38,"value":114},{"type":33,"tag":79,"props":464,"children":466},{"class":81,"line":465},19,[467,472,476,481],{"type":33,"tag":79,"props":468,"children":469},{"style":106},[470],{"type":38,"value":471},"          \"rttMs\"",{"type":33,"tag":79,"props":473,"children":474},{"style":96},[475],{"type":38,"value":141},{"type":33,"tag":79,"props":477,"children":478},{"style":106},[479],{"type":38,"value":480},"150",{"type":33,"tag":79,"props":482,"children":483},{"style":96},[484],{"type":38,"value":152},{"type":33,"tag":79,"props":486,"children":488},{"class":81,"line":487},20,[489,494,498,503],{"type":33,"tag":79,"props":490,"children":491},{"style":106},[492],{"type":38,"value":493},"          \"throughputKbps\"",{"type":33,"tag":79,"props":495,"children":496},{"style":96},[497],{"type":38,"value":141},{"type":33,"tag":79,"props":499,"children":500},{"style":106},[501],{"type":38,"value":502},"1638.4",{"type":33,"tag":79,"props":504,"children":505},{"style":96},[506],{"type":38,"value":152},{"type":33,"tag":79,"props":508,"children":510},{"class":81,"line":509},21,[511,516,520],{"type":33,"tag":79,"props":512,"children":513},{"style":106},[514],{"type":38,"value":515},"          \"cpuSlowdownMultiplier\"",{"type":33,"tag":79,"props":517,"children":518},{"style":96},[519],{"type":38,"value":141},{"type":33,"tag":79,"props":521,"children":522},{"style":106},[523],{"type":38,"value":524},"4\n",{"type":33,"tag":79,"props":526,"children":528},{"class":81,"line":527},22,[529],{"type":33,"tag":79,"props":530,"children":531},{"style":96},[532],{"type":38,"value":533},"        }\n",{"type":33,"tag":79,"props":535,"children":537},{"class":81,"line":536},23,[538],{"type":33,"tag":79,"props":539,"children":540},{"style":96},[541],{"type":38,"value":369},{"type":33,"tag":79,"props":543,"children":545},{"class":81,"line":544},24,[546],{"type":33,"tag":79,"props":547,"children":548},{"style":96},[549],{"type":38,"value":550},"    }\n",{"type":33,"tag":79,"props":552,"children":554},{"class":81,"line":553},25,[555],{"type":33,"tag":79,"props":556,"children":557},{"style":96},[558],{"type":38,"value":559},"  }\n",{"type":33,"tag":79,"props":561,"children":563},{"class":81,"line":562},26,[564],{"type":33,"tag":79,"props":565,"children":566},{"style":96},[567],{"type":38,"value":568},"}\n",{"type":33,"tag":34,"props":570,"children":571},{},[572,578,580,586],{"type":33,"tag":75,"props":573,"children":575},{"className":574},[],[576],{"type":38,"value":577},"numberOfRuns: 3",{"type":38,"value":579}," réduit la variabilité — la valeur médiane est prise. Le ",{"type":33,"tag":75,"props":581,"children":583},{"className":582},[],[584],{"type":38,"value":585},"throttling",{"type":38,"value":587}," simule les conditions 3G mobile — le pire scénario de l'utilisateur réel.",{"type":33,"tag":41,"props":589,"children":591},{"id":590},"automatiser-lighthouse-ci-avec-github-actions",[592],{"type":38,"value":593},"Automatiser Lighthouse CI avec GitHub Actions",{"type":33,"tag":34,"props":595,"children":596},{},[597],{"type":38,"value":598},"Pour exécuter Lighthouse dans le pipeline, nous utilisons un déploiement de prévisualisation Vercel + GitHub Actions. À chaque PR, Vercel génère une URL de prévisualisation et Lighthouse CI l'analyse. Les résultats apparaissent sous forme de commentaire dans la PR. Si le budget est dépassé, le CI échoue.",{"type":33,"tag":68,"props":600,"children":604},{"code":601,"language":602,"meta":17,"className":603,"style":17},"# .github\u002Fworkflows\u002Flighthouse.yml\nname: 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        with:\n          node-version: '20'\n      - run: npm ci\n      - run: npm run build\n      - name: Wait for Vercel Preview\n        uses: patrickedqvist\u002Fwait-for-vercel-preview@v1.3.1\n        id: vercel_preview\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          max_timeout: 300\n      - name: Run Lighthouse CI\n        env:\n          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_TOKEN }}\n        run: |\n          npm install -g @lhci\u002Fcli\n          lhci autorun --collect.url=${{ steps.vercel_preview.outputs.url }}\n      - name: Comment PR\n        uses: treosh\u002Flighthouse-ci-action@v9\n        with:\n          urls: ${{ steps.vercel_preview.outputs.url }}\n          uploadArtifacts: true\n          temporaryPublicStorage: true\n","yaml","language-yaml shiki shiki-themes github-dark",[605],{"type":33,"tag":75,"props":606,"children":607},{"__ignoreMap":17},[608,616,634,656,669,681,698,710,732,752,764,781,802,822,842,859,876,887,904,921,941,953,970,988,996,1004,1024,1041,1053,1071,1089],{"type":33,"tag":79,"props":609,"children":610},{"class":81,"line":82},[611],{"type":33,"tag":79,"props":612,"children":613},{"style":86},[614],{"type":38,"value":615},"# .github\u002Fworkflows\u002Flighthouse.yml\n",{"type":33,"tag":79,"props":617,"children":618},{"class":81,"line":92},[619,625,629],{"type":33,"tag":79,"props":620,"children":622},{"style":621},"--shiki-default:#85E89D",[623],{"type":38,"value":624},"name",{"type":33,"tag":79,"props":626,"children":627},{"style":96},[628],{"type":38,"value":141},{"type":33,"tag":79,"props":630,"children":631},{"style":144},[632],{"type":38,"value":633},"Lighthouse CI\n",{"type":33,"tag":79,"props":635,"children":636},{"class":81,"line":102},[637,642,646,651],{"type":33,"tag":79,"props":638,"children":639},{"style":106},[640],{"type":38,"value":641},"on",{"type":33,"tag":79,"props":643,"children":644},{"style":96},[645],{"type":38,"value":179},{"type":33,"tag":79,"props":647,"children":648},{"style":144},[649],{"type":38,"value":650},"pull_request",{"type":33,"tag":79,"props":652,"children":653},{"style":96},[654],{"type":38,"value":655},"]\n",{"type":33,"tag":79,"props":657,"children":658},{"class":81,"line":117},[659,664],{"type":33,"tag":79,"props":660,"children":661},{"style":621},[662],{"type":38,"value":663},"jobs",{"type":33,"tag":79,"props":665,"children":666},{"style":96},[667],{"type":38,"value":668},":\n",{"type":33,"tag":79,"props":670,"children":671},{"class":81,"line":130},[672,677],{"type":33,"tag":79,"props":673,"children":674},{"style":621},[675],{"type":38,"value":676},"  lighthouse",{"type":33,"tag":79,"props":678,"children":679},{"style":96},[680],{"type":38,"value":668},{"type":33,"tag":79,"props":682,"children":683},{"class":81,"line":155},[684,689,693],{"type":33,"tag":79,"props":685,"children":686},{"style":621},[687],{"type":38,"value":688},"    runs-on",{"type":33,"tag":79,"props":690,"children":691},{"style":96},[692],{"type":38,"value":141},{"type":33,"tag":79,"props":694,"children":695},{"style":144},[696],{"type":38,"value":697},"ubuntu-latest\n",{"type":33,"tag":79,"props":699,"children":700},{"class":81,"line":168},[701,706],{"type":33,"tag":79,"props":702,"children":703},{"style":621},[704],{"type":38,"value":705},"    steps",{"type":33,"tag":79,"props":707,"children":708},{"style":96},[709],{"type":38,"value":668},{"type":33,"tag":79,"props":711,"children":712},{"class":81,"line":211},[713,718,723,727],{"type":33,"tag":79,"props":714,"children":715},{"style":96},[716],{"type":38,"value":717},"      - ",{"type":33,"tag":79,"props":719,"children":720},{"style":621},[721],{"type":38,"value":722},"uses",{"type":33,"tag":79,"props":724,"children":725},{"style":96},[726],{"type":38,"value":141},{"type":33,"tag":79,"props":728,"children":729},{"style":144},[730],{"type":38,"value":731},"actions\u002Fcheckout@v3\n",{"type":33,"tag":79,"props":733,"children":734},{"class":81,"line":27},[735,739,743,747],{"type":33,"tag":79,"props":736,"children":737},{"style":96},[738],{"type":38,"value":717},{"type":33,"tag":79,"props":740,"children":741},{"style":621},[742],{"type":38,"value":722},{"type":33,"tag":79,"props":744,"children":745},{"style":96},[746],{"type":38,"value":141},{"type":33,"tag":79,"props":748,"children":749},{"style":144},[750],{"type":38,"value":751},"actions\u002Fsetup-node@v3\n",{"type":33,"tag":79,"props":753,"children":754},{"class":81,"line":286},[755,760],{"type":33,"tag":79,"props":756,"children":757},{"style":621},[758],{"type":38,"value":759},"        with",{"type":33,"tag":79,"props":761,"children":762},{"style":96},[763],{"type":38,"value":668},{"type":33,"tag":79,"props":765,"children":766},{"class":81,"line":324},[767,772,776],{"type":33,"tag":79,"props":768,"children":769},{"style":621},[770],{"type":38,"value":771},"          node-version",{"type":33,"tag":79,"props":773,"children":774},{"style":96},[775],{"type":38,"value":141},{"type":33,"tag":79,"props":777,"children":778},{"style":144},[779],{"type":38,"value":780},"'20'\n",{"type":33,"tag":79,"props":782,"children":783},{"class":81,"line":363},[784,788,793,797],{"type":33,"tag":79,"props":785,"children":786},{"style":96},[787],{"type":38,"value":717},{"type":33,"tag":79,"props":789,"children":790},{"style":621},[791],{"type":38,"value":792},"run",{"type":33,"tag":79,"props":794,"children":795},{"style":96},[796],{"type":38,"value":141},{"type":33,"tag":79,"props":798,"children":799},{"style":144},[800],{"type":38,"value":801},"npm ci\n",{"type":33,"tag":79,"props":803,"children":804},{"class":81,"line":372},[805,809,813,817],{"type":33,"tag":79,"props":806,"children":807},{"style":96},[808],{"type":38,"value":717},{"type":33,"tag":79,"props":810,"children":811},{"style":621},[812],{"type":38,"value":792},{"type":33,"tag":79,"props":814,"children":815},{"style":96},[816],{"type":38,"value":141},{"type":33,"tag":79,"props":818,"children":819},{"style":144},[820],{"type":38,"value":821},"npm run build\n",{"type":33,"tag":79,"props":823,"children":824},{"class":81,"line":381},[825,829,833,837],{"type":33,"tag":79,"props":826,"children":827},{"style":96},[828],{"type":38,"value":717},{"type":33,"tag":79,"props":830,"children":831},{"style":621},[832],{"type":38,"value":624},{"type":33,"tag":79,"props":834,"children":835},{"style":96},[836],{"type":38,"value":141},{"type":33,"tag":79,"props":838,"children":839},{"style":144},[840],{"type":38,"value":841},"Wait for Vercel Preview\n",{"type":33,"tag":79,"props":843,"children":844},{"class":81,"line":394},[845,850,854],{"type":33,"tag":79,"props":846,"children":847},{"style":621},[848],{"type":38,"value":849},"        uses",{"type":33,"tag":79,"props":851,"children":852},{"style":96},[853],{"type":38,"value":141},{"type":33,"tag":79,"props":855,"children":856},{"style":144},[857],{"type":38,"value":858},"patrickedqvist\u002Fwait-for-vercel-preview@v1.3.1\n",{"type":33,"tag":79,"props":860,"children":861},{"class":81,"line":416},[862,867,871],{"type":33,"tag":79,"props":863,"children":864},{"style":621},[865],{"type":38,"value":866},"        id",{"type":33,"tag":79,"props":868,"children":869},{"style":96},[870],{"type":38,"value":141},{"type":33,"tag":79,"props":872,"children":873},{"style":144},[874],{"type":38,"value":875},"vercel_preview\n",{"type":33,"tag":79,"props":877,"children":878},{"class":81,"line":439},[879,883],{"type":33,"tag":79,"props":880,"children":881},{"style":621},[882],{"type":38,"value":759},{"type":33,"tag":79,"props":884,"children":885},{"style":96},[886],{"type":38,"value":668},{"type":33,"tag":79,"props":888,"children":889},{"class":81,"line":452},[890,895,899],{"type":33,"tag":79,"props":891,"children":892},{"style":621},[893],{"type":38,"value":894},"          token",{"type":33,"tag":79,"props":896,"children":897},{"style":96},[898],{"type":38,"value":141},{"type":33,"tag":79,"props":900,"children":901},{"style":144},[902],{"type":38,"value":903},"${{ secrets.GITHUB_TOKEN }}\n",{"type":33,"tag":79,"props":905,"children":906},{"class":81,"line":465},[907,912,916],{"type":33,"tag":79,"props":908,"children":909},{"style":621},[910],{"type":38,"value":911},"          max_timeout",{"type":33,"tag":79,"props":913,"children":914},{"style":96},[915],{"type":38,"value":141},{"type":33,"tag":79,"props":917,"children":918},{"style":106},[919],{"type":38,"value":920},"300\n",{"type":33,"tag":79,"props":922,"children":923},{"class":81,"line":487},[924,928,932,936],{"type":33,"tag":79,"props":925,"children":926},{"style":96},[927],{"type":38,"value":717},{"type":33,"tag":79,"props":929,"children":930},{"style":621},[931],{"type":38,"value":624},{"type":33,"tag":79,"props":933,"children":934},{"style":96},[935],{"type":38,"value":141},{"type":33,"tag":79,"props":937,"children":938},{"style":144},[939],{"type":38,"value":940},"Run Lighthouse CI\n",{"type":33,"tag":79,"props":942,"children":943},{"class":81,"line":509},[944,949],{"type":33,"tag":79,"props":945,"children":946},{"style":621},[947],{"type":38,"value":948},"        env",{"type":33,"tag":79,"props":950,"children":951},{"style":96},[952],{"type":38,"value":668},{"type":33,"tag":79,"props":954,"children":955},{"class":81,"line":527},[956,961,965],{"type":33,"tag":79,"props":957,"children":958},{"style":621},[959],{"type":38,"value":960},"          LHCI_GITHUB_APP_TOKEN",{"type":33,"tag":79,"props":962,"children":963},{"style":96},[964],{"type":38,"value":141},{"type":33,"tag":79,"props":966,"children":967},{"style":144},[968],{"type":38,"value":969},"${{ secrets.LHCI_TOKEN }}\n",{"type":33,"tag":79,"props":971,"children":972},{"class":81,"line":536},[973,978,982],{"type":33,"tag":79,"props":974,"children":975},{"style":621},[976],{"type":38,"value":977},"        run",{"type":33,"tag":79,"props":979,"children":980},{"style":96},[981],{"type":38,"value":141},{"type":33,"tag":79,"props":983,"children":985},{"style":984},"--shiki-default:#F97583",[986],{"type":38,"value":987},"|\n",{"type":33,"tag":79,"props":989,"children":990},{"class":81,"line":544},[991],{"type":33,"tag":79,"props":992,"children":993},{"style":144},[994],{"type":38,"value":995},"          npm install -g @lhci\u002Fcli\n",{"type":33,"tag":79,"props":997,"children":998},{"class":81,"line":553},[999],{"type":33,"tag":79,"props":1000,"children":1001},{"style":144},[1002],{"type":38,"value":1003},"          lhci autorun --collect.url=${{ steps.vercel_preview.outputs.url }}\n",{"type":33,"tag":79,"props":1005,"children":1006},{"class":81,"line":562},[1007,1011,1015,1019],{"type":33,"tag":79,"props":1008,"children":1009},{"style":96},[1010],{"type":38,"value":717},{"type":33,"tag":79,"props":1012,"children":1013},{"style":621},[1014],{"type":38,"value":624},{"type":33,"tag":79,"props":1016,"children":1017},{"style":96},[1018],{"type":38,"value":141},{"type":33,"tag":79,"props":1020,"children":1021},{"style":144},[1022],{"type":38,"value":1023},"Comment PR\n",{"type":33,"tag":79,"props":1025,"children":1027},{"class":81,"line":1026},27,[1028,1032,1036],{"type":33,"tag":79,"props":1029,"children":1030},{"style":621},[1031],{"type":38,"value":849},{"type":33,"tag":79,"props":1033,"children":1034},{"style":96},[1035],{"type":38,"value":141},{"type":33,"tag":79,"props":1037,"children":1038},{"style":144},[1039],{"type":38,"value":1040},"treosh\u002Flighthouse-ci-action@v9\n",{"type":33,"tag":79,"props":1042,"children":1044},{"class":81,"line":1043},28,[1045,1049],{"type":33,"tag":79,"props":1046,"children":1047},{"style":621},[1048],{"type":38,"value":759},{"type":33,"tag":79,"props":1050,"children":1051},{"style":96},[1052],{"type":38,"value":668},{"type":33,"tag":79,"props":1054,"children":1056},{"class":81,"line":1055},29,[1057,1062,1066],{"type":33,"tag":79,"props":1058,"children":1059},{"style":621},[1060],{"type":38,"value":1061},"          urls",{"type":33,"tag":79,"props":1063,"children":1064},{"style":96},[1065],{"type":38,"value":141},{"type":33,"tag":79,"props":1067,"children":1068},{"style":144},[1069],{"type":38,"value":1070},"${{ steps.vercel_preview.outputs.url }}\n",{"type":33,"tag":79,"props":1072,"children":1074},{"class":81,"line":1073},30,[1075,1080,1084],{"type":33,"tag":79,"props":1076,"children":1077},{"style":621},[1078],{"type":38,"value":1079},"          uploadArtifacts",{"type":33,"tag":79,"props":1081,"children":1082},{"style":96},[1083],{"type":38,"value":141},{"type":33,"tag":79,"props":1085,"children":1086},{"style":106},[1087],{"type":38,"value":1088},"true\n",{"type":33,"tag":79,"props":1090,"children":1092},{"class":81,"line":1091},31,[1093,1098,1102],{"type":33,"tag":79,"props":1094,"children":1095},{"style":621},[1096],{"type":38,"value":1097},"          temporaryPublicStorage",{"type":33,"tag":79,"props":1099,"children":1100},{"style":96},[1101],{"type":38,"value":141},{"type":33,"tag":79,"props":1103,"children":1104},{"style":106},[1105],{"type":38,"value":1088},{"type":33,"tag":34,"props":1107,"children":1108},{},[1109,1111,1117,1119,1125],{"type":38,"value":1110},"L'étape ",{"type":33,"tag":75,"props":1112,"children":1114},{"className":1113},[],[1115],{"type":38,"value":1116},"wait-for-vercel-preview",{"type":38,"value":1118}," est critique : si Lighthouse s'exécute avant la fin du déploiement Vercel, il retournera un 404. Avec ",{"type":33,"tag":75,"props":1120,"children":1122},{"className":1121},[],[1123],{"type":38,"value":1124},"max_timeout: 300",{"type":38,"value":1126},", nous attendons 5 minutes. Une fois le déploiement terminé, Lighthouse commence.",{"type":33,"tag":34,"props":1128,"children":1129},{},[1130],{"type":38,"value":1131},"Le résultat apparaît sur la PR comme ceci :",{"type":33,"tag":68,"props":1133,"children":1135},{"code":1134},"Lighthouse CI Report\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n✅ Performance: 92\u002F100 (+2)\n❌ LCP: 2.3s (budget: 2.0s) — FAILED\n✅ TBT: 180ms (budget: 200ms)\n✅ CLS: 0.08 (budget: 0.1)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n",[1136],{"type":33,"tag":75,"props":1137,"children":1138},{"__ignoreMap":17},[1139],{"type":38,"value":1134},{"type":33,"tag":34,"props":1141,"children":1142},{},[1143,1145,1151],{"type":38,"value":1144},"Le LCP est de 2.3s, ce qui dépasse le budget de 2.0s : le CI échoue et le merge est bloqué. Le dev investigue, découvre qu'une ",{"type":33,"tag":75,"props":1146,"children":1148},{"className":1147},[],[1149],{"type":38,"value":1150},"loading=\"eager\"",{"type":38,"value":1152}," manque sur l'image hero, la corrige, le CI redémarre, le LCP baisse à 1.9s et le merge s'ouvre.",{"type":33,"tag":34,"props":1154,"children":1155},{},[1156,1158,1167,1169,1175],{"type":38,"value":1157},"Cette approche est cruciale pour les projets ",{"type":33,"tag":1159,"props":1160,"children":1164},"a",{"href":1161,"rel":1162},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[1163],"nofollow",[1165],{"type":38,"value":1166},"Headless Commerce",{"type":38,"value":1168},". Les storefronts Hydrogen ou Next.js Commerce ajoutent de nouveaux composants chaque jour. Un seul ",{"type":33,"tag":75,"props":1170,"children":1172},{"className":1171},[],[1173],{"type":38,"value":1174},"await fetch()",{"type":38,"value":1176}," non déplié peut bloquer le thread principal. Lighthouse CI capture les dépassements via la taille du bundle et le TBT.",{"type":33,"tag":41,"props":1178,"children":1180},{"id":1179},"surveiller-les-vrais-chiffres-en-production-avec-rum",[1181],{"type":38,"value":1182},"Surveiller les Vrais Chiffres en Production avec RUM",{"type":33,"tag":34,"props":1184,"children":1185},{},[1186],{"type":38,"value":1187},"Lighthouse CI effectue une surveillance synthétique — elle s'exécute dans un environnement contrôlé de laboratoire. Les vrais utilisateurs ont des appareils, des réseaux et des états de cache différents. Pour cela, le RUM (Real User Monitoring) est indispensable. RUM collecte les métriques réelles émises par les utilisateurs vivants.",{"type":33,"tag":34,"props":1189,"children":1190},{},[1191],{"type":38,"value":1192},"Vous pouvez envoyer le RUM à votre propre backend avec la bibliothèque Web Vitals :",{"type":33,"tag":68,"props":1194,"children":1198},{"code":1195,"language":1196,"meta":17,"className":1197,"style":17},"\u002F\u002F analytics\u002Fweb-vitals.ts\nimport { onCLS, onFID, onLCP, onTTFB, onINP } from 'web-vitals';\n\nfunction sendToAnalytics(metric: Metric) {\n  const body = JSON.stringify({\n    name: metric.name,\n    value: metric.value,\n    rating: metric.rating,\n    delta: metric.delta,\n    id: metric.id,\n    navigationType: metric.navigationType,\n    url: window.location.href,\n    userAgent: navigator.userAgent,\n    timestamp: Date.now()\n  });\n\n  \u002F\u002F Beacon API — envoie même si la page se ferme\n  if (navigator.sendBeacon) {\n    navigator.sendBeacon('\u002Fapi\u002Fvitals', body);\n  } else {\n    fetch('\u002Fapi\u002Fvitals', { method: 'POST', body, keepalive: true });\n  }\n}\n\nonCLS(sendToAnalytics);\nonLCP(sendToAnalytics);\nonINP(sendToAnalytics);\nonTTFB(sendToAnalytics);\n","typescript","language-typescript shiki shiki-themes github-dark",[1199],{"type":33,"tag":75,"props":1200,"children":1201},{"__ignoreMap":17},[1202,1210,1238,1247,1287,1325,1333,1341,1349,1357,1365,1373,1381,1389,1407,1415,1422,1430,1443,1470,1488,1529,1536,1543,1550,1563,1575,1587],{"type":33,"tag":79,"props":1203,"children":1204},{"class":81,"line":82},[1205],{"type":33,"tag":79,"props":1206,"children":1207},{"style":86},[1208],{"type":38,"value":1209},"\u002F\u002F analytics\u002Fweb-vitals.ts\n",{"type":33,"tag":79,"props":1211,"children":1212},{"class":81,"line":92},[1213,1218,1223,1228,1233],{"type":33,"tag":79,"props":1214,"children":1215},{"style":984},[1216],{"type":38,"value":1217},"import",{"type":33,"tag":79,"props":1219,"children":1220},{"style":96},[1221],{"type":38,"value":1222}," { onCLS, onFID, onLCP, onTTFB, onINP } ",{"type":33,"tag":79,"props":1224,"children":1225},{"style":984},[1226],{"type":38,"value":1227},"from",{"type":33,"tag":79,"props":1229,"children":1230},{"style":144},[1231],{"type":38,"value":1232}," 'web-vitals'",{"type":33,"tag":79,"props":1234,"children":1235},{"style":96},[1236],{"type":38,"value":1237},";\n",{"type":33,"tag":79,"props":1239,"children":1240},{"class":81,"line":102},[1241],{"type":33,"tag":79,"props":1242,"children":1244},{"emptyLinePlaceholder":1243},true,[1245],{"type":38,"value":1246},"\n",{"type":33,"tag":79,"props":1248,"children":1249},{"class":81,"line":117},[1250,1255,1261,1266,1272,1277,1282],{"type":33,"tag":79,"props":1251,"children":1252},{"style":984},[1253],{"type":38,"value":1254},"function",{"type":33,"tag":79,"props":1256,"children":1258},{"style":1257},"--shiki-default:#B392F0",[1259],{"type":38,"value":1260}," sendToAnalytics",{"type":33,"tag":79,"props":1262,"children":1263},{"style":96},[1264],{"type":38,"value":1265},"(",{"type":33,"tag":79,"props":1267,"children":1269},{"style":1268},"--shiki-default:#FFAB70",[1270],{"type":38,"value":1271},"metric",{"type":33,"tag":79,"props":1273,"children":1274},{"style":984},[1275],{"type":38,"value":1276},":",{"type":33,"tag":79,"props":1278,"children":1279},{"style":1257},[1280],{"type":38,"value":1281}," Metric",{"type":33,"tag":79,"props":1283,"children":1284},{"style":96},[1285],{"type":38,"value":1286},") {\n",{"type":33,"tag":79,"props":1288,"children":1289},{"class":81,"line":130},[1290,1295,1300,1305,1310,1315,1320],{"type":33,"tag":79,"props":1291,"children":1292},{"style":984},[1293],{"type":38,"value":1294},"  const",{"type":33,"tag":79,"props":1296,"children":1297},{"style":106},[1298],{"type":38,"value":1299}," body",{"type":33,"tag":79,"props":1301,"children":1302},{"style":984},[1303],{"type":38,"value":1304}," =",{"type":33,"tag":79,"props":1306,"children":1307},{"style":106},[1308],{"type":38,"value":1309}," JSON",{"type":33,"tag":79,"props":1311,"children":1312},{"style":96},[1313],{"type":38,"value":1314},".",{"type":33,"tag":79,"props":1316,"children":1317},{"style":1257},[1318],{"type":38,"value":1319},"stringify",{"type":33,"tag":79,"props":1321,"children":1322},{"style":96},[1323],{"type":38,"value":1324},"({\n",{"type":33,"tag":79,"props":1326,"children":1327},{"class":81,"line":155},[1328],{"type":33,"tag":79,"props":1329,"children":1330},{"style":96},[1331],{"type":38,"value":1332},"    name: metric.name,\n",{"type":33,"tag":79,"props":1334,"children":1335},{"class":81,"line":168},[1336],{"type":33,"tag":79,"props":1337,"children":1338},{"style":96},[1339],{"type":38,"value":1340},"    value: metric.value,\n",{"type":33,"tag":79,"props":1342,"children":1343},{"class":81,"line":211},[1344],{"type":33,"tag":79,"props":1345,"children":1346},{"style":96},[1347],{"type":38,"value":1348},"    rating: metric.rating,\n",{"type":33,"tag":79,"props":1350,"children":1351},{"class":81,"line":27},[1352],{"type":33,"tag":79,"props":1353,"children":1354},{"style":96},[1355],{"type":38,"value":1356},"    delta: metric.delta,\n",{"type":33,"tag":79,"props":1358,"children":1359},{"class":81,"line":286},[1360],{"type":33,"tag":79,"props":1361,"children":1362},{"style":96},[1363],{"type":38,"value":1364},"    id: metric.id,\n",{"type":33,"tag":79,"props":1366,"children":1367},{"class":81,"line":324},[1368],{"type":33,"tag":79,"props":1369,"children":1370},{"style":96},[1371],{"type":38,"value":1372},"    navigationType: metric.navigationType,\n",{"type":33,"tag":79,"props":1374,"children":1375},{"class":81,"line":363},[1376],{"type":33,"tag":79,"props":1377,"children":1378},{"style":96},[1379],{"type":38,"value":1380},"    url: window.location.href,\n",{"type":33,"tag":79,"props":1382,"children":1383},{"class":81,"line":372},[1384],{"type":33,"tag":79,"props":1385,"children":1386},{"style":96},[1387],{"type":38,"value":1388},"    userAgent: navigator.userAgent,\n",{"type":33,"tag":79,"props":1390,"children":1391},{"class":81,"line":381},[1392,1397,1402],{"type":33,"tag":79,"props":1393,"children":1394},{"style":96},[1395],{"type":38,"value":1396},"    timestamp: Date.",{"type":33,"tag":79,"props":1398,"children":1399},{"style":1257},[1400],{"type":38,"value":1401},"now",{"type":33,"tag":79,"props":1403,"children":1404},{"style":96},[1405],{"type":38,"value":1406},"()\n",{"type":33,"tag":79,"props":1408,"children":1409},{"class":81,"line":394},[1410],{"type":33,"tag":79,"props":1411,"children":1412},{"style":96},[1413],{"type":38,"value":1414},"  });\n",{"type":33,"tag":79,"props":1416,"children":1417},{"class":81,"line":416},[1418],{"type":33,"tag":79,"props":1419,"children":1420},{"emptyLinePlaceholder":1243},[1421],{"type":38,"value":1246},{"type":33,"tag":79,"props":1423,"children":1424},{"class":81,"line":439},[1425],{"type":33,"tag":79,"props":1426,"children":1427},{"style":86},[1428],{"type":38,"value":1429},"  \u002F\u002F Beacon API — envoie même si la page se ferme\n",{"type":33,"tag":79,"props":1431,"children":1432},{"class":81,"line":452},[1433,1438],{"type":33,"tag":79,"props":1434,"children":1435},{"style":984},[1436],{"type":38,"value":1437},"  if",{"type":33,"tag":79,"props":1439,"children":1440},{"style":96},[1441],{"type":38,"value":1442}," (navigator.sendBeacon) {\n",{"type":33,"tag":79,"props":1444,"children":1445},{"class":81,"line":465},[1446,1451,1456,1460,1465],{"type":33,"tag":79,"props":1447,"children":1448},{"style":96},[1449],{"type":38,"value":1450},"    navigator.",{"type":33,"tag":79,"props":1452,"children":1453},{"style":1257},[1454],{"type":38,"value":1455},"sendBeacon",{"type":33,"tag":79,"props":1457,"children":1458},{"style":96},[1459],{"type":38,"value":1265},{"type":33,"tag":79,"props":1461,"children":1462},{"style":144},[1463],{"type":38,"value":1464},"'\u002Fapi\u002Fvitals'",{"type":33,"tag":79,"props":1466,"children":1467},{"style":96},[1468],{"type":38,"value":1469},", body);\n",{"type":33,"tag":79,"props":1471,"children":1472},{"class":81,"line":487},[1473,1478,1483],{"type":33,"tag":79,"props":1474,"children":1475},{"style":96},[1476],{"type":38,"value":1477},"  } ",{"type":33,"tag":79,"props":1479,"children":1480},{"style":984},[1481],{"type":38,"value":1482},"else",{"type":33,"tag":79,"props":1484,"children":1485},{"style":96},[1486],{"type":38,"value":1487}," {\n",{"type":33,"tag":79,"props":1489,"children":1490},{"class":81,"line":509},[1491,1496,1500,1504,1509,1514,1519,1524],{"type":33,"tag":79,"props":1492,"children":1493},{"style":1257},[1494],{"type":38,"value":1495},"    fetch",{"type":33,"tag":79,"props":1497,"children":1498},{"style":96},[1499],{"type":38,"value":1265},{"type":33,"tag":79,"props":1501,"children":1502},{"style":144},[1503],{"type":38,"value":1464},{"type":33,"tag":79,"props":1505,"children":1506},{"style":96},[1507],{"type":38,"value":1508},", { method: ",{"type":33,"tag":79,"props":1510,"children":1511},{"style":144},[1512],{"type":38,"value":1513},"'POST'",{"type":33,"tag":79,"props":1515,"children":1516},{"style":96},[1517],{"type":38,"value":1518},", body, keepalive: ",{"type":33,"tag":79,"props":1520,"children":1521},{"style":106},[1522],{"type":38,"value":1523},"true",{"type":33,"tag":79,"props":1525,"children":1526},{"style":96},[1527],{"type":38,"value":1528}," });\n",{"type":33,"tag":79,"props":1530,"children":1531},{"class":81,"line":527},[1532],{"type":33,"tag":79,"props":1533,"children":1534},{"style":96},[1535],{"type":38,"value":559},{"type":33,"tag":79,"props":1537,"children":1538},{"class":81,"line":536},[1539],{"type":33,"tag":79,"props":1540,"children":1541},{"style":96},[1542],{"type":38,"value":568},{"type":33,"tag":79,"props":1544,"children":1545},{"class":81,"line":544},[1546],{"type":33,"tag":79,"props":1547,"children":1548},{"emptyLinePlaceholder":1243},[1549],{"type":38,"value":1246},{"type":33,"tag":79,"props":1551,"children":1552},{"class":81,"line":553},[1553,1558],{"type":33,"tag":79,"props":1554,"children":1555},{"style":1257},[1556],{"type":38,"value":1557},"onCLS",{"type":33,"tag":79,"props":1559,"children":1560},{"style":96},[1561],{"type":38,"value":1562},"(sendToAnalytics);\n",{"type":33,"tag":79,"props":1564,"children":1565},{"class":81,"line":562},[1566,1571],{"type":33,"tag":79,"props":1567,"children":1568},{"style":1257},[1569],{"type":38,"value":1570},"onLCP",{"type":33,"tag":79,"props":1572,"children":1573},{"style":96},[1574],{"type":38,"value":1562},{"type":33,"tag":79,"props":1576,"children":1577},{"class":81,"line":1026},[1578,1583],{"type":33,"tag":79,"props":1579,"children":1580},{"style":1257},[1581],{"type":38,"value":1582},"onINP",{"type":33,"tag":79,"props":1584,"children":1585},{"style":96},[1586],{"type":38,"value":1562},{"type":33,"tag":79,"props":1588,"children":1589},{"class":81,"line":1043},[1590,1595],{"type":33,"tag":79,"props":1591,"children":1592},{"style":1257},[1593],{"type":38,"value":1594},"onTTFB",{"type":33,"tag":79,"props":1596,"children":1597},{"style":96},[1598],{"type":38,"value":1562},{"type":33,"tag":34,"props":1600,"children":1601},{},[1602,1604,1610],{"type":38,"value":1603},"Le backend ",{"type":33,"tag":75,"props":1605,"children":1607},{"className":1606},[],[1608],{"type":38,"value":1609},"\u002Fapi\u002Fvitals",{"type":38,"value":1611}," écrit cette métrique dans BigQuery ou Cloudflare Analytics. Le rapport quotidien agrégé ressemble à ceci :",{"type":33,"tag":1613,"props":1614,"children":1615},"table",{},[1616,1650],{"type":33,"tag":1617,"props":1618,"children":1619},"thead",{},[1620],{"type":33,"tag":1621,"props":1622,"children":1623},"tr",{},[1624,1630,1635,1640,1645],{"type":33,"tag":1625,"props":1626,"children":1627},"th",{},[1628],{"type":38,"value":1629},"Date",{"type":33,"tag":1625,"props":1631,"children":1632},{},[1633],{"type":38,"value":1634},"LCP p75",{"type":33,"tag":1625,"props":1636,"children":1637},{},[1638],{"type":38,"value":1639},"INP p75",{"type":33,"tag":1625,"props":1641,"children":1642},{},[1643],{"type":38,"value":1644},"CLS p75",{"type":33,"tag":1625,"props":1646,"children":1647},{},[1648],{"type":38,"value":1649},"Vues de page",{"type":33,"tag":1651,"props":1652,"children":1653},"tbody",{},[1654,1683,1711],{"type":33,"tag":1621,"props":1655,"children":1656},{},[1657,1663,1668,1673,1678],{"type":33,"tag":1658,"props":1659,"children":1660},"td",{},[1661],{"type":38,"value":1662},"2026-07-28",{"type":33,"tag":1658,"props":1664,"children":1665},{},[1666],{"type":38,"value":1667},"1.8s",{"type":33,"tag":1658,"props":1669,"children":1670},{},[1671],{"type":38,"value":1672},"140ms",{"type":33,"tag":1658,"props":1674,"children":1675},{},[1676],{"type":38,"value":1677},"0.06",{"type":33,"tag":1658,"props":1679,"children":1680},{},[1681],{"type":38,"value":1682},"12,400",{"type":33,"tag":1621,"props":1684,"children":1685},{},[1686,1691,1696,1701,1706],{"type":33,"tag":1658,"props":1687,"children":1688},{},[1689],{"type":38,"value":1690},"2026-07-29",{"type":33,"tag":1658,"props":1692,"children":1693},{},[1694],{"type":38,"value":1695},"2.1s",{"type":33,"tag":1658,"props":1697,"children":1698},{},[1699],{"type":38,"value":1700},"180ms",{"type":33,"tag":1658,"props":1702,"children":1703},{},[1704],{"type":38,"value":1705},"0.09",{"type":33,"tag":1658,"props":1707,"children":1708},{},[1709],{"type":38,"value":1710},"13,100",{"type":33,"tag":1621,"props":1712,"children":1713},{},[1714,1718,1723,1728,1733],{"type":33,"tag":1658,"props":1715,"children":1716},{},[1717],{"type":38,"value":20},{"type":33,"tag":1658,"props":1719,"children":1720},{},[1721],{"type":38,"value":1722},"3.2s",{"type":33,"tag":1658,"props":1724,"children":1725},{},[1726],{"type":38,"value":1727},"320ms",{"type":33,"tag":1658,"props":1729,"children":1730},{},[1731],{"type":38,"value":1732},"0.14",{"type":33,"tag":1658,"props":1734,"children":1735},{},[1736],{"type":38,"value":1737},"11,800",{"type":33,"tag":34,"props":1739,"children":1740},{},[1741],{"type":38,"value":1742},"Un déploiement a eu lieu le 29 juillet. Le LCP a sauté de 2.1s à 3.2s, l'INP de 180ms à 320ms. Le taux de rebond a augmenté de 4,2 %. Le RUM l'a montré en 2 heures en production — tandis que Lighthouse CI en lab avait mesuré \u003C 2.0s sur une connexion meilleure.",{"type":33,"tag":34,"props":1744,"children":1745},{},[1746],{"type":38,"value":1747},"La décision de rollback a été prise sur la base du RUM : déploiement annulé, LCP est revenu à 1.9s.",{"type":33,"tag":1749,"props":1750,"children":1752},"h3",{"id":1751},"pipeline-dalarme-rum",[1753],{"type":38,"value":1754},"Pipeline d'Alarme RUM",{"type":33,"tag":34,"props":1756,"children":1757},{},[1758],{"type":38,"value":1759},"Afficher les métriques RUM sur un tableau de bord seul ne suffit pas. Une alarme Slack instantanée en cas de régression est nécessaire. Vous pouvez configurer une requête programmée dans BigQuery :",{"type":33,"tag":68,"props":1761,"children":1765},{"code":1762,"language":1763,"meta":17,"className":1764,"style":17},"-- Requête programmée BigQuery (toutes les heures)\nWITH current_hour AS (\n  SELECT\n    APPROX_QUANTILES(lcp_value, 100)[OFFSET(75)] AS lcp_p75,\n    APPROX_QUANTILES(inp_value, 100)[OFFSET(75)] AS inp_p75\n  FROM `project.dataset.web_vitals`\n  WHERE timestamp >= TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 1 HOUR)\n),\nbaseline AS (\n  SELECT\n    APPROX_QUANTILES(lcp_value, 100)[OFFSET(75)] AS lcp_p75_baseline\n  FROM `project.dataset.web_vitals`\n  WHERE timestamp BETWEEN TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 8 HOUR)\n    AND TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 2 HOUR)\n)\nSELECT\n  c.lcp_p75,\n  b.lcp_p75_baseline,\n  (c.lcp_p75 - b.lcp_p75_baseline) \u002F b.lcp_p75_baseline * 100 AS lcp_regression_pct\nFROM current_hour c, baseline b\nWHERE (c.lcp_p75 - b.lcp_p75_baseline) \u002F b.lcp_p75_baseline > 0.15\n","sql","language-sql shiki shiki-themes github-dark",[1766],{"type":33,"tag":75,"props":1767,"children":1768},{"__ignoreMap":17},[1769,1777,1800,1808,1835,1860,1873,1921,1929,1945,1952,1976,1987,2028,2061,2068,2076,2097,2118,2199,2212],{"type":33,"tag":79,"props":1770,"children":1771},{"class":81,"line":82},[1772],{"type":33,"tag":79,"props":1773,"children":1774},{"style":86},[1775],{"type":38,"value":1776},"-- Requête programmée BigQuery (toutes les heures)\n",{"type":33,"tag":79,"props":1778,"children":1779},{"class":81,"line":92},[1780,1785,1790,1795],{"type":33,"tag":79,"props":1781,"children":1782},{"style":984},[1783],{"type":38,"value":1784},"WITH",{"type":33,"tag":79,"props":1786,"children":1787},{"style":96},[1788],{"type":38,"value":1789}," current_hour ",{"type":33,"tag":79,"props":1791,"children":1792},{"style":984},[1793],{"type":38,"value":1794},"AS",{"type":33,"tag":79,"props":1796,"children":1797},{"style":96},[1798],{"type":38,"value":1799}," (\n",{"type":33,"tag":79,"props":1801,"children":1802},{"class":81,"line":102},[1803],{"type":33,"tag":79,"props":1804,"children":1805},{"style":984},[1806],{"type":38,"value":1807},"  SELECT\n",{"type":33,"tag":79,"props":1809,"children":1810},{"class":81,"line":117},[1811,1816,1821,1826,1830],{"type":33,"tag":79,"props":1812,"children":1813},{"style":96},[1814],{"type":38,"value":1815},"    APPROX_QUANTILES(lcp_value, ",{"type":33,"tag":79,"props":1817,"children":1818},{"style":106},[1819],{"type":38,"value":1820},"100",{"type":33,"tag":79,"props":1822,"children":1823},{"style":96},[1824],{"type":38,"value":1825},")[OFFSET(75)] ",{"type":33,"tag":79,"props":1827,"children":1828},{"style":984},[1829],{"type":38,"value":1794},{"type":33,"tag":79,"props":1831,"children":1832},{"style":96},[1833],{"type":38,"value":1834}," lcp_p75,\n",{"type":33,"tag":79,"props":1836,"children":1837},{"class":81,"line":130},[1838,1843,1847,1851,1855],{"type":33,"tag":79,"props":1839,"children":1840},{"style":96},[1841],{"type":38,"value":1842},"    APPROX_QUANTILES(inp_value, ",{"type":33,"tag":79,"props":1844,"children":1845},{"style":106},[1846],{"type":38,"value":1820},{"type":33,"tag":79,"props":1848,"children":1849},{"style":96},[1850],{"type":38,"value":1825},{"type":33,"tag":79,"props":1852,"children":1853},{"style":984},[1854],{"type":38,"value":1794},{"type":33,"tag":79,"props":1856,"children":1857},{"style":96},[1858],{"type":38,"value":1859}," inp_p75\n",{"type":33,"tag":79,"props":1861,"children":1862},{"class":81,"line":155},[1863,1868],{"type":33,"tag":79,"props":1864,"children":1865},{"style":984},[1866],{"type":38,"value":1867},"  FROM",{"type":33,"tag":79,"props":1869,"children":1870},{"style":144},[1871],{"type":38,"value":1872}," `project.dataset.web_vitals`\n",{"type":33,"tag":79,"props":1874,"children":1875},{"class":81,"line":168},[1876,1881,1886,1891,1896,1901,1906,1911,1916],{"type":33,"tag":79,"props":1877,"children":1878},{"style":984},[1879],{"type":38,"value":1880},"  WHERE",{"type":33,"tag":79,"props":1882,"children":1883},{"style":984},[1884],{"type":38,"value":1885}," timestamp",{"type":33,"tag":79,"props":1887,"children":1888},{"style":984},[1889],{"type":38,"value":1890}," >=",{"type":33,"tag":79,"props":1892,"children":1893},{"style":96},[1894],{"type":38,"value":1895}," TIMESTAMP_SUB(",{"type":33,"tag":79,"props":1897,"children":1898},{"style":106},[1899],{"type":38,"value":1900},"CURRENT_TIMESTAMP",{"type":33,"tag":79,"props":1902,"children":1903},{"style":96},[1904],{"type":38,"value":1905},"(), INTERVAL ",{"type":33,"tag":79,"props":1907,"children":1908},{"style":106},[1909],{"type":38,"value":1910},"1",{"type":33,"tag":79,"props":1912,"children":1913},{"style":984},[1914],{"type":38,"value":1915}," HOUR",{"type":33,"tag":79,"props":1917,"children":1918},{"style":96},[1919],{"type":38,"value":1920},")\n",{"type":33,"tag":79,"props":1922,"children":1923},{"class":81,"line":211},[1924],{"type":33,"tag":79,"props":1925,"children":1926},{"style":96},[1927],{"type":38,"value":1928},"),\n",{"type":33,"tag":79,"props":1930,"children":1931},{"class":81,"line":27},[1932,1937,1941],{"type":33,"tag":79,"props":1933,"children":1934},{"style":96},[1935],{"type":38,"value":1936},"baseline ",{"type":33,"tag":79,"props":1938,"children":1939},{"style":984},[1940],{"type":38,"value":1794},{"type":33,"tag":79,"props":1942,"children":1943},{"style":96},[1944],{"type":38,"value":1799},{"type":33,"tag":79,"props":1946,"children":1947},{"class":81,"line":286},[1948],{"type":33,"tag":79,"props":1949,"children":1950},{"style":984},[1951],{"type":38,"value":1807},{"type":33,"tag":79,"props":1953,"children":1954},{"class":81,"line":324},[1955,1959,1963,1967,1971],{"type":33,"tag":79,"props":1956,"children":1957},{"style":96},[1958],{"type":38,"value":1815},{"type":33,"tag":79,"props":1960,"children":1961},{"style":106},[1962],{"type":38,"value":1820},{"type":33,"tag":79,"props":1964,"children":1965},{"style":96},[1966],{"type":38,"value":1825},{"type":33,"tag":79,"props":1968,"children":1969},{"style":984},[1970],{"type":38,"value":1794},{"type":33,"tag":79,"props":1972,"children":1973},{"style":96},[1974],{"type":38,"value":1975}," lcp_p75_baseline\n",{"type":33,"tag":79,"props":1977,"children":1978},{"class":81,"line":363},[1979,1983],{"type":33,"tag":79,"props":1980,"children":1981},{"style":984},[1982],{"type":38,"value":1867},{"type":33,"tag":79,"props":1984,"children":1985},{"style":144},[1986],{"type":38,"value":1872},{"type":33,"tag":79,"props":1988,"children":1989},{"class":81,"line":372},[1990,1994,1998,2003,2007,2011,2015,2020,2024],{"type":33,"tag":79,"props":1991,"children":1992},{"style":984},[1993],{"type":38,"value":1880},{"type":33,"tag":79,"props":1995,"children":1996},{"style":984},[1997],{"type":38,"value":1885},{"type":33,"tag":79,"props":1999,"children":2000},{"style":984},[2001],{"type":38,"value":2002}," BETWEEN",{"type":33,"tag":79,"props":2004,"children":2005},{"style":96},[2006],{"type":38,"value":1895},{"type":33,"tag":79,"props":2008,"children":2009},{"style":106},[2010],{"type":38,"value":1900},{"type":33,"tag":79,"props":2012,"children":2013},{"style":96},[2014],{"type":38,"value":1905},{"type":33,"tag":79,"props":2016,"children":2017},{"style":106},[2018],{"type":38,"value":2019},"8",{"type":33,"tag":79,"props":2021,"children":2022},{"style":984},[2023],{"type":38,"value":1915},{"type":33,"tag":79,"props":2025,"children":2026},{"style":96},[2027],{"type":38,"value":1920},{"type":33,"tag":79,"props":2029,"children":2030},{"class":81,"line":381},[2031,2036,2040,2044,2048,2053,2057],{"type":33,"tag":79,"props":2032,"children":2033},{"style":984},[2034],{"type":38,"value":2035},"    AND",{"type":33,"tag":79,"props":2037,"children":2038},{"style":96},[2039],{"type":38,"value":1895},{"type":33,"tag":79,"props":2041,"children":2042},{"style":106},[2043],{"type":38,"value":1900},{"type":33,"tag":79,"props":2045,"children":2046},{"style":96},[2047],{"type":38,"value":1905},{"type":33,"tag":79,"props":2049,"children":2050},{"style":106},[2051],{"type":38,"value":2052},"2",{"type":33,"tag":79,"props":2054,"children":2055},{"style":984},[2056],{"type":38,"value":1915},{"type":33,"tag":79,"props":2058,"children":2059},{"style":96},[2060],{"type":38,"value":1920},{"type":33,"tag":79,"props":2062,"children":2063},{"class":81,"line":394},[2064],{"type":33,"tag":79,"props":2065,"children":2066},{"style":96},[2067],{"type":38,"value":1920},{"type":33,"tag":79,"props":2069,"children":2070},{"class":81,"line":416},[2071],{"type":33,"tag":79,"props":2072,"children":2073},{"style":984},[2074],{"type":38,"value":2075},"SELECT\n",{"type":33,"tag":79,"props":2077,"children":2078},{"class":81,"line":439},[2079,2084,2088,2093],{"type":33,"tag":79,"props":2080,"children":2081},{"style":106},[2082],{"type":38,"value":2083},"  c",{"type":33,"tag":79,"props":2085,"children":2086},{"style":96},[2087],{"type":38,"value":1314},{"type":33,"tag":79,"props":2089,"children":2090},{"style":106},[2091],{"type":38,"value":2092},"lcp_p75",{"type":33,"tag":79,"props":2094,"children":2095},{"style":96},[2096],{"type":38,"value":152},{"type":33,"tag":79,"props":2098,"children":2099},{"class":81,"line":452},[2100,2105,2109,2114],{"type":33,"tag":79,"props":2101,"children":2102},{"style":106},[2103],{"type":38,"value":2104},"  b",{"type":33,"tag":79,"props":2106,"children":2107},{"style":96},[2108],{"type":38,"value":1314},{"type":33,"tag":79,"props":2110,"children":2111},{"style":106},[2112],{"type":38,"value":2113},"lcp_p75_baseline",{"type":33,"tag":79,"props":2115,"children":2116},{"style":96},[2117],{"type":38,"value":152},{"type":33,"tag":79,"props":2119,"children":2120},{"class":81,"line":465},[2121,2126,2131,2135,2139,2144,2149,2153,2157,2162,2167,2171,2175,2179,2184,2189,2194],{"type":33,"tag":79,"props":2122,"children":2123},{"style":96},[2124],{"type":38,"value":2125},"  (",{"type":33,"tag":79,"props":2127,"children":2128},{"style":106},[2129],{"type":38,"value":2130},"c",{"type":33,"tag":79,"props":2132,"children":2133},{"style":96},[2134],{"type":38,"value":1314},{"type":33,"tag":79,"props":2136,"children":2137},{"style":106},[2138],{"type":38,"value":2092},{"type":33,"tag":79,"props":2140,"children":2141},{"style":984},[2142],{"type":38,"value":2143}," -",{"type":33,"tag":79,"props":2145,"children":2146},{"style":106},[2147],{"type":38,"value":2148}," b",{"type":33,"tag":79,"props":2150,"children":2151},{"style":96},[2152],{"type":38,"value":1314},{"type":33,"tag":79,"props":2154,"children":2155},{"style":106},[2156],{"type":38,"value":2113},{"type":33,"tag":79,"props":2158,"children":2159},{"style":96},[2160],{"type":38,"value":2161},") ",{"type":33,"tag":79,"props":2163,"children":2164},{"style":984},[2165],{"type":38,"value":2166},"\u002F",{"type":33,"tag":79,"props":2168,"children":2169},{"style":106},[2170],{"type":38,"value":2148},{"type":33,"tag":79,"props":2172,"children":2173},{"style":96},[2174],{"type":38,"value":1314},{"type":33,"tag":79,"props":2176,"children":2177},{"style":106},[2178],{"type":38,"value":2113},{"type":33,"tag":79,"props":2180,"children":2181},{"style":984},[2182],{"type":38,"value":2183}," *",{"type":33,"tag":79,"props":2185,"children":2186},{"style":106},[2187],{"type":38,"value":2188}," 100",{"type":33,"tag":79,"props":2190,"children":2191},{"style":984},[2192],{"type":38,"value":2193}," AS",{"type":33,"tag":79,"props":2195,"children":2196},{"style":96},[2197],{"type":38,"value":2198}," lcp_regression_pct\n",{"type":33,"tag":79,"props":2200,"children":2201},{"class":81,"line":487},[2202,2207],{"type":33,"tag":79,"props":2203,"children":2204},{"style":984},[2205],{"type":38,"value":2206},"FROM",{"type":33,"tag":79,"props":2208,"children":2209},{"style":96},[2210],{"type":38,"value":2211}," current_hour c, baseline b\n",{"type":33,"tag":79,"props":2213,"children":2214},{"class":81,"line":509},[2215,2220,2225,2229,2233,2237,2241,2245,2249,2253,2257,2261,2265,2269,2273,2278,2283,2287],{"type":33,"tag":79,"props":2216,"children":2217},{"style":984},[2218],{"type":38,"value":2219},"WHERE",{"type":33,"tag":79,"props":2221,"children":2222},{"style":96},[2223],{"type":38,"value":2224}," (",{"type":33,"tag":79,"props":2226,"children":2227},{"style":106},[2228],{"type":38,"value":2130},{"type":33,"tag":79,"props":2230,"children":2231},{"style":96},[2232],{"type":38,"value":1314},{"type":33,"tag":79,"props":2234,"children":2235},{"style":106},[2236],{"type":38,"value":2092},{"type":33,"tag":79,"props":2238,"children":2239},{"style":984},[2240],{"type":38,"value":2143},{"type":33,"tag":79,"props":2242,"children":2243},{"style":106},[2244],{"type":38,"value":2148},{"type":33,"tag":79,"props":2246,"children":2247},{"style":96},[2248],{"type":38,"value":1314},{"type":33,"tag":79,"props":2250,"children":2251},{"style":106},[2252],{"type":38,"value":2113},{"type":33,"tag":79,"props":2254,"children":2255},{"style":96},[2256],{"type":38,"value":2161},{"type":33,"tag":79,"props":2258,"children":2259},{"style":984},[2260],{"type":38,"value":2166},{"type":33,"tag":79,"props":2262,"children":2263},{"style":106},[2264],{"type":38,"value":2148},{"type":33,"tag":79,"props":2266,"children":2267},{"style":96},[2268],{"type":38,"value":1314},{"type":33,"tag":79,"props":2270,"children":2271},{"style":106},[2272],{"type":38,"value":2113},{"type":33,"tag":79,"props":2274,"children":2275},{"style":984},[2276],{"type":38,"value":2277}," >",{"type":33,"tag":79,"props":2279,"children":2280},{"style":106},[2281],{"type":38,"value":2282}," 0",{"type":33,"tag":79,"props":2284,"children":2285},{"style":96},[2286],{"type":38,"value":1314},{"type":33,"tag":79,"props":2288,"children":2289},{"style":106},[2290],{"type":38,"value":2291},"15\n",{"type":33,"tag":34,"props":2293,"children":2294},{},[2295],{"type":38,"value":2296},"Cette requête vérifie si le LCP p75 s'est dégradé de plus de 15 % par rapport à la baseline. Si c'est le cas, une Cloud Function est déclenchée qui envoie une alerte à un webhook Slack :",{"type":33,"tag":68,"props":2298,"children":2300},{"code":2299},"⚠️ Performance Regression Detected\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nLCP p75: 3.2s (+68% vs baseline 6h)\nBaseline: 1.9s\nURL: \u002Fproduct\u002Fxyz\nDeploy: #4521 (30 min ago)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n",[2301],{"type":33,"tag":75,"props":2302,"children":2303},{"__ignoreMap":17},[2304],{"type":38,"value":2299},{"type":33,"tag":41,"props":2306,"children":2308},{"id":2307},"compromis-synthétique-vs-rum-quand-utiliser-quel-chiffre",[2309],{"type":38,"value":2310},"Compromis : Synthétique vs RUM — Quand Utiliser Quel Chiffre",{"type":33,"tag":34,"props":2312,"children":2313},{},[2314],{"type":38,"value":2315},"Lighthouse CI et RUM se complètent — ce n'est pas l'un ou l'autre, mais les deux en parallèle.",{"type":33,"tag":34,"props":2317,"children":2318},{},[2319],{"type":33,"tag":2320,"props":2321,"children":2322},"strong",{},[2323],{"type":38,"value":2324},"Lighthouse CI (synthétique) :",{"type":33,"tag":2326,"props":2327,"children":2328},"ul",{},[2329,2340,2350],{"type":33,"tag":2330,"props":2331,"children":2332},"li",{},[2333,2338],{"type":33,"tag":2320,"props":2334,"children":2335},{},[2336],{"type":38,"value":2337},"Avantage :",{"type":38,"value":2339}," Environnement contrôlé, reproductible, s'exécute à chaque commit",{"type":33,"tag":2330,"props":2341,"children":2342},{},[2343,2348],{"type":33,"tag":2320,"props":2344,"children":2345},{},[2346],{"type":38,"value":2347},"Inconvénient :",{"type":38,"value":2349}," Ne voit pas la variabilité des appareils réels, ne simule pas l'état du cache",{"type":33,"tag":2330,"props":2351,"children":2352},{},[2353,2358],{"type":33,"tag":2320,"props":2354,"children":2355},{},[2356],{"type":38,"value":2357},"Usage :",{"type":38,"value":2359}," Prévention des régressions en CI — « Ce PR risque-t-il de ralentir le site ? »",{"type":33,"tag":34,"props":2361,"children":2362},{},[2363],{"type":33,"tag":2320,"props":2364,"children":2365},{},[2366],{"type":38,"value":2367},"RUM (utilisateurs réels) :",{"type":33,"tag":2326,"props":2369,"children":2370},{},[2371,2380,2389],{"type":33,"tag":2330,"props":2372,"children":2373},{},[2374,2378],{"type":33,"tag":2320,"props":2375,"children":2376},{},[2377],{"type":38,"value":2337},{"type":38,"value":2379}," Données réelles d'utilisateurs, capture les edge cases (ex. « Safari sur iPhone 11, LCP = 5s »)",{"type":33,"tag":2330,"props":2381,"children":2382},{},[2383,2387],{"type":33,"tag":2320,"props":2384,"children":2385},{},[2386],{"type":38,"value":2347},{"type":38,"value":2388}," Données bruyantes (beaucoup de valeurs aberrantes), ne prévient pas avant le déploiement",{"type":33,"tag":2330,"props":2390,"children":2391},{},[2392,2396],{"type":33,"tag":2320,"props":2393,"children":2394},{},[2395],{"type":38,"value":2357},{"type":38,"value":2397}," Monitoring en production — « Le nouveau déploiement a-t-il dégradé la perf ? »",{"type":33,"tag":34,"props":2399,"children":2400},{},[2401],{"type":38,"value":2402},"Un système robuste utilise les deux. Le CI bloque au pipeline si Lighthouse dépasse le budget. Si le déploiement passe, le RUM valide les vrais chiffres en 2 heures. Si RUM montre une régression, rollback.",{"type":33,"tag":34,"props":2404,"children":2405},{},[2406],{"type":38,"value":2407},"Exemple : sur une vitrine Shopify, un nouveau sélecteur de variante affiche 380ms de TBT dans Lighthouse CI (budget : 200ms). La PR est rejetée. Le dev code-split le composant et ajoute lazy-loading. Lighthouse CI mesure 150ms, merge autorisé. 4 heures après le déploiement, le RUM montre INP p75 passant de 120ms à 145ms — acceptable (budget 200ms). Le déploiement reste.",{"type":33,"tag":41,"props":2409,"children":2411},{"id":2410},"intégrer-les-alarmes-de-régression-au-pipeline-de-déploiement",[2412],{"type":38,"value":2413},"Intégrer les Alarmes de Régression au Pipeline de Déploiement",{"type":33,"tag":34,"props":2415,"children":2416},{},[2417],{"type":38,"value":2418},"Si l'alarme RUM fonctionne indépendamment du déploiement, on perd le contexte. « LCP s'est dégradé » — mais par quel déploiement ? C'est pourquoi nous injectons les métadonnées de déploiement dans chaque événement RUM.",{"type":33,"tag":34,"props":2420,"children":2421},{},[2422,2424,2430],{"type":38,"value":2423},"Vercel ou Netlify fournissent la variable ",{"type":33,"tag":75,"props":2425,"children":2427},{"className":2426},[],[2428],{"type":38,"value":2429},"VERCEL_GIT_COMMIT_SHA",{"type":38,"value":2431},". Nous l'injectons en frontend pour inclure le commit SHA dans chaque événement RUM :",{"type":33,"tag":68,"props":2433,"children":2435},{"code":2434,"language":1196,"meta":17,"className":1197,"style":17},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  runtimeConfig: {\n    public: {\n      deploymentId: process.env.VERCEL_GIT_COMMIT_SHA || 'local',\n      deploymentTime: Date.now()\n    }\n  }\n});\n\n\u002F\u002F analytics\u002Fweb-vitals.ts\nfunction sendToAnalytics(metric: Metric) {\n  const config = useRuntimeConfig();\n  const body = JSON.stringify({\n    ...metric,\n    deploymentId: config.public.deploymentId,\n    \n",[2436],{"type":33,"tag":75,"props":2437,"children":2438},{"__ignoreMap":17},[2439,2447,2469,2477,2485,2511,2527,2534,2541,2549,2556,2563,2594,2620,2651,2664],{"type":33,"tag":79,"props":2440,"children":2441},{"class":81,"line":82},[2442],{"type":33,"tag":79,"props":2443,"children":2444},{"style":86},[2445],{"type":38,"value":2446},"\u002F\u002F nuxt.config.ts\n",{"type":33,"tag":79,"props":2448,"children":2449},{"class":81,"line":92},[2450,2455,2460,2465],{"type":33,"tag":79,"props":2451,"children":2452},{"style":984},[2453],{"type":38,"value":2454},"export",{"type":33,"tag":79,"props":2456,"children":2457},{"style":984},[2458],{"type":38,"value":2459}," default",{"type":33,"tag":79,"props":2461,"children":2462},{"style":1257},[2463],{"type":38,"value":2464}," defineNuxtConfig",{"type":33,"tag":79,"props":2466,"children":2467},{"style":96},[2468],{"type":38,"value":1324},{"type":33,"tag":79,"props":2470,"children":2471},{"class":81,"line":102},[2472],{"type":33,"tag":79,"props":2473,"children":2474},{"style":96},[2475],{"type":38,"value":2476},"  runtimeConfig: {\n",{"type":33,"tag":79,"props":2478,"children":2479},{"class":81,"line":117},[2480],{"type":33,"tag":79,"props":2481,"children":2482},{"style":96},[2483],{"type":38,"value":2484},"    public: {\n",{"type":33,"tag":79,"props":2486,"children":2487},{"class":81,"line":130},[2488,2493,2497,2502,2507],{"type":33,"tag":79,"props":2489,"children":2490},{"style":96},[2491],{"type":38,"value":2492},"      deploymentId: process.env.",{"type":33,"tag":79,"props":2494,"children":2495},{"style":106},[2496],{"type":38,"value":2429},{"type":33,"tag":79,"props":2498,"children":2499},{"style":984},[2500],{"type":38,"value":2501}," ||",{"type":33,"tag":79,"props":2503,"children":2504},{"style":144},[2505],{"type":38,"value":2506}," 'local'",{"type":33,"tag":79,"props":2508,"children":2509},{"style":96},[2510],{"type":38,"value":152},{"type":33,"tag":79,"props":2512,"children":2513},{"class":81,"line":155},[2514,2519,2523],{"type":33,"tag":79,"props":2515,"children":2516},{"style":96},[2517],{"type":38,"value":2518},"      deploymentTime: Date.",{"type":33,"tag":79,"props":2520,"children":2521},{"style":1257},[2522],{"type":38,"value":1401},{"type":33,"tag":79,"props":2524,"children":2525},{"style":96},[2526],{"type":38,"value":1406},{"type":33,"tag":79,"props":2528,"children":2529},{"class":81,"line":168},[2530],{"type":33,"tag":79,"props":2531,"children":2532},{"style":96},[2533],{"type":38,"value":550},{"type":33,"tag":79,"props":2535,"children":2536},{"class":81,"line":211},[2537],{"type":33,"tag":79,"props":2538,"children":2539},{"style":96},[2540],{"type":38,"value":559},{"type":33,"tag":79,"props":2542,"children":2543},{"class":81,"line":27},[2544],{"type":33,"tag":79,"props":2545,"children":2546},{"style":96},[2547],{"type":38,"value":2548},"});\n",{"type":33,"tag":79,"props":2550,"children":2551},{"class":81,"line":286},[2552],{"type":33,"tag":79,"props":2553,"children":2554},{"emptyLinePlaceholder":1243},[2555],{"type":38,"value":1246},{"type":33,"tag":79,"props":2557,"children":2558},{"class":81,"line":324},[2559],{"type":33,"tag":79,"props":2560,"children":2561},{"style":86},[2562],{"type":38,"value":1209},{"type":33,"tag":79,"props":2564,"children":2565},{"class":81,"line":363},[2566,2570,2574,2578,2582,2586,2590],{"type":33,"tag":79,"props":2567,"children":2568},{"style":984},[2569],{"type":38,"value":1254},{"type":33,"tag":79,"props":2571,"children":2572},{"style":1257},[2573],{"type":38,"value":1260},{"type":33,"tag":79,"props":2575,"children":2576},{"style":96},[2577],{"type":38,"value":1265},{"type":33,"tag":79,"props":2579,"children":2580},{"style":1268},[2581],{"type":38,"value":1271},{"type":33,"tag":79,"props":2583,"children":2584},{"style":984},[2585],{"type":38,"value":1276},{"type":33,"tag":79,"props":2587,"children":2588},{"style":1257},[2589],{"type":38,"value":1281},{"type":33,"tag":79,"props":2591,"children":2592},{"style":96},[2593],{"type":38,"value":1286},{"type":33,"tag":79,"props":2595,"children":2596},{"class":81,"line":372},[2597,2601,2606,2610,2615],{"type":33,"tag":79,"props":2598,"children":2599},{"style":984},[2600],{"type":38,"value":1294},{"type":33,"tag":79,"props":2602,"children":2603},{"style":106},[2604],{"type":38,"value":2605}," config",{"type":33,"tag":79,"props":2607,"children":2608},{"style":984},[2609],{"type":38,"value":1304},{"type":33,"tag":79,"props":2611,"children":2612},{"style":1257},[2613],{"type":38,"value":2614}," useRuntimeConfig",{"type":33,"tag":79,"props":2616,"children":2617},{"style":96},[2618],{"type":38,"value":2619},"();\n",{"type":33,"tag":79,"props":2621,"children":2622},{"class":81,"line":381},[2623,2627,2631,2635,2639,2643,2647],{"type":33,"tag":79,"props":2624,"children":2625},{"style":984},[2626],{"type":38,"value":1294},{"type":33,"tag":79,"props":2628,"children":2629},{"style":106},[2630],{"type":38,"value":1299},{"type":33,"tag":79,"props":2632,"children":2633},{"style":984},[2634],{"type":38,"value":1304},{"type":33,"tag":79,"props":2636,"children":2637},{"style":106},[2638],{"type":38,"value":1309},{"type":33,"tag":79,"props":2640,"children":2641},{"style":96},[2642],{"type":38,"value":1314},{"type":33,"tag":79,"props":2644,"children":2645},{"style":1257},[2646],{"type":38,"value":1319},{"type":33,"tag":79,"props":2648,"children":2649},{"style":96},[2650],{"type":38,"value":1324},{"type":33,"tag":79,"props":2652,"children":2653},{"class":81,"line":394},[2654,2659],{"type":33,"tag":79,"props":2655,"children":2656},{"style":984},[2657],{"type":38,"value":2658},"    ...",{"type":33,"tag":79,"props":2660,"children":2661},{"style":96},[2662],{"type":38,"value":2663},"metric,\n",{"type":33,"tag":79,"props":2665,"children":2666},{"class":81,"line":416},[2667],{"type":33,"tag":79,"props":2668,"children":2669},{"style":96},[2670],{"type":38,"value":2671},"    deploymentId: config.public.deploymentId,\n",{"type":33,"tag":2673,"props":2674,"children":2675},"style",{},[2676],{"type":38,"value":2677},"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":17,"searchDepth":102,"depth":102,"links":2679},[2680,2681,2682,2685,2686],{"id":43,"depth":92,"text":46},{"id":590,"depth":92,"text":593},{"id":1179,"depth":92,"text":1182,"children":2683},[2684],{"id":1751,"depth":102,"text":1754},{"id":2307,"depth":92,"text":2310},{"id":2410,"depth":92,"text":2413},"markdown","content:fr:tech:budgets-de-performance-web-mecanisme-de-decision.md","content","fr\u002Ftech\u002Fbudgets-de-performance-web-mecanisme-de-decision.md","fr\u002Ftech\u002Fbudgets-de-performance-web-mecanisme-de-decision","md",1785967483471]