[{"data":1,"prerenderedAt":3046},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fen\u002Ftech\u002Fweb-performance-budgets-decision-automation":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":3040,"_id":3041,"_source":3042,"_file":3043,"_stem":3044,"_extension":3045},"\u002Fen\u002Ftech\u002Fweb-performance-budgets-decision-automation","tech",false,"","Web Performance Budgets: Connecting to Your Decision Pipeline","Integrate Lighthouse CI, RUM, and perf regression alarms into CI\u002FCD to stop slowdowns at deploy time — real-world scenarios with code.","2026-07-30",[22,23,24,25,26],"web-performance","lighthouse-ci","rum","performance-budget","core-web-vitals",7,"Roibase",{"type":30,"children":31,"toc":3030},"root",[32,40,47,52,57,62,75,576,595,601,606,1113,1134,1139,1147,1160,1184,1190,1195,1200,1606,1619,1745,1750,1755,1762,1767,2299,2304,2312,2318,2323,2332,2367,2375,2405,2410,2415,2421,2426,2439,2725,2730,2918,2923,3000,3013,3019,3024],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37],{"type":38,"value":39},"text","Discovering a performance regression after it hits production is like discovering exchange rates after the trade closes. According to Google's 2026 Commerce Signals report, every extra 100ms of LCP drives a 3.5% bounce increase. Just as we catch bugs in the pre-deployment phase, we need to catch slowdowns in the CI\u002FCD pipeline itself. This post shows how to integrate Lighthouse CI, RUM, synthetic monitoring, and performance budgets—and how to stop a deploy cold—with real code and numbers.",{"type":33,"tag":41,"props":42,"children":44},"h2",{"id":43},"what-is-a-performance-budget-and-why-it-belongs-in-cicd",[45],{"type":38,"value":46},"What Is a Performance Budget, and Why It Belongs in CI\u002FCD",{"type":33,"tag":34,"props":48,"children":49},{},[50],{"type":38,"value":51},"A performance budget is the ceiling on how much a page can spend on resources. Example: \"Homepage LCP \u003C 2s, Total Blocking Time \u003C 200ms, JS bundle \u003C 400KB.\" It works like an SLA: if any number is exceeded, the build fails and deploy is blocked.",{"type":33,"tag":34,"props":53,"children":54},{},[55],{"type":38,"value":56},"The old way—running Lighthouse manually after each sprint and reviewing the report—meant catching regressions two weeks late. Modern teams embed the budget in CI. Every pull request runs Lighthouse CI on a headless Chromium instance, measures performance metrics, and compares against the budget. If the budget breaks, the GitHub Action fails and the PR won't merge.",{"type":33,"tag":34,"props":58,"children":59},{},[60],{"type":38,"value":61},"Consider this scenario: a product recommendation widget is added to a Shopify Hydrogen storefront, and the bundle balloons from 340KB to 510KB. The CI pipeline catches it instantly and turns the PR red. The widget stays blocked until it's optimized with lazy-loading. In the old flow, 510KB ships to production—that's an extra 4s of blocking time on 3G mobile—and two days of lost revenue are gone.",{"type":33,"tag":34,"props":63,"children":64},{},[65,67,73],{"type":38,"value":66},"We'll use ",{"type":33,"tag":68,"props":69,"children":71},"code",{"className":70},[],[72],{"type":38,"value":23},{"type":38,"value":74}," to enforce performance budgets. Lighthouse CI takes a deployment preview URL, renders it in Chromium, measures Core Web Vitals and custom metrics, and compares them to your budget file.",{"type":33,"tag":76,"props":77,"children":81},"pre",{"code":78,"language":79,"meta":17,"className":80,"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",[82],{"type":33,"tag":68,"props":83,"children":84},{"__ignoreMap":17},[85,97,107,122,135,160,173,215,253,291,329,368,377,386,399,421,444,457,470,492,514,532,541,549,558,567],{"type":33,"tag":86,"props":87,"children":90},"span",{"class":88,"line":89},"line",1,[91],{"type":33,"tag":86,"props":92,"children":94},{"style":93},"--shiki-default:#6A737D",[95],{"type":38,"value":96},"\u002F\u002F lighthouserc.json\n",{"type":33,"tag":86,"props":98,"children":100},{"class":88,"line":99},2,[101],{"type":33,"tag":86,"props":102,"children":104},{"style":103},"--shiki-default:#E1E4E8",[105],{"type":38,"value":106},"{\n",{"type":33,"tag":86,"props":108,"children":110},{"class":88,"line":109},3,[111,117],{"type":33,"tag":86,"props":112,"children":114},{"style":113},"--shiki-default:#79B8FF",[115],{"type":38,"value":116},"  \"ci\"",{"type":33,"tag":86,"props":118,"children":119},{"style":103},[120],{"type":38,"value":121},": {\n",{"type":33,"tag":86,"props":123,"children":125},{"class":88,"line":124},4,[126,131],{"type":33,"tag":86,"props":127,"children":128},{"style":113},[129],{"type":38,"value":130},"    \"assert\"",{"type":33,"tag":86,"props":132,"children":133},{"style":103},[134],{"type":38,"value":121},{"type":33,"tag":86,"props":136,"children":138},{"class":88,"line":137},5,[139,144,149,155],{"type":33,"tag":86,"props":140,"children":141},{"style":113},[142],{"type":38,"value":143},"      \"preset\"",{"type":33,"tag":86,"props":145,"children":146},{"style":103},[147],{"type":38,"value":148},": ",{"type":33,"tag":86,"props":150,"children":152},{"style":151},"--shiki-default:#9ECBFF",[153],{"type":38,"value":154},"\"lighthouse:recommended\"",{"type":33,"tag":86,"props":156,"children":157},{"style":103},[158],{"type":38,"value":159},",\n",{"type":33,"tag":86,"props":161,"children":163},{"class":88,"line":162},6,[164,169],{"type":33,"tag":86,"props":165,"children":166},{"style":113},[167],{"type":38,"value":168},"      \"assertions\"",{"type":33,"tag":86,"props":170,"children":171},{"style":103},[172],{"type":38,"value":121},{"type":33,"tag":86,"props":174,"children":175},{"class":88,"line":27},[176,181,186,191,196,201,205,210],{"type":33,"tag":86,"props":177,"children":178},{"style":113},[179],{"type":38,"value":180},"        \"largest-contentful-paint\"",{"type":33,"tag":86,"props":182,"children":183},{"style":103},[184],{"type":38,"value":185},": [",{"type":33,"tag":86,"props":187,"children":188},{"style":151},[189],{"type":38,"value":190},"\"error\"",{"type":33,"tag":86,"props":192,"children":193},{"style":103},[194],{"type":38,"value":195},", { ",{"type":33,"tag":86,"props":197,"children":198},{"style":113},[199],{"type":38,"value":200},"\"maxNumericValue\"",{"type":33,"tag":86,"props":202,"children":203},{"style":103},[204],{"type":38,"value":148},{"type":33,"tag":86,"props":206,"children":207},{"style":113},[208],{"type":38,"value":209},"2000",{"type":33,"tag":86,"props":211,"children":212},{"style":103},[213],{"type":38,"value":214}," }],\n",{"type":33,"tag":86,"props":216,"children":218},{"class":88,"line":217},8,[219,224,228,232,236,240,244,249],{"type":33,"tag":86,"props":220,"children":221},{"style":113},[222],{"type":38,"value":223},"        \"total-blocking-time\"",{"type":33,"tag":86,"props":225,"children":226},{"style":103},[227],{"type":38,"value":185},{"type":33,"tag":86,"props":229,"children":230},{"style":151},[231],{"type":38,"value":190},{"type":33,"tag":86,"props":233,"children":234},{"style":103},[235],{"type":38,"value":195},{"type":33,"tag":86,"props":237,"children":238},{"style":113},[239],{"type":38,"value":200},{"type":33,"tag":86,"props":241,"children":242},{"style":103},[243],{"type":38,"value":148},{"type":33,"tag":86,"props":245,"children":246},{"style":113},[247],{"type":38,"value":248},"200",{"type":33,"tag":86,"props":250,"children":251},{"style":103},[252],{"type":38,"value":214},{"type":33,"tag":86,"props":254,"children":256},{"class":88,"line":255},9,[257,262,266,270,274,278,282,287],{"type":33,"tag":86,"props":258,"children":259},{"style":113},[260],{"type":38,"value":261},"        \"cumulative-layout-shift\"",{"type":33,"tag":86,"props":263,"children":264},{"style":103},[265],{"type":38,"value":185},{"type":33,"tag":86,"props":267,"children":268},{"style":151},[269],{"type":38,"value":190},{"type":33,"tag":86,"props":271,"children":272},{"style":103},[273],{"type":38,"value":195},{"type":33,"tag":86,"props":275,"children":276},{"style":113},[277],{"type":38,"value":200},{"type":33,"tag":86,"props":279,"children":280},{"style":103},[281],{"type":38,"value":148},{"type":33,"tag":86,"props":283,"children":284},{"style":113},[285],{"type":38,"value":286},"0.1",{"type":33,"tag":86,"props":288,"children":289},{"style":103},[290],{"type":38,"value":214},{"type":33,"tag":86,"props":292,"children":294},{"class":88,"line":293},10,[295,300,304,308,312,316,320,325],{"type":33,"tag":86,"props":296,"children":297},{"style":113},[298],{"type":38,"value":299},"        \"speed-index\"",{"type":33,"tag":86,"props":301,"children":302},{"style":103},[303],{"type":38,"value":185},{"type":33,"tag":86,"props":305,"children":306},{"style":151},[307],{"type":38,"value":190},{"type":33,"tag":86,"props":309,"children":310},{"style":103},[311],{"type":38,"value":195},{"type":33,"tag":86,"props":313,"children":314},{"style":113},[315],{"type":38,"value":200},{"type":33,"tag":86,"props":317,"children":318},{"style":103},[319],{"type":38,"value":148},{"type":33,"tag":86,"props":321,"children":322},{"style":113},[323],{"type":38,"value":324},"3000",{"type":33,"tag":86,"props":326,"children":327},{"style":103},[328],{"type":38,"value":214},{"type":33,"tag":86,"props":330,"children":332},{"class":88,"line":331},11,[333,338,342,346,350,354,358,363],{"type":33,"tag":86,"props":334,"children":335},{"style":113},[336],{"type":38,"value":337},"        \"resource-summary:script:size\"",{"type":33,"tag":86,"props":339,"children":340},{"style":103},[341],{"type":38,"value":185},{"type":33,"tag":86,"props":343,"children":344},{"style":151},[345],{"type":38,"value":190},{"type":33,"tag":86,"props":347,"children":348},{"style":103},[349],{"type":38,"value":195},{"type":33,"tag":86,"props":351,"children":352},{"style":113},[353],{"type":38,"value":200},{"type":33,"tag":86,"props":355,"children":356},{"style":103},[357],{"type":38,"value":148},{"type":33,"tag":86,"props":359,"children":360},{"style":113},[361],{"type":38,"value":362},"400000",{"type":33,"tag":86,"props":364,"children":365},{"style":103},[366],{"type":38,"value":367}," }]\n",{"type":33,"tag":86,"props":369,"children":371},{"class":88,"line":370},12,[372],{"type":33,"tag":86,"props":373,"children":374},{"style":103},[375],{"type":38,"value":376},"      }\n",{"type":33,"tag":86,"props":378,"children":380},{"class":88,"line":379},13,[381],{"type":33,"tag":86,"props":382,"children":383},{"style":103},[384],{"type":38,"value":385},"    },\n",{"type":33,"tag":86,"props":387,"children":389},{"class":88,"line":388},14,[390,395],{"type":33,"tag":86,"props":391,"children":392},{"style":113},[393],{"type":38,"value":394},"    \"collect\"",{"type":33,"tag":86,"props":396,"children":397},{"style":103},[398],{"type":38,"value":121},{"type":33,"tag":86,"props":400,"children":402},{"class":88,"line":401},15,[403,408,412,417],{"type":33,"tag":86,"props":404,"children":405},{"style":113},[406],{"type":38,"value":407},"      \"numberOfRuns\"",{"type":33,"tag":86,"props":409,"children":410},{"style":103},[411],{"type":38,"value":148},{"type":33,"tag":86,"props":413,"children":414},{"style":113},[415],{"type":38,"value":416},"3",{"type":33,"tag":86,"props":418,"children":419},{"style":103},[420],{"type":38,"value":159},{"type":33,"tag":86,"props":422,"children":424},{"class":88,"line":423},16,[425,430,434,439],{"type":33,"tag":86,"props":426,"children":427},{"style":113},[428],{"type":38,"value":429},"      \"url\"",{"type":33,"tag":86,"props":431,"children":432},{"style":103},[433],{"type":38,"value":185},{"type":33,"tag":86,"props":435,"children":436},{"style":151},[437],{"type":38,"value":438},"\"https:\u002F\u002Fpreview-{PR_NUMBER}.vercel.app\"",{"type":33,"tag":86,"props":440,"children":441},{"style":103},[442],{"type":38,"value":443},"],\n",{"type":33,"tag":86,"props":445,"children":447},{"class":88,"line":446},17,[448,453],{"type":33,"tag":86,"props":449,"children":450},{"style":113},[451],{"type":38,"value":452},"      \"settings\"",{"type":33,"tag":86,"props":454,"children":455},{"style":103},[456],{"type":38,"value":121},{"type":33,"tag":86,"props":458,"children":460},{"class":88,"line":459},18,[461,466],{"type":33,"tag":86,"props":462,"children":463},{"style":113},[464],{"type":38,"value":465},"        \"throttling\"",{"type":33,"tag":86,"props":467,"children":468},{"style":103},[469],{"type":38,"value":121},{"type":33,"tag":86,"props":471,"children":473},{"class":88,"line":472},19,[474,479,483,488],{"type":33,"tag":86,"props":475,"children":476},{"style":113},[477],{"type":38,"value":478},"          \"rttMs\"",{"type":33,"tag":86,"props":480,"children":481},{"style":103},[482],{"type":38,"value":148},{"type":33,"tag":86,"props":484,"children":485},{"style":113},[486],{"type":38,"value":487},"150",{"type":33,"tag":86,"props":489,"children":490},{"style":103},[491],{"type":38,"value":159},{"type":33,"tag":86,"props":493,"children":495},{"class":88,"line":494},20,[496,501,505,510],{"type":33,"tag":86,"props":497,"children":498},{"style":113},[499],{"type":38,"value":500},"          \"throughputKbps\"",{"type":33,"tag":86,"props":502,"children":503},{"style":103},[504],{"type":38,"value":148},{"type":33,"tag":86,"props":506,"children":507},{"style":113},[508],{"type":38,"value":509},"1638.4",{"type":33,"tag":86,"props":511,"children":512},{"style":103},[513],{"type":38,"value":159},{"type":33,"tag":86,"props":515,"children":517},{"class":88,"line":516},21,[518,523,527],{"type":33,"tag":86,"props":519,"children":520},{"style":113},[521],{"type":38,"value":522},"          \"cpuSlowdownMultiplier\"",{"type":33,"tag":86,"props":524,"children":525},{"style":103},[526],{"type":38,"value":148},{"type":33,"tag":86,"props":528,"children":529},{"style":113},[530],{"type":38,"value":531},"4\n",{"type":33,"tag":86,"props":533,"children":535},{"class":88,"line":534},22,[536],{"type":33,"tag":86,"props":537,"children":538},{"style":103},[539],{"type":38,"value":540},"        }\n",{"type":33,"tag":86,"props":542,"children":544},{"class":88,"line":543},23,[545],{"type":33,"tag":86,"props":546,"children":547},{"style":103},[548],{"type":38,"value":376},{"type":33,"tag":86,"props":550,"children":552},{"class":88,"line":551},24,[553],{"type":33,"tag":86,"props":554,"children":555},{"style":103},[556],{"type":38,"value":557},"    }\n",{"type":33,"tag":86,"props":559,"children":561},{"class":88,"line":560},25,[562],{"type":33,"tag":86,"props":563,"children":564},{"style":103},[565],{"type":38,"value":566},"  }\n",{"type":33,"tag":86,"props":568,"children":570},{"class":88,"line":569},26,[571],{"type":33,"tag":86,"props":572,"children":573},{"style":103},[574],{"type":38,"value":575},"}\n",{"type":33,"tag":34,"props":577,"children":578},{},[579,585,587,593],{"type":33,"tag":68,"props":580,"children":582},{"className":581},[],[583],{"type":38,"value":584},"numberOfRuns: 3",{"type":38,"value":586}," reduces variability—the median is used. ",{"type":33,"tag":68,"props":588,"children":590},{"className":589},[],[591],{"type":38,"value":592},"throttling",{"type":38,"value":594}," simulates mobile 3G conditions, which represents the worst-case real user scenario.",{"type":33,"tag":41,"props":596,"children":598},{"id":597},"automating-lighthouse-ci-with-github-actions",[599],{"type":38,"value":600},"Automating Lighthouse CI with GitHub Actions",{"type":33,"tag":34,"props":602,"children":603},{},[604],{"type":38,"value":605},"To run Lighthouse in the CI pipeline, we pair Vercel preview deployments with GitHub Actions. Each PR creates an automatic preview URL that Lighthouse CI scans. Results post as a GitHub PR comment. If the budget breaks, CI fails.",{"type":33,"tag":76,"props":607,"children":611},{"code":608,"language":609,"meta":17,"className":610,"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",[612],{"type":33,"tag":68,"props":613,"children":614},{"__ignoreMap":17},[615,623,641,663,676,688,705,717,739,759,771,788,809,829,849,866,883,894,911,928,948,960,977,995,1003,1011,1031,1048,1060,1078,1096],{"type":33,"tag":86,"props":616,"children":617},{"class":88,"line":89},[618],{"type":33,"tag":86,"props":619,"children":620},{"style":93},[621],{"type":38,"value":622},"# .github\u002Fworkflows\u002Flighthouse.yml\n",{"type":33,"tag":86,"props":624,"children":625},{"class":88,"line":99},[626,632,636],{"type":33,"tag":86,"props":627,"children":629},{"style":628},"--shiki-default:#85E89D",[630],{"type":38,"value":631},"name",{"type":33,"tag":86,"props":633,"children":634},{"style":103},[635],{"type":38,"value":148},{"type":33,"tag":86,"props":637,"children":638},{"style":151},[639],{"type":38,"value":640},"Lighthouse CI\n",{"type":33,"tag":86,"props":642,"children":643},{"class":88,"line":109},[644,649,653,658],{"type":33,"tag":86,"props":645,"children":646},{"style":113},[647],{"type":38,"value":648},"on",{"type":33,"tag":86,"props":650,"children":651},{"style":103},[652],{"type":38,"value":185},{"type":33,"tag":86,"props":654,"children":655},{"style":151},[656],{"type":38,"value":657},"pull_request",{"type":33,"tag":86,"props":659,"children":660},{"style":103},[661],{"type":38,"value":662},"]\n",{"type":33,"tag":86,"props":664,"children":665},{"class":88,"line":124},[666,671],{"type":33,"tag":86,"props":667,"children":668},{"style":628},[669],{"type":38,"value":670},"jobs",{"type":33,"tag":86,"props":672,"children":673},{"style":103},[674],{"type":38,"value":675},":\n",{"type":33,"tag":86,"props":677,"children":678},{"class":88,"line":137},[679,684],{"type":33,"tag":86,"props":680,"children":681},{"style":628},[682],{"type":38,"value":683},"  lighthouse",{"type":33,"tag":86,"props":685,"children":686},{"style":103},[687],{"type":38,"value":675},{"type":33,"tag":86,"props":689,"children":690},{"class":88,"line":162},[691,696,700],{"type":33,"tag":86,"props":692,"children":693},{"style":628},[694],{"type":38,"value":695},"    runs-on",{"type":33,"tag":86,"props":697,"children":698},{"style":103},[699],{"type":38,"value":148},{"type":33,"tag":86,"props":701,"children":702},{"style":151},[703],{"type":38,"value":704},"ubuntu-latest\n",{"type":33,"tag":86,"props":706,"children":707},{"class":88,"line":27},[708,713],{"type":33,"tag":86,"props":709,"children":710},{"style":628},[711],{"type":38,"value":712},"    steps",{"type":33,"tag":86,"props":714,"children":715},{"style":103},[716],{"type":38,"value":675},{"type":33,"tag":86,"props":718,"children":719},{"class":88,"line":217},[720,725,730,734],{"type":33,"tag":86,"props":721,"children":722},{"style":103},[723],{"type":38,"value":724},"      - ",{"type":33,"tag":86,"props":726,"children":727},{"style":628},[728],{"type":38,"value":729},"uses",{"type":33,"tag":86,"props":731,"children":732},{"style":103},[733],{"type":38,"value":148},{"type":33,"tag":86,"props":735,"children":736},{"style":151},[737],{"type":38,"value":738},"actions\u002Fcheckout@v3\n",{"type":33,"tag":86,"props":740,"children":741},{"class":88,"line":255},[742,746,750,754],{"type":33,"tag":86,"props":743,"children":744},{"style":103},[745],{"type":38,"value":724},{"type":33,"tag":86,"props":747,"children":748},{"style":628},[749],{"type":38,"value":729},{"type":33,"tag":86,"props":751,"children":752},{"style":103},[753],{"type":38,"value":148},{"type":33,"tag":86,"props":755,"children":756},{"style":151},[757],{"type":38,"value":758},"actions\u002Fsetup-node@v3\n",{"type":33,"tag":86,"props":760,"children":761},{"class":88,"line":293},[762,767],{"type":33,"tag":86,"props":763,"children":764},{"style":628},[765],{"type":38,"value":766},"        with",{"type":33,"tag":86,"props":768,"children":769},{"style":103},[770],{"type":38,"value":675},{"type":33,"tag":86,"props":772,"children":773},{"class":88,"line":331},[774,779,783],{"type":33,"tag":86,"props":775,"children":776},{"style":628},[777],{"type":38,"value":778},"          node-version",{"type":33,"tag":86,"props":780,"children":781},{"style":103},[782],{"type":38,"value":148},{"type":33,"tag":86,"props":784,"children":785},{"style":151},[786],{"type":38,"value":787},"'20'\n",{"type":33,"tag":86,"props":789,"children":790},{"class":88,"line":370},[791,795,800,804],{"type":33,"tag":86,"props":792,"children":793},{"style":103},[794],{"type":38,"value":724},{"type":33,"tag":86,"props":796,"children":797},{"style":628},[798],{"type":38,"value":799},"run",{"type":33,"tag":86,"props":801,"children":802},{"style":103},[803],{"type":38,"value":148},{"type":33,"tag":86,"props":805,"children":806},{"style":151},[807],{"type":38,"value":808},"npm ci\n",{"type":33,"tag":86,"props":810,"children":811},{"class":88,"line":379},[812,816,820,824],{"type":33,"tag":86,"props":813,"children":814},{"style":103},[815],{"type":38,"value":724},{"type":33,"tag":86,"props":817,"children":818},{"style":628},[819],{"type":38,"value":799},{"type":33,"tag":86,"props":821,"children":822},{"style":103},[823],{"type":38,"value":148},{"type":33,"tag":86,"props":825,"children":826},{"style":151},[827],{"type":38,"value":828},"npm run build\n",{"type":33,"tag":86,"props":830,"children":831},{"class":88,"line":388},[832,836,840,844],{"type":33,"tag":86,"props":833,"children":834},{"style":103},[835],{"type":38,"value":724},{"type":33,"tag":86,"props":837,"children":838},{"style":628},[839],{"type":38,"value":631},{"type":33,"tag":86,"props":841,"children":842},{"style":103},[843],{"type":38,"value":148},{"type":33,"tag":86,"props":845,"children":846},{"style":151},[847],{"type":38,"value":848},"Wait for Vercel Preview\n",{"type":33,"tag":86,"props":850,"children":851},{"class":88,"line":401},[852,857,861],{"type":33,"tag":86,"props":853,"children":854},{"style":628},[855],{"type":38,"value":856},"        uses",{"type":33,"tag":86,"props":858,"children":859},{"style":103},[860],{"type":38,"value":148},{"type":33,"tag":86,"props":862,"children":863},{"style":151},[864],{"type":38,"value":865},"patrickedqvist\u002Fwait-for-vercel-preview@v1.3.1\n",{"type":33,"tag":86,"props":867,"children":868},{"class":88,"line":423},[869,874,878],{"type":33,"tag":86,"props":870,"children":871},{"style":628},[872],{"type":38,"value":873},"        id",{"type":33,"tag":86,"props":875,"children":876},{"style":103},[877],{"type":38,"value":148},{"type":33,"tag":86,"props":879,"children":880},{"style":151},[881],{"type":38,"value":882},"vercel_preview\n",{"type":33,"tag":86,"props":884,"children":885},{"class":88,"line":446},[886,890],{"type":33,"tag":86,"props":887,"children":888},{"style":628},[889],{"type":38,"value":766},{"type":33,"tag":86,"props":891,"children":892},{"style":103},[893],{"type":38,"value":675},{"type":33,"tag":86,"props":895,"children":896},{"class":88,"line":459},[897,902,906],{"type":33,"tag":86,"props":898,"children":899},{"style":628},[900],{"type":38,"value":901},"          token",{"type":33,"tag":86,"props":903,"children":904},{"style":103},[905],{"type":38,"value":148},{"type":33,"tag":86,"props":907,"children":908},{"style":151},[909],{"type":38,"value":910},"${{ secrets.GITHUB_TOKEN }}\n",{"type":33,"tag":86,"props":912,"children":913},{"class":88,"line":472},[914,919,923],{"type":33,"tag":86,"props":915,"children":916},{"style":628},[917],{"type":38,"value":918},"          max_timeout",{"type":33,"tag":86,"props":920,"children":921},{"style":103},[922],{"type":38,"value":148},{"type":33,"tag":86,"props":924,"children":925},{"style":113},[926],{"type":38,"value":927},"300\n",{"type":33,"tag":86,"props":929,"children":930},{"class":88,"line":494},[931,935,939,943],{"type":33,"tag":86,"props":932,"children":933},{"style":103},[934],{"type":38,"value":724},{"type":33,"tag":86,"props":936,"children":937},{"style":628},[938],{"type":38,"value":631},{"type":33,"tag":86,"props":940,"children":941},{"style":103},[942],{"type":38,"value":148},{"type":33,"tag":86,"props":944,"children":945},{"style":151},[946],{"type":38,"value":947},"Run Lighthouse CI\n",{"type":33,"tag":86,"props":949,"children":950},{"class":88,"line":516},[951,956],{"type":33,"tag":86,"props":952,"children":953},{"style":628},[954],{"type":38,"value":955},"        env",{"type":33,"tag":86,"props":957,"children":958},{"style":103},[959],{"type":38,"value":675},{"type":33,"tag":86,"props":961,"children":962},{"class":88,"line":534},[963,968,972],{"type":33,"tag":86,"props":964,"children":965},{"style":628},[966],{"type":38,"value":967},"          LHCI_GITHUB_APP_TOKEN",{"type":33,"tag":86,"props":969,"children":970},{"style":103},[971],{"type":38,"value":148},{"type":33,"tag":86,"props":973,"children":974},{"style":151},[975],{"type":38,"value":976},"${{ secrets.LHCI_TOKEN }}\n",{"type":33,"tag":86,"props":978,"children":979},{"class":88,"line":543},[980,985,989],{"type":33,"tag":86,"props":981,"children":982},{"style":628},[983],{"type":38,"value":984},"        run",{"type":33,"tag":86,"props":986,"children":987},{"style":103},[988],{"type":38,"value":148},{"type":33,"tag":86,"props":990,"children":992},{"style":991},"--shiki-default:#F97583",[993],{"type":38,"value":994},"|\n",{"type":33,"tag":86,"props":996,"children":997},{"class":88,"line":551},[998],{"type":33,"tag":86,"props":999,"children":1000},{"style":151},[1001],{"type":38,"value":1002},"          npm install -g @lhci\u002Fcli\n",{"type":33,"tag":86,"props":1004,"children":1005},{"class":88,"line":560},[1006],{"type":33,"tag":86,"props":1007,"children":1008},{"style":151},[1009],{"type":38,"value":1010},"          lhci autorun --collect.url=${{ steps.vercel_preview.outputs.url }}\n",{"type":33,"tag":86,"props":1012,"children":1013},{"class":88,"line":569},[1014,1018,1022,1026],{"type":33,"tag":86,"props":1015,"children":1016},{"style":103},[1017],{"type":38,"value":724},{"type":33,"tag":86,"props":1019,"children":1020},{"style":628},[1021],{"type":38,"value":631},{"type":33,"tag":86,"props":1023,"children":1024},{"style":103},[1025],{"type":38,"value":148},{"type":33,"tag":86,"props":1027,"children":1028},{"style":151},[1029],{"type":38,"value":1030},"Comment PR\n",{"type":33,"tag":86,"props":1032,"children":1034},{"class":88,"line":1033},27,[1035,1039,1043],{"type":33,"tag":86,"props":1036,"children":1037},{"style":628},[1038],{"type":38,"value":856},{"type":33,"tag":86,"props":1040,"children":1041},{"style":103},[1042],{"type":38,"value":148},{"type":33,"tag":86,"props":1044,"children":1045},{"style":151},[1046],{"type":38,"value":1047},"treosh\u002Flighthouse-ci-action@v9\n",{"type":33,"tag":86,"props":1049,"children":1051},{"class":88,"line":1050},28,[1052,1056],{"type":33,"tag":86,"props":1053,"children":1054},{"style":628},[1055],{"type":38,"value":766},{"type":33,"tag":86,"props":1057,"children":1058},{"style":103},[1059],{"type":38,"value":675},{"type":33,"tag":86,"props":1061,"children":1063},{"class":88,"line":1062},29,[1064,1069,1073],{"type":33,"tag":86,"props":1065,"children":1066},{"style":628},[1067],{"type":38,"value":1068},"          urls",{"type":33,"tag":86,"props":1070,"children":1071},{"style":103},[1072],{"type":38,"value":148},{"type":33,"tag":86,"props":1074,"children":1075},{"style":151},[1076],{"type":38,"value":1077},"${{ steps.vercel_preview.outputs.url }}\n",{"type":33,"tag":86,"props":1079,"children":1081},{"class":88,"line":1080},30,[1082,1087,1091],{"type":33,"tag":86,"props":1083,"children":1084},{"style":628},[1085],{"type":38,"value":1086},"          uploadArtifacts",{"type":33,"tag":86,"props":1088,"children":1089},{"style":103},[1090],{"type":38,"value":148},{"type":33,"tag":86,"props":1092,"children":1093},{"style":113},[1094],{"type":38,"value":1095},"true\n",{"type":33,"tag":86,"props":1097,"children":1099},{"class":88,"line":1098},31,[1100,1105,1109],{"type":33,"tag":86,"props":1101,"children":1102},{"style":628},[1103],{"type":38,"value":1104},"          temporaryPublicStorage",{"type":33,"tag":86,"props":1106,"children":1107},{"style":103},[1108],{"type":38,"value":148},{"type":33,"tag":86,"props":1110,"children":1111},{"style":113},[1112],{"type":38,"value":1095},{"type":33,"tag":34,"props":1114,"children":1115},{},[1116,1118,1124,1126,1132],{"type":38,"value":1117},"The ",{"type":33,"tag":68,"props":1119,"children":1121},{"className":1120},[],[1122],{"type":38,"value":1123},"wait-for-vercel-preview",{"type":38,"value":1125}," step is critical: if Lighthouse runs before the deployment finishes, it sees a 404. With ",{"type":33,"tag":68,"props":1127,"children":1129},{"className":1128},[],[1130],{"type":38,"value":1131},"max_timeout: 300",{"type":38,"value":1133},", we wait up to 5 minutes. Once deployment is ready, Lighthouse starts.",{"type":33,"tag":34,"props":1135,"children":1136},{},[1137],{"type":38,"value":1138},"The result comments on the PR like this:",{"type":33,"tag":76,"props":1140,"children":1142},{"code":1141},"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",[1143],{"type":33,"tag":68,"props":1144,"children":1145},{"__ignoreMap":17},[1146],{"type":38,"value":1141},{"type":33,"tag":34,"props":1148,"children":1149},{},[1150,1152,1158],{"type":38,"value":1151},"LCP at 2.3s broke the budget, so CI failed. The PR can't merge. The dev sees the hero image wasn't lazy-loaded, fixes it with ",{"type":33,"tag":68,"props":1153,"children":1155},{"className":1154},[],[1156],{"type":38,"value":1157},"loading=\"eager\"",{"type":38,"value":1159},", CI re-runs, and LCP drops to 1.9s—merge is green.",{"type":33,"tag":34,"props":1161,"children":1162},{},[1163,1165,1174,1176,1182],{"type":38,"value":1164},"This approach is critical for ",{"type":33,"tag":1166,"props":1167,"children":1171},"a",{"href":1168,"rel":1169},"https:\u002F\u002Fwww.roibase.com.tr\u002Fen\u002Fheadless",[1170],"nofollow",[1172],{"type":38,"value":1173},"Headless Commerce",{"type":38,"value":1175}," projects. Hydrogen or Next.js Commerce storefronts add new components daily. A single unwrapped ",{"type":33,"tag":68,"props":1177,"children":1179},{"className":1178},[],[1180],{"type":38,"value":1181},"await fetch()",{"type":38,"value":1183}," blocks the main thread. Lighthouse CI catches it via bundle size and TBT.",{"type":33,"tag":41,"props":1185,"children":1187},{"id":1186},"tracking-real-numbers-in-production-with-real-user-monitoring",[1188],{"type":38,"value":1189},"Tracking Real Numbers in Production with Real User Monitoring",{"type":33,"tag":34,"props":1191,"children":1192},{},[1193],{"type":38,"value":1194},"Lighthouse CI runs synthetic monitoring in a lab. Real users have different devices, networks, and cache states. That's why RUM (Real User Monitoring) is essential. RUM collects actual metric streams from your live site.",{"type":33,"tag":34,"props":1196,"children":1197},{},[1198],{"type":38,"value":1199},"Use the Web Vitals library to send RUM to your backend:",{"type":33,"tag":76,"props":1201,"children":1205},{"code":1202,"language":1203,"meta":17,"className":1204,"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 — sends even if page closes\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",[1206],{"type":33,"tag":68,"props":1207,"children":1208},{"__ignoreMap":17},[1209,1217,1245,1254,1294,1332,1340,1348,1356,1364,1372,1380,1388,1396,1414,1422,1429,1437,1450,1477,1495,1536,1543,1550,1557,1570,1582,1594],{"type":33,"tag":86,"props":1210,"children":1211},{"class":88,"line":89},[1212],{"type":33,"tag":86,"props":1213,"children":1214},{"style":93},[1215],{"type":38,"value":1216},"\u002F\u002F analytics\u002Fweb-vitals.ts\n",{"type":33,"tag":86,"props":1218,"children":1219},{"class":88,"line":99},[1220,1225,1230,1235,1240],{"type":33,"tag":86,"props":1221,"children":1222},{"style":991},[1223],{"type":38,"value":1224},"import",{"type":33,"tag":86,"props":1226,"children":1227},{"style":103},[1228],{"type":38,"value":1229}," { onCLS, onFID, onLCP, onTTFB, onINP } ",{"type":33,"tag":86,"props":1231,"children":1232},{"style":991},[1233],{"type":38,"value":1234},"from",{"type":33,"tag":86,"props":1236,"children":1237},{"style":151},[1238],{"type":38,"value":1239}," 'web-vitals'",{"type":33,"tag":86,"props":1241,"children":1242},{"style":103},[1243],{"type":38,"value":1244},";\n",{"type":33,"tag":86,"props":1246,"children":1247},{"class":88,"line":109},[1248],{"type":33,"tag":86,"props":1249,"children":1251},{"emptyLinePlaceholder":1250},true,[1252],{"type":38,"value":1253},"\n",{"type":33,"tag":86,"props":1255,"children":1256},{"class":88,"line":124},[1257,1262,1268,1273,1279,1284,1289],{"type":33,"tag":86,"props":1258,"children":1259},{"style":991},[1260],{"type":38,"value":1261},"function",{"type":33,"tag":86,"props":1263,"children":1265},{"style":1264},"--shiki-default:#B392F0",[1266],{"type":38,"value":1267}," sendToAnalytics",{"type":33,"tag":86,"props":1269,"children":1270},{"style":103},[1271],{"type":38,"value":1272},"(",{"type":33,"tag":86,"props":1274,"children":1276},{"style":1275},"--shiki-default:#FFAB70",[1277],{"type":38,"value":1278},"metric",{"type":33,"tag":86,"props":1280,"children":1281},{"style":991},[1282],{"type":38,"value":1283},":",{"type":33,"tag":86,"props":1285,"children":1286},{"style":1264},[1287],{"type":38,"value":1288}," Metric",{"type":33,"tag":86,"props":1290,"children":1291},{"style":103},[1292],{"type":38,"value":1293},") {\n",{"type":33,"tag":86,"props":1295,"children":1296},{"class":88,"line":137},[1297,1302,1307,1312,1317,1322,1327],{"type":33,"tag":86,"props":1298,"children":1299},{"style":991},[1300],{"type":38,"value":1301},"  const",{"type":33,"tag":86,"props":1303,"children":1304},{"style":113},[1305],{"type":38,"value":1306}," body",{"type":33,"tag":86,"props":1308,"children":1309},{"style":991},[1310],{"type":38,"value":1311}," =",{"type":33,"tag":86,"props":1313,"children":1314},{"style":113},[1315],{"type":38,"value":1316}," JSON",{"type":33,"tag":86,"props":1318,"children":1319},{"style":103},[1320],{"type":38,"value":1321},".",{"type":33,"tag":86,"props":1323,"children":1324},{"style":1264},[1325],{"type":38,"value":1326},"stringify",{"type":33,"tag":86,"props":1328,"children":1329},{"style":103},[1330],{"type":38,"value":1331},"({\n",{"type":33,"tag":86,"props":1333,"children":1334},{"class":88,"line":162},[1335],{"type":33,"tag":86,"props":1336,"children":1337},{"style":103},[1338],{"type":38,"value":1339},"    name: metric.name,\n",{"type":33,"tag":86,"props":1341,"children":1342},{"class":88,"line":27},[1343],{"type":33,"tag":86,"props":1344,"children":1345},{"style":103},[1346],{"type":38,"value":1347},"    value: metric.value,\n",{"type":33,"tag":86,"props":1349,"children":1350},{"class":88,"line":217},[1351],{"type":33,"tag":86,"props":1352,"children":1353},{"style":103},[1354],{"type":38,"value":1355},"    rating: metric.rating,\n",{"type":33,"tag":86,"props":1357,"children":1358},{"class":88,"line":255},[1359],{"type":33,"tag":86,"props":1360,"children":1361},{"style":103},[1362],{"type":38,"value":1363},"    delta: metric.delta,\n",{"type":33,"tag":86,"props":1365,"children":1366},{"class":88,"line":293},[1367],{"type":33,"tag":86,"props":1368,"children":1369},{"style":103},[1370],{"type":38,"value":1371},"    id: metric.id,\n",{"type":33,"tag":86,"props":1373,"children":1374},{"class":88,"line":331},[1375],{"type":33,"tag":86,"props":1376,"children":1377},{"style":103},[1378],{"type":38,"value":1379},"    navigationType: metric.navigationType,\n",{"type":33,"tag":86,"props":1381,"children":1382},{"class":88,"line":370},[1383],{"type":33,"tag":86,"props":1384,"children":1385},{"style":103},[1386],{"type":38,"value":1387},"    url: window.location.href,\n",{"type":33,"tag":86,"props":1389,"children":1390},{"class":88,"line":379},[1391],{"type":33,"tag":86,"props":1392,"children":1393},{"style":103},[1394],{"type":38,"value":1395},"    userAgent: navigator.userAgent,\n",{"type":33,"tag":86,"props":1397,"children":1398},{"class":88,"line":388},[1399,1404,1409],{"type":33,"tag":86,"props":1400,"children":1401},{"style":103},[1402],{"type":38,"value":1403},"    timestamp: Date.",{"type":33,"tag":86,"props":1405,"children":1406},{"style":1264},[1407],{"type":38,"value":1408},"now",{"type":33,"tag":86,"props":1410,"children":1411},{"style":103},[1412],{"type":38,"value":1413},"()\n",{"type":33,"tag":86,"props":1415,"children":1416},{"class":88,"line":401},[1417],{"type":33,"tag":86,"props":1418,"children":1419},{"style":103},[1420],{"type":38,"value":1421},"  });\n",{"type":33,"tag":86,"props":1423,"children":1424},{"class":88,"line":423},[1425],{"type":33,"tag":86,"props":1426,"children":1427},{"emptyLinePlaceholder":1250},[1428],{"type":38,"value":1253},{"type":33,"tag":86,"props":1430,"children":1431},{"class":88,"line":446},[1432],{"type":33,"tag":86,"props":1433,"children":1434},{"style":93},[1435],{"type":38,"value":1436},"  \u002F\u002F Beacon API — sends even if page closes\n",{"type":33,"tag":86,"props":1438,"children":1439},{"class":88,"line":459},[1440,1445],{"type":33,"tag":86,"props":1441,"children":1442},{"style":991},[1443],{"type":38,"value":1444},"  if",{"type":33,"tag":86,"props":1446,"children":1447},{"style":103},[1448],{"type":38,"value":1449}," (navigator.sendBeacon) {\n",{"type":33,"tag":86,"props":1451,"children":1452},{"class":88,"line":472},[1453,1458,1463,1467,1472],{"type":33,"tag":86,"props":1454,"children":1455},{"style":103},[1456],{"type":38,"value":1457},"    navigator.",{"type":33,"tag":86,"props":1459,"children":1460},{"style":1264},[1461],{"type":38,"value":1462},"sendBeacon",{"type":33,"tag":86,"props":1464,"children":1465},{"style":103},[1466],{"type":38,"value":1272},{"type":33,"tag":86,"props":1468,"children":1469},{"style":151},[1470],{"type":38,"value":1471},"'\u002Fapi\u002Fvitals'",{"type":33,"tag":86,"props":1473,"children":1474},{"style":103},[1475],{"type":38,"value":1476},", body);\n",{"type":33,"tag":86,"props":1478,"children":1479},{"class":88,"line":494},[1480,1485,1490],{"type":33,"tag":86,"props":1481,"children":1482},{"style":103},[1483],{"type":38,"value":1484},"  } ",{"type":33,"tag":86,"props":1486,"children":1487},{"style":991},[1488],{"type":38,"value":1489},"else",{"type":33,"tag":86,"props":1491,"children":1492},{"style":103},[1493],{"type":38,"value":1494}," {\n",{"type":33,"tag":86,"props":1496,"children":1497},{"class":88,"line":516},[1498,1503,1507,1511,1516,1521,1526,1531],{"type":33,"tag":86,"props":1499,"children":1500},{"style":1264},[1501],{"type":38,"value":1502},"    fetch",{"type":33,"tag":86,"props":1504,"children":1505},{"style":103},[1506],{"type":38,"value":1272},{"type":33,"tag":86,"props":1508,"children":1509},{"style":151},[1510],{"type":38,"value":1471},{"type":33,"tag":86,"props":1512,"children":1513},{"style":103},[1514],{"type":38,"value":1515},", { method: ",{"type":33,"tag":86,"props":1517,"children":1518},{"style":151},[1519],{"type":38,"value":1520},"'POST'",{"type":33,"tag":86,"props":1522,"children":1523},{"style":103},[1524],{"type":38,"value":1525},", body, keepalive: ",{"type":33,"tag":86,"props":1527,"children":1528},{"style":113},[1529],{"type":38,"value":1530},"true",{"type":33,"tag":86,"props":1532,"children":1533},{"style":103},[1534],{"type":38,"value":1535}," });\n",{"type":33,"tag":86,"props":1537,"children":1538},{"class":88,"line":534},[1539],{"type":33,"tag":86,"props":1540,"children":1541},{"style":103},[1542],{"type":38,"value":566},{"type":33,"tag":86,"props":1544,"children":1545},{"class":88,"line":543},[1546],{"type":33,"tag":86,"props":1547,"children":1548},{"style":103},[1549],{"type":38,"value":575},{"type":33,"tag":86,"props":1551,"children":1552},{"class":88,"line":551},[1553],{"type":33,"tag":86,"props":1554,"children":1555},{"emptyLinePlaceholder":1250},[1556],{"type":38,"value":1253},{"type":33,"tag":86,"props":1558,"children":1559},{"class":88,"line":560},[1560,1565],{"type":33,"tag":86,"props":1561,"children":1562},{"style":1264},[1563],{"type":38,"value":1564},"onCLS",{"type":33,"tag":86,"props":1566,"children":1567},{"style":103},[1568],{"type":38,"value":1569},"(sendToAnalytics);\n",{"type":33,"tag":86,"props":1571,"children":1572},{"class":88,"line":569},[1573,1578],{"type":33,"tag":86,"props":1574,"children":1575},{"style":1264},[1576],{"type":38,"value":1577},"onLCP",{"type":33,"tag":86,"props":1579,"children":1580},{"style":103},[1581],{"type":38,"value":1569},{"type":33,"tag":86,"props":1583,"children":1584},{"class":88,"line":1033},[1585,1590],{"type":33,"tag":86,"props":1586,"children":1587},{"style":1264},[1588],{"type":38,"value":1589},"onINP",{"type":33,"tag":86,"props":1591,"children":1592},{"style":103},[1593],{"type":38,"value":1569},{"type":33,"tag":86,"props":1595,"children":1596},{"class":88,"line":1050},[1597,1602],{"type":33,"tag":86,"props":1598,"children":1599},{"style":1264},[1600],{"type":38,"value":1601},"onTTFB",{"type":33,"tag":86,"props":1603,"children":1604},{"style":103},[1605],{"type":38,"value":1569},{"type":33,"tag":34,"props":1607,"children":1608},{},[1609,1611,1617],{"type":38,"value":1610},"Your backend ",{"type":33,"tag":68,"props":1612,"children":1614},{"className":1613},[],[1615],{"type":38,"value":1616},"\u002Fapi\u002Fvitals",{"type":38,"value":1618}," endpoint writes this metric to BigQuery or Cloudflare Analytics. A daily aggregate report looks like:",{"type":33,"tag":1620,"props":1621,"children":1622},"table",{},[1623,1657],{"type":33,"tag":1624,"props":1625,"children":1626},"thead",{},[1627],{"type":33,"tag":1628,"props":1629,"children":1630},"tr",{},[1631,1637,1642,1647,1652],{"type":33,"tag":1632,"props":1633,"children":1634},"th",{},[1635],{"type":38,"value":1636},"Date",{"type":33,"tag":1632,"props":1638,"children":1639},{},[1640],{"type":38,"value":1641},"LCP p75",{"type":33,"tag":1632,"props":1643,"children":1644},{},[1645],{"type":38,"value":1646},"INP p75",{"type":33,"tag":1632,"props":1648,"children":1649},{},[1650],{"type":38,"value":1651},"CLS p75",{"type":33,"tag":1632,"props":1653,"children":1654},{},[1655],{"type":38,"value":1656},"Page Views",{"type":33,"tag":1658,"props":1659,"children":1660},"tbody",{},[1661,1690,1718],{"type":33,"tag":1628,"props":1662,"children":1663},{},[1664,1670,1675,1680,1685],{"type":33,"tag":1665,"props":1666,"children":1667},"td",{},[1668],{"type":38,"value":1669},"2026-07-28",{"type":33,"tag":1665,"props":1671,"children":1672},{},[1673],{"type":38,"value":1674},"1.8s",{"type":33,"tag":1665,"props":1676,"children":1677},{},[1678],{"type":38,"value":1679},"140ms",{"type":33,"tag":1665,"props":1681,"children":1682},{},[1683],{"type":38,"value":1684},"0.06",{"type":33,"tag":1665,"props":1686,"children":1687},{},[1688],{"type":38,"value":1689},"12,400",{"type":33,"tag":1628,"props":1691,"children":1692},{},[1693,1698,1703,1708,1713],{"type":33,"tag":1665,"props":1694,"children":1695},{},[1696],{"type":38,"value":1697},"2026-07-29",{"type":33,"tag":1665,"props":1699,"children":1700},{},[1701],{"type":38,"value":1702},"2.1s",{"type":33,"tag":1665,"props":1704,"children":1705},{},[1706],{"type":38,"value":1707},"180ms",{"type":33,"tag":1665,"props":1709,"children":1710},{},[1711],{"type":38,"value":1712},"0.09",{"type":33,"tag":1665,"props":1714,"children":1715},{},[1716],{"type":38,"value":1717},"13,100",{"type":33,"tag":1628,"props":1719,"children":1720},{},[1721,1725,1730,1735,1740],{"type":33,"tag":1665,"props":1722,"children":1723},{},[1724],{"type":38,"value":20},{"type":33,"tag":1665,"props":1726,"children":1727},{},[1728],{"type":38,"value":1729},"3.2s",{"type":33,"tag":1665,"props":1731,"children":1732},{},[1733],{"type":38,"value":1734},"320ms",{"type":33,"tag":1665,"props":1736,"children":1737},{},[1738],{"type":38,"value":1739},"0.14",{"type":33,"tag":1665,"props":1741,"children":1742},{},[1743],{"type":38,"value":1744},"11,800",{"type":33,"tag":34,"props":1746,"children":1747},{},[1748],{"type":38,"value":1749},"A deploy happened on the 29th. LCP jumped from 2.1s to 3.2s, INP from 180ms to 320ms. Bounce rate climbed 4.2%. RUM showed this in production within 2 hours—but Lighthouse CI had measured under 2.0s in the lab because real users were on slower devices.",{"type":33,"tag":34,"props":1751,"children":1752},{},[1753],{"type":38,"value":1754},"The rollback decision was made based on RUM numbers. The deployment was reverted, and LCP dropped back to 1.9s.",{"type":33,"tag":1756,"props":1757,"children":1759},"h3",{"id":1758},"rum-alarm-pipeline",[1760],{"type":38,"value":1761},"RUM Alarm Pipeline",{"type":33,"tag":34,"props":1763,"children":1764},{},[1765],{"type":38,"value":1766},"Just showing RUM metrics on a dashboard isn't enough. You need a Slack alarm when regression hits. Set up a scheduled query on BigQuery:",{"type":33,"tag":76,"props":1768,"children":1772},{"code":1769,"language":1770,"meta":17,"className":1771,"style":17},"-- BigQuery scheduled query (hourly)\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",[1773],{"type":33,"tag":68,"props":1774,"children":1775},{"__ignoreMap":17},[1776,1784,1807,1815,1842,1867,1880,1928,1936,1952,1959,1983,1994,2035,2068,2075,2083,2104,2125,2206,2219],{"type":33,"tag":86,"props":1777,"children":1778},{"class":88,"line":89},[1779],{"type":33,"tag":86,"props":1780,"children":1781},{"style":93},[1782],{"type":38,"value":1783},"-- BigQuery scheduled query (hourly)\n",{"type":33,"tag":86,"props":1785,"children":1786},{"class":88,"line":99},[1787,1792,1797,1802],{"type":33,"tag":86,"props":1788,"children":1789},{"style":991},[1790],{"type":38,"value":1791},"WITH",{"type":33,"tag":86,"props":1793,"children":1794},{"style":103},[1795],{"type":38,"value":1796}," current_hour ",{"type":33,"tag":86,"props":1798,"children":1799},{"style":991},[1800],{"type":38,"value":1801},"AS",{"type":33,"tag":86,"props":1803,"children":1804},{"style":103},[1805],{"type":38,"value":1806}," (\n",{"type":33,"tag":86,"props":1808,"children":1809},{"class":88,"line":109},[1810],{"type":33,"tag":86,"props":1811,"children":1812},{"style":991},[1813],{"type":38,"value":1814},"  SELECT\n",{"type":33,"tag":86,"props":1816,"children":1817},{"class":88,"line":124},[1818,1823,1828,1833,1837],{"type":33,"tag":86,"props":1819,"children":1820},{"style":103},[1821],{"type":38,"value":1822},"    APPROX_QUANTILES(lcp_value, ",{"type":33,"tag":86,"props":1824,"children":1825},{"style":113},[1826],{"type":38,"value":1827},"100",{"type":33,"tag":86,"props":1829,"children":1830},{"style":103},[1831],{"type":38,"value":1832},")[OFFSET(75)] ",{"type":33,"tag":86,"props":1834,"children":1835},{"style":991},[1836],{"type":38,"value":1801},{"type":33,"tag":86,"props":1838,"children":1839},{"style":103},[1840],{"type":38,"value":1841}," lcp_p75,\n",{"type":33,"tag":86,"props":1843,"children":1844},{"class":88,"line":137},[1845,1850,1854,1858,1862],{"type":33,"tag":86,"props":1846,"children":1847},{"style":103},[1848],{"type":38,"value":1849},"    APPROX_QUANTILES(inp_value, ",{"type":33,"tag":86,"props":1851,"children":1852},{"style":113},[1853],{"type":38,"value":1827},{"type":33,"tag":86,"props":1855,"children":1856},{"style":103},[1857],{"type":38,"value":1832},{"type":33,"tag":86,"props":1859,"children":1860},{"style":991},[1861],{"type":38,"value":1801},{"type":33,"tag":86,"props":1863,"children":1864},{"style":103},[1865],{"type":38,"value":1866}," inp_p75\n",{"type":33,"tag":86,"props":1868,"children":1869},{"class":88,"line":162},[1870,1875],{"type":33,"tag":86,"props":1871,"children":1872},{"style":991},[1873],{"type":38,"value":1874},"  FROM",{"type":33,"tag":86,"props":1876,"children":1877},{"style":151},[1878],{"type":38,"value":1879}," `project.dataset.web_vitals`\n",{"type":33,"tag":86,"props":1881,"children":1882},{"class":88,"line":27},[1883,1888,1893,1898,1903,1908,1913,1918,1923],{"type":33,"tag":86,"props":1884,"children":1885},{"style":991},[1886],{"type":38,"value":1887},"  WHERE",{"type":33,"tag":86,"props":1889,"children":1890},{"style":991},[1891],{"type":38,"value":1892}," timestamp",{"type":33,"tag":86,"props":1894,"children":1895},{"style":991},[1896],{"type":38,"value":1897}," >=",{"type":33,"tag":86,"props":1899,"children":1900},{"style":103},[1901],{"type":38,"value":1902}," TIMESTAMP_SUB(",{"type":33,"tag":86,"props":1904,"children":1905},{"style":113},[1906],{"type":38,"value":1907},"CURRENT_TIMESTAMP",{"type":33,"tag":86,"props":1909,"children":1910},{"style":103},[1911],{"type":38,"value":1912},"(), INTERVAL ",{"type":33,"tag":86,"props":1914,"children":1915},{"style":113},[1916],{"type":38,"value":1917},"1",{"type":33,"tag":86,"props":1919,"children":1920},{"style":991},[1921],{"type":38,"value":1922}," HOUR",{"type":33,"tag":86,"props":1924,"children":1925},{"style":103},[1926],{"type":38,"value":1927},")\n",{"type":33,"tag":86,"props":1929,"children":1930},{"class":88,"line":217},[1931],{"type":33,"tag":86,"props":1932,"children":1933},{"style":103},[1934],{"type":38,"value":1935},"),\n",{"type":33,"tag":86,"props":1937,"children":1938},{"class":88,"line":255},[1939,1944,1948],{"type":33,"tag":86,"props":1940,"children":1941},{"style":103},[1942],{"type":38,"value":1943},"baseline ",{"type":33,"tag":86,"props":1945,"children":1946},{"style":991},[1947],{"type":38,"value":1801},{"type":33,"tag":86,"props":1949,"children":1950},{"style":103},[1951],{"type":38,"value":1806},{"type":33,"tag":86,"props":1953,"children":1954},{"class":88,"line":293},[1955],{"type":33,"tag":86,"props":1956,"children":1957},{"style":991},[1958],{"type":38,"value":1814},{"type":33,"tag":86,"props":1960,"children":1961},{"class":88,"line":331},[1962,1966,1970,1974,1978],{"type":33,"tag":86,"props":1963,"children":1964},{"style":103},[1965],{"type":38,"value":1822},{"type":33,"tag":86,"props":1967,"children":1968},{"style":113},[1969],{"type":38,"value":1827},{"type":33,"tag":86,"props":1971,"children":1972},{"style":103},[1973],{"type":38,"value":1832},{"type":33,"tag":86,"props":1975,"children":1976},{"style":991},[1977],{"type":38,"value":1801},{"type":33,"tag":86,"props":1979,"children":1980},{"style":103},[1981],{"type":38,"value":1982}," lcp_p75_baseline\n",{"type":33,"tag":86,"props":1984,"children":1985},{"class":88,"line":370},[1986,1990],{"type":33,"tag":86,"props":1987,"children":1988},{"style":991},[1989],{"type":38,"value":1874},{"type":33,"tag":86,"props":1991,"children":1992},{"style":151},[1993],{"type":38,"value":1879},{"type":33,"tag":86,"props":1995,"children":1996},{"class":88,"line":379},[1997,2001,2005,2010,2014,2018,2022,2027,2031],{"type":33,"tag":86,"props":1998,"children":1999},{"style":991},[2000],{"type":38,"value":1887},{"type":33,"tag":86,"props":2002,"children":2003},{"style":991},[2004],{"type":38,"value":1892},{"type":33,"tag":86,"props":2006,"children":2007},{"style":991},[2008],{"type":38,"value":2009}," BETWEEN",{"type":33,"tag":86,"props":2011,"children":2012},{"style":103},[2013],{"type":38,"value":1902},{"type":33,"tag":86,"props":2015,"children":2016},{"style":113},[2017],{"type":38,"value":1907},{"type":33,"tag":86,"props":2019,"children":2020},{"style":103},[2021],{"type":38,"value":1912},{"type":33,"tag":86,"props":2023,"children":2024},{"style":113},[2025],{"type":38,"value":2026},"8",{"type":33,"tag":86,"props":2028,"children":2029},{"style":991},[2030],{"type":38,"value":1922},{"type":33,"tag":86,"props":2032,"children":2033},{"style":103},[2034],{"type":38,"value":1927},{"type":33,"tag":86,"props":2036,"children":2037},{"class":88,"line":388},[2038,2043,2047,2051,2055,2060,2064],{"type":33,"tag":86,"props":2039,"children":2040},{"style":991},[2041],{"type":38,"value":2042},"    AND",{"type":33,"tag":86,"props":2044,"children":2045},{"style":103},[2046],{"type":38,"value":1902},{"type":33,"tag":86,"props":2048,"children":2049},{"style":113},[2050],{"type":38,"value":1907},{"type":33,"tag":86,"props":2052,"children":2053},{"style":103},[2054],{"type":38,"value":1912},{"type":33,"tag":86,"props":2056,"children":2057},{"style":113},[2058],{"type":38,"value":2059},"2",{"type":33,"tag":86,"props":2061,"children":2062},{"style":991},[2063],{"type":38,"value":1922},{"type":33,"tag":86,"props":2065,"children":2066},{"style":103},[2067],{"type":38,"value":1927},{"type":33,"tag":86,"props":2069,"children":2070},{"class":88,"line":401},[2071],{"type":33,"tag":86,"props":2072,"children":2073},{"style":103},[2074],{"type":38,"value":1927},{"type":33,"tag":86,"props":2076,"children":2077},{"class":88,"line":423},[2078],{"type":33,"tag":86,"props":2079,"children":2080},{"style":991},[2081],{"type":38,"value":2082},"SELECT\n",{"type":33,"tag":86,"props":2084,"children":2085},{"class":88,"line":446},[2086,2091,2095,2100],{"type":33,"tag":86,"props":2087,"children":2088},{"style":113},[2089],{"type":38,"value":2090},"  c",{"type":33,"tag":86,"props":2092,"children":2093},{"style":103},[2094],{"type":38,"value":1321},{"type":33,"tag":86,"props":2096,"children":2097},{"style":113},[2098],{"type":38,"value":2099},"lcp_p75",{"type":33,"tag":86,"props":2101,"children":2102},{"style":103},[2103],{"type":38,"value":159},{"type":33,"tag":86,"props":2105,"children":2106},{"class":88,"line":459},[2107,2112,2116,2121],{"type":33,"tag":86,"props":2108,"children":2109},{"style":113},[2110],{"type":38,"value":2111},"  b",{"type":33,"tag":86,"props":2113,"children":2114},{"style":103},[2115],{"type":38,"value":1321},{"type":33,"tag":86,"props":2117,"children":2118},{"style":113},[2119],{"type":38,"value":2120},"lcp_p75_baseline",{"type":33,"tag":86,"props":2122,"children":2123},{"style":103},[2124],{"type":38,"value":159},{"type":33,"tag":86,"props":2126,"children":2127},{"class":88,"line":472},[2128,2133,2138,2142,2146,2151,2156,2160,2164,2169,2174,2178,2182,2186,2191,2196,2201],{"type":33,"tag":86,"props":2129,"children":2130},{"style":103},[2131],{"type":38,"value":2132},"  (",{"type":33,"tag":86,"props":2134,"children":2135},{"style":113},[2136],{"type":38,"value":2137},"c",{"type":33,"tag":86,"props":2139,"children":2140},{"style":103},[2141],{"type":38,"value":1321},{"type":33,"tag":86,"props":2143,"children":2144},{"style":113},[2145],{"type":38,"value":2099},{"type":33,"tag":86,"props":2147,"children":2148},{"style":991},[2149],{"type":38,"value":2150}," -",{"type":33,"tag":86,"props":2152,"children":2153},{"style":113},[2154],{"type":38,"value":2155}," b",{"type":33,"tag":86,"props":2157,"children":2158},{"style":103},[2159],{"type":38,"value":1321},{"type":33,"tag":86,"props":2161,"children":2162},{"style":113},[2163],{"type":38,"value":2120},{"type":33,"tag":86,"props":2165,"children":2166},{"style":103},[2167],{"type":38,"value":2168},") ",{"type":33,"tag":86,"props":2170,"children":2171},{"style":991},[2172],{"type":38,"value":2173},"\u002F",{"type":33,"tag":86,"props":2175,"children":2176},{"style":113},[2177],{"type":38,"value":2155},{"type":33,"tag":86,"props":2179,"children":2180},{"style":103},[2181],{"type":38,"value":1321},{"type":33,"tag":86,"props":2183,"children":2184},{"style":113},[2185],{"type":38,"value":2120},{"type":33,"tag":86,"props":2187,"children":2188},{"style":991},[2189],{"type":38,"value":2190}," *",{"type":33,"tag":86,"props":2192,"children":2193},{"style":113},[2194],{"type":38,"value":2195}," 100",{"type":33,"tag":86,"props":2197,"children":2198},{"style":991},[2199],{"type":38,"value":2200}," AS",{"type":33,"tag":86,"props":2202,"children":2203},{"style":103},[2204],{"type":38,"value":2205}," lcp_regression_pct\n",{"type":33,"tag":86,"props":2207,"children":2208},{"class":88,"line":494},[2209,2214],{"type":33,"tag":86,"props":2210,"children":2211},{"style":991},[2212],{"type":38,"value":2213},"FROM",{"type":33,"tag":86,"props":2215,"children":2216},{"style":103},[2217],{"type":38,"value":2218}," current_hour c, baseline b\n",{"type":33,"tag":86,"props":2220,"children":2221},{"class":88,"line":516},[2222,2227,2232,2236,2240,2244,2248,2252,2256,2260,2264,2268,2272,2276,2280,2285,2290,2294],{"type":33,"tag":86,"props":2223,"children":2224},{"style":991},[2225],{"type":38,"value":2226},"WHERE",{"type":33,"tag":86,"props":2228,"children":2229},{"style":103},[2230],{"type":38,"value":2231}," (",{"type":33,"tag":86,"props":2233,"children":2234},{"style":113},[2235],{"type":38,"value":2137},{"type":33,"tag":86,"props":2237,"children":2238},{"style":103},[2239],{"type":38,"value":1321},{"type":33,"tag":86,"props":2241,"children":2242},{"style":113},[2243],{"type":38,"value":2099},{"type":33,"tag":86,"props":2245,"children":2246},{"style":991},[2247],{"type":38,"value":2150},{"type":33,"tag":86,"props":2249,"children":2250},{"style":113},[2251],{"type":38,"value":2155},{"type":33,"tag":86,"props":2253,"children":2254},{"style":103},[2255],{"type":38,"value":1321},{"type":33,"tag":86,"props":2257,"children":2258},{"style":113},[2259],{"type":38,"value":2120},{"type":33,"tag":86,"props":2261,"children":2262},{"style":103},[2263],{"type":38,"value":2168},{"type":33,"tag":86,"props":2265,"children":2266},{"style":991},[2267],{"type":38,"value":2173},{"type":33,"tag":86,"props":2269,"children":2270},{"style":113},[2271],{"type":38,"value":2155},{"type":33,"tag":86,"props":2273,"children":2274},{"style":103},[2275],{"type":38,"value":1321},{"type":33,"tag":86,"props":2277,"children":2278},{"style":113},[2279],{"type":38,"value":2120},{"type":33,"tag":86,"props":2281,"children":2282},{"style":991},[2283],{"type":38,"value":2284}," >",{"type":33,"tag":86,"props":2286,"children":2287},{"style":113},[2288],{"type":38,"value":2289}," 0",{"type":33,"tag":86,"props":2291,"children":2292},{"style":103},[2293],{"type":38,"value":1321},{"type":33,"tag":86,"props":2295,"children":2296},{"style":113},[2297],{"type":38,"value":2298},"15\n",{"type":33,"tag":34,"props":2300,"children":2301},{},[2302],{"type":38,"value":2303},"This query checks whether LCP p75 has degraded more than 15% from baseline. If it has, a Cloud Function is triggered and sends a Slack alert:",{"type":33,"tag":76,"props":2305,"children":2307},{"code":2306},"⚠️ Performance Regression Detected\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nLCP p75: 3.2s (+68% vs 6h baseline)\nBaseline: 1.9s\nURL: \u002Fproduct\u002Fxyz\nDeploy: #4521 (30 min ago)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n",[2308],{"type":33,"tag":68,"props":2309,"children":2310},{"__ignoreMap":17},[2311],{"type":38,"value":2306},{"type":33,"tag":41,"props":2313,"children":2315},{"id":2314},"tradeoff-synthetic-vs-rumwhere-each-measurement-belongs",[2316],{"type":38,"value":2317},"Tradeoff: Synthetic vs RUM—Where Each Measurement Belongs",{"type":33,"tag":34,"props":2319,"children":2320},{},[2321],{"type":38,"value":2322},"Lighthouse CI and RUM complement each other. You don't choose one or the other—you run both in parallel.",{"type":33,"tag":34,"props":2324,"children":2325},{},[2326],{"type":33,"tag":2327,"props":2328,"children":2329},"strong",{},[2330],{"type":38,"value":2331},"Lighthouse CI (synthetic):",{"type":33,"tag":2333,"props":2334,"children":2335},"ul",{},[2336,2347,2357],{"type":33,"tag":2337,"props":2338,"children":2339},"li",{},[2340,2345],{"type":33,"tag":2327,"props":2341,"children":2342},{},[2343],{"type":38,"value":2344},"Strength:",{"type":38,"value":2346}," Controlled environment, reproducible, runs on every commit",{"type":33,"tag":2337,"props":2348,"children":2349},{},[2350,2355],{"type":33,"tag":2327,"props":2351,"children":2352},{},[2353],{"type":38,"value":2354},"Weakness:",{"type":38,"value":2356}," Doesn't see real device variance or cached asset behavior",{"type":33,"tag":2337,"props":2358,"children":2359},{},[2360,2365],{"type":33,"tag":2327,"props":2361,"children":2362},{},[2363],{"type":38,"value":2364},"Use case:",{"type":38,"value":2366}," CI pipeline regression prevention—\"Will this PR risk slowdowns if merged?\"",{"type":33,"tag":34,"props":2368,"children":2369},{},[2370],{"type":33,"tag":2327,"props":2371,"children":2372},{},[2373],{"type":38,"value":2374},"RUM (real user):",{"type":33,"tag":2333,"props":2376,"children":2377},{},[2378,2387,2396],{"type":33,"tag":2337,"props":2379,"children":2380},{},[2381,2385],{"type":33,"tag":2327,"props":2382,"children":2383},{},[2384],{"type":38,"value":2344},{"type":38,"value":2386}," Actual user data, captures edge cases (e.g., \"iPhone 11 Safari hits 5s LCP\")",{"type":33,"tag":2337,"props":2388,"children":2389},{},[2390,2394],{"type":33,"tag":2327,"props":2391,"children":2392},{},[2393],{"type":38,"value":2354},{"type":38,"value":2395}," Noisy data with many outliers, provides no pre-deployment signal",{"type":33,"tag":2337,"props":2397,"children":2398},{},[2399,2403],{"type":33,"tag":2327,"props":2400,"children":2401},{},[2402],{"type":38,"value":2364},{"type":38,"value":2404}," Live monitoring—\"Did the new deployment harm performance?\"",{"type":33,"tag":34,"props":2406,"children":2407},{},[2408],{"type":38,"value":2409},"A mature system uses both. Lighthouse CI blocks deploys that break budget. If it passes, RUM validates the real impact in 2 hours. If RUM shows regression, rollback.",{"type":33,"tag":34,"props":2411,"children":2412},{},[2413],{"type":38,"value":2414},"Example: A new variant selector component is added to a Shopify storefront. Lighthouse CI reports 380ms TBT (budget: 200ms). The PR is rejected. The dev code-splits the component and adds lazy-loading. Lighthouse CI now shows 150ms TBT, so it merges. Four hours after going live, RUM shows INP p75 climbed from 120ms to 145ms—acceptable (budget: 200ms). The deployment stays.",{"type":33,"tag":41,"props":2416,"children":2418},{"id":2417},"wiring-regression-alarms-into-the-deployment-pipeline",[2419],{"type":38,"value":2420},"Wiring Regression Alarms into the Deployment Pipeline",{"type":33,"tag":34,"props":2422,"children":2423},{},[2424],{"type":38,"value":2425},"If a RUM alarm fires independently of deployment, context is lost. You get \"LCP degraded\" but don't know which deploy caused it. So we inject deployment metadata into every RUM event.",{"type":33,"tag":34,"props":2427,"children":2428},{},[2429,2431,2437],{"type":38,"value":2430},"Vercel and Netlify expose ",{"type":33,"tag":68,"props":2432,"children":2434},{"className":2433},[],[2435],{"type":38,"value":2436},"VERCEL_GIT_COMMIT_SHA",{"type":38,"value":2438}," as an environment variable. Inject it into the frontend so every RUM event carries it:",{"type":33,"tag":76,"props":2440,"children":2442},{"code":2441,"language":1203,"meta":17,"className":1204,"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    deploymentTime: config.public.deploymentTime\n  });\n  navigator.sendBeacon('\u002Fapi\u002Fvitals', body);\n}\n",[2443],{"type":33,"tag":68,"props":2444,"children":2445},{"__ignoreMap":17},[2446,2454,2476,2484,2492,2518,2534,2541,2548,2556,2563,2570,2601,2627,2658,2671,2679,2687,2694,2718],{"type":33,"tag":86,"props":2447,"children":2448},{"class":88,"line":89},[2449],{"type":33,"tag":86,"props":2450,"children":2451},{"style":93},[2452],{"type":38,"value":2453},"\u002F\u002F nuxt.config.ts\n",{"type":33,"tag":86,"props":2455,"children":2456},{"class":88,"line":99},[2457,2462,2467,2472],{"type":33,"tag":86,"props":2458,"children":2459},{"style":991},[2460],{"type":38,"value":2461},"export",{"type":33,"tag":86,"props":2463,"children":2464},{"style":991},[2465],{"type":38,"value":2466}," default",{"type":33,"tag":86,"props":2468,"children":2469},{"style":1264},[2470],{"type":38,"value":2471}," defineNuxtConfig",{"type":33,"tag":86,"props":2473,"children":2474},{"style":103},[2475],{"type":38,"value":1331},{"type":33,"tag":86,"props":2477,"children":2478},{"class":88,"line":109},[2479],{"type":33,"tag":86,"props":2480,"children":2481},{"style":103},[2482],{"type":38,"value":2483},"  runtimeConfig: {\n",{"type":33,"tag":86,"props":2485,"children":2486},{"class":88,"line":124},[2487],{"type":33,"tag":86,"props":2488,"children":2489},{"style":103},[2490],{"type":38,"value":2491},"    public: {\n",{"type":33,"tag":86,"props":2493,"children":2494},{"class":88,"line":137},[2495,2500,2504,2509,2514],{"type":33,"tag":86,"props":2496,"children":2497},{"style":103},[2498],{"type":38,"value":2499},"      deploymentId: process.env.",{"type":33,"tag":86,"props":2501,"children":2502},{"style":113},[2503],{"type":38,"value":2436},{"type":33,"tag":86,"props":2505,"children":2506},{"style":991},[2507],{"type":38,"value":2508}," ||",{"type":33,"tag":86,"props":2510,"children":2511},{"style":151},[2512],{"type":38,"value":2513}," 'local'",{"type":33,"tag":86,"props":2515,"children":2516},{"style":103},[2517],{"type":38,"value":159},{"type":33,"tag":86,"props":2519,"children":2520},{"class":88,"line":162},[2521,2526,2530],{"type":33,"tag":86,"props":2522,"children":2523},{"style":103},[2524],{"type":38,"value":2525},"      deploymentTime: Date.",{"type":33,"tag":86,"props":2527,"children":2528},{"style":1264},[2529],{"type":38,"value":1408},{"type":33,"tag":86,"props":2531,"children":2532},{"style":103},[2533],{"type":38,"value":1413},{"type":33,"tag":86,"props":2535,"children":2536},{"class":88,"line":27},[2537],{"type":33,"tag":86,"props":2538,"children":2539},{"style":103},[2540],{"type":38,"value":557},{"type":33,"tag":86,"props":2542,"children":2543},{"class":88,"line":217},[2544],{"type":33,"tag":86,"props":2545,"children":2546},{"style":103},[2547],{"type":38,"value":566},{"type":33,"tag":86,"props":2549,"children":2550},{"class":88,"line":255},[2551],{"type":33,"tag":86,"props":2552,"children":2553},{"style":103},[2554],{"type":38,"value":2555},"});\n",{"type":33,"tag":86,"props":2557,"children":2558},{"class":88,"line":293},[2559],{"type":33,"tag":86,"props":2560,"children":2561},{"emptyLinePlaceholder":1250},[2562],{"type":38,"value":1253},{"type":33,"tag":86,"props":2564,"children":2565},{"class":88,"line":331},[2566],{"type":33,"tag":86,"props":2567,"children":2568},{"style":93},[2569],{"type":38,"value":1216},{"type":33,"tag":86,"props":2571,"children":2572},{"class":88,"line":370},[2573,2577,2581,2585,2589,2593,2597],{"type":33,"tag":86,"props":2574,"children":2575},{"style":991},[2576],{"type":38,"value":1261},{"type":33,"tag":86,"props":2578,"children":2579},{"style":1264},[2580],{"type":38,"value":1267},{"type":33,"tag":86,"props":2582,"children":2583},{"style":103},[2584],{"type":38,"value":1272},{"type":33,"tag":86,"props":2586,"children":2587},{"style":1275},[2588],{"type":38,"value":1278},{"type":33,"tag":86,"props":2590,"children":2591},{"style":991},[2592],{"type":38,"value":1283},{"type":33,"tag":86,"props":2594,"children":2595},{"style":1264},[2596],{"type":38,"value":1288},{"type":33,"tag":86,"props":2598,"children":2599},{"style":103},[2600],{"type":38,"value":1293},{"type":33,"tag":86,"props":2602,"children":2603},{"class":88,"line":379},[2604,2608,2613,2617,2622],{"type":33,"tag":86,"props":2605,"children":2606},{"style":991},[2607],{"type":38,"value":1301},{"type":33,"tag":86,"props":2609,"children":2610},{"style":113},[2611],{"type":38,"value":2612}," config",{"type":33,"tag":86,"props":2614,"children":2615},{"style":991},[2616],{"type":38,"value":1311},{"type":33,"tag":86,"props":2618,"children":2619},{"style":1264},[2620],{"type":38,"value":2621}," useRuntimeConfig",{"type":33,"tag":86,"props":2623,"children":2624},{"style":103},[2625],{"type":38,"value":2626},"();\n",{"type":33,"tag":86,"props":2628,"children":2629},{"class":88,"line":388},[2630,2634,2638,2642,2646,2650,2654],{"type":33,"tag":86,"props":2631,"children":2632},{"style":991},[2633],{"type":38,"value":1301},{"type":33,"tag":86,"props":2635,"children":2636},{"style":113},[2637],{"type":38,"value":1306},{"type":33,"tag":86,"props":2639,"children":2640},{"style":991},[2641],{"type":38,"value":1311},{"type":33,"tag":86,"props":2643,"children":2644},{"style":113},[2645],{"type":38,"value":1316},{"type":33,"tag":86,"props":2647,"children":2648},{"style":103},[2649],{"type":38,"value":1321},{"type":33,"tag":86,"props":2651,"children":2652},{"style":1264},[2653],{"type":38,"value":1326},{"type":33,"tag":86,"props":2655,"children":2656},{"style":103},[2657],{"type":38,"value":1331},{"type":33,"tag":86,"props":2659,"children":2660},{"class":88,"line":401},[2661,2666],{"type":33,"tag":86,"props":2662,"children":2663},{"style":991},[2664],{"type":38,"value":2665},"    ...",{"type":33,"tag":86,"props":2667,"children":2668},{"style":103},[2669],{"type":38,"value":2670},"metric,\n",{"type":33,"tag":86,"props":2672,"children":2673},{"class":88,"line":423},[2674],{"type":33,"tag":86,"props":2675,"children":2676},{"style":103},[2677],{"type":38,"value":2678},"    deploymentId: config.public.deploymentId,\n",{"type":33,"tag":86,"props":2680,"children":2681},{"class":88,"line":446},[2682],{"type":33,"tag":86,"props":2683,"children":2684},{"style":103},[2685],{"type":38,"value":2686},"    deploymentTime: config.public.deploymentTime\n",{"type":33,"tag":86,"props":2688,"children":2689},{"class":88,"line":459},[2690],{"type":33,"tag":86,"props":2691,"children":2692},{"style":103},[2693],{"type":38,"value":1421},{"type":33,"tag":86,"props":2695,"children":2696},{"class":88,"line":472},[2697,2702,2706,2710,2714],{"type":33,"tag":86,"props":2698,"children":2699},{"style":103},[2700],{"type":38,"value":2701},"  navigator.",{"type":33,"tag":86,"props":2703,"children":2704},{"style":1264},[2705],{"type":38,"value":1462},{"type":33,"tag":86,"props":2707,"children":2708},{"style":103},[2709],{"type":38,"value":1272},{"type":33,"tag":86,"props":2711,"children":2712},{"style":151},[2713],{"type":38,"value":1471},{"type":33,"tag":86,"props":2715,"children":2716},{"style":103},[2717],{"type":38,"value":1476},{"type":33,"tag":86,"props":2719,"children":2720},{"class":88,"line":494},[2721],{"type":33,"tag":86,"props":2722,"children":2723},{"style":103},[2724],{"type":38,"value":575},{"type":33,"tag":34,"props":2726,"children":2727},{},[2728],{"type":38,"value":2729},"Query BigQuery to correlate:",{"type":33,"tag":76,"props":2731,"children":2733},{"code":2732,"language":1770,"meta":17,"className":1771,"style":17},"SELECT\n  deployment_id,\n  FROM_UNIXTIME(deployment_time \u002F 1000) AS deployed_at,\n  APPROX_QUANTILES(lcp_value, 100)[OFFSET(75)] AS lcp_p75,\n  COUNT(*) AS sample_size\nFROM `project.dataset.web_vitals`\nWHERE timestamp >= TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 24 HOUR)\nGROUP BY deployment_id, deployment_time\nORDER BY deployed_at DESC\n",[2734],{"type":33,"tag":68,"props":2735,"children":2736},{"__ignoreMap":17},[2737,2744,2752,2782,2806,2836,2847,2887,2900],{"type":33,"tag":86,"props":2738,"children":2739},{"class":88,"line":89},[2740],{"type":33,"tag":86,"props":2741,"children":2742},{"style":991},[2743],{"type":38,"value":2082},{"type":33,"tag":86,"props":2745,"children":2746},{"class":88,"line":99},[2747],{"type":33,"tag":86,"props":2748,"children":2749},{"style":103},[2750],{"type":38,"value":2751},"  deployment_id,\n",{"type":33,"tag":86,"props":2753,"children":2754},{"class":88,"line":109},[2755,2760,2764,2769,2773,2777],{"type":33,"tag":86,"props":2756,"children":2757},{"style":103},[2758],{"type":38,"value":2759},"  FROM_UNIXTIME(deployment_time ",{"type":33,"tag":86,"props":2761,"children":2762},{"style":991},[2763],{"type":38,"value":2173},{"type":33,"tag":86,"props":2765,"children":2766},{"style":113},[2767],{"type":38,"value":2768}," 1000",{"type":33,"tag":86,"props":2770,"children":2771},{"style":103},[2772],{"type":38,"value":2168},{"type":33,"tag":86,"props":2774,"children":2775},{"style":991},[2776],{"type":38,"value":1801},{"type":33,"tag":86,"props":2778,"children":2779},{"style":103},[2780],{"type":38,"value":2781}," deployed_at,\n",{"type":33,"tag":86,"props":2783,"children":2784},{"class":88,"line":124},[2785,2790,2794,2798,2802],{"type":33,"tag":86,"props":2786,"children":2787},{"style":103},[2788],{"type":38,"value":2789},"  APPROX_QUANTILES(lcp_value, ",{"type":33,"tag":86,"props":2791,"children":2792},{"style":113},[2793],{"type":38,"value":1827},{"type":33,"tag":86,"props":2795,"children":2796},{"style":103},[2797],{"type":38,"value":1832},{"type":33,"tag":86,"props":2799,"children":2800},{"style":991},[2801],{"type":38,"value":1801},{"type":33,"tag":86,"props":2803,"children":2804},{"style":103},[2805],{"type":38,"value":1841},{"type":33,"tag":86,"props":2807,"children":2808},{"class":88,"line":137},[2809,2814,2818,2823,2827,2831],{"type":33,"tag":86,"props":2810,"children":2811},{"style":113},[2812],{"type":38,"value":2813},"  COUNT",{"type":33,"tag":86,"props":2815,"children":2816},{"style":103},[2817],{"type":38,"value":1272},{"type":33,"tag":86,"props":2819,"children":2820},{"style":991},[2821],{"type":38,"value":2822},"*",{"type":33,"tag":86,"props":2824,"children":2825},{"style":103},[2826],{"type":38,"value":2168},{"type":33,"tag":86,"props":2828,"children":2829},{"style":991},[2830],{"type":38,"value":1801},{"type":33,"tag":86,"props":2832,"children":2833},{"style":103},[2834],{"type":38,"value":2835}," sample_size\n",{"type":33,"tag":86,"props":2837,"children":2838},{"class":88,"line":162},[2839,2843],{"type":33,"tag":86,"props":2840,"children":2841},{"style":991},[2842],{"type":38,"value":2213},{"type":33,"tag":86,"props":2844,"children":2845},{"style":151},[2846],{"type":38,"value":1879},{"type":33,"tag":86,"props":2848,"children":2849},{"class":88,"line":27},[2850,2854,2858,2862,2866,2870,2874,2879,2883],{"type":33,"tag":86,"props":2851,"children":2852},{"style":991},[2853],{"type":38,"value":2226},{"type":33,"tag":86,"props":2855,"children":2856},{"style":991},[2857],{"type":38,"value":1892},{"type":33,"tag":86,"props":2859,"children":2860},{"style":991},[2861],{"type":38,"value":1897},{"type":33,"tag":86,"props":2863,"children":2864},{"style":103},[2865],{"type":38,"value":1902},{"type":33,"tag":86,"props":2867,"children":2868},{"style":113},[2869],{"type":38,"value":1907},{"type":33,"tag":86,"props":2871,"children":2872},{"style":103},[2873],{"type":38,"value":1912},{"type":33,"tag":86,"props":2875,"children":2876},{"style":113},[2877],{"type":38,"value":2878},"24",{"type":33,"tag":86,"props":2880,"children":2881},{"style":991},[2882],{"type":38,"value":1922},{"type":33,"tag":86,"props":2884,"children":2885},{"style":103},[2886],{"type":38,"value":1927},{"type":33,"tag":86,"props":2888,"children":2889},{"class":88,"line":217},[2890,2895],{"type":33,"tag":86,"props":2891,"children":2892},{"style":991},[2893],{"type":38,"value":2894},"GROUP BY",{"type":33,"tag":86,"props":2896,"children":2897},{"style":103},[2898],{"type":38,"value":2899}," deployment_id, deployment_time\n",{"type":33,"tag":86,"props":2901,"children":2902},{"class":88,"line":255},[2903,2908,2913],{"type":33,"tag":86,"props":2904,"children":2905},{"style":991},[2906],{"type":38,"value":2907},"ORDER BY",{"type":33,"tag":86,"props":2909,"children":2910},{"style":103},[2911],{"type":38,"value":2912}," deployed_at ",{"type":33,"tag":86,"props":2914,"children":2915},{"style":991},[2916],{"type":38,"value":2917},"DESC\n",{"type":33,"tag":34,"props":2919,"children":2920},{},[2921],{"type":38,"value":2922},"Result:",{"type":33,"tag":1620,"props":2924,"children":2925},{},[2926,2951],{"type":33,"tag":1624,"props":2927,"children":2928},{},[2929],{"type":33,"tag":1628,"props":2930,"children":2931},{},[2932,2937,2942,2946],{"type":33,"tag":1632,"props":2933,"children":2934},{},[2935],{"type":38,"value":2936},"deployment_id",{"type":33,"tag":1632,"props":2938,"children":2939},{},[2940],{"type":38,"value":2941},"deployed_at",{"type":33,"tag":1632,"props":2943,"children":2944},{},[2945],{"type":38,"value":2099},{"type":33,"tag":1632,"props":2947,"children":2948},{},[2949],{"type":38,"value":2950},"sample_size",{"type":33,"tag":1658,"props":2952,"children":2953},{},[2954,2977],{"type":33,"tag":1628,"props":2955,"children":2956},{},[2957,2962,2967,2972],{"type":33,"tag":1665,"props":2958,"children":2959},{},[2960],{"type":38,"value":2961},"a3f2b19",{"type":33,"tag":1665,"props":2963,"children":2964},{},[2965],{"type":38,"value":2966},"2026-07-30 14:22:00",{"type":33,"tag":1665,"props":2968,"children":2969},{},[2970],{"type":38,"value":2971},"3.1s",{"type":33,"tag":1665,"props":2973,"children":2974},{},[2975],{"type":38,"value":2976},"2,340",{"type":33,"tag":1628,"props":2978,"children":2979},{},[2980,2985,2990,2995],{"type":33,"tag":1665,"props":2981,"children":2982},{},[2983],{"type":38,"value":2984},"c8d4e21",{"type":33,"tag":1665,"props":2986,"children":2987},{},[2988],{"type":38,"value":2989},"2026-07-30 09:15:00",{"type":33,"tag":1665,"props":2991,"children":2992},{},[2993],{"type":38,"value":2994},"1.9s",{"type":33,"tag":1665,"props":2996,"children":2997},{},[2998],{"type":38,"value":2999},"4,120",{"type":33,"tag":34,"props":3001,"children":3002},{},[3003,3005,3011],{"type":38,"value":3004},"After the 14:22 deployment, LCP jumped from 1.9s to 3.1s. Look up that commit SHA on GitHub, inspect the code. The issue: the hero image's ",{"type":33,"tag":68,"props":3006,"children":3008},{"className":3007},[],[3009],{"type":38,"value":3010},"srcset",{"type":38,"value":3012}," attribute was removed, so the browser fetches a 3MB image for 4K desktop. Rollback is triggered, and LCP drops back to 1.9s.",{"type":33,"tag":41,"props":3014,"children":3016},{"id":3015},"closing-treat-performance-budget-as-an-slatest-before-shipping",[3017],{"type":38,"value":3018},"Closing: Treat Performance Budget as an SLA—Test Before Shipping",{"type":33,"tag":34,"props":3020,"children":3021},{},[3022],{"type":38,"value":3023},"Treat your performance budget like an SLA you've promised your customers. If you say \"LCP under 2s,\" you must prove in your CI\u002FCD pipeline that every deploy honors it. Lighthouse CI provides the number pre-deploy; RUM validates it post-deploy. Without both layers working together, regressions are either caught too late or missed entirely. As Google's ranking algorithm weights Core Web Vitals more heavily in 2026, a performance regression becomes an SEO regression. Set the budget, tie it to CI, configure alarms, and deploy.",{"type":33,"tag":3025,"props":3026,"children":3027},"style",{},[3028],{"type":38,"value":3029},"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":109,"depth":109,"links":3031},[3032,3033,3034,3037,3038,3039],{"id":43,"depth":99,"text":46},{"id":597,"depth":99,"text":600},{"id":1186,"depth":99,"text":1189,"children":3035},[3036],{"id":1758,"depth":109,"text":1761},{"id":2314,"depth":99,"text":2317},{"id":2417,"depth":99,"text":2420},{"id":3015,"depth":99,"text":3018},"markdown","content:en:tech:web-performance-budgets-decision-automation.md","content","en\u002Ftech\u002Fweb-performance-budgets-decision-automation.md","en\u002Ftech\u002Fweb-performance-budgets-decision-automation","md",1785967475502]