[{"data":1,"prerenderedAt":2874},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fen\u002Ftech\u002Fweb-performance-budgets-decision-integration":13},{"i18nKey":4,"paths":5},"tech-004-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fweb-performance-budgets-entscheidungsmechanismus","\u002Fen\u002Ftech\u002Fweb-performance-budgets-decision-integration","\u002Fes\u002Ftech\u002Fweb-performance-budgets-decision-making","\u002Ffr\u002Ftech\u002Fweb-performance-budgets-karar-mekanizmasi","\u002Fit\u002Ftech\u002Fperformance-budget-collegare-al-meccanismo-decisionale","\u002Fru\u002Ftech\u002Fweb-performance-budgets-connecting-to-decision-making","\u002Ftr\u002Ftech\u002Fweb-performance-budgetlari-karar-mekanizmasina-baglamak",{"_path":7,"_dir":14,"_draft":15,"_partial":15,"_locale":16,"title":17,"description":18,"publishedAt":19,"modifiedAt":19,"category":14,"i18nKey":4,"tags":20,"readingTime":26,"author":27,"body":28,"_type":2868,"_id":2869,"_source":2870,"_file":2871,"_stem":2872,"_extension":2873},"tech",false,"","Web Performance Budgets: Linking to Decision Mechanisms","Integrating Lighthouse CI, RUM, and perf regression alarms into your system. The methodology behind dropping TBT from 2190ms to 200ms.","2026-06-23",[21,22,23,24,25],"web-performance","lighthouse-ci","rum","core-web-vitals","performance-budget",8,"Roibase",{"type":29,"children":30,"toc":2854},"root",[31,39,46,51,78,83,89,94,376,389,788,804,811,823,829,834,847,1260,1265,1854,1859,1865,1870,1876,1881,2073,2078,2084,2089,2310,2321,2327,2332,2337,2558,2563,2569,2574,2588,2651,2656,2662,2667,2672,2827,2832,2836,2848],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","In 2026, web performance is no longer about \"making pages fast\"—it's an engineering discipline built on continuous decision-making. You deploy an e-commerce site, Lighthouse score drops from 92 to 68, conversion rate falls from 3.2% to 2.7%—but nobody notices because monitoring stops at \"is the server down?\" Linking performance budgets to your decision mechanism means catching regressions before deploy, evaluating every commit against LCP\u002FTBT\u002FCLS thresholds, and feeding RUM data into your attribution pipeline. This post shows how to transform Lighthouse CI, synthetic monitoring, RUM, and alarm architecture into an integrated system.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"what-is-a-performance-budget-and-why-a-system-not-a-human-should-measure-it",[44],{"type":37,"value":45},"What Is a Performance Budget and Why a System, Not a Human, Should Measure It",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"A performance budget defines numeric thresholds for resource limits per page: maximum JavaScript bundle size (e.g., 200 KB gzip), maximum TBT (Total Blocking Time, 200 ms), maximum LCP (Largest Contentful Paint, 2.5 seconds). These numbers aren't arbitrary—Google's Core Web Vitals define the \"good\" band, but you need to derive sharper limits from your own sector's conversion funnel data.",{"type":32,"tag":33,"props":52,"children":53},{},[54,56,62,64,69,71,76],{"type":37,"value":55},"The classic scenario—\"Lighthouse 95 in dev, 72 in prod\"—stems from this: synthetic tests run in lab conditions (fast 4G, empty cache, single page load), while RUM measures the real user's 3G, full cache, and navigation paths. The gap is normal but both must be monitored. Lighthouse CI catches bundle size regression on every PR; RUM reveals \"22% of mobile users hit 4-second LCP\" production reality. If you define budget only as \"exceed 75 score,\" you can add 100 KB to the bundle and bump the score from 74 to 76—the page gets heavier but the score turns green. That's why you must enforce budget ",{"type":32,"tag":57,"props":58,"children":59},"em",{},[60],{"type":37,"value":61},"metric-based",{"type":37,"value":63}," (LCP, TBT, CLS) ",{"type":32,"tag":57,"props":65,"children":66},{},[67],{"type":37,"value":68},"and",{"type":37,"value":70}," ",{"type":32,"tag":57,"props":72,"children":73},{},[74],{"type":37,"value":75},"resource-based",{"type":37,"value":77}," (JS, CSS, image MB) in parallel.",{"type":32,"tag":33,"props":79,"children":80},{},[81],{"type":37,"value":82},"Another point: enforcing budget via human review doesn't scale. \"We review performance in code review\" fails at 20 PRs\u002Fday velocity. The system must measure, the system must fail, humans investigate the why.",{"type":32,"tag":40,"props":84,"children":86},{"id":85},"gating-commits-with-lighthouse-ci",[87],{"type":37,"value":88},"Gating Commits with Lighthouse CI",{"type":32,"tag":33,"props":90,"children":91},{},[92],{"type":37,"value":93},"Lighthouse CI runs a Lighthouse audit on every commit or PR, reporting results to GitHub or an internal dashboard. Integrate it into your CI pipeline like this:",{"type":32,"tag":95,"props":96,"children":100},"pre",{"className":97,"code":98,"language":99,"meta":16,"style":16},"language-yaml shiki shiki-themes github-dark","# .github\u002Fworkflows\u002Flighthouse-ci.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      - run: npm ci && npm run build\n      - name: Run Lighthouse CI\n        run: |\n          npm install -g @lhci\u002Fcli\n          lhci autorun\n        env:\n          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}\n","yaml",[101],{"type":32,"tag":102,"props":103,"children":104},"code",{"__ignoreMap":16},[105,117,139,164,178,191,209,222,244,265,287,308,327,336,345,358],{"type":32,"tag":106,"props":107,"children":110},"span",{"class":108,"line":109},"line",1,[111],{"type":32,"tag":106,"props":112,"children":114},{"style":113},"--shiki-default:#6A737D",[115],{"type":37,"value":116},"# .github\u002Fworkflows\u002Flighthouse-ci.yml\n",{"type":32,"tag":106,"props":118,"children":120},{"class":108,"line":119},2,[121,127,133],{"type":32,"tag":106,"props":122,"children":124},{"style":123},"--shiki-default:#85E89D",[125],{"type":37,"value":126},"name",{"type":32,"tag":106,"props":128,"children":130},{"style":129},"--shiki-default:#E1E4E8",[131],{"type":37,"value":132},": ",{"type":32,"tag":106,"props":134,"children":136},{"style":135},"--shiki-default:#9ECBFF",[137],{"type":37,"value":138},"Lighthouse CI\n",{"type":32,"tag":106,"props":140,"children":142},{"class":108,"line":141},3,[143,149,154,159],{"type":32,"tag":106,"props":144,"children":146},{"style":145},"--shiki-default:#79B8FF",[147],{"type":37,"value":148},"on",{"type":32,"tag":106,"props":150,"children":151},{"style":129},[152],{"type":37,"value":153},": [",{"type":32,"tag":106,"props":155,"children":156},{"style":135},[157],{"type":37,"value":158},"pull_request",{"type":32,"tag":106,"props":160,"children":161},{"style":129},[162],{"type":37,"value":163},"]\n",{"type":32,"tag":106,"props":165,"children":167},{"class":108,"line":166},4,[168,173],{"type":32,"tag":106,"props":169,"children":170},{"style":123},[171],{"type":37,"value":172},"jobs",{"type":32,"tag":106,"props":174,"children":175},{"style":129},[176],{"type":37,"value":177},":\n",{"type":32,"tag":106,"props":179,"children":181},{"class":108,"line":180},5,[182,187],{"type":32,"tag":106,"props":183,"children":184},{"style":123},[185],{"type":37,"value":186},"  lighthouse",{"type":32,"tag":106,"props":188,"children":189},{"style":129},[190],{"type":37,"value":177},{"type":32,"tag":106,"props":192,"children":194},{"class":108,"line":193},6,[195,200,204],{"type":32,"tag":106,"props":196,"children":197},{"style":123},[198],{"type":37,"value":199},"    runs-on",{"type":32,"tag":106,"props":201,"children":202},{"style":129},[203],{"type":37,"value":132},{"type":32,"tag":106,"props":205,"children":206},{"style":135},[207],{"type":37,"value":208},"ubuntu-latest\n",{"type":32,"tag":106,"props":210,"children":212},{"class":108,"line":211},7,[213,218],{"type":32,"tag":106,"props":214,"children":215},{"style":123},[216],{"type":37,"value":217},"    steps",{"type":32,"tag":106,"props":219,"children":220},{"style":129},[221],{"type":37,"value":177},{"type":32,"tag":106,"props":223,"children":224},{"class":108,"line":26},[225,230,235,239],{"type":32,"tag":106,"props":226,"children":227},{"style":129},[228],{"type":37,"value":229},"      - ",{"type":32,"tag":106,"props":231,"children":232},{"style":123},[233],{"type":37,"value":234},"uses",{"type":32,"tag":106,"props":236,"children":237},{"style":129},[238],{"type":37,"value":132},{"type":32,"tag":106,"props":240,"children":241},{"style":135},[242],{"type":37,"value":243},"actions\u002Fcheckout@v3\n",{"type":32,"tag":106,"props":245,"children":247},{"class":108,"line":246},9,[248,252,256,260],{"type":32,"tag":106,"props":249,"children":250},{"style":129},[251],{"type":37,"value":229},{"type":32,"tag":106,"props":253,"children":254},{"style":123},[255],{"type":37,"value":234},{"type":32,"tag":106,"props":257,"children":258},{"style":129},[259],{"type":37,"value":132},{"type":32,"tag":106,"props":261,"children":262},{"style":135},[263],{"type":37,"value":264},"actions\u002Fsetup-node@v3\n",{"type":32,"tag":106,"props":266,"children":268},{"class":108,"line":267},10,[269,273,278,282],{"type":32,"tag":106,"props":270,"children":271},{"style":129},[272],{"type":37,"value":229},{"type":32,"tag":106,"props":274,"children":275},{"style":123},[276],{"type":37,"value":277},"run",{"type":32,"tag":106,"props":279,"children":280},{"style":129},[281],{"type":37,"value":132},{"type":32,"tag":106,"props":283,"children":284},{"style":135},[285],{"type":37,"value":286},"npm ci && npm run build\n",{"type":32,"tag":106,"props":288,"children":290},{"class":108,"line":289},11,[291,295,299,303],{"type":32,"tag":106,"props":292,"children":293},{"style":129},[294],{"type":37,"value":229},{"type":32,"tag":106,"props":296,"children":297},{"style":123},[298],{"type":37,"value":126},{"type":32,"tag":106,"props":300,"children":301},{"style":129},[302],{"type":37,"value":132},{"type":32,"tag":106,"props":304,"children":305},{"style":135},[306],{"type":37,"value":307},"Run Lighthouse CI\n",{"type":32,"tag":106,"props":309,"children":311},{"class":108,"line":310},12,[312,317,321],{"type":32,"tag":106,"props":313,"children":314},{"style":123},[315],{"type":37,"value":316},"        run",{"type":32,"tag":106,"props":318,"children":319},{"style":129},[320],{"type":37,"value":132},{"type":32,"tag":106,"props":322,"children":324},{"style":323},"--shiki-default:#F97583",[325],{"type":37,"value":326},"|\n",{"type":32,"tag":106,"props":328,"children":330},{"class":108,"line":329},13,[331],{"type":32,"tag":106,"props":332,"children":333},{"style":135},[334],{"type":37,"value":335},"          npm install -g @lhci\u002Fcli\n",{"type":32,"tag":106,"props":337,"children":339},{"class":108,"line":338},14,[340],{"type":32,"tag":106,"props":341,"children":342},{"style":135},[343],{"type":37,"value":344},"          lhci autorun\n",{"type":32,"tag":106,"props":346,"children":348},{"class":108,"line":347},15,[349,354],{"type":32,"tag":106,"props":350,"children":351},{"style":123},[352],{"type":37,"value":353},"        env",{"type":32,"tag":106,"props":355,"children":356},{"style":129},[357],{"type":37,"value":177},{"type":32,"tag":106,"props":359,"children":361},{"class":108,"line":360},16,[362,367,371],{"type":32,"tag":106,"props":363,"children":364},{"style":123},[365],{"type":37,"value":366},"          LHCI_GITHUB_APP_TOKEN",{"type":32,"tag":106,"props":368,"children":369},{"style":129},[370],{"type":37,"value":132},{"type":32,"tag":106,"props":372,"children":373},{"style":135},[374],{"type":37,"value":375},"${{ secrets.LHCI_GITHUB_APP_TOKEN }}\n",{"type":32,"tag":33,"props":377,"children":378},{},[379,381,387],{"type":37,"value":380},"Define budgets in ",{"type":32,"tag":102,"props":382,"children":384},{"className":383},[],[385],{"type":37,"value":386},".lighthouserc.json",{"type":37,"value":388},":",{"type":32,"tag":95,"props":390,"children":394},{"className":391,"code":392,"language":393,"meta":16,"style":16},"language-json shiki shiki-themes github-dark","{\n  \"ci\": {\n    \"collect\": {\n      \"url\": [\"http:\u002F\u002Flocalhost:3000\u002F\"],\n      \"numberOfRuns\": 3\n    },\n    \"assert\": {\n      \"preset\": \"lighthouse:recommended\",\n      \"assertions\": {\n        \"total-byte-weight\": [\"error\", { \"maxNumericValue\": 512000 }],\n        \"total-blocking-time\": [\"error\", { \"maxNumericValue\": 200 }],\n        \"largest-contentful-paint\": [\"error\", { \"maxNumericValue\": 2500 }],\n        \"cumulative-layout-shift\": [\"error\", { \"maxNumericValue\": 0.1 }],\n        \"categories:performance\": [\"error\", { \"minScore\": 0.85 }]\n      }\n    },\n    \"upload\": {\n      \"target\": \"temporary-public-storage\"\n    }\n  }\n}\n","json",[395],{"type":32,"tag":102,"props":396,"children":397},{"__ignoreMap":16},[398,406,419,431,453,470,478,490,512,524,565,602,639,676,715,723,730,743,761,770,779],{"type":32,"tag":106,"props":399,"children":400},{"class":108,"line":109},[401],{"type":32,"tag":106,"props":402,"children":403},{"style":129},[404],{"type":37,"value":405},"{\n",{"type":32,"tag":106,"props":407,"children":408},{"class":108,"line":119},[409,414],{"type":32,"tag":106,"props":410,"children":411},{"style":145},[412],{"type":37,"value":413},"  \"ci\"",{"type":32,"tag":106,"props":415,"children":416},{"style":129},[417],{"type":37,"value":418},": {\n",{"type":32,"tag":106,"props":420,"children":421},{"class":108,"line":141},[422,427],{"type":32,"tag":106,"props":423,"children":424},{"style":145},[425],{"type":37,"value":426},"    \"collect\"",{"type":32,"tag":106,"props":428,"children":429},{"style":129},[430],{"type":37,"value":418},{"type":32,"tag":106,"props":432,"children":433},{"class":108,"line":166},[434,439,443,448],{"type":32,"tag":106,"props":435,"children":436},{"style":145},[437],{"type":37,"value":438},"      \"url\"",{"type":32,"tag":106,"props":440,"children":441},{"style":129},[442],{"type":37,"value":153},{"type":32,"tag":106,"props":444,"children":445},{"style":135},[446],{"type":37,"value":447},"\"http:\u002F\u002Flocalhost:3000\u002F\"",{"type":32,"tag":106,"props":449,"children":450},{"style":129},[451],{"type":37,"value":452},"],\n",{"type":32,"tag":106,"props":454,"children":455},{"class":108,"line":180},[456,461,465],{"type":32,"tag":106,"props":457,"children":458},{"style":145},[459],{"type":37,"value":460},"      \"numberOfRuns\"",{"type":32,"tag":106,"props":462,"children":463},{"style":129},[464],{"type":37,"value":132},{"type":32,"tag":106,"props":466,"children":467},{"style":145},[468],{"type":37,"value":469},"3\n",{"type":32,"tag":106,"props":471,"children":472},{"class":108,"line":193},[473],{"type":32,"tag":106,"props":474,"children":475},{"style":129},[476],{"type":37,"value":477},"    },\n",{"type":32,"tag":106,"props":479,"children":480},{"class":108,"line":211},[481,486],{"type":32,"tag":106,"props":482,"children":483},{"style":145},[484],{"type":37,"value":485},"    \"assert\"",{"type":32,"tag":106,"props":487,"children":488},{"style":129},[489],{"type":37,"value":418},{"type":32,"tag":106,"props":491,"children":492},{"class":108,"line":26},[493,498,502,507],{"type":32,"tag":106,"props":494,"children":495},{"style":145},[496],{"type":37,"value":497},"      \"preset\"",{"type":32,"tag":106,"props":499,"children":500},{"style":129},[501],{"type":37,"value":132},{"type":32,"tag":106,"props":503,"children":504},{"style":135},[505],{"type":37,"value":506},"\"lighthouse:recommended\"",{"type":32,"tag":106,"props":508,"children":509},{"style":129},[510],{"type":37,"value":511},",\n",{"type":32,"tag":106,"props":513,"children":514},{"class":108,"line":246},[515,520],{"type":32,"tag":106,"props":516,"children":517},{"style":145},[518],{"type":37,"value":519},"      \"assertions\"",{"type":32,"tag":106,"props":521,"children":522},{"style":129},[523],{"type":37,"value":418},{"type":32,"tag":106,"props":525,"children":526},{"class":108,"line":267},[527,532,536,541,546,551,555,560],{"type":32,"tag":106,"props":528,"children":529},{"style":145},[530],{"type":37,"value":531},"        \"total-byte-weight\"",{"type":32,"tag":106,"props":533,"children":534},{"style":129},[535],{"type":37,"value":153},{"type":32,"tag":106,"props":537,"children":538},{"style":135},[539],{"type":37,"value":540},"\"error\"",{"type":32,"tag":106,"props":542,"children":543},{"style":129},[544],{"type":37,"value":545},", { ",{"type":32,"tag":106,"props":547,"children":548},{"style":145},[549],{"type":37,"value":550},"\"maxNumericValue\"",{"type":32,"tag":106,"props":552,"children":553},{"style":129},[554],{"type":37,"value":132},{"type":32,"tag":106,"props":556,"children":557},{"style":145},[558],{"type":37,"value":559},"512000",{"type":32,"tag":106,"props":561,"children":562},{"style":129},[563],{"type":37,"value":564}," }],\n",{"type":32,"tag":106,"props":566,"children":567},{"class":108,"line":289},[568,573,577,581,585,589,593,598],{"type":32,"tag":106,"props":569,"children":570},{"style":145},[571],{"type":37,"value":572},"        \"total-blocking-time\"",{"type":32,"tag":106,"props":574,"children":575},{"style":129},[576],{"type":37,"value":153},{"type":32,"tag":106,"props":578,"children":579},{"style":135},[580],{"type":37,"value":540},{"type":32,"tag":106,"props":582,"children":583},{"style":129},[584],{"type":37,"value":545},{"type":32,"tag":106,"props":586,"children":587},{"style":145},[588],{"type":37,"value":550},{"type":32,"tag":106,"props":590,"children":591},{"style":129},[592],{"type":37,"value":132},{"type":32,"tag":106,"props":594,"children":595},{"style":145},[596],{"type":37,"value":597},"200",{"type":32,"tag":106,"props":599,"children":600},{"style":129},[601],{"type":37,"value":564},{"type":32,"tag":106,"props":603,"children":604},{"class":108,"line":310},[605,610,614,618,622,626,630,635],{"type":32,"tag":106,"props":606,"children":607},{"style":145},[608],{"type":37,"value":609},"        \"largest-contentful-paint\"",{"type":32,"tag":106,"props":611,"children":612},{"style":129},[613],{"type":37,"value":153},{"type":32,"tag":106,"props":615,"children":616},{"style":135},[617],{"type":37,"value":540},{"type":32,"tag":106,"props":619,"children":620},{"style":129},[621],{"type":37,"value":545},{"type":32,"tag":106,"props":623,"children":624},{"style":145},[625],{"type":37,"value":550},{"type":32,"tag":106,"props":627,"children":628},{"style":129},[629],{"type":37,"value":132},{"type":32,"tag":106,"props":631,"children":632},{"style":145},[633],{"type":37,"value":634},"2500",{"type":32,"tag":106,"props":636,"children":637},{"style":129},[638],{"type":37,"value":564},{"type":32,"tag":106,"props":640,"children":641},{"class":108,"line":329},[642,647,651,655,659,663,667,672],{"type":32,"tag":106,"props":643,"children":644},{"style":145},[645],{"type":37,"value":646},"        \"cumulative-layout-shift\"",{"type":32,"tag":106,"props":648,"children":649},{"style":129},[650],{"type":37,"value":153},{"type":32,"tag":106,"props":652,"children":653},{"style":135},[654],{"type":37,"value":540},{"type":32,"tag":106,"props":656,"children":657},{"style":129},[658],{"type":37,"value":545},{"type":32,"tag":106,"props":660,"children":661},{"style":145},[662],{"type":37,"value":550},{"type":32,"tag":106,"props":664,"children":665},{"style":129},[666],{"type":37,"value":132},{"type":32,"tag":106,"props":668,"children":669},{"style":145},[670],{"type":37,"value":671},"0.1",{"type":32,"tag":106,"props":673,"children":674},{"style":129},[675],{"type":37,"value":564},{"type":32,"tag":106,"props":677,"children":678},{"class":108,"line":338},[679,684,688,692,696,701,705,710],{"type":32,"tag":106,"props":680,"children":681},{"style":145},[682],{"type":37,"value":683},"        \"categories:performance\"",{"type":32,"tag":106,"props":685,"children":686},{"style":129},[687],{"type":37,"value":153},{"type":32,"tag":106,"props":689,"children":690},{"style":135},[691],{"type":37,"value":540},{"type":32,"tag":106,"props":693,"children":694},{"style":129},[695],{"type":37,"value":545},{"type":32,"tag":106,"props":697,"children":698},{"style":145},[699],{"type":37,"value":700},"\"minScore\"",{"type":32,"tag":106,"props":702,"children":703},{"style":129},[704],{"type":37,"value":132},{"type":32,"tag":106,"props":706,"children":707},{"style":145},[708],{"type":37,"value":709},"0.85",{"type":32,"tag":106,"props":711,"children":712},{"style":129},[713],{"type":37,"value":714}," }]\n",{"type":32,"tag":106,"props":716,"children":717},{"class":108,"line":347},[718],{"type":32,"tag":106,"props":719,"children":720},{"style":129},[721],{"type":37,"value":722},"      }\n",{"type":32,"tag":106,"props":724,"children":725},{"class":108,"line":360},[726],{"type":32,"tag":106,"props":727,"children":728},{"style":129},[729],{"type":37,"value":477},{"type":32,"tag":106,"props":731,"children":733},{"class":108,"line":732},17,[734,739],{"type":32,"tag":106,"props":735,"children":736},{"style":145},[737],{"type":37,"value":738},"    \"upload\"",{"type":32,"tag":106,"props":740,"children":741},{"style":129},[742],{"type":37,"value":418},{"type":32,"tag":106,"props":744,"children":746},{"class":108,"line":745},18,[747,752,756],{"type":32,"tag":106,"props":748,"children":749},{"style":145},[750],{"type":37,"value":751},"      \"target\"",{"type":32,"tag":106,"props":753,"children":754},{"style":129},[755],{"type":37,"value":132},{"type":32,"tag":106,"props":757,"children":758},{"style":135},[759],{"type":37,"value":760},"\"temporary-public-storage\"\n",{"type":32,"tag":106,"props":762,"children":764},{"class":108,"line":763},19,[765],{"type":32,"tag":106,"props":766,"children":767},{"style":129},[768],{"type":37,"value":769},"    }\n",{"type":32,"tag":106,"props":771,"children":773},{"class":108,"line":772},20,[774],{"type":32,"tag":106,"props":775,"children":776},{"style":129},[777],{"type":37,"value":778},"  }\n",{"type":32,"tag":106,"props":780,"children":782},{"class":108,"line":781},21,[783],{"type":32,"tag":106,"props":784,"children":785},{"style":129},[786],{"type":37,"value":787},"}\n",{"type":32,"tag":33,"props":789,"children":790},{},[791,793,802],{"type":37,"value":792},"With this setup, if a PR adds 50 KB of extra JS and TBT exceeds 200 ms, CI fails and merge blocks. At Roibase, managing projects transitioning to ",{"type":32,"tag":794,"props":795,"children":799},"a",{"href":796,"rel":797},"https:\u002F\u002Fwww.roibase.com.tr\u002Fen\u002Fheadless",[798],"nofollow",[800],{"type":37,"value":801},"Headless Commerce",{"type":37,"value":803}," architecture, we used this approach to drop median TBT from 2190 ms to 200 ms—because every library addition was tested against the budget.",{"type":32,"tag":805,"props":806,"children":808},"h3",{"id":807},"lighthouse-ci-limitations-and-structural-decisions",[809],{"type":37,"value":810},"Lighthouse CI Limitations and Structural Decisions",{"type":32,"tag":33,"props":812,"children":813},{},[814,816,821],{"type":37,"value":815},"Lighthouse CI runs synthetic tests: fixed bandwidth (Moto G4, slow 4G emulation), fixed CPU throttle (4x slowdown), single page. Real users navigate differently, traverse different paths (product → cart → checkout), see A\u002FB variants. Position Lighthouse CI as the ",{"type":32,"tag":57,"props":817,"children":818},{},[819],{"type":37,"value":820},"minimum bar",{"type":37,"value":822},"—if it passes, deployment is safe; but passing doesn't guarantee 100 points in production. Measure true production reality with RUM.",{"type":32,"tag":40,"props":824,"children":826},{"id":825},"converting-production-reality-to-decision-data-with-rum",[827],{"type":37,"value":828},"Converting Production Reality to Decision Data with RUM",{"type":32,"tag":33,"props":830,"children":831},{},[832],{"type":37,"value":833},"RUM (Real User Monitoring) collects metrics from actual users: Navigation Timing API, PerformanceObserver, CrUX (Chrome User Experience Report). Use a vendor (Speedcurve, Sentry Performance, Cloudflare Web Analytics) or your own logging stack (web-vitals library + BigQuery).",{"type":32,"tag":33,"props":835,"children":836},{},[837,839,845],{"type":37,"value":838},"A minimal ",{"type":32,"tag":102,"props":840,"children":842},{"className":841},[],[843],{"type":37,"value":844},"web-vitals",{"type":37,"value":846}," integration:",{"type":32,"tag":95,"props":848,"children":852},{"className":849,"code":850,"language":851,"meta":16,"style":16},"language-javascript shiki shiki-themes github-dark","\u002F\u002F app.js\nimport { onCLS, onFID, onLCP, onTTFB } from 'web-vitals';\n\nfunction sendToAnalytics(metric) {\n  const body = JSON.stringify({\n    name: metric.name,\n    value: metric.value,\n    id: metric.id,\n    navigationType: metric.navigationType,\n    page: window.location.pathname,\n    deviceType: \u002Fmobile\u002Fi.test(navigator.userAgent) ? 'mobile' : 'desktop'\n  });\n  \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);\nonFID(sendToAnalytics);\nonLCP(sendToAnalytics);\nonTTFB(sendToAnalytics);\n","javascript",[853],{"type":32,"tag":102,"props":854,"children":855},{"__ignoreMap":16},[856,864,892,901,931,969,977,985,993,1001,1009,1072,1080,1088,1101,1128,1146,1187,1194,1201,1208,1221,1234,1247],{"type":32,"tag":106,"props":857,"children":858},{"class":108,"line":109},[859],{"type":32,"tag":106,"props":860,"children":861},{"style":113},[862],{"type":37,"value":863},"\u002F\u002F app.js\n",{"type":32,"tag":106,"props":865,"children":866},{"class":108,"line":119},[867,872,877,882,887],{"type":32,"tag":106,"props":868,"children":869},{"style":323},[870],{"type":37,"value":871},"import",{"type":32,"tag":106,"props":873,"children":874},{"style":129},[875],{"type":37,"value":876}," { onCLS, onFID, onLCP, onTTFB } ",{"type":32,"tag":106,"props":878,"children":879},{"style":323},[880],{"type":37,"value":881},"from",{"type":32,"tag":106,"props":883,"children":884},{"style":135},[885],{"type":37,"value":886}," 'web-vitals'",{"type":32,"tag":106,"props":888,"children":889},{"style":129},[890],{"type":37,"value":891},";\n",{"type":32,"tag":106,"props":893,"children":894},{"class":108,"line":141},[895],{"type":32,"tag":106,"props":896,"children":898},{"emptyLinePlaceholder":897},true,[899],{"type":37,"value":900},"\n",{"type":32,"tag":106,"props":902,"children":903},{"class":108,"line":166},[904,909,915,920,926],{"type":32,"tag":106,"props":905,"children":906},{"style":323},[907],{"type":37,"value":908},"function",{"type":32,"tag":106,"props":910,"children":912},{"style":911},"--shiki-default:#B392F0",[913],{"type":37,"value":914}," sendToAnalytics",{"type":32,"tag":106,"props":916,"children":917},{"style":129},[918],{"type":37,"value":919},"(",{"type":32,"tag":106,"props":921,"children":923},{"style":922},"--shiki-default:#FFAB70",[924],{"type":37,"value":925},"metric",{"type":32,"tag":106,"props":927,"children":928},{"style":129},[929],{"type":37,"value":930},") {\n",{"type":32,"tag":106,"props":932,"children":933},{"class":108,"line":180},[934,939,944,949,954,959,964],{"type":32,"tag":106,"props":935,"children":936},{"style":323},[937],{"type":37,"value":938},"  const",{"type":32,"tag":106,"props":940,"children":941},{"style":145},[942],{"type":37,"value":943}," body",{"type":32,"tag":106,"props":945,"children":946},{"style":323},[947],{"type":37,"value":948}," =",{"type":32,"tag":106,"props":950,"children":951},{"style":145},[952],{"type":37,"value":953}," JSON",{"type":32,"tag":106,"props":955,"children":956},{"style":129},[957],{"type":37,"value":958},".",{"type":32,"tag":106,"props":960,"children":961},{"style":911},[962],{"type":37,"value":963},"stringify",{"type":32,"tag":106,"props":965,"children":966},{"style":129},[967],{"type":37,"value":968},"({\n",{"type":32,"tag":106,"props":970,"children":971},{"class":108,"line":193},[972],{"type":32,"tag":106,"props":973,"children":974},{"style":129},[975],{"type":37,"value":976},"    name: metric.name,\n",{"type":32,"tag":106,"props":978,"children":979},{"class":108,"line":211},[980],{"type":32,"tag":106,"props":981,"children":982},{"style":129},[983],{"type":37,"value":984},"    value: metric.value,\n",{"type":32,"tag":106,"props":986,"children":987},{"class":108,"line":26},[988],{"type":32,"tag":106,"props":989,"children":990},{"style":129},[991],{"type":37,"value":992},"    id: metric.id,\n",{"type":32,"tag":106,"props":994,"children":995},{"class":108,"line":246},[996],{"type":32,"tag":106,"props":997,"children":998},{"style":129},[999],{"type":37,"value":1000},"    navigationType: metric.navigationType,\n",{"type":32,"tag":106,"props":1002,"children":1003},{"class":108,"line":267},[1004],{"type":32,"tag":106,"props":1005,"children":1006},{"style":129},[1007],{"type":37,"value":1008},"    page: window.location.pathname,\n",{"type":32,"tag":106,"props":1010,"children":1011},{"class":108,"line":289},[1012,1017,1022,1028,1033,1038,1042,1047,1052,1057,1062,1067],{"type":32,"tag":106,"props":1013,"children":1014},{"style":129},[1015],{"type":37,"value":1016},"    deviceType:",{"type":32,"tag":106,"props":1018,"children":1019},{"style":135},[1020],{"type":37,"value":1021}," \u002F",{"type":32,"tag":106,"props":1023,"children":1025},{"style":1024},"--shiki-default:#DBEDFF",[1026],{"type":37,"value":1027},"mobile",{"type":32,"tag":106,"props":1029,"children":1030},{"style":135},[1031],{"type":37,"value":1032},"\u002F",{"type":32,"tag":106,"props":1034,"children":1035},{"style":323},[1036],{"type":37,"value":1037},"i",{"type":32,"tag":106,"props":1039,"children":1040},{"style":129},[1041],{"type":37,"value":958},{"type":32,"tag":106,"props":1043,"children":1044},{"style":911},[1045],{"type":37,"value":1046},"test",{"type":32,"tag":106,"props":1048,"children":1049},{"style":129},[1050],{"type":37,"value":1051},"(navigator.userAgent) ",{"type":32,"tag":106,"props":1053,"children":1054},{"style":323},[1055],{"type":37,"value":1056},"?",{"type":32,"tag":106,"props":1058,"children":1059},{"style":135},[1060],{"type":37,"value":1061}," 'mobile'",{"type":32,"tag":106,"props":1063,"children":1064},{"style":323},[1065],{"type":37,"value":1066}," :",{"type":32,"tag":106,"props":1068,"children":1069},{"style":135},[1070],{"type":37,"value":1071}," 'desktop'\n",{"type":32,"tag":106,"props":1073,"children":1074},{"class":108,"line":310},[1075],{"type":32,"tag":106,"props":1076,"children":1077},{"style":129},[1078],{"type":37,"value":1079},"  });\n",{"type":32,"tag":106,"props":1081,"children":1082},{"class":108,"line":329},[1083],{"type":32,"tag":106,"props":1084,"children":1085},{"style":129},[1086],{"type":37,"value":1087},"  \n",{"type":32,"tag":106,"props":1089,"children":1090},{"class":108,"line":338},[1091,1096],{"type":32,"tag":106,"props":1092,"children":1093},{"style":323},[1094],{"type":37,"value":1095},"  if",{"type":32,"tag":106,"props":1097,"children":1098},{"style":129},[1099],{"type":37,"value":1100}," (navigator.sendBeacon) {\n",{"type":32,"tag":106,"props":1102,"children":1103},{"class":108,"line":347},[1104,1109,1114,1118,1123],{"type":32,"tag":106,"props":1105,"children":1106},{"style":129},[1107],{"type":37,"value":1108},"    navigator.",{"type":32,"tag":106,"props":1110,"children":1111},{"style":911},[1112],{"type":37,"value":1113},"sendBeacon",{"type":32,"tag":106,"props":1115,"children":1116},{"style":129},[1117],{"type":37,"value":919},{"type":32,"tag":106,"props":1119,"children":1120},{"style":135},[1121],{"type":37,"value":1122},"'\u002Fapi\u002Fvitals'",{"type":32,"tag":106,"props":1124,"children":1125},{"style":129},[1126],{"type":37,"value":1127},", body);\n",{"type":32,"tag":106,"props":1129,"children":1130},{"class":108,"line":360},[1131,1136,1141],{"type":32,"tag":106,"props":1132,"children":1133},{"style":129},[1134],{"type":37,"value":1135},"  } ",{"type":32,"tag":106,"props":1137,"children":1138},{"style":323},[1139],{"type":37,"value":1140},"else",{"type":32,"tag":106,"props":1142,"children":1143},{"style":129},[1144],{"type":37,"value":1145}," {\n",{"type":32,"tag":106,"props":1147,"children":1148},{"class":108,"line":732},[1149,1154,1158,1162,1167,1172,1177,1182],{"type":32,"tag":106,"props":1150,"children":1151},{"style":911},[1152],{"type":37,"value":1153},"    fetch",{"type":32,"tag":106,"props":1155,"children":1156},{"style":129},[1157],{"type":37,"value":919},{"type":32,"tag":106,"props":1159,"children":1160},{"style":135},[1161],{"type":37,"value":1122},{"type":32,"tag":106,"props":1163,"children":1164},{"style":129},[1165],{"type":37,"value":1166},", { method: ",{"type":32,"tag":106,"props":1168,"children":1169},{"style":135},[1170],{"type":37,"value":1171},"'POST'",{"type":32,"tag":106,"props":1173,"children":1174},{"style":129},[1175],{"type":37,"value":1176},", body, keepalive: ",{"type":32,"tag":106,"props":1178,"children":1179},{"style":145},[1180],{"type":37,"value":1181},"true",{"type":32,"tag":106,"props":1183,"children":1184},{"style":129},[1185],{"type":37,"value":1186}," });\n",{"type":32,"tag":106,"props":1188,"children":1189},{"class":108,"line":745},[1190],{"type":32,"tag":106,"props":1191,"children":1192},{"style":129},[1193],{"type":37,"value":778},{"type":32,"tag":106,"props":1195,"children":1196},{"class":108,"line":763},[1197],{"type":32,"tag":106,"props":1198,"children":1199},{"style":129},[1200],{"type":37,"value":787},{"type":32,"tag":106,"props":1202,"children":1203},{"class":108,"line":772},[1204],{"type":32,"tag":106,"props":1205,"children":1206},{"emptyLinePlaceholder":897},[1207],{"type":37,"value":900},{"type":32,"tag":106,"props":1209,"children":1210},{"class":108,"line":781},[1211,1216],{"type":32,"tag":106,"props":1212,"children":1213},{"style":911},[1214],{"type":37,"value":1215},"onCLS",{"type":32,"tag":106,"props":1217,"children":1218},{"style":129},[1219],{"type":37,"value":1220},"(sendToAnalytics);\n",{"type":32,"tag":106,"props":1222,"children":1224},{"class":108,"line":1223},22,[1225,1230],{"type":32,"tag":106,"props":1226,"children":1227},{"style":911},[1228],{"type":37,"value":1229},"onFID",{"type":32,"tag":106,"props":1231,"children":1232},{"style":129},[1233],{"type":37,"value":1220},{"type":32,"tag":106,"props":1235,"children":1237},{"class":108,"line":1236},23,[1238,1243],{"type":32,"tag":106,"props":1239,"children":1240},{"style":911},[1241],{"type":37,"value":1242},"onLCP",{"type":32,"tag":106,"props":1244,"children":1245},{"style":129},[1246],{"type":37,"value":1220},{"type":32,"tag":106,"props":1248,"children":1250},{"class":108,"line":1249},24,[1251,1256],{"type":32,"tag":106,"props":1252,"children":1253},{"style":911},[1254],{"type":37,"value":1255},"onTTFB",{"type":32,"tag":106,"props":1257,"children":1258},{"style":129},[1259],{"type":37,"value":1220},{"type":32,"tag":33,"props":1261,"children":1262},{},[1263],{"type":37,"value":1264},"Load this data into BigQuery, then join it with marketing attribution data using dbt:",{"type":32,"tag":95,"props":1266,"children":1270},{"className":1267,"code":1268,"language":1269,"meta":16,"style":16},"language-sql shiki shiki-themes github-dark","-- models\u002Fperformance_impact.sql\nWITH vitals AS (\n  SELECT\n    session_id,\n    AVG(CASE WHEN metric_name = 'LCP' THEN value END) AS avg_lcp,\n    AVG(CASE WHEN metric_name = 'CLS' THEN value END) AS avg_cls\n  FROM {{ ref('raw_vitals') }}\n  GROUP BY session_id\n),\nconversions AS (\n  SELECT session_id, revenue, converted\n  FROM {{ ref('ga4_sessions') }}\n)\nSELECT\n  CASE\n    WHEN v.avg_lcp \u003C= 2500 THEN 'good'\n    WHEN v.avg_lcp \u003C= 4000 THEN 'needs_improvement'\n    ELSE 'poor'\n  END AS lcp_band,\n  COUNT(*) AS sessions,\n  SUM(c.converted) AS conversions,\n  SAFE_DIVIDE(SUM(c.converted), COUNT(*)) AS cvr\nFROM vitals v\nLEFT JOIN conversions c USING(session_id)\nGROUP BY lcp_band;\n","sql",[1271],{"type":32,"tag":102,"props":1272,"children":1273},{"__ignoreMap":16},[1274,1282,1305,1313,1321,1387,1444,1467,1480,1488,1504,1517,1537,1545,1553,1561,1602,1639,1652,1670,1704,1743,1804,1817,1840],{"type":32,"tag":106,"props":1275,"children":1276},{"class":108,"line":109},[1277],{"type":32,"tag":106,"props":1278,"children":1279},{"style":113},[1280],{"type":37,"value":1281},"-- models\u002Fperformance_impact.sql\n",{"type":32,"tag":106,"props":1283,"children":1284},{"class":108,"line":119},[1285,1290,1295,1300],{"type":32,"tag":106,"props":1286,"children":1287},{"style":323},[1288],{"type":37,"value":1289},"WITH",{"type":32,"tag":106,"props":1291,"children":1292},{"style":129},[1293],{"type":37,"value":1294}," vitals ",{"type":32,"tag":106,"props":1296,"children":1297},{"style":323},[1298],{"type":37,"value":1299},"AS",{"type":32,"tag":106,"props":1301,"children":1302},{"style":129},[1303],{"type":37,"value":1304}," (\n",{"type":32,"tag":106,"props":1306,"children":1307},{"class":108,"line":141},[1308],{"type":32,"tag":106,"props":1309,"children":1310},{"style":323},[1311],{"type":37,"value":1312},"  SELECT\n",{"type":32,"tag":106,"props":1314,"children":1315},{"class":108,"line":166},[1316],{"type":32,"tag":106,"props":1317,"children":1318},{"style":129},[1319],{"type":37,"value":1320},"    session_id,\n",{"type":32,"tag":106,"props":1322,"children":1323},{"class":108,"line":180},[1324,1329,1333,1338,1343,1348,1353,1358,1363,1368,1373,1378,1382],{"type":32,"tag":106,"props":1325,"children":1326},{"style":145},[1327],{"type":37,"value":1328},"    AVG",{"type":32,"tag":106,"props":1330,"children":1331},{"style":129},[1332],{"type":37,"value":919},{"type":32,"tag":106,"props":1334,"children":1335},{"style":323},[1336],{"type":37,"value":1337},"CASE",{"type":32,"tag":106,"props":1339,"children":1340},{"style":323},[1341],{"type":37,"value":1342}," WHEN",{"type":32,"tag":106,"props":1344,"children":1345},{"style":129},[1346],{"type":37,"value":1347}," metric_name ",{"type":32,"tag":106,"props":1349,"children":1350},{"style":323},[1351],{"type":37,"value":1352},"=",{"type":32,"tag":106,"props":1354,"children":1355},{"style":135},[1356],{"type":37,"value":1357}," 'LCP'",{"type":32,"tag":106,"props":1359,"children":1360},{"style":323},[1361],{"type":37,"value":1362}," THEN",{"type":32,"tag":106,"props":1364,"children":1365},{"style":323},[1366],{"type":37,"value":1367}," value",{"type":32,"tag":106,"props":1369,"children":1370},{"style":323},[1371],{"type":37,"value":1372}," END",{"type":32,"tag":106,"props":1374,"children":1375},{"style":129},[1376],{"type":37,"value":1377},") ",{"type":32,"tag":106,"props":1379,"children":1380},{"style":323},[1381],{"type":37,"value":1299},{"type":32,"tag":106,"props":1383,"children":1384},{"style":129},[1385],{"type":37,"value":1386}," avg_lcp,\n",{"type":32,"tag":106,"props":1388,"children":1389},{"class":108,"line":193},[1390,1394,1398,1402,1406,1410,1414,1419,1423,1427,1431,1435,1439],{"type":32,"tag":106,"props":1391,"children":1392},{"style":145},[1393],{"type":37,"value":1328},{"type":32,"tag":106,"props":1395,"children":1396},{"style":129},[1397],{"type":37,"value":919},{"type":32,"tag":106,"props":1399,"children":1400},{"style":323},[1401],{"type":37,"value":1337},{"type":32,"tag":106,"props":1403,"children":1404},{"style":323},[1405],{"type":37,"value":1342},{"type":32,"tag":106,"props":1407,"children":1408},{"style":129},[1409],{"type":37,"value":1347},{"type":32,"tag":106,"props":1411,"children":1412},{"style":323},[1413],{"type":37,"value":1352},{"type":32,"tag":106,"props":1415,"children":1416},{"style":135},[1417],{"type":37,"value":1418}," 'CLS'",{"type":32,"tag":106,"props":1420,"children":1421},{"style":323},[1422],{"type":37,"value":1362},{"type":32,"tag":106,"props":1424,"children":1425},{"style":323},[1426],{"type":37,"value":1367},{"type":32,"tag":106,"props":1428,"children":1429},{"style":323},[1430],{"type":37,"value":1372},{"type":32,"tag":106,"props":1432,"children":1433},{"style":129},[1434],{"type":37,"value":1377},{"type":32,"tag":106,"props":1436,"children":1437},{"style":323},[1438],{"type":37,"value":1299},{"type":32,"tag":106,"props":1440,"children":1441},{"style":129},[1442],{"type":37,"value":1443}," avg_cls\n",{"type":32,"tag":106,"props":1445,"children":1446},{"class":108,"line":211},[1447,1452,1457,1462],{"type":32,"tag":106,"props":1448,"children":1449},{"style":323},[1450],{"type":37,"value":1451},"  FROM",{"type":32,"tag":106,"props":1453,"children":1454},{"style":129},[1455],{"type":37,"value":1456}," {{ ref(",{"type":32,"tag":106,"props":1458,"children":1459},{"style":135},[1460],{"type":37,"value":1461},"'raw_vitals'",{"type":32,"tag":106,"props":1463,"children":1464},{"style":129},[1465],{"type":37,"value":1466},") }}\n",{"type":32,"tag":106,"props":1468,"children":1469},{"class":108,"line":26},[1470,1475],{"type":32,"tag":106,"props":1471,"children":1472},{"style":323},[1473],{"type":37,"value":1474},"  GROUP BY",{"type":32,"tag":106,"props":1476,"children":1477},{"style":129},[1478],{"type":37,"value":1479}," session_id\n",{"type":32,"tag":106,"props":1481,"children":1482},{"class":108,"line":246},[1483],{"type":32,"tag":106,"props":1484,"children":1485},{"style":129},[1486],{"type":37,"value":1487},"),\n",{"type":32,"tag":106,"props":1489,"children":1490},{"class":108,"line":267},[1491,1496,1500],{"type":32,"tag":106,"props":1492,"children":1493},{"style":129},[1494],{"type":37,"value":1495},"conversions ",{"type":32,"tag":106,"props":1497,"children":1498},{"style":323},[1499],{"type":37,"value":1299},{"type":32,"tag":106,"props":1501,"children":1502},{"style":129},[1503],{"type":37,"value":1304},{"type":32,"tag":106,"props":1505,"children":1506},{"class":108,"line":289},[1507,1512],{"type":32,"tag":106,"props":1508,"children":1509},{"style":323},[1510],{"type":37,"value":1511},"  SELECT",{"type":32,"tag":106,"props":1513,"children":1514},{"style":129},[1515],{"type":37,"value":1516}," session_id, revenue, converted\n",{"type":32,"tag":106,"props":1518,"children":1519},{"class":108,"line":310},[1520,1524,1528,1533],{"type":32,"tag":106,"props":1521,"children":1522},{"style":323},[1523],{"type":37,"value":1451},{"type":32,"tag":106,"props":1525,"children":1526},{"style":129},[1527],{"type":37,"value":1456},{"type":32,"tag":106,"props":1529,"children":1530},{"style":135},[1531],{"type":37,"value":1532},"'ga4_sessions'",{"type":32,"tag":106,"props":1534,"children":1535},{"style":129},[1536],{"type":37,"value":1466},{"type":32,"tag":106,"props":1538,"children":1539},{"class":108,"line":329},[1540],{"type":32,"tag":106,"props":1541,"children":1542},{"style":129},[1543],{"type":37,"value":1544},")\n",{"type":32,"tag":106,"props":1546,"children":1547},{"class":108,"line":338},[1548],{"type":32,"tag":106,"props":1549,"children":1550},{"style":323},[1551],{"type":37,"value":1552},"SELECT\n",{"type":32,"tag":106,"props":1554,"children":1555},{"class":108,"line":347},[1556],{"type":32,"tag":106,"props":1557,"children":1558},{"style":323},[1559],{"type":37,"value":1560},"  CASE\n",{"type":32,"tag":106,"props":1562,"children":1563},{"class":108,"line":360},[1564,1569,1574,1578,1583,1588,1593,1597],{"type":32,"tag":106,"props":1565,"children":1566},{"style":323},[1567],{"type":37,"value":1568},"    WHEN",{"type":32,"tag":106,"props":1570,"children":1571},{"style":145},[1572],{"type":37,"value":1573}," v",{"type":32,"tag":106,"props":1575,"children":1576},{"style":129},[1577],{"type":37,"value":958},{"type":32,"tag":106,"props":1579,"children":1580},{"style":145},[1581],{"type":37,"value":1582},"avg_lcp",{"type":32,"tag":106,"props":1584,"children":1585},{"style":323},[1586],{"type":37,"value":1587}," \u003C=",{"type":32,"tag":106,"props":1589,"children":1590},{"style":145},[1591],{"type":37,"value":1592}," 2500",{"type":32,"tag":106,"props":1594,"children":1595},{"style":323},[1596],{"type":37,"value":1362},{"type":32,"tag":106,"props":1598,"children":1599},{"style":135},[1600],{"type":37,"value":1601}," 'good'\n",{"type":32,"tag":106,"props":1603,"children":1604},{"class":108,"line":732},[1605,1609,1613,1617,1621,1625,1630,1634],{"type":32,"tag":106,"props":1606,"children":1607},{"style":323},[1608],{"type":37,"value":1568},{"type":32,"tag":106,"props":1610,"children":1611},{"style":145},[1612],{"type":37,"value":1573},{"type":32,"tag":106,"props":1614,"children":1615},{"style":129},[1616],{"type":37,"value":958},{"type":32,"tag":106,"props":1618,"children":1619},{"style":145},[1620],{"type":37,"value":1582},{"type":32,"tag":106,"props":1622,"children":1623},{"style":323},[1624],{"type":37,"value":1587},{"type":32,"tag":106,"props":1626,"children":1627},{"style":145},[1628],{"type":37,"value":1629}," 4000",{"type":32,"tag":106,"props":1631,"children":1632},{"style":323},[1633],{"type":37,"value":1362},{"type":32,"tag":106,"props":1635,"children":1636},{"style":135},[1637],{"type":37,"value":1638}," 'needs_improvement'\n",{"type":32,"tag":106,"props":1640,"children":1641},{"class":108,"line":745},[1642,1647],{"type":32,"tag":106,"props":1643,"children":1644},{"style":323},[1645],{"type":37,"value":1646},"    ELSE",{"type":32,"tag":106,"props":1648,"children":1649},{"style":135},[1650],{"type":37,"value":1651}," 'poor'\n",{"type":32,"tag":106,"props":1653,"children":1654},{"class":108,"line":763},[1655,1660,1665],{"type":32,"tag":106,"props":1656,"children":1657},{"style":323},[1658],{"type":37,"value":1659},"  END",{"type":32,"tag":106,"props":1661,"children":1662},{"style":323},[1663],{"type":37,"value":1664}," AS",{"type":32,"tag":106,"props":1666,"children":1667},{"style":129},[1668],{"type":37,"value":1669}," lcp_band,\n",{"type":32,"tag":106,"props":1671,"children":1672},{"class":108,"line":772},[1673,1678,1682,1687,1691,1695,1700],{"type":32,"tag":106,"props":1674,"children":1675},{"style":145},[1676],{"type":37,"value":1677},"  COUNT",{"type":32,"tag":106,"props":1679,"children":1680},{"style":129},[1681],{"type":37,"value":919},{"type":32,"tag":106,"props":1683,"children":1684},{"style":323},[1685],{"type":37,"value":1686},"*",{"type":32,"tag":106,"props":1688,"children":1689},{"style":129},[1690],{"type":37,"value":1377},{"type":32,"tag":106,"props":1692,"children":1693},{"style":323},[1694],{"type":37,"value":1299},{"type":32,"tag":106,"props":1696,"children":1697},{"style":323},[1698],{"type":37,"value":1699}," sessions",{"type":32,"tag":106,"props":1701,"children":1702},{"style":129},[1703],{"type":37,"value":511},{"type":32,"tag":106,"props":1705,"children":1706},{"class":108,"line":781},[1707,1712,1716,1721,1725,1730,1734,1738],{"type":32,"tag":106,"props":1708,"children":1709},{"style":145},[1710],{"type":37,"value":1711},"  SUM",{"type":32,"tag":106,"props":1713,"children":1714},{"style":129},[1715],{"type":37,"value":919},{"type":32,"tag":106,"props":1717,"children":1718},{"style":145},[1719],{"type":37,"value":1720},"c",{"type":32,"tag":106,"props":1722,"children":1723},{"style":129},[1724],{"type":37,"value":958},{"type":32,"tag":106,"props":1726,"children":1727},{"style":145},[1728],{"type":37,"value":1729},"converted",{"type":32,"tag":106,"props":1731,"children":1732},{"style":129},[1733],{"type":37,"value":1377},{"type":32,"tag":106,"props":1735,"children":1736},{"style":323},[1737],{"type":37,"value":1299},{"type":32,"tag":106,"props":1739,"children":1740},{"style":129},[1741],{"type":37,"value":1742}," conversions,\n",{"type":32,"tag":106,"props":1744,"children":1745},{"class":108,"line":1223},[1746,1751,1756,1760,1764,1768,1772,1777,1782,1786,1790,1795,1799],{"type":32,"tag":106,"props":1747,"children":1748},{"style":129},[1749],{"type":37,"value":1750},"  SAFE_DIVIDE(",{"type":32,"tag":106,"props":1752,"children":1753},{"style":145},[1754],{"type":37,"value":1755},"SUM",{"type":32,"tag":106,"props":1757,"children":1758},{"style":129},[1759],{"type":37,"value":919},{"type":32,"tag":106,"props":1761,"children":1762},{"style":145},[1763],{"type":37,"value":1720},{"type":32,"tag":106,"props":1765,"children":1766},{"style":129},[1767],{"type":37,"value":958},{"type":32,"tag":106,"props":1769,"children":1770},{"style":145},[1771],{"type":37,"value":1729},{"type":32,"tag":106,"props":1773,"children":1774},{"style":129},[1775],{"type":37,"value":1776},"), ",{"type":32,"tag":106,"props":1778,"children":1779},{"style":145},[1780],{"type":37,"value":1781},"COUNT",{"type":32,"tag":106,"props":1783,"children":1784},{"style":129},[1785],{"type":37,"value":919},{"type":32,"tag":106,"props":1787,"children":1788},{"style":323},[1789],{"type":37,"value":1686},{"type":32,"tag":106,"props":1791,"children":1792},{"style":129},[1793],{"type":37,"value":1794},")) ",{"type":32,"tag":106,"props":1796,"children":1797},{"style":323},[1798],{"type":37,"value":1299},{"type":32,"tag":106,"props":1800,"children":1801},{"style":129},[1802],{"type":37,"value":1803}," cvr\n",{"type":32,"tag":106,"props":1805,"children":1806},{"class":108,"line":1236},[1807,1812],{"type":32,"tag":106,"props":1808,"children":1809},{"style":323},[1810],{"type":37,"value":1811},"FROM",{"type":32,"tag":106,"props":1813,"children":1814},{"style":129},[1815],{"type":37,"value":1816}," vitals v\n",{"type":32,"tag":106,"props":1818,"children":1819},{"class":108,"line":1249},[1820,1825,1830,1835],{"type":32,"tag":106,"props":1821,"children":1822},{"style":323},[1823],{"type":37,"value":1824},"LEFT JOIN",{"type":32,"tag":106,"props":1826,"children":1827},{"style":129},[1828],{"type":37,"value":1829}," conversions c ",{"type":32,"tag":106,"props":1831,"children":1832},{"style":323},[1833],{"type":37,"value":1834},"USING",{"type":32,"tag":106,"props":1836,"children":1837},{"style":129},[1838],{"type":37,"value":1839},"(session_id)\n",{"type":32,"tag":106,"props":1841,"children":1843},{"class":108,"line":1842},25,[1844,1849],{"type":32,"tag":106,"props":1845,"children":1846},{"style":323},[1847],{"type":37,"value":1848},"GROUP BY",{"type":32,"tag":106,"props":1850,"children":1851},{"style":129},[1852],{"type":37,"value":1853}," lcp_band;\n",{"type":32,"tag":33,"props":1855,"children":1856},{},[1857],{"type":37,"value":1858},"This table shows: \"When LCP ≤ 2.5s, CVR is 3.4%; when LCP exceeds that, CVR drops to 2.1%.\" When you report this to your CMO, the vague \"let's optimize performance\" becomes concrete: \"Bringing LCP under 2.5s nets +$18K monthly revenue.\"",{"type":32,"tag":40,"props":1860,"children":1862},{"id":1861},"wiring-regression-alarms-to-slackpagerduty",[1863],{"type":37,"value":1864},"Wiring Regression Alarms to Slack\u002FPagerDuty",{"type":32,"tag":33,"props":1866,"children":1867},{},[1868],{"type":37,"value":1869},"Once you're collecting RUM data, set up threshold alarms to detect regressions. If your 7-day average LCP was 2.2 seconds and today it spiked to 3.1 seconds, that's a deploy regression or CDN issue. Don't catch this via manual dashboard polling—automate it.",{"type":32,"tag":805,"props":1871,"children":1873},{"id":1872},"metric-based-alerting-with-datadog",[1874],{"type":37,"value":1875},"Metric-Based Alerting with DataDog",{"type":32,"tag":33,"props":1877,"children":1878},{},[1879],{"type":37,"value":1880},"DataDog auto-parses RUM metrics and applies anomaly detection. Sample monitor:",{"type":32,"tag":95,"props":1882,"children":1884},{"className":391,"code":1883,"language":393,"meta":16,"style":16},"{\n  \"name\": \"LCP Regression - Desktop\",\n  \"type\": \"metric alert\",\n  \"query\": \"avg(last_1h):avg:rum.largest_contentful_paint{device:desktop} > 2500\",\n  \"message\": \"LCP desktop exceeded 2500ms in last 1h. Last deploy: {{deploy.id}}. @slack-perf-alerts @pagerduty\",\n  \"tags\": [\"service:ecommerce\", \"env:production\"],\n  \"thresholds\": {\n    \"critical\": 2500,\n    \"warning\": 2200\n  }\n}\n",[1885],{"type":32,"tag":102,"props":1886,"children":1887},{"__ignoreMap":16},[1888,1895,1916,1937,1958,1979,2010,2022,2042,2059,2066],{"type":32,"tag":106,"props":1889,"children":1890},{"class":108,"line":109},[1891],{"type":32,"tag":106,"props":1892,"children":1893},{"style":129},[1894],{"type":37,"value":405},{"type":32,"tag":106,"props":1896,"children":1897},{"class":108,"line":119},[1898,1903,1907,1912],{"type":32,"tag":106,"props":1899,"children":1900},{"style":145},[1901],{"type":37,"value":1902},"  \"name\"",{"type":32,"tag":106,"props":1904,"children":1905},{"style":129},[1906],{"type":37,"value":132},{"type":32,"tag":106,"props":1908,"children":1909},{"style":135},[1910],{"type":37,"value":1911},"\"LCP Regression - Desktop\"",{"type":32,"tag":106,"props":1913,"children":1914},{"style":129},[1915],{"type":37,"value":511},{"type":32,"tag":106,"props":1917,"children":1918},{"class":108,"line":141},[1919,1924,1928,1933],{"type":32,"tag":106,"props":1920,"children":1921},{"style":145},[1922],{"type":37,"value":1923},"  \"type\"",{"type":32,"tag":106,"props":1925,"children":1926},{"style":129},[1927],{"type":37,"value":132},{"type":32,"tag":106,"props":1929,"children":1930},{"style":135},[1931],{"type":37,"value":1932},"\"metric alert\"",{"type":32,"tag":106,"props":1934,"children":1935},{"style":129},[1936],{"type":37,"value":511},{"type":32,"tag":106,"props":1938,"children":1939},{"class":108,"line":166},[1940,1945,1949,1954],{"type":32,"tag":106,"props":1941,"children":1942},{"style":145},[1943],{"type":37,"value":1944},"  \"query\"",{"type":32,"tag":106,"props":1946,"children":1947},{"style":129},[1948],{"type":37,"value":132},{"type":32,"tag":106,"props":1950,"children":1951},{"style":135},[1952],{"type":37,"value":1953},"\"avg(last_1h):avg:rum.largest_contentful_paint{device:desktop} > 2500\"",{"type":32,"tag":106,"props":1955,"children":1956},{"style":129},[1957],{"type":37,"value":511},{"type":32,"tag":106,"props":1959,"children":1960},{"class":108,"line":180},[1961,1966,1970,1975],{"type":32,"tag":106,"props":1962,"children":1963},{"style":145},[1964],{"type":37,"value":1965},"  \"message\"",{"type":32,"tag":106,"props":1967,"children":1968},{"style":129},[1969],{"type":37,"value":132},{"type":32,"tag":106,"props":1971,"children":1972},{"style":135},[1973],{"type":37,"value":1974},"\"LCP desktop exceeded 2500ms in last 1h. Last deploy: {{deploy.id}}. @slack-perf-alerts @pagerduty\"",{"type":32,"tag":106,"props":1976,"children":1977},{"style":129},[1978],{"type":37,"value":511},{"type":32,"tag":106,"props":1980,"children":1981},{"class":108,"line":193},[1982,1987,1991,1996,2001,2006],{"type":32,"tag":106,"props":1983,"children":1984},{"style":145},[1985],{"type":37,"value":1986},"  \"tags\"",{"type":32,"tag":106,"props":1988,"children":1989},{"style":129},[1990],{"type":37,"value":153},{"type":32,"tag":106,"props":1992,"children":1993},{"style":135},[1994],{"type":37,"value":1995},"\"service:ecommerce\"",{"type":32,"tag":106,"props":1997,"children":1998},{"style":129},[1999],{"type":37,"value":2000},", ",{"type":32,"tag":106,"props":2002,"children":2003},{"style":135},[2004],{"type":37,"value":2005},"\"env:production\"",{"type":32,"tag":106,"props":2007,"children":2008},{"style":129},[2009],{"type":37,"value":452},{"type":32,"tag":106,"props":2011,"children":2012},{"class":108,"line":211},[2013,2018],{"type":32,"tag":106,"props":2014,"children":2015},{"style":145},[2016],{"type":37,"value":2017},"  \"thresholds\"",{"type":32,"tag":106,"props":2019,"children":2020},{"style":129},[2021],{"type":37,"value":418},{"type":32,"tag":106,"props":2023,"children":2024},{"class":108,"line":26},[2025,2030,2034,2038],{"type":32,"tag":106,"props":2026,"children":2027},{"style":145},[2028],{"type":37,"value":2029},"    \"critical\"",{"type":32,"tag":106,"props":2031,"children":2032},{"style":129},[2033],{"type":37,"value":132},{"type":32,"tag":106,"props":2035,"children":2036},{"style":145},[2037],{"type":37,"value":634},{"type":32,"tag":106,"props":2039,"children":2040},{"style":129},[2041],{"type":37,"value":511},{"type":32,"tag":106,"props":2043,"children":2044},{"class":108,"line":246},[2045,2050,2054],{"type":32,"tag":106,"props":2046,"children":2047},{"style":145},[2048],{"type":37,"value":2049},"    \"warning\"",{"type":32,"tag":106,"props":2051,"children":2052},{"style":129},[2053],{"type":37,"value":132},{"type":32,"tag":106,"props":2055,"children":2056},{"style":145},[2057],{"type":37,"value":2058},"2200\n",{"type":32,"tag":106,"props":2060,"children":2061},{"class":108,"line":267},[2062],{"type":32,"tag":106,"props":2063,"children":2064},{"style":129},[2065],{"type":37,"value":778},{"type":32,"tag":106,"props":2067,"children":2068},{"class":108,"line":289},[2069],{"type":32,"tag":106,"props":2070,"children":2071},{"style":129},[2072],{"type":37,"value":787},{"type":32,"tag":33,"props":2074,"children":2075},{},[2076],{"type":37,"value":2077},"This alert drops into Slack, opens a PagerDuty incident, and pages the on-call engineer. With deploy ID in the message (sourced from CI pipeline tags), you pinpoint the regressive commit in 30 seconds.",{"type":32,"tag":805,"props":2079,"children":2081},{"id":2080},"relay-lighthouse-ci-threshold-failures-as-alarms-too",[2082],{"type":37,"value":2083},"Relay Lighthouse CI Threshold Failures as Alarms Too",{"type":32,"tag":33,"props":2085,"children":2086},{},[2087],{"type":37,"value":2088},"Some teams don't just block PR merges on Lighthouse CI failures—they also notify Slack:",{"type":32,"tag":95,"props":2090,"children":2092},{"className":97,"code":2091,"language":99,"meta":16,"style":16},"# .github\u002Fworkflows\u002Flighthouse-ci.yml (additional step)\n- name: Notify Slack on Failure\n  if: failure()\n  uses: slackapi\u002Fslack-github-action@v1\n  with:\n    payload: |\n      {\n        \"text\": \"Lighthouse CI FAILED on PR #${{ github.event.pull_request.number }}\",\n        \"blocks\": [\n          {\n            \"type\": \"section\",\n            \"text\": {\n              \"type\": \"mrkdwn\",\n              \"text\": \"*Performance budget exceeded*\\nPR: \u003C${{ github.event.pull_request.html_url }}|#${{ github.event.pull_request.number }}>\\nBranch: `${{ github.head_ref }}`\"\n            }\n          }\n        ]\n      }\n  env:\n    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_PERF }}\n",[2093],{"type":32,"tag":102,"props":2094,"children":2095},{"__ignoreMap":16},[2096,2104,2125,2141,2158,2170,2186,2194,2202,2210,2218,2226,2234,2242,2250,2258,2266,2274,2281,2293],{"type":32,"tag":106,"props":2097,"children":2098},{"class":108,"line":109},[2099],{"type":32,"tag":106,"props":2100,"children":2101},{"style":113},[2102],{"type":37,"value":2103},"# .github\u002Fworkflows\u002Flighthouse-ci.yml (additional step)\n",{"type":32,"tag":106,"props":2105,"children":2106},{"class":108,"line":119},[2107,2112,2116,2120],{"type":32,"tag":106,"props":2108,"children":2109},{"style":129},[2110],{"type":37,"value":2111},"- ",{"type":32,"tag":106,"props":2113,"children":2114},{"style":123},[2115],{"type":37,"value":126},{"type":32,"tag":106,"props":2117,"children":2118},{"style":129},[2119],{"type":37,"value":132},{"type":32,"tag":106,"props":2121,"children":2122},{"style":135},[2123],{"type":37,"value":2124},"Notify Slack on Failure\n",{"type":32,"tag":106,"props":2126,"children":2127},{"class":108,"line":141},[2128,2132,2136],{"type":32,"tag":106,"props":2129,"children":2130},{"style":123},[2131],{"type":37,"value":1095},{"type":32,"tag":106,"props":2133,"children":2134},{"style":129},[2135],{"type":37,"value":132},{"type":32,"tag":106,"props":2137,"children":2138},{"style":135},[2139],{"type":37,"value":2140},"failure()\n",{"type":32,"tag":106,"props":2142,"children":2143},{"class":108,"line":166},[2144,2149,2153],{"type":32,"tag":106,"props":2145,"children":2146},{"style":123},[2147],{"type":37,"value":2148},"  uses",{"type":32,"tag":106,"props":2150,"children":2151},{"style":129},[2152],{"type":37,"value":132},{"type":32,"tag":106,"props":2154,"children":2155},{"style":135},[2156],{"type":37,"value":2157},"slackapi\u002Fslack-github-action@v1\n",{"type":32,"tag":106,"props":2159,"children":2160},{"class":108,"line":180},[2161,2166],{"type":32,"tag":106,"props":2162,"children":2163},{"style":123},[2164],{"type":37,"value":2165},"  with",{"type":32,"tag":106,"props":2167,"children":2168},{"style":129},[2169],{"type":37,"value":177},{"type":32,"tag":106,"props":2171,"children":2172},{"class":108,"line":193},[2173,2178,2182],{"type":32,"tag":106,"props":2174,"children":2175},{"style":123},[2176],{"type":37,"value":2177},"    payload",{"type":32,"tag":106,"props":2179,"children":2180},{"style":129},[2181],{"type":37,"value":132},{"type":32,"tag":106,"props":2183,"children":2184},{"style":323},[2185],{"type":37,"value":326},{"type":32,"tag":106,"props":2187,"children":2188},{"class":108,"line":211},[2189],{"type":32,"tag":106,"props":2190,"children":2191},{"style":135},[2192],{"type":37,"value":2193},"      {\n",{"type":32,"tag":106,"props":2195,"children":2196},{"class":108,"line":26},[2197],{"type":32,"tag":106,"props":2198,"children":2199},{"style":135},[2200],{"type":37,"value":2201},"        \"text\": \"Lighthouse CI FAILED on PR #${{ github.event.pull_request.number }}\",\n",{"type":32,"tag":106,"props":2203,"children":2204},{"class":108,"line":246},[2205],{"type":32,"tag":106,"props":2206,"children":2207},{"style":135},[2208],{"type":37,"value":2209},"        \"blocks\": [\n",{"type":32,"tag":106,"props":2211,"children":2212},{"class":108,"line":267},[2213],{"type":32,"tag":106,"props":2214,"children":2215},{"style":135},[2216],{"type":37,"value":2217},"          {\n",{"type":32,"tag":106,"props":2219,"children":2220},{"class":108,"line":289},[2221],{"type":32,"tag":106,"props":2222,"children":2223},{"style":135},[2224],{"type":37,"value":2225},"            \"type\": \"section\",\n",{"type":32,"tag":106,"props":2227,"children":2228},{"class":108,"line":310},[2229],{"type":32,"tag":106,"props":2230,"children":2231},{"style":135},[2232],{"type":37,"value":2233},"            \"text\": {\n",{"type":32,"tag":106,"props":2235,"children":2236},{"class":108,"line":329},[2237],{"type":32,"tag":106,"props":2238,"children":2239},{"style":135},[2240],{"type":37,"value":2241},"              \"type\": \"mrkdwn\",\n",{"type":32,"tag":106,"props":2243,"children":2244},{"class":108,"line":338},[2245],{"type":32,"tag":106,"props":2246,"children":2247},{"style":135},[2248],{"type":37,"value":2249},"              \"text\": \"*Performance budget exceeded*\\nPR: \u003C${{ github.event.pull_request.html_url }}|#${{ github.event.pull_request.number }}>\\nBranch: `${{ github.head_ref }}`\"\n",{"type":32,"tag":106,"props":2251,"children":2252},{"class":108,"line":347},[2253],{"type":32,"tag":106,"props":2254,"children":2255},{"style":135},[2256],{"type":37,"value":2257},"            }\n",{"type":32,"tag":106,"props":2259,"children":2260},{"class":108,"line":360},[2261],{"type":32,"tag":106,"props":2262,"children":2263},{"style":135},[2264],{"type":37,"value":2265},"          }\n",{"type":32,"tag":106,"props":2267,"children":2268},{"class":108,"line":732},[2269],{"type":32,"tag":106,"props":2270,"children":2271},{"style":135},[2272],{"type":37,"value":2273},"        ]\n",{"type":32,"tag":106,"props":2275,"children":2276},{"class":108,"line":745},[2277],{"type":32,"tag":106,"props":2278,"children":2279},{"style":135},[2280],{"type":37,"value":722},{"type":32,"tag":106,"props":2282,"children":2283},{"class":108,"line":763},[2284,2289],{"type":32,"tag":106,"props":2285,"children":2286},{"style":123},[2287],{"type":37,"value":2288},"  env",{"type":32,"tag":106,"props":2290,"children":2291},{"style":129},[2292],{"type":37,"value":177},{"type":32,"tag":106,"props":2294,"children":2295},{"class":108,"line":772},[2296,2301,2305],{"type":32,"tag":106,"props":2297,"children":2298},{"style":123},[2299],{"type":37,"value":2300},"    SLACK_WEBHOOK_URL",{"type":32,"tag":106,"props":2302,"children":2303},{"style":129},[2304],{"type":37,"value":132},{"type":32,"tag":106,"props":2306,"children":2307},{"style":135},[2308],{"type":37,"value":2309},"${{ secrets.SLACK_WEBHOOK_PERF }}\n",{"type":32,"tag":33,"props":2311,"children":2312},{},[2313,2315,2319],{"type":37,"value":2314},"Now when an engineer opens a PR and budget is exceeded, they get both a red CI check ",{"type":32,"tag":57,"props":2316,"children":2317},{},[2318],{"type":37,"value":68},{"type":37,"value":2320}," a Slack notification—attention grabs immediately.",{"type":32,"tag":40,"props":2322,"children":2324},{"id":2323},"wiring-budgets-into-your-feature-flag-system",[2325],{"type":37,"value":2326},"Wiring Budgets into Your Feature Flag System",{"type":32,"tag":33,"props":2328,"children":2329},{},[2330],{"type":37,"value":2331},"Some features are inherently heavy: live chat widget (80 KB JS), personalization engine (150 KB + runtime), video player (200 KB). Instead of rolling out to all users and blowing the budget, test within a segment (e.g., desktop + fast connection) then gate rollout.",{"type":32,"tag":33,"props":2333,"children":2334},{},[2335],{"type":37,"value":2336},"In LaunchDarkly or your custom feature flag system:",{"type":32,"tag":95,"props":2338,"children":2340},{"className":849,"code":2339,"language":851,"meta":16,"style":16},"\u002F\u002F featureFlags.js\nimport { getConnectionSpeed } from '.\u002Futils';\n\nexport function shouldEnableChatWidget(user, vitals) {\n  const is4G = getConnectionSpeed() === '4g';\n  const goodLCP = vitals.lcp \u003C 2000;\n  \n  return is4G && goodLCP && user.tier === 'premium';\n}\n",[2341],{"type":32,"tag":102,"props":2342,"children":2343},{"__ignoreMap":16},[2344,2352,2377,2384,2424,2464,2499,2506,2551],{"type":32,"tag":106,"props":2345,"children":2346},{"class":108,"line":109},[2347],{"type":32,"tag":106,"props":2348,"children":2349},{"style":113},[2350],{"type":37,"value":2351},"\u002F\u002F featureFlags.js\n",{"type":32,"tag":106,"props":2353,"children":2354},{"class":108,"line":119},[2355,2359,2364,2368,2373],{"type":32,"tag":106,"props":2356,"children":2357},{"style":323},[2358],{"type":37,"value":871},{"type":32,"tag":106,"props":2360,"children":2361},{"style":129},[2362],{"type":37,"value":2363}," { getConnectionSpeed } ",{"type":32,"tag":106,"props":2365,"children":2366},{"style":323},[2367],{"type":37,"value":881},{"type":32,"tag":106,"props":2369,"children":2370},{"style":135},[2371],{"type":37,"value":2372}," '.\u002Futils'",{"type":32,"tag":106,"props":2374,"children":2375},{"style":129},[2376],{"type":37,"value":891},{"type":32,"tag":106,"props":2378,"children":2379},{"class":108,"line":141},[2380],{"type":32,"tag":106,"props":2381,"children":2382},{"emptyLinePlaceholder":897},[2383],{"type":37,"value":900},{"type":32,"tag":106,"props":2385,"children":2386},{"class":108,"line":166},[2387,2392,2397,2402,2406,2411,2415,2420],{"type":32,"tag":106,"props":2388,"children":2389},{"style":323},[2390],{"type":37,"value":2391},"export",{"type":32,"tag":106,"props":2393,"children":2394},{"style":323},[2395],{"type":37,"value":2396}," function",{"type":32,"tag":106,"props":2398,"children":2399},{"style":911},[2400],{"type":37,"value":2401}," shouldEnableChatWidget",{"type":32,"tag":106,"props":2403,"children":2404},{"style":129},[2405],{"type":37,"value":919},{"type":32,"tag":106,"props":2407,"children":2408},{"style":922},[2409],{"type":37,"value":2410},"user",{"type":32,"tag":106,"props":2412,"children":2413},{"style":129},[2414],{"type":37,"value":2000},{"type":32,"tag":106,"props":2416,"children":2417},{"style":922},[2418],{"type":37,"value":2419},"vitals",{"type":32,"tag":106,"props":2421,"children":2422},{"style":129},[2423],{"type":37,"value":930},{"type":32,"tag":106,"props":2425,"children":2426},{"class":108,"line":180},[2427,2431,2436,2440,2445,2450,2455,2460],{"type":32,"tag":106,"props":2428,"children":2429},{"style":323},[2430],{"type":37,"value":938},{"type":32,"tag":106,"props":2432,"children":2433},{"style":145},[2434],{"type":37,"value":2435}," is4G",{"type":32,"tag":106,"props":2437,"children":2438},{"style":323},[2439],{"type":37,"value":948},{"type":32,"tag":106,"props":2441,"children":2442},{"style":911},[2443],{"type":37,"value":2444}," getConnectionSpeed",{"type":32,"tag":106,"props":2446,"children":2447},{"style":129},[2448],{"type":37,"value":2449},"() ",{"type":32,"tag":106,"props":2451,"children":2452},{"style":323},[2453],{"type":37,"value":2454},"===",{"type":32,"tag":106,"props":2456,"children":2457},{"style":135},[2458],{"type":37,"value":2459}," '4g'",{"type":32,"tag":106,"props":2461,"children":2462},{"style":129},[2463],{"type":37,"value":891},{"type":32,"tag":106,"props":2465,"children":2466},{"class":108,"line":193},[2467,2471,2476,2480,2485,2490,2495],{"type":32,"tag":106,"props":2468,"children":2469},{"style":323},[2470],{"type":37,"value":938},{"type":32,"tag":106,"props":2472,"children":2473},{"style":145},[2474],{"type":37,"value":2475}," goodLCP",{"type":32,"tag":106,"props":2477,"children":2478},{"style":323},[2479],{"type":37,"value":948},{"type":32,"tag":106,"props":2481,"children":2482},{"style":129},[2483],{"type":37,"value":2484}," vitals.lcp ",{"type":32,"tag":106,"props":2486,"children":2487},{"style":323},[2488],{"type":37,"value":2489},"\u003C",{"type":32,"tag":106,"props":2491,"children":2492},{"style":145},[2493],{"type":37,"value":2494}," 2000",{"type":32,"tag":106,"props":2496,"children":2497},{"style":129},[2498],{"type":37,"value":891},{"type":32,"tag":106,"props":2500,"children":2501},{"class":108,"line":211},[2502],{"type":32,"tag":106,"props":2503,"children":2504},{"style":129},[2505],{"type":37,"value":1087},{"type":32,"tag":106,"props":2507,"children":2508},{"class":108,"line":26},[2509,2514,2519,2524,2529,2533,2538,2542,2547],{"type":32,"tag":106,"props":2510,"children":2511},{"style":323},[2512],{"type":37,"value":2513},"  return",{"type":32,"tag":106,"props":2515,"children":2516},{"style":129},[2517],{"type":37,"value":2518}," is4G ",{"type":32,"tag":106,"props":2520,"children":2521},{"style":323},[2522],{"type":37,"value":2523},"&&",{"type":32,"tag":106,"props":2525,"children":2526},{"style":129},[2527],{"type":37,"value":2528}," goodLCP ",{"type":32,"tag":106,"props":2530,"children":2531},{"style":323},[2532],{"type":37,"value":2523},{"type":32,"tag":106,"props":2534,"children":2535},{"style":129},[2536],{"type":37,"value":2537}," user.tier ",{"type":32,"tag":106,"props":2539,"children":2540},{"style":323},[2541],{"type":37,"value":2454},{"type":32,"tag":106,"props":2543,"children":2544},{"style":135},[2545],{"type":37,"value":2546}," 'premium'",{"type":32,"tag":106,"props":2548,"children":2549},{"style":129},[2550],{"type":37,"value":891},{"type":32,"tag":106,"props":2552,"children":2553},{"class":108,"line":246},[2554],{"type":32,"tag":106,"props":2555,"children":2556},{"style":129},[2557],{"type":37,"value":787},{"type":32,"tag":33,"props":2559,"children":2560},{},[2561],{"type":37,"value":2562},"This way, \"let's add a chat widget\" doesn't mean \"all users' LCP jumps 300 ms\"—it rolls out only to qualifying segments, you collect RUM, measure CVR impact, then decide on full rollout or rollback. When discussing the tradeoff with product and marketing, you show numbers: \"Chat widget increases CVR by 0.4% but pushes LCP to 2.8s—net +$8K\u002Fmonth but UX dips. Next steps?\"",{"type":32,"tag":40,"props":2564,"children":2566},{"id":2565},"enforcing-performance-budgets-in-headless-commerce",[2567],{"type":37,"value":2568},"Enforcing Performance Budgets in Headless Commerce",{"type":32,"tag":33,"props":2570,"children":2571},{},[2572],{"type":37,"value":2573},"Headless commerce (e.g., Shopify Hydrogen, Next.js + Shopify API) typically beats Liquid themes because you control client-side JavaScript and can do selective hydration. But control in your hands means regression risk in your hands too—a single npm package bump could add 70 KB to the bundle.",{"type":32,"tag":33,"props":2575,"children":2576},{},[2577,2579,2586],{"type":37,"value":2578},"Within Roibase's ",{"type":32,"tag":794,"props":2580,"children":2583},{"href":2581,"rel":2582},"https:\u002F\u002Fwww.roibase.com.tr\u002Fen\u002Fshopify",[798],[2584],{"type":37,"value":2585},"Shopify services",{"type":37,"value":2587},", we apply this workflow for headless migrations:",{"type":32,"tag":2589,"props":2590,"children":2591},"ol",{},[2592,2604,2621,2631,2641],{"type":32,"tag":2593,"props":2594,"children":2595},"li",{},[2596,2602],{"type":32,"tag":2597,"props":2598,"children":2599},"strong",{},[2600],{"type":37,"value":2601},"Establish baseline:",{"type":37,"value":2603}," Collect 30 days of RUM data from the existing Liquid theme. Record median LCP, TBT, CLS.",{"type":32,"tag":2593,"props":2605,"children":2606},{},[2607,2612,2614,2619],{"type":32,"tag":2597,"props":2608,"children":2609},{},[2610],{"type":37,"value":2611},"Gate headless prototype with Lighthouse CI:",{"type":37,"value":2613}," Every commit must meet ",{"type":32,"tag":102,"props":2615,"children":2617},{"className":2616},[],[2618],{"type":37,"value":386},{"type":37,"value":2620}," budget. First deploy must be 20% faster than baseline.",{"type":32,"tag":2593,"props":2622,"children":2623},{},[2624,2629],{"type":32,"tag":2597,"props":2625,"children":2626},{},[2627],{"type":37,"value":2628},"Production RUM comparison:",{"type":37,"value":2630}," For the first 7 days, A\u002FB test old vs. new (e.g., 10% traffic to headless), compare RUM metrics.",{"type":32,"tag":2593,"props":2632,"children":2633},{},[2634,2639],{"type":32,"tag":2597,"props":2635,"children":2636},{},[2637],{"type":37,"value":2638},"Set regression alarms:",{"type":37,"value":2640}," Post-migration, pin DataDog monitors: LCP ≤ 2.5s, TBT ≤ 200ms.",{"type":32,"tag":2593,"props":2642,"children":2643},{},[2644,2649],{"type":32,"tag":2597,"props":2645,"children":2646},{},[2647],{"type":37,"value":2648},"Quarterly audits:",{"type":37,"value":2650}," Every quarter, audit bundle size, prune unused dependencies.",{"type":32,"tag":33,"props":2652,"children":2653},{},[2654],{"type":37,"value":2655},"One e-commerce client saw: Liquid LCP 4.1s → Hydrogen LCP 1.8s, CVR 2.3% → 3.1% (+35%). Six months later, new features pushed LCP to 2.9s and CVR back to 2.9%—budget enforcement had lapsed. After re-activating, 2 weeks brought it back to 2.1s.",{"type":32,"tag":40,"props":2657,"children":2659},{"id":2658},"the-tradeoff-speed-vs-rich-experience",[2660],{"type":37,"value":2661},"The Tradeoff: Speed vs. Rich Experience",{"type":32,"tag":33,"props":2663,"children":2664},{},[2665],{"type":37,"value":2666},"Sometimes marketing asks: \"The page is fast but sparse—let's add more content.\" This creates a speed-vs-engagement tradeoff. Use numbers to decide: \"Adding a carousel raises LCP 300ms, engagement +12%, CVR unchanged—net positive?\"",{"type":32,"tag":33,"props":2668,"children":2669},{},[2670],{"type":37,"value":2671},"Framework example:",{"type":32,"tag":2673,"props":2674,"children":2675},"table",{},[2676,2710],{"type":32,"tag":2677,"props":2678,"children":2679},"thead",{},[2680],{"type":32,"tag":2681,"props":2682,"children":2683},"tr",{},[2684,2690,2695,2700,2705],{"type":32,"tag":2685,"props":2686,"children":2687},"th",{},[2688],{"type":37,"value":2689},"Feature",{"type":32,"tag":2685,"props":2691,"children":2692},{},[2693],{"type":37,"value":2694},"LCP Delta (ms)",{"type":32,"tag":2685,"props":2696,"children":2697},{},[2698],{"type":37,"value":2699},"Engagement Delta (%)",{"type":32,"tag":2685,"props":2701,"children":2702},{},[2703],{"type":37,"value":2704},"CVR Delta (%)",{"type":32,"tag":2685,"props":2706,"children":2707},{},[2708],{"type":37,"value":2709},"Net Revenue Impact",{"type":32,"tag":2711,"props":2712,"children":2713},"tbody",{},[2714,2743,2771,2799],{"type":32,"tag":2681,"props":2715,"children":2716},{},[2717,2723,2728,2733,2738],{"type":32,"tag":2718,"props":2719,"children":2720},"td",{},[2721],{"type":37,"value":2722},"Hero carousel",{"type":32,"tag":2718,"props":2724,"children":2725},{},[2726],{"type":37,"value":2727},"+320",{"type":32,"tag":2718,"props":2729,"children":2730},{},[2731],{"type":37,"value":2732},"+12",{"type":32,"tag":2718,"props":2734,"children":2735},{},[2736],{"type":37,"value":2737},"0",{"type":32,"tag":2718,"props":2739,"children":2740},{},[2741],{"type":37,"value":2742},"Neutral",{"type":32,"tag":2681,"props":2744,"children":2745},{},[2746,2751,2756,2761,2766],{"type":32,"tag":2718,"props":2747,"children":2748},{},[2749],{"type":37,"value":2750},"Product video",{"type":32,"tag":2718,"props":2752,"children":2753},{},[2754],{"type":37,"value":2755},"+180",{"type":32,"tag":2718,"props":2757,"children":2758},{},[2759],{"type":37,"value":2760},"+8",{"type":32,"tag":2718,"props":2762,"children":2763},{},[2764],{"type":37,"value":2765},"+0.3",{"type":32,"tag":2718,"props":2767,"children":2768},{},[2769],{"type":37,"value":2770},"+$12K\u002Fmo",{"type":32,"tag":2681,"props":2772,"children":2773},{},[2774,2779,2784,2789,2794],{"type":32,"tag":2718,"props":2775,"children":2776},{},[2777],{"type":37,"value":2778},"Live chat widget",{"type":32,"tag":2718,"props":2780,"children":2781},{},[2782],{"type":37,"value":2783},"+280",{"type":32,"tag":2718,"props":2785,"children":2786},{},[2787],{"type":37,"value":2788},"+4",{"type":32,"tag":2718,"props":2790,"children":2791},{},[2792],{"type":37,"value":2793},"+0.4",{"type":32,"tag":2718,"props":2795,"children":2796},{},[2797],{"type":37,"value":2798},"+$18K\u002Fmo",{"type":32,"tag":2681,"props":2800,"children":2801},{},[2802,2807,2812,2817,2822],{"type":32,"tag":2718,"props":2803,"children":2804},{},[2805],{"type":37,"value":2806},"Related products (lazy)",{"type":32,"tag":2718,"props":2808,"children":2809},{},[2810],{"type":37,"value":2811},"+40",{"type":32,"tag":2718,"props":2813,"children":2814},{},[2815],{"type":37,"value":2816},"+6",{"type":32,"tag":2718,"props":2818,"children":2819},{},[2820],{"type":37,"value":2821},"+0.2",{"type":32,"tag":2718,"props":2823,"children":2824},{},[2825],{"type":37,"value":2826},"+$9K\u002Fmo",{"type":32,"tag":33,"props":2828,"children":2829},{},[2830],{"type":37,"value":2831},"Share this table with product and marketing. The decision—\"video and chat ship, carousel shelved\"—becomes self-evident.",{"type":32,"tag":2833,"props":2834,"children":2835},"hr",{},[],{"type":32,"tag":33,"props":2837,"children":2838},{},[2839,2841,2846],{"type":37,"value":2840},"Linking performance budgets to your decision mechanism transforms \"let's make pages fast\" abstraction into \"every commit that raises LCP 100ms fails CI, every regression hits Slack in \u003C10min, every feature decision uses CVR and LCP delta data\" concreteness. Lighthouse CI, RUM, alarm systems, and feature flag integration are the building blocks. Now: create ",{"type":32,"tag":102,"props":2842,"children":2844},{"className":2843},[],[2845],{"type":37,"value":386},{"type":37,"value":2847},", add it to CI, and set up your first regression alarm. When the first budget fail triggers, you'll realize how late you've been.",{"type":32,"tag":2849,"props":2850,"children":2851},"style",{},[2852],{"type":37,"value":2853},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":16,"searchDepth":141,"depth":141,"links":2855},[2856,2857,2860,2861,2865,2866,2867],{"id":42,"depth":119,"text":45},{"id":85,"depth":119,"text":88,"children":2858},[2859],{"id":807,"depth":141,"text":810},{"id":825,"depth":119,"text":828},{"id":1861,"depth":119,"text":1864,"children":2862},[2863,2864],{"id":1872,"depth":141,"text":1875},{"id":2080,"depth":141,"text":2083},{"id":2323,"depth":119,"text":2326},{"id":2565,"depth":119,"text":2568},{"id":2658,"depth":119,"text":2661},"markdown","content:en:tech:web-performance-budgets-decision-integration.md","content","en\u002Ftech\u002Fweb-performance-budgets-decision-integration.md","en\u002Ftech\u002Fweb-performance-budgets-decision-integration","md",1783289073286]