[{"data":1,"prerenderedAt":2687},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fit\u002Ftech\u002Fbudget-performance-web-collegare-sistema-decisionale":12},{"i18nKey":4,"paths":5},"tech-004-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11},"\u002Fde\u002Ftech\u002Fweb-performance-budgets-entscheidungsfindung","\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",{"_path":13,"_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":2681,"_id":2682,"_source":2683,"_file":2684,"_stem":2685,"_extension":2686},"\u002Fit\u002Ftech\u002Fbudget-performance-web-collegare-sistema-decisionale","tech",false,"","Budget di Performance Web: Collegare al Sistema Decisionale","Integrare Lighthouse CI, RUM e alarm di regressione di performance nel processo decisionale. La metodologia dietro la riduzione di TBT da 2190ms a 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":2667},"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,2650,2656,2661],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Nel 2026, la performance web non è più \"rendere le pagine veloci\" — è una disciplina ingegneristica dove le decisioni vengono prese in modo continuo. Pubblicate un e-commerce, il punteggio Lighthouse scende da 92 a 68, il tasso di conversione cala da 3,2% a 2,7% — ma nessuno se ne accorge perché il monitoraggio è limitato a \"il server è down?\". Collegare il budget di performance al sistema decisionale significa intercettare la regressione prima del deploy, valutare ogni commit rispetto alle soglie LCP\u002FTBT\u002FCLS e alimentare il pipeline di attribuzione con i dati RUM. In questo articolo vi mostreremo come integrare Lighthouse CI, il monitoraggio sintetico, RUM e l'architettura degli allarmi in un sistema coeso.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"cosè-un-budget-di-performance-e-perché-deve-essere-misurato-da-un-sistema-non-da-umani",[44],{"type":37,"value":45},"Cos'è un Budget di Performance e Perché Deve Essere Misurato da un Sistema, Non da Umani",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Un budget di performance definisce limiti di risorse numerici per pagina: massimo JavaScript bundle (es. 200 KB gzip), massimo TBT (Total Blocking Time, 200 ms), massimo LCP (Largest Contentful Paint, 2,5 secondi). Questi numeri non sono arbitrari — le soglie Core Web Vitals di Google definiscono la banda \"buona\", ma dovete derivare limiti ancora più severi dai dati del vostro funnel di conversione.",{"type":32,"tag":33,"props":52,"children":53},{},[54,56,62,64,69,71,76],{"type":37,"value":55},"Lo scenario classico \"Lighthouse 95 in dev, 72 in prod\" emerge per questi motivi: il test sintetico avviene in condizioni di laboratorio (fast 4G, cache vuota, single page load), mentre RUM testa il vero utente con la sua 3G, cache piena e i suoi percorsi di navigazione. La differenza è normale ma entrambi devono essere monitorati. Lighthouse CI cattura la regressione di bundle size su ogni PR; RUM mostra la realtà di produzione come \"il 22% degli utenti mobili ha LCP sopra 4 secondi\". Se definite il budget solo come \"superare il punteggio 75\", potete aggiungere 100 KB al bundle e aumentare lo score da 74 a 76 — la pagina diventa più pesante ma il punteggio è verde. Per questo motivo dovete mantenere budget ",{"type":32,"tag":57,"props":58,"children":59},"em",{},[60],{"type":37,"value":61},"per metrica",{"type":37,"value":63}," (LCP, TBT, CLS) ",{"type":32,"tag":57,"props":65,"children":66},{},[67],{"type":37,"value":68},"e",{"type":37,"value":70}," ",{"type":32,"tag":57,"props":72,"children":73},{},[74],{"type":37,"value":75},"per risorsa",{"type":37,"value":77}," (JS, CSS, immagini in MB).",{"type":32,"tag":33,"props":79,"children":80},{},[81],{"type":37,"value":82},"Un altro punto fondamentale: enforcement manuale del budget non scala. \"Controlliamo la performance durante la code review\" non regge con 20 PR al giorno. Deve essere il sistema a misurare, il sistema a fallire, gli umani solo a investigare il perché.",{"type":32,"tag":40,"props":84,"children":86},{"id":85},"lighthouse-ci-per-performance-gating-su-ogni-commit",[87],{"type":37,"value":88},"Lighthouse CI per Performance Gating su Ogni Commit",{"type":32,"tag":33,"props":90,"children":91},{},[92],{"type":37,"value":93},"Lighthouse CI esegue automaticamente gli audit Lighthouse su ogni commit o PR e riporta i risultati su GitHub o dashboard interno. Si integra nel vostro pipeline CI così:",{"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},"Nel file config ",{"type":32,"tag":102,"props":382,"children":384},{"className":383},[],[385],{"type":37,"value":386},".lighthouserc.json",{"type":37,"value":388}," definite i budget:",{"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},"Con questo setup, se una PR aggiunge 50 KB di JS in più e TBT supera 200 ms, il CI fallisce e il merge viene bloccato. In Roibase, nei progetti headless commerce abbiamo usato questo approccio per portare il TBT medio a 200 ms partendo da 2190 ms nei clienti migrati all'architettura ",{"type":32,"tag":794,"props":795,"children":799},"a",{"href":796,"rel":797},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fheadless",[798],"nofollow",[800],{"type":37,"value":801},"Headless Commerce",{"type":37,"value":803}," — perché ogni aggiunta di libreria veniva testata contro il budget.",{"type":32,"tag":805,"props":806,"children":808},"h3",{"id":807},"limitazioni-di-lighthouse-ci-e-decisioni-architetturali",[809],{"type":37,"value":810},"Limitazioni di Lighthouse CI e Decisioni Architetturali",{"type":32,"tag":33,"props":812,"children":813},{},[814,816,821],{"type":37,"value":815},"Lighthouse CI esegue test sintetici: banda fissa (Moto G4, emulazione slow 4G), throttle CPU fisso (4x slowdown), una sola pagina. L'utente reale ha dispositivi diversi, segue percorsi differenti (product page → cart → checkout), vede varianti A\u002FB. Per questo motivo posizionate Lighthouse CI come ",{"type":32,"tag":57,"props":817,"children":818},{},[819],{"type":37,"value":820},"bar minima",{"type":37,"value":822}," — se passa il deploy è possibile, ma passare non significa 100 punti in produzione. Per misurare la realtà di produzione servono i dati RUM.",{"type":32,"tag":40,"props":824,"children":826},{"id":825},"rum-real-user-monitoring-per-trasformare-la-realtà-di-produzione-in-dati-decisionali",[827],{"type":37,"value":828},"RUM (Real User Monitoring) per Trasformare la Realtà di Produzione in Dati Decisionali",{"type":32,"tag":33,"props":830,"children":831},{},[832],{"type":37,"value":833},"RUM raccoglie metriche dai veri utenti: Navigation Timing API, PerformanceObserver, CrUX (Chrome User Experience Report). Potete usare un vendor (Speedcurve, Sentry Performance, Cloudflare Web Analytics) oppure il vostro stack di logging (libreria web-vitals + BigQuery).",{"type":32,"tag":33,"props":835,"children":836},{},[837,839,845],{"type":37,"value":838},"Un'integrazione minimale con ",{"type":32,"tag":102,"props":840,"children":842},{"className":841},[],[843],{"type":37,"value":844},"web-vitals",{"type":37,"value":846},":",{"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},"Caricate questi dati su BigQuery, poi usate dbt per incrociarli con i dati di attribuzione marketing:",{"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},"Questa tabella vi dice \"quando LCP è sotto 2,5 secondi CVR è 3,4%, quando è sopra 2,1%\" — dati concreti. Quando riportate questo al CMO, la richiesta astratta \"ottimizziamo la performance\" diventa \"se portiamo LCP sotto 2,5 secondi guadagniamo 18K$ mensili di revenue in più\".",{"type":32,"tag":40,"props":1860,"children":1862},{"id":1861},"collegare-gli-allarmi-di-regressione-a-slackpagerduty",[1863],{"type":37,"value":1864},"Collegare gli Allarmi di Regressione a Slack\u002FPagerDuty",{"type":32,"tag":33,"props":1866,"children":1867},{},[1868],{"type":37,"value":1869},"Dopo aver raccolto i dati RUM, dovete rilevare la regressione con allarmi su soglia. Se la vostra media degli ultimi 7 giorni è LCP 2,2 secondi e oggi è 3,1 secondi, è una regressione dovuta al deploy o a un problema CDN. Non potete scoprirlo manualmente osservando il dashboard — deve essere automatico.",{"type":32,"tag":805,"props":1871,"children":1873},{"id":1872},"metrica-based-alerting-con-datadog",[1874],{"type":37,"value":1875},"Metrica-Based Alerting con DataDog",{"type":32,"tag":33,"props":1877,"children":1878},{},[1879],{"type":37,"value":1880},"DataDog parsa automaticamente le metriche RUM e applica anomaly detection. Una definizione di 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 ha superato 2500ms nell'ultima ora. Ultimo 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 ha superato 2500ms nell'ultima ora. Ultimo 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},"Quando l'allarme si attiva arriva su Slack, apre un incident in PagerDuty e sveglia lo sviluppatore on-call. Se il messaggio include l'ID del deploy (dal tag CI pipeline), trovate la causa della regressione in 30 secondi.",{"type":32,"tag":805,"props":2079,"children":2081},{"id":2080},"inviare-i-fallimenti-di-threshold-da-lighthouse-ci-come-allarmi",[2082],{"type":37,"value":2083},"Inviare i Fallimenti di Threshold da Lighthouse CI come Allarmi",{"type":32,"tag":33,"props":2085,"children":2086},{},[2087],{"type":37,"value":2088},"Alcuni team non lasciano il fail di Lighthouse CI solo come block PR, lo mandano anche su Slack:",{"type":32,"tag":95,"props":2090,"children":2092},{"className":97,"code":2091,"language":99,"meta":16,"style":16},"# .github\u002Fworkflows\u002Flighthouse-ci.yml (step aggiuntivo)\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 (step aggiuntivo)\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],{"type":37,"value":2314},"Così lo sviluppatore che apre una PR vede sia il check rosso in CI sia la notifica Slack immediatamente — l'attenzione si accende al primo superamento del budget.",{"type":32,"tag":40,"props":2316,"children":2318},{"id":2317},"integrare-i-budget-nel-sistema-feature-flag",[2319],{"type":37,"value":2320},"Integrare i Budget nel Sistema Feature Flag",{"type":32,"tag":33,"props":2322,"children":2323},{},[2324],{"type":37,"value":2325},"Alcune feature sono intrinsecamente pesanti: chat widget live (80 KB JS), motore di personalizzazione (150 KB + costo runtime), video player (200 KB). Invece di attivarle per tutti gli utenti, potete testarle in un segmento che non supera il budget di performance (es. desktop + connessione veloce) e attivarle gradualmente.",{"type":32,"tag":33,"props":2327,"children":2328},{},[2329],{"type":37,"value":2330},"Nel vostro sistema feature flag (LaunchDarkly o proprietario) potete definire regole:",{"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":26},[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":246},[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},"Con questo approccio, la decisione \"aggiungiamo il chat widget\" non porta il rischio \"tutti gli utenti vedono +300 ms di LCP\" — si attiva solo nel segmento che lo tollera, raccogliete dati RUM, misurate l'impatto su CVR, poi fate rollout completo o lo ritirate. Quando discutete il trade-off con product e marketing, lo potete mostrare numericamente: \"Il chat widget aumenta CVR dello 0,4% ma porta LCP a 2,8 secondi — guadagno netto +8K$ ma UX peggiora. Come procediamo?\"",{"type":32,"tag":40,"props":2558,"children":2560},{"id":2559},"enforcing-budget-di-performance-nel-headless-commerce",[2561],{"type":37,"value":2562},"Enforcing Budget di Performance nel Headless Commerce",{"type":32,"tag":33,"props":2564,"children":2565},{},[2566],{"type":37,"value":2567},"L'architettura headless commerce (es. Shopify Hydrogen, Next.js + Shopify API) è generalmente più veloce di un tema Liquid perché il controllo JavaScript è vostro e potete fare hydration selettiva. Ma siccome il controllo è vostro, il rischio di regressione è anche vostro — un aggiornamento npm può aggiungere 70 KB al bundle.",{"type":32,"tag":33,"props":2569,"children":2570},{},[2571,2573,2580],{"type":37,"value":2572},"Nel nostro lavoro di ",{"type":32,"tag":794,"props":2574,"children":2577},{"href":2575,"rel":2576},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fshopify",[798],[2578],{"type":37,"value":2579},"Shopify Partner",{"type":37,"value":2581}," per le migrazioni headless applichiamo questo workflow:",{"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},"Stabilire la baseline:",{"type":37,"value":2597}," Raccogliete dati RUM dal tema Liquid esistente (30 giorni). Annotate i valori mediani di LCP, TBT, CLS.",{"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},"Gate il prototipo headless con Lighthouse CI:",{"type":37,"value":2607}," Ogni commit deve rispettare il budget in ",{"type":32,"tag":102,"props":2609,"children":2611},{"className":2610},[],[2612],{"type":37,"value":386},{"type":37,"value":2614},". Il primo deploy deve essere almeno 20% più veloce della baseline.",{"type":32,"tag":2587,"props":2616,"children":2617},{},[2618,2623],{"type":32,"tag":2591,"props":2619,"children":2620},{},[2621],{"type":37,"value":2622},"Confronto RUM in produzione:",{"type":37,"value":2624}," Nei primi 7 giorni fate A\u002FB test vecchia\u002Fnuova versione (es. 10% traffic su headless), comparate le metriche RUM.",{"type":32,"tag":2587,"props":2626,"children":2627},{},[2628,2633],{"type":32,"tag":2591,"props":2629,"children":2630},{},[2631],{"type":37,"value":2632},"Configurate gli allarmi di regressione:",{"type":37,"value":2634}," Dopo la migrazione, impostate i monitor DataDog per LCP 2,5s e TBT 200ms.",{"type":32,"tag":2587,"props":2636,"children":2637},{},[2638,2643],{"type":32,"tag":2591,"props":2639,"children":2640},{},[2641],{"type":37,"value":2642},"Review trimestrale:",{"type":37,"value":2644}," Ogni trimestre audit del bundle size, pulite le dipendenze inutilizzate.",{"type":32,"tag":33,"props":2646,"children":2647},{},[2648],{"type":37,"value":2649},"Con un cliente e-commerce abbiamo ottenuto questi risultati: tema Liquid LCP 4,1s → Hydrogen LCP 1,8s, CVR 2,3% → 3,1% (+35%). Ma 6 mesi dopo, con le nuove feature LCP è salito a 2,9s e CVR è sceso a 2,9% — perché l'enforcement del budget era stato allentato. Dopo aver riattivato il budget in 2 settimane siamo tornati a 2,1s.",{"type":32,"tag":40,"props":2651,"children":2653},{"id":2652},"trade-off-velocità-vs-esperienza-ricca",[2654],{"type":37,"value":2655},"Trade-off: Velocità vs Esperienza Ricca",{"type":32,"tag":33,"props":2657,"children":2658},{},[2659],{"type":37,"value":2660},"A volte il team di marketing dice \"la pagina è veloce ma vuota, aggiungiamo più contenuti\". Questo crea un trade-off tra velocità e engagement. La decisione deve essere numerica: \"Aggiungere il carousel aumenta LCP di 300 ms, l'engagement del 12%, il CVR non cambia — il trade-off è netto posit",{"type":32,"tag":2662,"props":2663,"children":2664},"style",{},[2665],{"type":37,"value":2666},"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":2668},[2669,2670,2673,2674,2678,2679,2680],{"id":42,"depth":119,"text":45},{"id":85,"depth":119,"text":88,"children":2671},[2672],{"id":807,"depth":141,"text":810},{"id":825,"depth":119,"text":828},{"id":1861,"depth":119,"text":1864,"children":2675},[2676,2677],{"id":1872,"depth":141,"text":1875},{"id":2080,"depth":141,"text":2083},{"id":2317,"depth":119,"text":2320},{"id":2559,"depth":119,"text":2562},{"id":2652,"depth":119,"text":2655},"markdown","content:it:tech:budget-performance-web-collegare-sistema-decisionale.md","content","it\u002Ftech\u002Fbudget-performance-web-collegare-sistema-decisionale.md","it\u002Ftech\u002Fbudget-performance-web-collegare-sistema-decisionale","md",1785967494408]