[{"data":1,"prerenderedAt":2670},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Fweb-performance-budgets-entscheidungsmechanismus":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":6,"_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":2664,"_id":2665,"_source":2666,"_file":2667,"_stem":2668,"_extension":2669},"tech",false,"","Web-Performance-Budgets: In den Entscheidungsmechanismus Integrieren","Lighthouse CI, RUM und Performance-Regression-Alarme ins System integrieren. Die Methodik hinter der Senkung von TBT von 2190ms auf 200ms.","2026-06-23",[21,22,23,24,25],"web-performance","lighthouse-ci","rum","core-web-vitals","performance-budget",9,"Roibase",{"type":29,"children":30,"toc":2651},"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,2315,2321,2326,2331,2552,2557,2563,2568,2582,2645],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","2026 ist Web Performance nicht mehr „schnelle Seiten bauen\", sondern eine kontinuierliche Engineering-Disziplin mit Entscheidungsfindung. Sie deployen einen E-Commerce-Shop, der Lighthouse-Score fällt von 92 auf 68, die Konversionsrate sinkt von 3,2 % auf 2,7 % — aber niemand bemerkt es, weil das Monitoring auf „Server down?\" beschränkt ist. Ein Performance Budget in den Entscheidungsmechanismus zu integrieren bedeutet: Regressionsfehler vor dem Deploy fangen, jeden Commit gegen LCP\u002FTBT\u002FCLS-Schwellwerte bewerten und RUM-Daten in die Attribution-Pipeline speisen. In diesem Artikel zeigen wir, wie Sie Lighthouse CI, synthetisches Monitoring, RUM und Alarme zu einem einheitlichen System verbinden.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"was-ist-ein-performance-budget-und-warum-sollte-ein-system-es-messen-nicht-eine-person",[44],{"type":37,"value":45},"Was ist ein Performance Budget und Warum Sollte ein System Es Messen, Nicht Eine Person",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Ein Performance Budget definiert numerische Schwellwerte für Ressourcenlimits pro Seite: maximale JavaScript-Bundle-Größe (z. B. 200 KB gzip), maximale TBT (Total Blocking Time, 200 ms), maximale LCP (Largest Contentful Paint, 2,5 Sekunden). Diese Zahlen sind nicht willkürlich — Googles Core Web Vitals Schwellen definieren das „gut\"-Band, aber Sie müssen strengere Grenzen aus Ihrem eigenen Conversion-Funnel-Daten ableiten.",{"type":32,"tag":33,"props":52,"children":53},{},[54,56,62,64,69,71,76],{"type":37,"value":55},"Das klassische Szenario „Entwicklung Lighthouse 95, Produktion 72\" entsteht aus: synthetischer Test unter Laborbedingungen (Fast 4G, leerer Cache, einzelnes Seitenload) versus RUM mit realem 3G, volle Caches, Navigationspfaden. Der Unterschied ist normal, beide müssen aber überwacht werden. Lighthouse CI fängt Bundle-Size-Regressionen bei jedem PR; RUM zeigt die Production-Realität „22 % der Mobiltelefonnutzer haben LCP >4 Sekunden\". Wenn Sie das Budget nur als „Score >75\" definieren, können Sie dem Bundle 100 KB hinzufügen und den Score von 74 auf 76 heben — die Seite wird schwerer, aber der Score ist grün. Deshalb müssen Sie das Budget ",{"type":32,"tag":57,"props":58,"children":59},"em",{},[60],{"type":37,"value":61},"metrikbasiert",{"type":37,"value":63}," (LCP, TBT, CLS) ",{"type":32,"tag":57,"props":65,"children":66},{},[67],{"type":37,"value":68},"und",{"type":37,"value":70}," ",{"type":32,"tag":57,"props":72,"children":73},{},[74],{"type":37,"value":75},"ressourcenbasiert",{"type":37,"value":77}," (JS, CSS, Bilder in MB) doppelt führen.",{"type":32,"tag":33,"props":79,"children":80},{},[81],{"type":37,"value":82},"Ein anderer Punkt: Budget-Enforcement durch menschliche Review ist nicht skalierbar. „Wir prüfen Performance im Code Review\" funktioniert bei 20 PRs\u002FTag nicht. Das System muss messen, das System muss scheitern, Menschen müssen nur das „Warum\" untersuchen.",{"type":32,"tag":40,"props":84,"children":86},{"id":85},"lighthouse-ci-für-commit-basierte-performance-gating",[87],{"type":37,"value":88},"Lighthouse CI für Commit-basierte Performance-Gating",{"type":32,"tag":33,"props":90,"children":91},{},[92],{"type":37,"value":93},"Lighthouse CI führt bei jedem Commit oder PR automatisch einen Lighthouse-Audit durch und meldet Ergebnisse an GitHub oder ein internes Dashboard. Integrieren Sie es so in Ihre CI-Pipeline:",{"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,245,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":225},{"class":108,"line":224},8,[226,231,236,240],{"type":32,"tag":106,"props":227,"children":228},{"style":129},[229],{"type":37,"value":230},"      - ",{"type":32,"tag":106,"props":232,"children":233},{"style":123},[234],{"type":37,"value":235},"uses",{"type":32,"tag":106,"props":237,"children":238},{"style":129},[239],{"type":37,"value":132},{"type":32,"tag":106,"props":241,"children":242},{"style":135},[243],{"type":37,"value":244},"actions\u002Fcheckout@v3\n",{"type":32,"tag":106,"props":246,"children":247},{"class":108,"line":26},[248,252,256,260],{"type":32,"tag":106,"props":249,"children":250},{"style":129},[251],{"type":37,"value":230},{"type":32,"tag":106,"props":253,"children":254},{"style":123},[255],{"type":37,"value":235},{"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":230},{"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":230},{"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},"In der ",{"type":32,"tag":102,"props":382,"children":384},{"className":383},[],[385],{"type":37,"value":386},".lighthouserc.json",{"type":37,"value":388},"-Konfiguration definieren Sie die Budgets:",{"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":224},[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":26},[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},"Mit diesem Setup: Wenn ein PR dem Branch main 50 KB zusätzliche JS hinzufügt und TBT 200 ms überschreitet, schlägt die CI fehl und das Merge wird blockiert. Bei Roibase haben wir diesen Ansatz bei Kunden, die zur ",{"type":32,"tag":794,"props":795,"children":799},"a",{"href":796,"rel":797},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fheadless",[798],"nofollow",[800],{"type":37,"value":801},"Headless-Architektur",{"type":37,"value":803}," übergingen, verwendet — jede Bibliothekserweiterung wurde gegen das Budget getestet — und senkten die durchschnittliche TBT von 2190 ms auf 200 ms.",{"type":32,"tag":805,"props":806,"children":808},"h3",{"id":807},"lighthouse-ci-limitierungen-und-architekturentscheidungen",[809],{"type":37,"value":810},"Lighthouse-CI-Limitierungen und Architekturentscheidungen",{"type":32,"tag":33,"props":812,"children":813},{},[814,816,821],{"type":37,"value":815},"Lighthouse CI führt synthetische Tests durch: feste Bandbreite (Moto G4, Slow-4G-Emulation), feste CPU-Drosselung (4x Slowdown), einzelne Seite. Ein echter Nutzer ist auf einem anderen Gerät, folgt anderen Pfaden (Produktseite → Warenkorb → Checkout), sieht A\u002FB-Test-Varianten. Deshalb positionieren Sie Lighthouse CI als ",{"type":32,"tag":57,"props":817,"children":818},{},[819],{"type":37,"value":820},"minimale Schwelle",{"type":37,"value":822}," — wenn es vorbeigeht, kann es deployt werden, aber das bedeutet nicht 100 Punkte in Production. Um Production-Realität zu messen, brauchen Sie RUM.",{"type":32,"tag":40,"props":824,"children":826},{"id":825},"rum-real-user-monitoring-in-production-reality-für-entscheidungsdaten-umwandeln",[827],{"type":37,"value":828},"RUM (Real User Monitoring) in Production-Reality für Entscheidungsdaten Umwandeln",{"type":32,"tag":33,"props":830,"children":831},{},[832],{"type":37,"value":833},"RUM sammelt Metriken von echten Nutzern: Navigation Timing API, PerformanceObserver, CrUX (Chrome User Experience Report). Das können ein Vendor sein (Speedcurve, Sentry Performance, Cloudflare Web Analytics) oder Ihr eigenes Logging-Stack (web-vitals-Bibliothek + BigQuery).",{"type":32,"tag":33,"props":835,"children":836},{},[837,839,845],{"type":37,"value":838},"Eine minimale ",{"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":224},[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":26},[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},"Diese Daten in BigQuery hochladen, dann mit dbt mit Marketing-Attribution-Daten zusammenführen:",{"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":224},[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":26},[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},"Diese Tabelle zeigt Ihnen konkrete Erkenntnisse: „Bei LCP unter 2,5 Sekunden CVR 3,4 %, darüber 2,1 %\". Wenn Sie das der CMO berichten, wird aus dem abstrakten Wunsch „Lassen Sie uns Performance optimieren\" die Konkretheit „Wenn wir LCP unter 2,5 Sekunden bringen, Zusatzumsatz von 18K$\u002FMonat\".",{"type":32,"tag":40,"props":1860,"children":1862},{"id":1861},"regression-alarme-an-slackpagerduty-integration-koppeln",[1863],{"type":37,"value":1864},"Regression-Alarme an Slack\u002FPagerDuty Integration Koppeln",{"type":32,"tag":33,"props":1866,"children":1867},{},[1868],{"type":37,"value":1869},"Nach RUM-Datenerfassung müssen Sie Regressions-Erkennung mit Schwellwert-Alarmen durchführen. Wenn Ihr 7-Tage-Durchschnitt LCP 2,2 Sekunden ist und heute 3,1 Sekunden erreicht, ist das ein Deploy-Regressionsfehler oder CDN-Problem. Das mit manuellem Dashboard-Monitoring zu finden ist falsch — automatische Auslösung ist richtig.",{"type":32,"tag":805,"props":1871,"children":1873},{"id":1872},"datadog-mit-metrik-basiertem-alerting",[1874],{"type":37,"value":1875},"DataDog mit Metrik-basiertem Alerting",{"type":32,"tag":33,"props":1877,"children":1878},{},[1879],{"type":37,"value":1880},"DataDog parsed RUM-Metriken automatisch und führt Anomalieerkennung durch. Eine Monitor-Definition:",{"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 in letzter 1 Stunde über 2500ms. Letzter 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 in letzter 1 Stunde über 2500ms. Letzter 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":224},[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":26},[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},"Wenn dieser Alarm auslöst, landet er im Slack-Kanal, PagerDuty öffnet ein Incident und der On-Call-Developer wird benachrichtigt. Mit der Deploy-ID in der Nachricht (aus CI-Pipeline-Tag) finden Sie die Regressions-Ursache in 30 Sekunden.",{"type":32,"tag":805,"props":2079,"children":2081},{"id":2080},"lighthouse-ci-threshold-fehler-auch-als-alarm-weiterleiten",[2082],{"type":37,"value":2083},"Lighthouse-CI Threshold-Fehler auch als Alarm Weiterleiten",{"type":32,"tag":33,"props":2085,"children":2086},{},[2087],{"type":37,"value":2088},"Einige Teams leiten Lighthouse-CI-Fehler nicht nur als PR-Block weiter, sondern senden auch Slack-Meldungen:",{"type":32,"tag":95,"props":2090,"children":2092},{"className":97,"code":2091,"language":99,"meta":16,"style":16},"# .github\u002Fworkflows\u002Flighthouse-ci.yml (zusätzlicher 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 überschritten*\\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 (zusätzlicher 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":224},[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":26},[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 überschritten*\\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],{"type":37,"value":2314},"So bemerkt der Engineer sofort bei PR-Erstellung und Budget-Überschreitung — rotes Häkchen in CI und Slack-Meldung lenken Aufmerksamkeit sofort.",{"type":32,"tag":40,"props":2316,"children":2318},{"id":2317},"budgets-in-feature-flag-system-integrieren",[2319],{"type":37,"value":2320},"Budgets in Feature-Flag-System Integrieren",{"type":32,"tag":33,"props":2322,"children":2323},{},[2324],{"type":37,"value":2325},"Manche Features sind inhärent schwer: Live-Chat-Widget (80 KB JS), Personalisierungs-Engine (150 KB + Runtime-Kosten), Video-Player (200 KB). Statt sie allen Nutzern freizuschalten, können Sie das Performance-Budget so respektieren, dass Sie nur auf Segmenten testen (z. B. Desktop + schnelle Verbindung), schrittweise ausrollen.",{"type":32,"tag":33,"props":2327,"children":2328},{},[2329],{"type":37,"value":2330},"Sie können in LaunchDarkly oder Ihrem Feature-Flag-System Regeln definieren:",{"type":32,"tag":95,"props":2332,"children":2334},{"className":849,"code":2333,"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",[2335],{"type":32,"tag":102,"props":2336,"children":2337},{"__ignoreMap":16},[2338,2346,2371,2378,2418,2458,2493,2500,2545],{"type":32,"tag":106,"props":2339,"children":2340},{"class":108,"line":109},[2341],{"type":32,"tag":106,"props":2342,"children":2343},{"style":113},[2344],{"type":37,"value":2345},"\u002F\u002F featureFlags.js\n",{"type":32,"tag":106,"props":2347,"children":2348},{"class":108,"line":119},[2349,2353,2358,2362,2367],{"type":32,"tag":106,"props":2350,"children":2351},{"style":323},[2352],{"type":37,"value":871},{"type":32,"tag":106,"props":2354,"children":2355},{"style":129},[2356],{"type":37,"value":2357}," { getConnectionSpeed } ",{"type":32,"tag":106,"props":2359,"children":2360},{"style":323},[2361],{"type":37,"value":881},{"type":32,"tag":106,"props":2363,"children":2364},{"style":135},[2365],{"type":37,"value":2366}," '.\u002Futils'",{"type":32,"tag":106,"props":2368,"children":2369},{"style":129},[2370],{"type":37,"value":891},{"type":32,"tag":106,"props":2372,"children":2373},{"class":108,"line":141},[2374],{"type":32,"tag":106,"props":2375,"children":2376},{"emptyLinePlaceholder":897},[2377],{"type":37,"value":900},{"type":32,"tag":106,"props":2379,"children":2380},{"class":108,"line":166},[2381,2386,2391,2396,2400,2405,2409,2414],{"type":32,"tag":106,"props":2382,"children":2383},{"style":323},[2384],{"type":37,"value":2385},"export",{"type":32,"tag":106,"props":2387,"children":2388},{"style":323},[2389],{"type":37,"value":2390}," function",{"type":32,"tag":106,"props":2392,"children":2393},{"style":911},[2394],{"type":37,"value":2395}," shouldEnableChatWidget",{"type":32,"tag":106,"props":2397,"children":2398},{"style":129},[2399],{"type":37,"value":919},{"type":32,"tag":106,"props":2401,"children":2402},{"style":922},[2403],{"type":37,"value":2404},"user",{"type":32,"tag":106,"props":2406,"children":2407},{"style":129},[2408],{"type":37,"value":2000},{"type":32,"tag":106,"props":2410,"children":2411},{"style":922},[2412],{"type":37,"value":2413},"vitals",{"type":32,"tag":106,"props":2415,"children":2416},{"style":129},[2417],{"type":37,"value":930},{"type":32,"tag":106,"props":2419,"children":2420},{"class":108,"line":180},[2421,2425,2430,2434,2439,2444,2449,2454],{"type":32,"tag":106,"props":2422,"children":2423},{"style":323},[2424],{"type":37,"value":938},{"type":32,"tag":106,"props":2426,"children":2427},{"style":145},[2428],{"type":37,"value":2429}," is4G",{"type":32,"tag":106,"props":2431,"children":2432},{"style":323},[2433],{"type":37,"value":948},{"type":32,"tag":106,"props":2435,"children":2436},{"style":911},[2437],{"type":37,"value":2438}," getConnectionSpeed",{"type":32,"tag":106,"props":2440,"children":2441},{"style":129},[2442],{"type":37,"value":2443},"() ",{"type":32,"tag":106,"props":2445,"children":2446},{"style":323},[2447],{"type":37,"value":2448},"===",{"type":32,"tag":106,"props":2450,"children":2451},{"style":135},[2452],{"type":37,"value":2453}," '4g'",{"type":32,"tag":106,"props":2455,"children":2456},{"style":129},[2457],{"type":37,"value":891},{"type":32,"tag":106,"props":2459,"children":2460},{"class":108,"line":193},[2461,2465,2470,2474,2479,2484,2489],{"type":32,"tag":106,"props":2462,"children":2463},{"style":323},[2464],{"type":37,"value":938},{"type":32,"tag":106,"props":2466,"children":2467},{"style":145},[2468],{"type":37,"value":2469}," goodLCP",{"type":32,"tag":106,"props":2471,"children":2472},{"style":323},[2473],{"type":37,"value":948},{"type":32,"tag":106,"props":2475,"children":2476},{"style":129},[2477],{"type":37,"value":2478}," vitals.lcp ",{"type":32,"tag":106,"props":2480,"children":2481},{"style":323},[2482],{"type":37,"value":2483},"\u003C",{"type":32,"tag":106,"props":2485,"children":2486},{"style":145},[2487],{"type":37,"value":2488}," 2000",{"type":32,"tag":106,"props":2490,"children":2491},{"style":129},[2492],{"type":37,"value":891},{"type":32,"tag":106,"props":2494,"children":2495},{"class":108,"line":211},[2496],{"type":32,"tag":106,"props":2497,"children":2498},{"style":129},[2499],{"type":37,"value":1087},{"type":32,"tag":106,"props":2501,"children":2502},{"class":108,"line":224},[2503,2508,2513,2518,2523,2527,2532,2536,2541],{"type":32,"tag":106,"props":2504,"children":2505},{"style":323},[2506],{"type":37,"value":2507},"  return",{"type":32,"tag":106,"props":2509,"children":2510},{"style":129},[2511],{"type":37,"value":2512}," is4G ",{"type":32,"tag":106,"props":2514,"children":2515},{"style":323},[2516],{"type":37,"value":2517},"&&",{"type":32,"tag":106,"props":2519,"children":2520},{"style":129},[2521],{"type":37,"value":2522}," goodLCP ",{"type":32,"tag":106,"props":2524,"children":2525},{"style":323},[2526],{"type":37,"value":2517},{"type":32,"tag":106,"props":2528,"children":2529},{"style":129},[2530],{"type":37,"value":2531}," user.tier ",{"type":32,"tag":106,"props":2533,"children":2534},{"style":323},[2535],{"type":37,"value":2448},{"type":32,"tag":106,"props":2537,"children":2538},{"style":135},[2539],{"type":37,"value":2540}," 'premium'",{"type":32,"tag":106,"props":2542,"children":2543},{"style":129},[2544],{"type":37,"value":891},{"type":32,"tag":106,"props":2546,"children":2547},{"class":108,"line":26},[2548],{"type":32,"tag":106,"props":2549,"children":2550},{"style":129},[2551],{"type":37,"value":787},{"type":32,"tag":33,"props":2553,"children":2554},{},[2555],{"type":37,"value":2556},"Mit diesem Ansatz trägt die Entscheidung „Chat-Widget hinzufügen\" nicht das Risiko „alle Nutzer-LCP um 300 ms erhöhen\" — es wird nur auf qualifizierten Segmenten aktiviert, RUM-Daten erfasst, CVR-Effekt gemessen, dann Full-Rollout oder Rollback. Bei dieser Trade-Off-Entscheidung mit Marketing und Product Team können Sie es zahlengestützt diskutieren: „Chat-Widget erhöht CVR um 0,4 %, aber LCP geht auf 2,8 Sekunden — Nettogewinn +8K$\u002FMonat, aber Nutzererlebnis sinkt. Wie gehen wir vor?\"",{"type":32,"tag":40,"props":2558,"children":2560},{"id":2559},"performance-budget-in-headless-commerce-durchsetzen",[2561],{"type":37,"value":2562},"Performance-Budget in Headless Commerce Durchsetzen",{"type":32,"tag":33,"props":2564,"children":2565},{},[2566],{"type":37,"value":2567},"Headless-Commerce-Architektur (z. B. Shopify Hydrogen, Next.js + Shopify API) ist typisch schneller als Liquid-Theme, weil Sie Client-Side-JavaScript kontrollieren und selective hydration machen können. Aber mit Kontrolle kommt Regressions-Risiko — ein npm-Package-Update kann 70 KB zum Bundle hinzufügen.",{"type":32,"tag":33,"props":2569,"children":2570},{},[2571,2573,2580],{"type":37,"value":2572},"Im Rahmen von ",{"type":32,"tag":794,"props":2574,"children":2577},{"href":2575,"rel":2576},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fshopify",[798],[2578],{"type":37,"value":2579},"Shopify-Partner-Services",{"type":37,"value":2581}," bei Headless-Migrationen wenden wir diesen Workflow an:",{"type":32,"tag":2583,"props":2584,"children":2585},"ol",{},[2586,2598,2615,2625,2635],{"type":32,"tag":2587,"props":2588,"children":2589},"li",{},[2590,2596],{"type":32,"tag":2591,"props":2592,"children":2593},"strong",{},[2594],{"type":37,"value":2595},"Baseline etablieren:",{"type":37,"value":2597}," RUM-Daten vom existierenden Liquid-Theme erfassen (30 Tage). Median LCP, TBT, CLS speichern.",{"type":32,"tag":2587,"props":2599,"children":2600},{},[2601,2606,2608,2613],{"type":32,"tag":2591,"props":2602,"children":2603},{},[2604],{"type":37,"value":2605},"Headless-Prototyp mit Lighthouse CI gaten:",{"type":37,"value":2607}," Jeder Commit respektiert ",{"type":32,"tag":102,"props":2609,"children":2611},{"className":2610},[],[2612],{"type":37,"value":386},{"type":37,"value":2614},"-Budget. Erstes Deploy muss 20 % besser als Baseline sein.",{"type":32,"tag":2587,"props":2616,"children":2617},{},[2618,2623],{"type":32,"tag":2591,"props":2619,"children":2620},{},[2621],{"type":37,"value":2622},"RUM-Vergleich in Production:",{"type":37,"value":2624}," Erste 7 Tage A\u002FB-Test alt\u002Fneu (z. B. 10 % Traffic zu neuer Headless), RUM-Metriken vergleichen.",{"type":32,"tag":2587,"props":2626,"children":2627},{},[2628,2633],{"type":32,"tag":2591,"props":2629,"children":2630},{},[2631],{"type":37,"value":2632},"Regressions-Alarme einrichten:",{"type":37,"value":2634}," Nach Migration zu neuer Architektur LCP 2,5s, TBT 200ms Schwellen in DataDog Monitor.",{"type":32,"tag":2587,"props":2636,"children":2637},{},[2638,2643],{"type":32,"tag":2591,"props":2639,"children":2640},{},[2641],{"type":37,"value":2642},"Vierteljährliche Bewertung:",{"type":37,"value":2644}," Alle 3 Monate Bundle-Size-Audit, ungenu",{"type":32,"tag":2646,"props":2647,"children":2648},"style",{},[2649],{"type":37,"value":2650},"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":2652},[2653,2654,2657,2658,2662,2663],{"id":42,"depth":119,"text":45},{"id":85,"depth":119,"text":88,"children":2655},[2656],{"id":807,"depth":141,"text":810},{"id":825,"depth":119,"text":828},{"id":1861,"depth":119,"text":1864,"children":2659},[2660,2661],{"id":1872,"depth":141,"text":1875},{"id":2080,"depth":141,"text":2083},{"id":2317,"depth":119,"text":2320},{"id":2559,"depth":119,"text":2562},"markdown","content:de:tech:web-performance-budgets-entscheidungsmechanismus.md","content","de\u002Ftech\u002Fweb-performance-budgets-entscheidungsmechanismus.md","de\u002Ftech\u002Fweb-performance-budgets-entscheidungsmechanismus","md",1783289075640]