[{"data":1,"prerenderedAt":2675},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fes\u002Ftech\u002Fweb-performance-budgets-decision-making":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":8,"_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":2669,"_id":2670,"_source":2671,"_file":2672,"_stem":2673,"_extension":2674},"tech",false,"","Web Performance Budgets: Vincularlos al Mecanismo de Decisión","Integrar Lighthouse CI, RUM y alarmas de regresión de rendimiento. La metodología detrás de reducir TBT de 2190 ms a 200 ms.","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":2655},"root",[31,39,46,51,71,76,82,87,369,382,781,797,804,816,822,827,840,1253,1258,1847,1852,1858,1863,1869,1874,2066,2071,2077,2082,2303,2308,2314,2319,2324,2545,2550,2556,2561,2575,2638,2643,2649],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","En 2026, el rendimiento web ya no es \"hacer que las páginas se carguen rápido\", sino una disciplina de ingeniería donde se toman decisiones de forma continua. Despliegas un sitio de comercio electrónico, la puntuación de Lighthouse cae de 92 a 68, la tasa de conversión baja de 3,2 % a 2,7 % — pero nadie se da cuenta porque el monitoring se limita a \"¿está el servidor caído?\". Vincular el presupuesto de rendimiento al mecanismo de decisión significa capturar regresiones antes del despliegue, evaluar cada commit según umbrales de LCP\u002FTBT\u002FCLS e inyectar datos de RUM en tu pipeline de atribución. En este artículo mostraremos cómo integrar Lighthouse CI, monitoreo sintético, RUM y arquitectura de alarmas en un sistema coherente.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"qué-es-un-performance-budget-y-por-qué-debe-medirlo-un-sistema-no-una-persona",[44],{"type":37,"value":45},"Qué es un Performance Budget y Por Qué Debe Medirlo un Sistema, No una Persona",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Un presupuesto de rendimiento define límites de recursos por página: tamaño máximo de bundle JavaScript (p. ej. 200 KB gzip), TBT máximo (Total Blocking Time, 200 ms), LCP máximo (Largest Contentful Paint, 2,5 segundos). Estos números no son arbitrarios — los umbrales Core Web Vitals de Google definen bandas de \"bueno\", pero necesitas derivar límites más estrictos a partir de datos de tu propio funnel de conversión.",{"type":32,"tag":33,"props":52,"children":53},{},[54,56,62,64,69],{"type":37,"value":55},"El escenario clásico \"Lighthouse 95 en desarrollo, 72 en producción\" ocurre porque: las pruebas sintéticas se ejecutan en condiciones de laboratorio (4G rápido, caché vacía, una sola carga de página), mientras que RUM captura al usuario real con su 3G, caché llena y rutas de navegación variadas. Ambas métricas son normales pero deben monitorearse. Lighthouse CI atrapa regresiones de tamaño de bundle en cada PR; RUM dice \"el 22 % de usuarios móviles tienen LCP por encima de 4 segundos\" — es realidad de producción. Si defines el presupuesto solo como \"superar la puntuación de 75\", puedes agregar 100 KB al bundle, subirla de 74 a 76 — la página se hace más pesada pero el score es verde. Por eso debes mantener presupuestos duales: ",{"type":32,"tag":57,"props":58,"children":59},"em",{},[60],{"type":37,"value":61},"basados en métricas",{"type":37,"value":63}," (LCP, TBT, CLS) ",{"type":32,"tag":57,"props":65,"children":66},{},[67],{"type":37,"value":68},"y basados en recursos",{"type":37,"value":70}," (JS, CSS, tamaño de imágenes).",{"type":32,"tag":33,"props":72,"children":73},{},[74],{"type":37,"value":75},"Otro punto: para hacer cumplir el presupuesto, la revisión humana es insuficiente. \"Revisamos el rendimiento en code review\" no escala a 20 PRs por día. El sistema debe medir, el sistema debe fallar, los humanos solo investigan el porqué.",{"type":32,"tag":40,"props":77,"children":79},{"id":78},"lighthouse-ci-gating-de-rendimiento-por-commit",[80],{"type":37,"value":81},"Lighthouse CI: Gating de Rendimiento por Commit",{"type":32,"tag":33,"props":83,"children":84},{},[85],{"type":37,"value":86},"Lighthouse CI ejecuta automáticamente la auditoría de Lighthouse en cada commit o PR y reporta resultados en GitHub o a un dashboard interno. Así se integra en tu pipeline de CI:",{"type":32,"tag":88,"props":89,"children":93},"pre",{"className":90,"code":91,"language":92,"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",[94],{"type":32,"tag":95,"props":96,"children":97},"code",{"__ignoreMap":16},[98,110,132,157,171,184,202,215,237,258,280,301,320,329,338,351],{"type":32,"tag":99,"props":100,"children":103},"span",{"class":101,"line":102},"line",1,[104],{"type":32,"tag":99,"props":105,"children":107},{"style":106},"--shiki-default:#6A737D",[108],{"type":37,"value":109},"# .github\u002Fworkflows\u002Flighthouse-ci.yml\n",{"type":32,"tag":99,"props":111,"children":113},{"class":101,"line":112},2,[114,120,126],{"type":32,"tag":99,"props":115,"children":117},{"style":116},"--shiki-default:#85E89D",[118],{"type":37,"value":119},"name",{"type":32,"tag":99,"props":121,"children":123},{"style":122},"--shiki-default:#E1E4E8",[124],{"type":37,"value":125},": ",{"type":32,"tag":99,"props":127,"children":129},{"style":128},"--shiki-default:#9ECBFF",[130],{"type":37,"value":131},"Lighthouse CI\n",{"type":32,"tag":99,"props":133,"children":135},{"class":101,"line":134},3,[136,142,147,152],{"type":32,"tag":99,"props":137,"children":139},{"style":138},"--shiki-default:#79B8FF",[140],{"type":37,"value":141},"on",{"type":32,"tag":99,"props":143,"children":144},{"style":122},[145],{"type":37,"value":146},": [",{"type":32,"tag":99,"props":148,"children":149},{"style":128},[150],{"type":37,"value":151},"pull_request",{"type":32,"tag":99,"props":153,"children":154},{"style":122},[155],{"type":37,"value":156},"]\n",{"type":32,"tag":99,"props":158,"children":160},{"class":101,"line":159},4,[161,166],{"type":32,"tag":99,"props":162,"children":163},{"style":116},[164],{"type":37,"value":165},"jobs",{"type":32,"tag":99,"props":167,"children":168},{"style":122},[169],{"type":37,"value":170},":\n",{"type":32,"tag":99,"props":172,"children":174},{"class":101,"line":173},5,[175,180],{"type":32,"tag":99,"props":176,"children":177},{"style":116},[178],{"type":37,"value":179},"  lighthouse",{"type":32,"tag":99,"props":181,"children":182},{"style":122},[183],{"type":37,"value":170},{"type":32,"tag":99,"props":185,"children":187},{"class":101,"line":186},6,[188,193,197],{"type":32,"tag":99,"props":189,"children":190},{"style":116},[191],{"type":37,"value":192},"    runs-on",{"type":32,"tag":99,"props":194,"children":195},{"style":122},[196],{"type":37,"value":125},{"type":32,"tag":99,"props":198,"children":199},{"style":128},[200],{"type":37,"value":201},"ubuntu-latest\n",{"type":32,"tag":99,"props":203,"children":205},{"class":101,"line":204},7,[206,211],{"type":32,"tag":99,"props":207,"children":208},{"style":116},[209],{"type":37,"value":210},"    steps",{"type":32,"tag":99,"props":212,"children":213},{"style":122},[214],{"type":37,"value":170},{"type":32,"tag":99,"props":216,"children":217},{"class":101,"line":26},[218,223,228,232],{"type":32,"tag":99,"props":219,"children":220},{"style":122},[221],{"type":37,"value":222},"      - ",{"type":32,"tag":99,"props":224,"children":225},{"style":116},[226],{"type":37,"value":227},"uses",{"type":32,"tag":99,"props":229,"children":230},{"style":122},[231],{"type":37,"value":125},{"type":32,"tag":99,"props":233,"children":234},{"style":128},[235],{"type":37,"value":236},"actions\u002Fcheckout@v3\n",{"type":32,"tag":99,"props":238,"children":240},{"class":101,"line":239},9,[241,245,249,253],{"type":32,"tag":99,"props":242,"children":243},{"style":122},[244],{"type":37,"value":222},{"type":32,"tag":99,"props":246,"children":247},{"style":116},[248],{"type":37,"value":227},{"type":32,"tag":99,"props":250,"children":251},{"style":122},[252],{"type":37,"value":125},{"type":32,"tag":99,"props":254,"children":255},{"style":128},[256],{"type":37,"value":257},"actions\u002Fsetup-node@v3\n",{"type":32,"tag":99,"props":259,"children":261},{"class":101,"line":260},10,[262,266,271,275],{"type":32,"tag":99,"props":263,"children":264},{"style":122},[265],{"type":37,"value":222},{"type":32,"tag":99,"props":267,"children":268},{"style":116},[269],{"type":37,"value":270},"run",{"type":32,"tag":99,"props":272,"children":273},{"style":122},[274],{"type":37,"value":125},{"type":32,"tag":99,"props":276,"children":277},{"style":128},[278],{"type":37,"value":279},"npm ci && npm run build\n",{"type":32,"tag":99,"props":281,"children":283},{"class":101,"line":282},11,[284,288,292,296],{"type":32,"tag":99,"props":285,"children":286},{"style":122},[287],{"type":37,"value":222},{"type":32,"tag":99,"props":289,"children":290},{"style":116},[291],{"type":37,"value":119},{"type":32,"tag":99,"props":293,"children":294},{"style":122},[295],{"type":37,"value":125},{"type":32,"tag":99,"props":297,"children":298},{"style":128},[299],{"type":37,"value":300},"Run Lighthouse CI\n",{"type":32,"tag":99,"props":302,"children":304},{"class":101,"line":303},12,[305,310,314],{"type":32,"tag":99,"props":306,"children":307},{"style":116},[308],{"type":37,"value":309},"        run",{"type":32,"tag":99,"props":311,"children":312},{"style":122},[313],{"type":37,"value":125},{"type":32,"tag":99,"props":315,"children":317},{"style":316},"--shiki-default:#F97583",[318],{"type":37,"value":319},"|\n",{"type":32,"tag":99,"props":321,"children":323},{"class":101,"line":322},13,[324],{"type":32,"tag":99,"props":325,"children":326},{"style":128},[327],{"type":37,"value":328},"          npm install -g @lhci\u002Fcli\n",{"type":32,"tag":99,"props":330,"children":332},{"class":101,"line":331},14,[333],{"type":32,"tag":99,"props":334,"children":335},{"style":128},[336],{"type":37,"value":337},"          lhci autorun\n",{"type":32,"tag":99,"props":339,"children":341},{"class":101,"line":340},15,[342,347],{"type":32,"tag":99,"props":343,"children":344},{"style":116},[345],{"type":37,"value":346},"        env",{"type":32,"tag":99,"props":348,"children":349},{"style":122},[350],{"type":37,"value":170},{"type":32,"tag":99,"props":352,"children":354},{"class":101,"line":353},16,[355,360,364],{"type":32,"tag":99,"props":356,"children":357},{"style":116},[358],{"type":37,"value":359},"          LHCI_GITHUB_APP_TOKEN",{"type":32,"tag":99,"props":361,"children":362},{"style":122},[363],{"type":37,"value":125},{"type":32,"tag":99,"props":365,"children":366},{"style":128},[367],{"type":37,"value":368},"${{ secrets.LHCI_GITHUB_APP_TOKEN }}\n",{"type":32,"tag":33,"props":370,"children":371},{},[372,374,380],{"type":37,"value":373},"En tu config ",{"type":32,"tag":95,"props":375,"children":377},{"className":376},[],[378],{"type":37,"value":379},".lighthouserc.json",{"type":37,"value":381}," defines los presupuestos:",{"type":32,"tag":88,"props":383,"children":387},{"className":384,"code":385,"language":386,"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",[388],{"type":32,"tag":95,"props":389,"children":390},{"__ignoreMap":16},[391,399,412,424,446,463,471,483,505,517,558,595,632,669,708,716,723,736,754,763,772],{"type":32,"tag":99,"props":392,"children":393},{"class":101,"line":102},[394],{"type":32,"tag":99,"props":395,"children":396},{"style":122},[397],{"type":37,"value":398},"{\n",{"type":32,"tag":99,"props":400,"children":401},{"class":101,"line":112},[402,407],{"type":32,"tag":99,"props":403,"children":404},{"style":138},[405],{"type":37,"value":406},"  \"ci\"",{"type":32,"tag":99,"props":408,"children":409},{"style":122},[410],{"type":37,"value":411},": {\n",{"type":32,"tag":99,"props":413,"children":414},{"class":101,"line":134},[415,420],{"type":32,"tag":99,"props":416,"children":417},{"style":138},[418],{"type":37,"value":419},"    \"collect\"",{"type":32,"tag":99,"props":421,"children":422},{"style":122},[423],{"type":37,"value":411},{"type":32,"tag":99,"props":425,"children":426},{"class":101,"line":159},[427,432,436,441],{"type":32,"tag":99,"props":428,"children":429},{"style":138},[430],{"type":37,"value":431},"      \"url\"",{"type":32,"tag":99,"props":433,"children":434},{"style":122},[435],{"type":37,"value":146},{"type":32,"tag":99,"props":437,"children":438},{"style":128},[439],{"type":37,"value":440},"\"http:\u002F\u002Flocalhost:3000\u002F\"",{"type":32,"tag":99,"props":442,"children":443},{"style":122},[444],{"type":37,"value":445},"],\n",{"type":32,"tag":99,"props":447,"children":448},{"class":101,"line":173},[449,454,458],{"type":32,"tag":99,"props":450,"children":451},{"style":138},[452],{"type":37,"value":453},"      \"numberOfRuns\"",{"type":32,"tag":99,"props":455,"children":456},{"style":122},[457],{"type":37,"value":125},{"type":32,"tag":99,"props":459,"children":460},{"style":138},[461],{"type":37,"value":462},"3\n",{"type":32,"tag":99,"props":464,"children":465},{"class":101,"line":186},[466],{"type":32,"tag":99,"props":467,"children":468},{"style":122},[469],{"type":37,"value":470},"    },\n",{"type":32,"tag":99,"props":472,"children":473},{"class":101,"line":204},[474,479],{"type":32,"tag":99,"props":475,"children":476},{"style":138},[477],{"type":37,"value":478},"    \"assert\"",{"type":32,"tag":99,"props":480,"children":481},{"style":122},[482],{"type":37,"value":411},{"type":32,"tag":99,"props":484,"children":485},{"class":101,"line":26},[486,491,495,500],{"type":32,"tag":99,"props":487,"children":488},{"style":138},[489],{"type":37,"value":490},"      \"preset\"",{"type":32,"tag":99,"props":492,"children":493},{"style":122},[494],{"type":37,"value":125},{"type":32,"tag":99,"props":496,"children":497},{"style":128},[498],{"type":37,"value":499},"\"lighthouse:recommended\"",{"type":32,"tag":99,"props":501,"children":502},{"style":122},[503],{"type":37,"value":504},",\n",{"type":32,"tag":99,"props":506,"children":507},{"class":101,"line":239},[508,513],{"type":32,"tag":99,"props":509,"children":510},{"style":138},[511],{"type":37,"value":512},"      \"assertions\"",{"type":32,"tag":99,"props":514,"children":515},{"style":122},[516],{"type":37,"value":411},{"type":32,"tag":99,"props":518,"children":519},{"class":101,"line":260},[520,525,529,534,539,544,548,553],{"type":32,"tag":99,"props":521,"children":522},{"style":138},[523],{"type":37,"value":524},"        \"total-byte-weight\"",{"type":32,"tag":99,"props":526,"children":527},{"style":122},[528],{"type":37,"value":146},{"type":32,"tag":99,"props":530,"children":531},{"style":128},[532],{"type":37,"value":533},"\"error\"",{"type":32,"tag":99,"props":535,"children":536},{"style":122},[537],{"type":37,"value":538},", { ",{"type":32,"tag":99,"props":540,"children":541},{"style":138},[542],{"type":37,"value":543},"\"maxNumericValue\"",{"type":32,"tag":99,"props":545,"children":546},{"style":122},[547],{"type":37,"value":125},{"type":32,"tag":99,"props":549,"children":550},{"style":138},[551],{"type":37,"value":552},"512000",{"type":32,"tag":99,"props":554,"children":555},{"style":122},[556],{"type":37,"value":557}," }],\n",{"type":32,"tag":99,"props":559,"children":560},{"class":101,"line":282},[561,566,570,574,578,582,586,591],{"type":32,"tag":99,"props":562,"children":563},{"style":138},[564],{"type":37,"value":565},"        \"total-blocking-time\"",{"type":32,"tag":99,"props":567,"children":568},{"style":122},[569],{"type":37,"value":146},{"type":32,"tag":99,"props":571,"children":572},{"style":128},[573],{"type":37,"value":533},{"type":32,"tag":99,"props":575,"children":576},{"style":122},[577],{"type":37,"value":538},{"type":32,"tag":99,"props":579,"children":580},{"style":138},[581],{"type":37,"value":543},{"type":32,"tag":99,"props":583,"children":584},{"style":122},[585],{"type":37,"value":125},{"type":32,"tag":99,"props":587,"children":588},{"style":138},[589],{"type":37,"value":590},"200",{"type":32,"tag":99,"props":592,"children":593},{"style":122},[594],{"type":37,"value":557},{"type":32,"tag":99,"props":596,"children":597},{"class":101,"line":303},[598,603,607,611,615,619,623,628],{"type":32,"tag":99,"props":599,"children":600},{"style":138},[601],{"type":37,"value":602},"        \"largest-contentful-paint\"",{"type":32,"tag":99,"props":604,"children":605},{"style":122},[606],{"type":37,"value":146},{"type":32,"tag":99,"props":608,"children":609},{"style":128},[610],{"type":37,"value":533},{"type":32,"tag":99,"props":612,"children":613},{"style":122},[614],{"type":37,"value":538},{"type":32,"tag":99,"props":616,"children":617},{"style":138},[618],{"type":37,"value":543},{"type":32,"tag":99,"props":620,"children":621},{"style":122},[622],{"type":37,"value":125},{"type":32,"tag":99,"props":624,"children":625},{"style":138},[626],{"type":37,"value":627},"2500",{"type":32,"tag":99,"props":629,"children":630},{"style":122},[631],{"type":37,"value":557},{"type":32,"tag":99,"props":633,"children":634},{"class":101,"line":322},[635,640,644,648,652,656,660,665],{"type":32,"tag":99,"props":636,"children":637},{"style":138},[638],{"type":37,"value":639},"        \"cumulative-layout-shift\"",{"type":32,"tag":99,"props":641,"children":642},{"style":122},[643],{"type":37,"value":146},{"type":32,"tag":99,"props":645,"children":646},{"style":128},[647],{"type":37,"value":533},{"type":32,"tag":99,"props":649,"children":650},{"style":122},[651],{"type":37,"value":538},{"type":32,"tag":99,"props":653,"children":654},{"style":138},[655],{"type":37,"value":543},{"type":32,"tag":99,"props":657,"children":658},{"style":122},[659],{"type":37,"value":125},{"type":32,"tag":99,"props":661,"children":662},{"style":138},[663],{"type":37,"value":664},"0.1",{"type":32,"tag":99,"props":666,"children":667},{"style":122},[668],{"type":37,"value":557},{"type":32,"tag":99,"props":670,"children":671},{"class":101,"line":331},[672,677,681,685,689,694,698,703],{"type":32,"tag":99,"props":673,"children":674},{"style":138},[675],{"type":37,"value":676},"        \"categories:performance\"",{"type":32,"tag":99,"props":678,"children":679},{"style":122},[680],{"type":37,"value":146},{"type":32,"tag":99,"props":682,"children":683},{"style":128},[684],{"type":37,"value":533},{"type":32,"tag":99,"props":686,"children":687},{"style":122},[688],{"type":37,"value":538},{"type":32,"tag":99,"props":690,"children":691},{"style":138},[692],{"type":37,"value":693},"\"minScore\"",{"type":32,"tag":99,"props":695,"children":696},{"style":122},[697],{"type":37,"value":125},{"type":32,"tag":99,"props":699,"children":700},{"style":138},[701],{"type":37,"value":702},"0.85",{"type":32,"tag":99,"props":704,"children":705},{"style":122},[706],{"type":37,"value":707}," }]\n",{"type":32,"tag":99,"props":709,"children":710},{"class":101,"line":340},[711],{"type":32,"tag":99,"props":712,"children":713},{"style":122},[714],{"type":37,"value":715},"      }\n",{"type":32,"tag":99,"props":717,"children":718},{"class":101,"line":353},[719],{"type":32,"tag":99,"props":720,"children":721},{"style":122},[722],{"type":37,"value":470},{"type":32,"tag":99,"props":724,"children":726},{"class":101,"line":725},17,[727,732],{"type":32,"tag":99,"props":728,"children":729},{"style":138},[730],{"type":37,"value":731},"    \"upload\"",{"type":32,"tag":99,"props":733,"children":734},{"style":122},[735],{"type":37,"value":411},{"type":32,"tag":99,"props":737,"children":739},{"class":101,"line":738},18,[740,745,749],{"type":32,"tag":99,"props":741,"children":742},{"style":138},[743],{"type":37,"value":744},"      \"target\"",{"type":32,"tag":99,"props":746,"children":747},{"style":122},[748],{"type":37,"value":125},{"type":32,"tag":99,"props":750,"children":751},{"style":128},[752],{"type":37,"value":753},"\"temporary-public-storage\"\n",{"type":32,"tag":99,"props":755,"children":757},{"class":101,"line":756},19,[758],{"type":32,"tag":99,"props":759,"children":760},{"style":122},[761],{"type":37,"value":762},"    }\n",{"type":32,"tag":99,"props":764,"children":766},{"class":101,"line":765},20,[767],{"type":32,"tag":99,"props":768,"children":769},{"style":122},[770],{"type":37,"value":771},"  }\n",{"type":32,"tag":99,"props":773,"children":775},{"class":101,"line":774},21,[776],{"type":32,"tag":99,"props":777,"children":778},{"style":122},[779],{"type":37,"value":780},"}\n",{"type":32,"tag":33,"props":782,"children":783},{},[784,786,795],{"type":37,"value":785},"Con esta configuración, si un PR agrega 50 KB de JS extra y el TBT supera 200 ms, CI falla y el merge se bloquea. En Roibase, usando este enfoque con clientes que transitaban a ",{"type":32,"tag":787,"props":788,"children":792},"a",{"href":789,"rel":790},"https:\u002F\u002Fwww.roibase.com.tr\u002Fes\u002Fheadless",[791],"nofollow",[793],{"type":37,"value":794},"Headless Commerce",{"type":37,"value":796},", redujimos el TBT promedio de 2190 ms a 200 ms — porque cada adición de librería se probaba contra el presupuesto.",{"type":32,"tag":798,"props":799,"children":801},"h3",{"id":800},"limitaciones-de-lighthouse-ci-y-decisiones-arquitectónicas",[802],{"type":37,"value":803},"Limitaciones de Lighthouse CI y Decisiones Arquitectónicas",{"type":32,"tag":33,"props":805,"children":806},{},[807,809,814],{"type":37,"value":808},"Lighthouse CI realiza pruebas sintéticas: ancho de banda fijo (Moto G4, emulación slow 4G), throttle de CPU (desaceleración de 4x), una sola página. El usuario real está en un dispositivo diferente, sigue rutas distintas (página de producto → carrito → checkout), ve variantes de pruebas A\u002FB. Por eso coloca Lighthouse CI como una ",{"type":32,"tag":57,"props":810,"children":811},{},[812],{"type":37,"value":813},"barra mínima",{"type":37,"value":815}," — si pasa, se puede desplegar, pero pasar no significa 100 puntos en producción. Para medir la realidad de producción necesitas RUM.",{"type":32,"tag":40,"props":817,"children":819},{"id":818},"rum-monitoreo-de-usuarios-reales-convirtiendo-la-realidad-de-producción-en-datos-de-decisión",[820],{"type":37,"value":821},"RUM (Monitoreo de Usuarios Reales): Convirtiendo la Realidad de Producción en Datos de Decisión",{"type":32,"tag":33,"props":823,"children":824},{},[825],{"type":37,"value":826},"RUM recopila métricas de usuarios reales: Navigation Timing API, PerformanceObserver, CrUX (Chrome User Experience Report). Un vendor que lo proporciona (Speedcurve, Sentry Performance, Cloudflare Web Analytics) o tu propio stack de logging (librería web-vitals + BigQuery).",{"type":32,"tag":33,"props":828,"children":829},{},[830,832,838],{"type":37,"value":831},"Una integración mínima de ",{"type":32,"tag":95,"props":833,"children":835},{"className":834},[],[836],{"type":37,"value":837},"web-vitals",{"type":37,"value":839},":",{"type":32,"tag":88,"props":841,"children":845},{"className":842,"code":843,"language":844,"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",[846],{"type":32,"tag":95,"props":847,"children":848},{"__ignoreMap":16},[849,857,885,894,924,962,970,978,986,994,1002,1065,1073,1081,1094,1121,1139,1180,1187,1194,1201,1214,1227,1240],{"type":32,"tag":99,"props":850,"children":851},{"class":101,"line":102},[852],{"type":32,"tag":99,"props":853,"children":854},{"style":106},[855],{"type":37,"value":856},"\u002F\u002F app.js\n",{"type":32,"tag":99,"props":858,"children":859},{"class":101,"line":112},[860,865,870,875,880],{"type":32,"tag":99,"props":861,"children":862},{"style":316},[863],{"type":37,"value":864},"import",{"type":32,"tag":99,"props":866,"children":867},{"style":122},[868],{"type":37,"value":869}," { onCLS, onFID, onLCP, onTTFB } ",{"type":32,"tag":99,"props":871,"children":872},{"style":316},[873],{"type":37,"value":874},"from",{"type":32,"tag":99,"props":876,"children":877},{"style":128},[878],{"type":37,"value":879}," 'web-vitals'",{"type":32,"tag":99,"props":881,"children":882},{"style":122},[883],{"type":37,"value":884},";\n",{"type":32,"tag":99,"props":886,"children":887},{"class":101,"line":134},[888],{"type":32,"tag":99,"props":889,"children":891},{"emptyLinePlaceholder":890},true,[892],{"type":37,"value":893},"\n",{"type":32,"tag":99,"props":895,"children":896},{"class":101,"line":159},[897,902,908,913,919],{"type":32,"tag":99,"props":898,"children":899},{"style":316},[900],{"type":37,"value":901},"function",{"type":32,"tag":99,"props":903,"children":905},{"style":904},"--shiki-default:#B392F0",[906],{"type":37,"value":907}," sendToAnalytics",{"type":32,"tag":99,"props":909,"children":910},{"style":122},[911],{"type":37,"value":912},"(",{"type":32,"tag":99,"props":914,"children":916},{"style":915},"--shiki-default:#FFAB70",[917],{"type":37,"value":918},"metric",{"type":32,"tag":99,"props":920,"children":921},{"style":122},[922],{"type":37,"value":923},") {\n",{"type":32,"tag":99,"props":925,"children":926},{"class":101,"line":173},[927,932,937,942,947,952,957],{"type":32,"tag":99,"props":928,"children":929},{"style":316},[930],{"type":37,"value":931},"  const",{"type":32,"tag":99,"props":933,"children":934},{"style":138},[935],{"type":37,"value":936}," body",{"type":32,"tag":99,"props":938,"children":939},{"style":316},[940],{"type":37,"value":941}," =",{"type":32,"tag":99,"props":943,"children":944},{"style":138},[945],{"type":37,"value":946}," JSON",{"type":32,"tag":99,"props":948,"children":949},{"style":122},[950],{"type":37,"value":951},".",{"type":32,"tag":99,"props":953,"children":954},{"style":904},[955],{"type":37,"value":956},"stringify",{"type":32,"tag":99,"props":958,"children":959},{"style":122},[960],{"type":37,"value":961},"({\n",{"type":32,"tag":99,"props":963,"children":964},{"class":101,"line":186},[965],{"type":32,"tag":99,"props":966,"children":967},{"style":122},[968],{"type":37,"value":969},"    name: metric.name,\n",{"type":32,"tag":99,"props":971,"children":972},{"class":101,"line":204},[973],{"type":32,"tag":99,"props":974,"children":975},{"style":122},[976],{"type":37,"value":977},"    value: metric.value,\n",{"type":32,"tag":99,"props":979,"children":980},{"class":101,"line":26},[981],{"type":32,"tag":99,"props":982,"children":983},{"style":122},[984],{"type":37,"value":985},"    id: metric.id,\n",{"type":32,"tag":99,"props":987,"children":988},{"class":101,"line":239},[989],{"type":32,"tag":99,"props":990,"children":991},{"style":122},[992],{"type":37,"value":993},"    navigationType: metric.navigationType,\n",{"type":32,"tag":99,"props":995,"children":996},{"class":101,"line":260},[997],{"type":32,"tag":99,"props":998,"children":999},{"style":122},[1000],{"type":37,"value":1001},"    page: window.location.pathname,\n",{"type":32,"tag":99,"props":1003,"children":1004},{"class":101,"line":282},[1005,1010,1015,1021,1026,1031,1035,1040,1045,1050,1055,1060],{"type":32,"tag":99,"props":1006,"children":1007},{"style":122},[1008],{"type":37,"value":1009},"    deviceType:",{"type":32,"tag":99,"props":1011,"children":1012},{"style":128},[1013],{"type":37,"value":1014}," \u002F",{"type":32,"tag":99,"props":1016,"children":1018},{"style":1017},"--shiki-default:#DBEDFF",[1019],{"type":37,"value":1020},"mobile",{"type":32,"tag":99,"props":1022,"children":1023},{"style":128},[1024],{"type":37,"value":1025},"\u002F",{"type":32,"tag":99,"props":1027,"children":1028},{"style":316},[1029],{"type":37,"value":1030},"i",{"type":32,"tag":99,"props":1032,"children":1033},{"style":122},[1034],{"type":37,"value":951},{"type":32,"tag":99,"props":1036,"children":1037},{"style":904},[1038],{"type":37,"value":1039},"test",{"type":32,"tag":99,"props":1041,"children":1042},{"style":122},[1043],{"type":37,"value":1044},"(navigator.userAgent) ",{"type":32,"tag":99,"props":1046,"children":1047},{"style":316},[1048],{"type":37,"value":1049},"?",{"type":32,"tag":99,"props":1051,"children":1052},{"style":128},[1053],{"type":37,"value":1054}," 'mobile'",{"type":32,"tag":99,"props":1056,"children":1057},{"style":316},[1058],{"type":37,"value":1059}," :",{"type":32,"tag":99,"props":1061,"children":1062},{"style":128},[1063],{"type":37,"value":1064}," 'desktop'\n",{"type":32,"tag":99,"props":1066,"children":1067},{"class":101,"line":303},[1068],{"type":32,"tag":99,"props":1069,"children":1070},{"style":122},[1071],{"type":37,"value":1072},"  });\n",{"type":32,"tag":99,"props":1074,"children":1075},{"class":101,"line":322},[1076],{"type":32,"tag":99,"props":1077,"children":1078},{"style":122},[1079],{"type":37,"value":1080},"  \n",{"type":32,"tag":99,"props":1082,"children":1083},{"class":101,"line":331},[1084,1089],{"type":32,"tag":99,"props":1085,"children":1086},{"style":316},[1087],{"type":37,"value":1088},"  if",{"type":32,"tag":99,"props":1090,"children":1091},{"style":122},[1092],{"type":37,"value":1093}," (navigator.sendBeacon) {\n",{"type":32,"tag":99,"props":1095,"children":1096},{"class":101,"line":340},[1097,1102,1107,1111,1116],{"type":32,"tag":99,"props":1098,"children":1099},{"style":122},[1100],{"type":37,"value":1101},"    navigator.",{"type":32,"tag":99,"props":1103,"children":1104},{"style":904},[1105],{"type":37,"value":1106},"sendBeacon",{"type":32,"tag":99,"props":1108,"children":1109},{"style":122},[1110],{"type":37,"value":912},{"type":32,"tag":99,"props":1112,"children":1113},{"style":128},[1114],{"type":37,"value":1115},"'\u002Fapi\u002Fvitals'",{"type":32,"tag":99,"props":1117,"children":1118},{"style":122},[1119],{"type":37,"value":1120},", body);\n",{"type":32,"tag":99,"props":1122,"children":1123},{"class":101,"line":353},[1124,1129,1134],{"type":32,"tag":99,"props":1125,"children":1126},{"style":122},[1127],{"type":37,"value":1128},"  } ",{"type":32,"tag":99,"props":1130,"children":1131},{"style":316},[1132],{"type":37,"value":1133},"else",{"type":32,"tag":99,"props":1135,"children":1136},{"style":122},[1137],{"type":37,"value":1138}," {\n",{"type":32,"tag":99,"props":1140,"children":1141},{"class":101,"line":725},[1142,1147,1151,1155,1160,1165,1170,1175],{"type":32,"tag":99,"props":1143,"children":1144},{"style":904},[1145],{"type":37,"value":1146},"    fetch",{"type":32,"tag":99,"props":1148,"children":1149},{"style":122},[1150],{"type":37,"value":912},{"type":32,"tag":99,"props":1152,"children":1153},{"style":128},[1154],{"type":37,"value":1115},{"type":32,"tag":99,"props":1156,"children":1157},{"style":122},[1158],{"type":37,"value":1159},", { method: ",{"type":32,"tag":99,"props":1161,"children":1162},{"style":128},[1163],{"type":37,"value":1164},"'POST'",{"type":32,"tag":99,"props":1166,"children":1167},{"style":122},[1168],{"type":37,"value":1169},", body, keepalive: ",{"type":32,"tag":99,"props":1171,"children":1172},{"style":138},[1173],{"type":37,"value":1174},"true",{"type":32,"tag":99,"props":1176,"children":1177},{"style":122},[1178],{"type":37,"value":1179}," });\n",{"type":32,"tag":99,"props":1181,"children":1182},{"class":101,"line":738},[1183],{"type":32,"tag":99,"props":1184,"children":1185},{"style":122},[1186],{"type":37,"value":771},{"type":32,"tag":99,"props":1188,"children":1189},{"class":101,"line":756},[1190],{"type":32,"tag":99,"props":1191,"children":1192},{"style":122},[1193],{"type":37,"value":780},{"type":32,"tag":99,"props":1195,"children":1196},{"class":101,"line":765},[1197],{"type":32,"tag":99,"props":1198,"children":1199},{"emptyLinePlaceholder":890},[1200],{"type":37,"value":893},{"type":32,"tag":99,"props":1202,"children":1203},{"class":101,"line":774},[1204,1209],{"type":32,"tag":99,"props":1205,"children":1206},{"style":904},[1207],{"type":37,"value":1208},"onCLS",{"type":32,"tag":99,"props":1210,"children":1211},{"style":122},[1212],{"type":37,"value":1213},"(sendToAnalytics);\n",{"type":32,"tag":99,"props":1215,"children":1217},{"class":101,"line":1216},22,[1218,1223],{"type":32,"tag":99,"props":1219,"children":1220},{"style":904},[1221],{"type":37,"value":1222},"onFID",{"type":32,"tag":99,"props":1224,"children":1225},{"style":122},[1226],{"type":37,"value":1213},{"type":32,"tag":99,"props":1228,"children":1230},{"class":101,"line":1229},23,[1231,1236],{"type":32,"tag":99,"props":1232,"children":1233},{"style":904},[1234],{"type":37,"value":1235},"onLCP",{"type":32,"tag":99,"props":1237,"children":1238},{"style":122},[1239],{"type":37,"value":1213},{"type":32,"tag":99,"props":1241,"children":1243},{"class":101,"line":1242},24,[1244,1249],{"type":32,"tag":99,"props":1245,"children":1246},{"style":904},[1247],{"type":37,"value":1248},"onTTFB",{"type":32,"tag":99,"props":1250,"children":1251},{"style":122},[1252],{"type":37,"value":1213},{"type":32,"tag":33,"props":1254,"children":1255},{},[1256],{"type":37,"value":1257},"Subes estos datos a BigQuery y luego los fusionas con datos de atribución de marketing usando dbt:",{"type":32,"tag":88,"props":1259,"children":1263},{"className":1260,"code":1261,"language":1262,"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",[1264],{"type":32,"tag":95,"props":1265,"children":1266},{"__ignoreMap":16},[1267,1275,1298,1306,1314,1380,1437,1460,1473,1481,1497,1510,1530,1538,1546,1554,1595,1632,1645,1663,1697,1736,1797,1810,1833],{"type":32,"tag":99,"props":1268,"children":1269},{"class":101,"line":102},[1270],{"type":32,"tag":99,"props":1271,"children":1272},{"style":106},[1273],{"type":37,"value":1274},"-- models\u002Fperformance_impact.sql\n",{"type":32,"tag":99,"props":1276,"children":1277},{"class":101,"line":112},[1278,1283,1288,1293],{"type":32,"tag":99,"props":1279,"children":1280},{"style":316},[1281],{"type":37,"value":1282},"WITH",{"type":32,"tag":99,"props":1284,"children":1285},{"style":122},[1286],{"type":37,"value":1287}," vitals ",{"type":32,"tag":99,"props":1289,"children":1290},{"style":316},[1291],{"type":37,"value":1292},"AS",{"type":32,"tag":99,"props":1294,"children":1295},{"style":122},[1296],{"type":37,"value":1297}," (\n",{"type":32,"tag":99,"props":1299,"children":1300},{"class":101,"line":134},[1301],{"type":32,"tag":99,"props":1302,"children":1303},{"style":316},[1304],{"type":37,"value":1305},"  SELECT\n",{"type":32,"tag":99,"props":1307,"children":1308},{"class":101,"line":159},[1309],{"type":32,"tag":99,"props":1310,"children":1311},{"style":122},[1312],{"type":37,"value":1313},"    session_id,\n",{"type":32,"tag":99,"props":1315,"children":1316},{"class":101,"line":173},[1317,1322,1326,1331,1336,1341,1346,1351,1356,1361,1366,1371,1375],{"type":32,"tag":99,"props":1318,"children":1319},{"style":138},[1320],{"type":37,"value":1321},"    AVG",{"type":32,"tag":99,"props":1323,"children":1324},{"style":122},[1325],{"type":37,"value":912},{"type":32,"tag":99,"props":1327,"children":1328},{"style":316},[1329],{"type":37,"value":1330},"CASE",{"type":32,"tag":99,"props":1332,"children":1333},{"style":316},[1334],{"type":37,"value":1335}," WHEN",{"type":32,"tag":99,"props":1337,"children":1338},{"style":122},[1339],{"type":37,"value":1340}," metric_name ",{"type":32,"tag":99,"props":1342,"children":1343},{"style":316},[1344],{"type":37,"value":1345},"=",{"type":32,"tag":99,"props":1347,"children":1348},{"style":128},[1349],{"type":37,"value":1350}," 'LCP'",{"type":32,"tag":99,"props":1352,"children":1353},{"style":316},[1354],{"type":37,"value":1355}," THEN",{"type":32,"tag":99,"props":1357,"children":1358},{"style":316},[1359],{"type":37,"value":1360}," value",{"type":32,"tag":99,"props":1362,"children":1363},{"style":316},[1364],{"type":37,"value":1365}," END",{"type":32,"tag":99,"props":1367,"children":1368},{"style":122},[1369],{"type":37,"value":1370},") ",{"type":32,"tag":99,"props":1372,"children":1373},{"style":316},[1374],{"type":37,"value":1292},{"type":32,"tag":99,"props":1376,"children":1377},{"style":122},[1378],{"type":37,"value":1379}," avg_lcp,\n",{"type":32,"tag":99,"props":1381,"children":1382},{"class":101,"line":186},[1383,1387,1391,1395,1399,1403,1407,1412,1416,1420,1424,1428,1432],{"type":32,"tag":99,"props":1384,"children":1385},{"style":138},[1386],{"type":37,"value":1321},{"type":32,"tag":99,"props":1388,"children":1389},{"style":122},[1390],{"type":37,"value":912},{"type":32,"tag":99,"props":1392,"children":1393},{"style":316},[1394],{"type":37,"value":1330},{"type":32,"tag":99,"props":1396,"children":1397},{"style":316},[1398],{"type":37,"value":1335},{"type":32,"tag":99,"props":1400,"children":1401},{"style":122},[1402],{"type":37,"value":1340},{"type":32,"tag":99,"props":1404,"children":1405},{"style":316},[1406],{"type":37,"value":1345},{"type":32,"tag":99,"props":1408,"children":1409},{"style":128},[1410],{"type":37,"value":1411}," 'CLS'",{"type":32,"tag":99,"props":1413,"children":1414},{"style":316},[1415],{"type":37,"value":1355},{"type":32,"tag":99,"props":1417,"children":1418},{"style":316},[1419],{"type":37,"value":1360},{"type":32,"tag":99,"props":1421,"children":1422},{"style":316},[1423],{"type":37,"value":1365},{"type":32,"tag":99,"props":1425,"children":1426},{"style":122},[1427],{"type":37,"value":1370},{"type":32,"tag":99,"props":1429,"children":1430},{"style":316},[1431],{"type":37,"value":1292},{"type":32,"tag":99,"props":1433,"children":1434},{"style":122},[1435],{"type":37,"value":1436}," avg_cls\n",{"type":32,"tag":99,"props":1438,"children":1439},{"class":101,"line":204},[1440,1445,1450,1455],{"type":32,"tag":99,"props":1441,"children":1442},{"style":316},[1443],{"type":37,"value":1444},"  FROM",{"type":32,"tag":99,"props":1446,"children":1447},{"style":122},[1448],{"type":37,"value":1449}," {{ ref(",{"type":32,"tag":99,"props":1451,"children":1452},{"style":128},[1453],{"type":37,"value":1454},"'raw_vitals'",{"type":32,"tag":99,"props":1456,"children":1457},{"style":122},[1458],{"type":37,"value":1459},") }}\n",{"type":32,"tag":99,"props":1461,"children":1462},{"class":101,"line":26},[1463,1468],{"type":32,"tag":99,"props":1464,"children":1465},{"style":316},[1466],{"type":37,"value":1467},"  GROUP BY",{"type":32,"tag":99,"props":1469,"children":1470},{"style":122},[1471],{"type":37,"value":1472}," session_id\n",{"type":32,"tag":99,"props":1474,"children":1475},{"class":101,"line":239},[1476],{"type":32,"tag":99,"props":1477,"children":1478},{"style":122},[1479],{"type":37,"value":1480},"),\n",{"type":32,"tag":99,"props":1482,"children":1483},{"class":101,"line":260},[1484,1489,1493],{"type":32,"tag":99,"props":1485,"children":1486},{"style":122},[1487],{"type":37,"value":1488},"conversions ",{"type":32,"tag":99,"props":1490,"children":1491},{"style":316},[1492],{"type":37,"value":1292},{"type":32,"tag":99,"props":1494,"children":1495},{"style":122},[1496],{"type":37,"value":1297},{"type":32,"tag":99,"props":1498,"children":1499},{"class":101,"line":282},[1500,1505],{"type":32,"tag":99,"props":1501,"children":1502},{"style":316},[1503],{"type":37,"value":1504},"  SELECT",{"type":32,"tag":99,"props":1506,"children":1507},{"style":122},[1508],{"type":37,"value":1509}," session_id, revenue, converted\n",{"type":32,"tag":99,"props":1511,"children":1512},{"class":101,"line":303},[1513,1517,1521,1526],{"type":32,"tag":99,"props":1514,"children":1515},{"style":316},[1516],{"type":37,"value":1444},{"type":32,"tag":99,"props":1518,"children":1519},{"style":122},[1520],{"type":37,"value":1449},{"type":32,"tag":99,"props":1522,"children":1523},{"style":128},[1524],{"type":37,"value":1525},"'ga4_sessions'",{"type":32,"tag":99,"props":1527,"children":1528},{"style":122},[1529],{"type":37,"value":1459},{"type":32,"tag":99,"props":1531,"children":1532},{"class":101,"line":322},[1533],{"type":32,"tag":99,"props":1534,"children":1535},{"style":122},[1536],{"type":37,"value":1537},")\n",{"type":32,"tag":99,"props":1539,"children":1540},{"class":101,"line":331},[1541],{"type":32,"tag":99,"props":1542,"children":1543},{"style":316},[1544],{"type":37,"value":1545},"SELECT\n",{"type":32,"tag":99,"props":1547,"children":1548},{"class":101,"line":340},[1549],{"type":32,"tag":99,"props":1550,"children":1551},{"style":316},[1552],{"type":37,"value":1553},"  CASE\n",{"type":32,"tag":99,"props":1555,"children":1556},{"class":101,"line":353},[1557,1562,1567,1571,1576,1581,1586,1590],{"type":32,"tag":99,"props":1558,"children":1559},{"style":316},[1560],{"type":37,"value":1561},"    WHEN",{"type":32,"tag":99,"props":1563,"children":1564},{"style":138},[1565],{"type":37,"value":1566}," v",{"type":32,"tag":99,"props":1568,"children":1569},{"style":122},[1570],{"type":37,"value":951},{"type":32,"tag":99,"props":1572,"children":1573},{"style":138},[1574],{"type":37,"value":1575},"avg_lcp",{"type":32,"tag":99,"props":1577,"children":1578},{"style":316},[1579],{"type":37,"value":1580}," \u003C=",{"type":32,"tag":99,"props":1582,"children":1583},{"style":138},[1584],{"type":37,"value":1585}," 2500",{"type":32,"tag":99,"props":1587,"children":1588},{"style":316},[1589],{"type":37,"value":1355},{"type":32,"tag":99,"props":1591,"children":1592},{"style":128},[1593],{"type":37,"value":1594}," 'good'\n",{"type":32,"tag":99,"props":1596,"children":1597},{"class":101,"line":725},[1598,1602,1606,1610,1614,1618,1623,1627],{"type":32,"tag":99,"props":1599,"children":1600},{"style":316},[1601],{"type":37,"value":1561},{"type":32,"tag":99,"props":1603,"children":1604},{"style":138},[1605],{"type":37,"value":1566},{"type":32,"tag":99,"props":1607,"children":1608},{"style":122},[1609],{"type":37,"value":951},{"type":32,"tag":99,"props":1611,"children":1612},{"style":138},[1613],{"type":37,"value":1575},{"type":32,"tag":99,"props":1615,"children":1616},{"style":316},[1617],{"type":37,"value":1580},{"type":32,"tag":99,"props":1619,"children":1620},{"style":138},[1621],{"type":37,"value":1622}," 4000",{"type":32,"tag":99,"props":1624,"children":1625},{"style":316},[1626],{"type":37,"value":1355},{"type":32,"tag":99,"props":1628,"children":1629},{"style":128},[1630],{"type":37,"value":1631}," 'needs_improvement'\n",{"type":32,"tag":99,"props":1633,"children":1634},{"class":101,"line":738},[1635,1640],{"type":32,"tag":99,"props":1636,"children":1637},{"style":316},[1638],{"type":37,"value":1639},"    ELSE",{"type":32,"tag":99,"props":1641,"children":1642},{"style":128},[1643],{"type":37,"value":1644}," 'poor'\n",{"type":32,"tag":99,"props":1646,"children":1647},{"class":101,"line":756},[1648,1653,1658],{"type":32,"tag":99,"props":1649,"children":1650},{"style":316},[1651],{"type":37,"value":1652},"  END",{"type":32,"tag":99,"props":1654,"children":1655},{"style":316},[1656],{"type":37,"value":1657}," AS",{"type":32,"tag":99,"props":1659,"children":1660},{"style":122},[1661],{"type":37,"value":1662}," lcp_band,\n",{"type":32,"tag":99,"props":1664,"children":1665},{"class":101,"line":765},[1666,1671,1675,1680,1684,1688,1693],{"type":32,"tag":99,"props":1667,"children":1668},{"style":138},[1669],{"type":37,"value":1670},"  COUNT",{"type":32,"tag":99,"props":1672,"children":1673},{"style":122},[1674],{"type":37,"value":912},{"type":32,"tag":99,"props":1676,"children":1677},{"style":316},[1678],{"type":37,"value":1679},"*",{"type":32,"tag":99,"props":1681,"children":1682},{"style":122},[1683],{"type":37,"value":1370},{"type":32,"tag":99,"props":1685,"children":1686},{"style":316},[1687],{"type":37,"value":1292},{"type":32,"tag":99,"props":1689,"children":1690},{"style":316},[1691],{"type":37,"value":1692}," sessions",{"type":32,"tag":99,"props":1694,"children":1695},{"style":122},[1696],{"type":37,"value":504},{"type":32,"tag":99,"props":1698,"children":1699},{"class":101,"line":774},[1700,1705,1709,1714,1718,1723,1727,1731],{"type":32,"tag":99,"props":1701,"children":1702},{"style":138},[1703],{"type":37,"value":1704},"  SUM",{"type":32,"tag":99,"props":1706,"children":1707},{"style":122},[1708],{"type":37,"value":912},{"type":32,"tag":99,"props":1710,"children":1711},{"style":138},[1712],{"type":37,"value":1713},"c",{"type":32,"tag":99,"props":1715,"children":1716},{"style":122},[1717],{"type":37,"value":951},{"type":32,"tag":99,"props":1719,"children":1720},{"style":138},[1721],{"type":37,"value":1722},"converted",{"type":32,"tag":99,"props":1724,"children":1725},{"style":122},[1726],{"type":37,"value":1370},{"type":32,"tag":99,"props":1728,"children":1729},{"style":316},[1730],{"type":37,"value":1292},{"type":32,"tag":99,"props":1732,"children":1733},{"style":122},[1734],{"type":37,"value":1735}," conversions,\n",{"type":32,"tag":99,"props":1737,"children":1738},{"class":101,"line":1216},[1739,1744,1749,1753,1757,1761,1765,1770,1775,1779,1783,1788,1792],{"type":32,"tag":99,"props":1740,"children":1741},{"style":122},[1742],{"type":37,"value":1743},"  SAFE_DIVIDE(",{"type":32,"tag":99,"props":1745,"children":1746},{"style":138},[1747],{"type":37,"value":1748},"SUM",{"type":32,"tag":99,"props":1750,"children":1751},{"style":122},[1752],{"type":37,"value":912},{"type":32,"tag":99,"props":1754,"children":1755},{"style":138},[1756],{"type":37,"value":1713},{"type":32,"tag":99,"props":1758,"children":1759},{"style":122},[1760],{"type":37,"value":951},{"type":32,"tag":99,"props":1762,"children":1763},{"style":138},[1764],{"type":37,"value":1722},{"type":32,"tag":99,"props":1766,"children":1767},{"style":122},[1768],{"type":37,"value":1769},"), ",{"type":32,"tag":99,"props":1771,"children":1772},{"style":138},[1773],{"type":37,"value":1774},"COUNT",{"type":32,"tag":99,"props":1776,"children":1777},{"style":122},[1778],{"type":37,"value":912},{"type":32,"tag":99,"props":1780,"children":1781},{"style":316},[1782],{"type":37,"value":1679},{"type":32,"tag":99,"props":1784,"children":1785},{"style":122},[1786],{"type":37,"value":1787},")) ",{"type":32,"tag":99,"props":1789,"children":1790},{"style":316},[1791],{"type":37,"value":1292},{"type":32,"tag":99,"props":1793,"children":1794},{"style":122},[1795],{"type":37,"value":1796}," cvr\n",{"type":32,"tag":99,"props":1798,"children":1799},{"class":101,"line":1229},[1800,1805],{"type":32,"tag":99,"props":1801,"children":1802},{"style":316},[1803],{"type":37,"value":1804},"FROM",{"type":32,"tag":99,"props":1806,"children":1807},{"style":122},[1808],{"type":37,"value":1809}," vitals v\n",{"type":32,"tag":99,"props":1811,"children":1812},{"class":101,"line":1242},[1813,1818,1823,1828],{"type":32,"tag":99,"props":1814,"children":1815},{"style":316},[1816],{"type":37,"value":1817},"LEFT JOIN",{"type":32,"tag":99,"props":1819,"children":1820},{"style":122},[1821],{"type":37,"value":1822}," conversions c ",{"type":32,"tag":99,"props":1824,"children":1825},{"style":316},[1826],{"type":37,"value":1827},"USING",{"type":32,"tag":99,"props":1829,"children":1830},{"style":122},[1831],{"type":37,"value":1832},"(session_id)\n",{"type":32,"tag":99,"props":1834,"children":1836},{"class":101,"line":1835},25,[1837,1842],{"type":32,"tag":99,"props":1838,"children":1839},{"style":316},[1840],{"type":37,"value":1841},"GROUP BY",{"type":32,"tag":99,"props":1843,"children":1844},{"style":122},[1845],{"type":37,"value":1846}," lcp_band;\n",{"type":32,"tag":33,"props":1848,"children":1849},{},[1850],{"type":37,"value":1851},"Esta tabla te muestra \"cuando LCP está por debajo de 2,5 segundos, CVR es 3,4 %; por encima, es 2,1 %\". Cuando reportas esto al CMO, el pedido vago \"optimicemos el rendimiento\" se convierte en concreto: \"si bajamos LCP a menos de 2,5 segundos, generaríamos $18K de ingresos adicionales al mes\".",{"type":32,"tag":40,"props":1853,"children":1855},{"id":1854},"vincular-alarmas-de-regresión-a-integración-slackpagerduty",[1856],{"type":37,"value":1857},"Vincular Alarmas de Regresión a Integración Slack\u002FPagerDuty",{"type":32,"tag":33,"props":1859,"children":1860},{},[1861],{"type":37,"value":1862},"Una vez que recopiles datos de RUM, necesitas detectar regresiones automáticamente. Por ejemplo, si tu promedio de los últimos 7 días es LCP de 2,2 segundos pero hoy sube a 3,1, es una regresión — por despliegue o problema de CDN. Esta alarma debe dispararse automáticamente, no mediante control manual de dashboard.",{"type":32,"tag":798,"props":1864,"children":1866},{"id":1865},"alertas-basadas-en-métricas-con-datadog",[1867],{"type":37,"value":1868},"Alertas Basadas en Métricas con DataDog",{"type":32,"tag":33,"props":1870,"children":1871},{},[1872],{"type":37,"value":1873},"DataDog parsea automáticamente las métricas de RUM y ejecuta detección de anomalías. Una definición de monitor:",{"type":32,"tag":88,"props":1875,"children":1877},{"className":384,"code":1876,"language":386,"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 superado 2500ms en la última 1 hora. Último despliegue: {{deploy.id}}. @slack-perf-alerts @pagerduty\",\n  \"tags\": [\"service:ecommerce\", \"env:production\"],\n  \"thresholds\": {\n    \"critical\": 2500,\n    \"warning\": 2200\n  }\n}\n",[1878],{"type":32,"tag":95,"props":1879,"children":1880},{"__ignoreMap":16},[1881,1888,1909,1930,1951,1972,2003,2015,2035,2052,2059],{"type":32,"tag":99,"props":1882,"children":1883},{"class":101,"line":102},[1884],{"type":32,"tag":99,"props":1885,"children":1886},{"style":122},[1887],{"type":37,"value":398},{"type":32,"tag":99,"props":1889,"children":1890},{"class":101,"line":112},[1891,1896,1900,1905],{"type":32,"tag":99,"props":1892,"children":1893},{"style":138},[1894],{"type":37,"value":1895},"  \"name\"",{"type":32,"tag":99,"props":1897,"children":1898},{"style":122},[1899],{"type":37,"value":125},{"type":32,"tag":99,"props":1901,"children":1902},{"style":128},[1903],{"type":37,"value":1904},"\"LCP Regression - Desktop\"",{"type":32,"tag":99,"props":1906,"children":1907},{"style":122},[1908],{"type":37,"value":504},{"type":32,"tag":99,"props":1910,"children":1911},{"class":101,"line":134},[1912,1917,1921,1926],{"type":32,"tag":99,"props":1913,"children":1914},{"style":138},[1915],{"type":37,"value":1916},"  \"type\"",{"type":32,"tag":99,"props":1918,"children":1919},{"style":122},[1920],{"type":37,"value":125},{"type":32,"tag":99,"props":1922,"children":1923},{"style":128},[1924],{"type":37,"value":1925},"\"metric alert\"",{"type":32,"tag":99,"props":1927,"children":1928},{"style":122},[1929],{"type":37,"value":504},{"type":32,"tag":99,"props":1931,"children":1932},{"class":101,"line":159},[1933,1938,1942,1947],{"type":32,"tag":99,"props":1934,"children":1935},{"style":138},[1936],{"type":37,"value":1937},"  \"query\"",{"type":32,"tag":99,"props":1939,"children":1940},{"style":122},[1941],{"type":37,"value":125},{"type":32,"tag":99,"props":1943,"children":1944},{"style":128},[1945],{"type":37,"value":1946},"\"avg(last_1h):avg:rum.largest_contentful_paint{device:desktop} > 2500\"",{"type":32,"tag":99,"props":1948,"children":1949},{"style":122},[1950],{"type":37,"value":504},{"type":32,"tag":99,"props":1952,"children":1953},{"class":101,"line":173},[1954,1959,1963,1968],{"type":32,"tag":99,"props":1955,"children":1956},{"style":138},[1957],{"type":37,"value":1958},"  \"message\"",{"type":32,"tag":99,"props":1960,"children":1961},{"style":122},[1962],{"type":37,"value":125},{"type":32,"tag":99,"props":1964,"children":1965},{"style":128},[1966],{"type":37,"value":1967},"\"LCP desktop ha superado 2500ms en la última 1 hora. Último despliegue: {{deploy.id}}. @slack-perf-alerts @pagerduty\"",{"type":32,"tag":99,"props":1969,"children":1970},{"style":122},[1971],{"type":37,"value":504},{"type":32,"tag":99,"props":1973,"children":1974},{"class":101,"line":186},[1975,1980,1984,1989,1994,1999],{"type":32,"tag":99,"props":1976,"children":1977},{"style":138},[1978],{"type":37,"value":1979},"  \"tags\"",{"type":32,"tag":99,"props":1981,"children":1982},{"style":122},[1983],{"type":37,"value":146},{"type":32,"tag":99,"props":1985,"children":1986},{"style":128},[1987],{"type":37,"value":1988},"\"service:ecommerce\"",{"type":32,"tag":99,"props":1990,"children":1991},{"style":122},[1992],{"type":37,"value":1993},", ",{"type":32,"tag":99,"props":1995,"children":1996},{"style":128},[1997],{"type":37,"value":1998},"\"env:production\"",{"type":32,"tag":99,"props":2000,"children":2001},{"style":122},[2002],{"type":37,"value":445},{"type":32,"tag":99,"props":2004,"children":2005},{"class":101,"line":204},[2006,2011],{"type":32,"tag":99,"props":2007,"children":2008},{"style":138},[2009],{"type":37,"value":2010},"  \"thresholds\"",{"type":32,"tag":99,"props":2012,"children":2013},{"style":122},[2014],{"type":37,"value":411},{"type":32,"tag":99,"props":2016,"children":2017},{"class":101,"line":26},[2018,2023,2027,2031],{"type":32,"tag":99,"props":2019,"children":2020},{"style":138},[2021],{"type":37,"value":2022},"    \"critical\"",{"type":32,"tag":99,"props":2024,"children":2025},{"style":122},[2026],{"type":37,"value":125},{"type":32,"tag":99,"props":2028,"children":2029},{"style":138},[2030],{"type":37,"value":627},{"type":32,"tag":99,"props":2032,"children":2033},{"style":122},[2034],{"type":37,"value":504},{"type":32,"tag":99,"props":2036,"children":2037},{"class":101,"line":239},[2038,2043,2047],{"type":32,"tag":99,"props":2039,"children":2040},{"style":138},[2041],{"type":37,"value":2042},"    \"warning\"",{"type":32,"tag":99,"props":2044,"children":2045},{"style":122},[2046],{"type":37,"value":125},{"type":32,"tag":99,"props":2048,"children":2049},{"style":138},[2050],{"type":37,"value":2051},"2200\n",{"type":32,"tag":99,"props":2053,"children":2054},{"class":101,"line":260},[2055],{"type":32,"tag":99,"props":2056,"children":2057},{"style":122},[2058],{"type":37,"value":771},{"type":32,"tag":99,"props":2060,"children":2061},{"class":101,"line":282},[2062],{"type":32,"tag":99,"props":2063,"children":2064},{"style":122},[2065],{"type":37,"value":780},{"type":32,"tag":33,"props":2067,"children":2068},{},[2069],{"type":37,"value":2070},"Cuando esta alarma se dispara, cae en el canal Slack, abre un incident en PagerDuty y despierta al desarrollador on-call. Si el mensaje tiene el ID del despliegue (viene de un tag del pipeline de CI), encuentras la regresión en 30 segundos.",{"type":32,"tag":798,"props":2072,"children":2074},{"id":2073},"dirigir-fallos-de-threshold-de-lighthouse-ci-como-alarmas-también",[2075],{"type":37,"value":2076},"Dirigir Fallos de Threshold de Lighthouse CI como Alarmas También",{"type":32,"tag":33,"props":2078,"children":2079},{},[2080],{"type":37,"value":2081},"Algunos equipos no dejan el fallo de Lighthouse CI solo como un bloqueo de PR, sino que también envían una notificación a Slack:",{"type":32,"tag":88,"props":2083,"children":2085},{"className":90,"code":2084,"language":92,"meta":16,"style":16},"# .github\u002Fworkflows\u002Flighthouse-ci.yml (paso adicional)\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",[2086],{"type":32,"tag":95,"props":2087,"children":2088},{"__ignoreMap":16},[2089,2097,2118,2134,2151,2163,2179,2187,2195,2203,2211,2219,2227,2235,2243,2251,2259,2267,2274,2286],{"type":32,"tag":99,"props":2090,"children":2091},{"class":101,"line":102},[2092],{"type":32,"tag":99,"props":2093,"children":2094},{"style":106},[2095],{"type":37,"value":2096},"# .github\u002Fworkflows\u002Flighthouse-ci.yml (paso adicional)\n",{"type":32,"tag":99,"props":2098,"children":2099},{"class":101,"line":112},[2100,2105,2109,2113],{"type":32,"tag":99,"props":2101,"children":2102},{"style":122},[2103],{"type":37,"value":2104},"- ",{"type":32,"tag":99,"props":2106,"children":2107},{"style":116},[2108],{"type":37,"value":119},{"type":32,"tag":99,"props":2110,"children":2111},{"style":122},[2112],{"type":37,"value":125},{"type":32,"tag":99,"props":2114,"children":2115},{"style":128},[2116],{"type":37,"value":2117},"Notify Slack on Failure\n",{"type":32,"tag":99,"props":2119,"children":2120},{"class":101,"line":134},[2121,2125,2129],{"type":32,"tag":99,"props":2122,"children":2123},{"style":116},[2124],{"type":37,"value":1088},{"type":32,"tag":99,"props":2126,"children":2127},{"style":122},[2128],{"type":37,"value":125},{"type":32,"tag":99,"props":2130,"children":2131},{"style":128},[2132],{"type":37,"value":2133},"failure()\n",{"type":32,"tag":99,"props":2135,"children":2136},{"class":101,"line":159},[2137,2142,2146],{"type":32,"tag":99,"props":2138,"children":2139},{"style":116},[2140],{"type":37,"value":2141},"  uses",{"type":32,"tag":99,"props":2143,"children":2144},{"style":122},[2145],{"type":37,"value":125},{"type":32,"tag":99,"props":2147,"children":2148},{"style":128},[2149],{"type":37,"value":2150},"slackapi\u002Fslack-github-action@v1\n",{"type":32,"tag":99,"props":2152,"children":2153},{"class":101,"line":173},[2154,2159],{"type":32,"tag":99,"props":2155,"children":2156},{"style":116},[2157],{"type":37,"value":2158},"  with",{"type":32,"tag":99,"props":2160,"children":2161},{"style":122},[2162],{"type":37,"value":170},{"type":32,"tag":99,"props":2164,"children":2165},{"class":101,"line":186},[2166,2171,2175],{"type":32,"tag":99,"props":2167,"children":2168},{"style":116},[2169],{"type":37,"value":2170},"    payload",{"type":32,"tag":99,"props":2172,"children":2173},{"style":122},[2174],{"type":37,"value":125},{"type":32,"tag":99,"props":2176,"children":2177},{"style":316},[2178],{"type":37,"value":319},{"type":32,"tag":99,"props":2180,"children":2181},{"class":101,"line":204},[2182],{"type":32,"tag":99,"props":2183,"children":2184},{"style":128},[2185],{"type":37,"value":2186},"      {\n",{"type":32,"tag":99,"props":2188,"children":2189},{"class":101,"line":26},[2190],{"type":32,"tag":99,"props":2191,"children":2192},{"style":128},[2193],{"type":37,"value":2194},"        \"text\": \"Lighthouse CI FAILED on PR #${{ github.event.pull_request.number }}\",\n",{"type":32,"tag":99,"props":2196,"children":2197},{"class":101,"line":239},[2198],{"type":32,"tag":99,"props":2199,"children":2200},{"style":128},[2201],{"type":37,"value":2202},"        \"blocks\": [\n",{"type":32,"tag":99,"props":2204,"children":2205},{"class":101,"line":260},[2206],{"type":32,"tag":99,"props":2207,"children":2208},{"style":128},[2209],{"type":37,"value":2210},"          {\n",{"type":32,"tag":99,"props":2212,"children":2213},{"class":101,"line":282},[2214],{"type":32,"tag":99,"props":2215,"children":2216},{"style":128},[2217],{"type":37,"value":2218},"            \"type\": \"section\",\n",{"type":32,"tag":99,"props":2220,"children":2221},{"class":101,"line":303},[2222],{"type":32,"tag":99,"props":2223,"children":2224},{"style":128},[2225],{"type":37,"value":2226},"            \"text\": {\n",{"type":32,"tag":99,"props":2228,"children":2229},{"class":101,"line":322},[2230],{"type":32,"tag":99,"props":2231,"children":2232},{"style":128},[2233],{"type":37,"value":2234},"              \"type\": \"mrkdwn\",\n",{"type":32,"tag":99,"props":2236,"children":2237},{"class":101,"line":331},[2238],{"type":32,"tag":99,"props":2239,"children":2240},{"style":128},[2241],{"type":37,"value":2242},"              \"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":99,"props":2244,"children":2245},{"class":101,"line":340},[2246],{"type":32,"tag":99,"props":2247,"children":2248},{"style":128},[2249],{"type":37,"value":2250},"            }\n",{"type":32,"tag":99,"props":2252,"children":2253},{"class":101,"line":353},[2254],{"type":32,"tag":99,"props":2255,"children":2256},{"style":128},[2257],{"type":37,"value":2258},"          }\n",{"type":32,"tag":99,"props":2260,"children":2261},{"class":101,"line":725},[2262],{"type":32,"tag":99,"props":2263,"children":2264},{"style":128},[2265],{"type":37,"value":2266},"        ]\n",{"type":32,"tag":99,"props":2268,"children":2269},{"class":101,"line":738},[2270],{"type":32,"tag":99,"props":2271,"children":2272},{"style":128},[2273],{"type":37,"value":715},{"type":32,"tag":99,"props":2275,"children":2276},{"class":101,"line":756},[2277,2282],{"type":32,"tag":99,"props":2278,"children":2279},{"style":116},[2280],{"type":37,"value":2281},"  env",{"type":32,"tag":99,"props":2283,"children":2284},{"style":122},[2285],{"type":37,"value":170},{"type":32,"tag":99,"props":2287,"children":2288},{"class":101,"line":765},[2289,2294,2298],{"type":32,"tag":99,"props":2290,"children":2291},{"style":116},[2292],{"type":37,"value":2293},"    SLACK_WEBHOOK_URL",{"type":32,"tag":99,"props":2295,"children":2296},{"style":122},[2297],{"type":37,"value":125},{"type":32,"tag":99,"props":2299,"children":2300},{"style":128},[2301],{"type":37,"value":2302},"${{ secrets.SLACK_WEBHOOK_PERF }}\n",{"type":32,"tag":33,"props":2304,"children":2305},{},[2306],{"type":37,"value":2307},"Así el ingeniero abre un PR y recibe tanto un tick rojo en CI como una notificación de Slack — la atención se captura instantáneamente.",{"type":32,"tag":40,"props":2309,"children":2311},{"id":2310},"integrar-presupuestos-a-tu-sistema-de-feature-flags",[2312],{"type":37,"value":2313},"Integrar Presupuestos a tu Sistema de Feature Flags",{"type":32,"tag":33,"props":2315,"children":2316},{},[2317],{"type":37,"value":2318},"Algunas características son inherentemente pesadas: widget de chat en vivo (80 KB JS), motor de personalización (150 KB + costo de runtime), reproductor de video (200 KB). En lugar de desplegarlas para todos, prueba el presupuesto de rendimiento en un segmento que no lo exceda (p. ej. desktop + conexión rápida) y abre de forma gradual.",{"type":32,"tag":33,"props":2320,"children":2321},{},[2322],{"type":37,"value":2323},"En LaunchDarkly o tu propio sistema de feature flags, puedes definir reglas:",{"type":32,"tag":88,"props":2325,"children":2327},{"className":842,"code":2326,"language":844,"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",[2328],{"type":32,"tag":95,"props":2329,"children":2330},{"__ignoreMap":16},[2331,2339,2364,2371,2411,2451,2486,2493,2538],{"type":32,"tag":99,"props":2332,"children":2333},{"class":101,"line":102},[2334],{"type":32,"tag":99,"props":2335,"children":2336},{"style":106},[2337],{"type":37,"value":2338},"\u002F\u002F featureFlags.js\n",{"type":32,"tag":99,"props":2340,"children":2341},{"class":101,"line":112},[2342,2346,2351,2355,2360],{"type":32,"tag":99,"props":2343,"children":2344},{"style":316},[2345],{"type":37,"value":864},{"type":32,"tag":99,"props":2347,"children":2348},{"style":122},[2349],{"type":37,"value":2350}," { getConnectionSpeed } ",{"type":32,"tag":99,"props":2352,"children":2353},{"style":316},[2354],{"type":37,"value":874},{"type":32,"tag":99,"props":2356,"children":2357},{"style":128},[2358],{"type":37,"value":2359}," '.\u002Futils'",{"type":32,"tag":99,"props":2361,"children":2362},{"style":122},[2363],{"type":37,"value":884},{"type":32,"tag":99,"props":2365,"children":2366},{"class":101,"line":134},[2367],{"type":32,"tag":99,"props":2368,"children":2369},{"emptyLinePlaceholder":890},[2370],{"type":37,"value":893},{"type":32,"tag":99,"props":2372,"children":2373},{"class":101,"line":159},[2374,2379,2384,2389,2393,2398,2402,2407],{"type":32,"tag":99,"props":2375,"children":2376},{"style":316},[2377],{"type":37,"value":2378},"export",{"type":32,"tag":99,"props":2380,"children":2381},{"style":316},[2382],{"type":37,"value":2383}," function",{"type":32,"tag":99,"props":2385,"children":2386},{"style":904},[2387],{"type":37,"value":2388}," shouldEnableChatWidget",{"type":32,"tag":99,"props":2390,"children":2391},{"style":122},[2392],{"type":37,"value":912},{"type":32,"tag":99,"props":2394,"children":2395},{"style":915},[2396],{"type":37,"value":2397},"user",{"type":32,"tag":99,"props":2399,"children":2400},{"style":122},[2401],{"type":37,"value":1993},{"type":32,"tag":99,"props":2403,"children":2404},{"style":915},[2405],{"type":37,"value":2406},"vitals",{"type":32,"tag":99,"props":2408,"children":2409},{"style":122},[2410],{"type":37,"value":923},{"type":32,"tag":99,"props":2412,"children":2413},{"class":101,"line":173},[2414,2418,2423,2427,2432,2437,2442,2447],{"type":32,"tag":99,"props":2415,"children":2416},{"style":316},[2417],{"type":37,"value":931},{"type":32,"tag":99,"props":2419,"children":2420},{"style":138},[2421],{"type":37,"value":2422}," is4G",{"type":32,"tag":99,"props":2424,"children":2425},{"style":316},[2426],{"type":37,"value":941},{"type":32,"tag":99,"props":2428,"children":2429},{"style":904},[2430],{"type":37,"value":2431}," getConnectionSpeed",{"type":32,"tag":99,"props":2433,"children":2434},{"style":122},[2435],{"type":37,"value":2436},"() ",{"type":32,"tag":99,"props":2438,"children":2439},{"style":316},[2440],{"type":37,"value":2441},"===",{"type":32,"tag":99,"props":2443,"children":2444},{"style":128},[2445],{"type":37,"value":2446}," '4g'",{"type":32,"tag":99,"props":2448,"children":2449},{"style":122},[2450],{"type":37,"value":884},{"type":32,"tag":99,"props":2452,"children":2453},{"class":101,"line":186},[2454,2458,2463,2467,2472,2477,2482],{"type":32,"tag":99,"props":2455,"children":2456},{"style":316},[2457],{"type":37,"value":931},{"type":32,"tag":99,"props":2459,"children":2460},{"style":138},[2461],{"type":37,"value":2462}," goodLCP",{"type":32,"tag":99,"props":2464,"children":2465},{"style":316},[2466],{"type":37,"value":941},{"type":32,"tag":99,"props":2468,"children":2469},{"style":122},[2470],{"type":37,"value":2471}," vitals.lcp ",{"type":32,"tag":99,"props":2473,"children":2474},{"style":316},[2475],{"type":37,"value":2476},"\u003C",{"type":32,"tag":99,"props":2478,"children":2479},{"style":138},[2480],{"type":37,"value":2481}," 2000",{"type":32,"tag":99,"props":2483,"children":2484},{"style":122},[2485],{"type":37,"value":884},{"type":32,"tag":99,"props":2487,"children":2488},{"class":101,"line":204},[2489],{"type":32,"tag":99,"props":2490,"children":2491},{"style":122},[2492],{"type":37,"value":1080},{"type":32,"tag":99,"props":2494,"children":2495},{"class":101,"line":26},[2496,2501,2506,2511,2516,2520,2525,2529,2534],{"type":32,"tag":99,"props":2497,"children":2498},{"style":316},[2499],{"type":37,"value":2500},"  return",{"type":32,"tag":99,"props":2502,"children":2503},{"style":122},[2504],{"type":37,"value":2505}," is4G ",{"type":32,"tag":99,"props":2507,"children":2508},{"style":316},[2509],{"type":37,"value":2510},"&&",{"type":32,"tag":99,"props":2512,"children":2513},{"style":122},[2514],{"type":37,"value":2515}," goodLCP ",{"type":32,"tag":99,"props":2517,"children":2518},{"style":316},[2519],{"type":37,"value":2510},{"type":32,"tag":99,"props":2521,"children":2522},{"style":122},[2523],{"type":37,"value":2524}," user.tier ",{"type":32,"tag":99,"props":2526,"children":2527},{"style":316},[2528],{"type":37,"value":2441},{"type":32,"tag":99,"props":2530,"children":2531},{"style":128},[2532],{"type":37,"value":2533}," 'premium'",{"type":32,"tag":99,"props":2535,"children":2536},{"style":122},[2537],{"type":37,"value":884},{"type":32,"tag":99,"props":2539,"children":2540},{"class":101,"line":239},[2541],{"type":32,"tag":99,"props":2542,"children":2543},{"style":122},[2544],{"type":37,"value":780},{"type":32,"tag":33,"props":2546,"children":2547},{},[2548],{"type":37,"value":2549},"Con este enfoque, la decisión de \"agreguemos un widget de chat\" no conlleva riesgo de \"LCP se incrementa 300 ms para todos\" — se abre solo en segmentos que cumplen condiciones, se recopilan datos de RUM, se mide el impacto en CVR, y luego haces rollout completo o lo retiras. Al compartir esta decisión de trade-off con marketing y product, lo demuestras numéricamente: \"El widget de chat incrementa CVR 0,4 % pero LCP sube a 2,8 segundos — impacto neto de ingresos +$8K pero experiencia degradada. ¿Cómo procedemos?\"",{"type":32,"tag":40,"props":2551,"children":2553},{"id":2552},"hacer-cumplir-el-presupuesto-de-rendimiento-en-headless-commerce",[2554],{"type":37,"value":2555},"Hacer Cumplir el Presupuesto de Rendimiento en Headless Commerce",{"type":32,"tag":33,"props":2557,"children":2558},{},[2559],{"type":37,"value":2560},"La arquitectura headless commerce (p. ej. Shopify Hydrogen, Next.js + Shopify API) generalmente es más rápida que Liquid porque tienes control del JavaScript del lado del cliente — puedes hacer hidratación selectiva. Pero con control viene riesgo de regresión — una actualización de paquete npm puede agregar 70 KB al bundle.",{"type":32,"tag":33,"props":2562,"children":2563},{},[2564,2566,2573],{"type":37,"value":2565},"En Roibase, bajo ",{"type":32,"tag":787,"props":2567,"children":2570},{"href":2568,"rel":2569},"https:\u002F\u002Fwww.roibase.com.tr\u002Fes\u002Fshopify",[791],[2571],{"type":37,"value":2572},"Shopify Partner Services",{"type":37,"value":2574},", aplicamos este flujo en transiciones headless:",{"type":32,"tag":2576,"props":2577,"children":2578},"ol",{},[2579,2591,2608,2618,2628],{"type":32,"tag":2580,"props":2581,"children":2582},"li",{},[2583,2589],{"type":32,"tag":2584,"props":2585,"children":2586},"strong",{},[2587],{"type":37,"value":2588},"Establecer línea base:",{"type":37,"value":2590}," Recopila datos de RUM en tu tema Liquid actual (30 días). Registra valores medianos de LCP, TBT, CLS.",{"type":32,"tag":2580,"props":2592,"children":2593},{},[2594,2599,2601,2606],{"type":32,"tag":2584,"props":2595,"children":2596},{},[2597],{"type":37,"value":2598},"Gate del prototipo headless con Lighthouse CI:",{"type":37,"value":2600}," Cada commit debe cumplir con el presupuesto en ",{"type":32,"tag":95,"props":2602,"children":2604},{"className":2603},[],[2605],{"type":37,"value":379},{"type":37,"value":2607},". El primer despliegue debe ser 20 % mejor que la línea base.",{"type":32,"tag":2580,"props":2609,"children":2610},{},[2611,2616],{"type":32,"tag":2584,"props":2612,"children":2613},{},[2614],{"type":37,"value":2615},"Comparación de RUM en producción:",{"type":37,"value":2617}," En los primeros 7 días, ejecuta una prueba A\u002FB enviando el 10 % del tráfico a la nueva versión headless, compara métricas de RUM.",{"type":32,"tag":2580,"props":2619,"children":2620},{},[2621,2626],{"type":32,"tag":2584,"props":2622,"children":2623},{},[2624],{"type":37,"value":2625},"Establecer alarmas de regresión:",{"type":37,"value":2627}," Después de migrar, fija monitores de DataDog: LCP \u003C 2,5 segundos, TBT \u003C 200 ms.",{"type":32,"tag":2580,"props":2629,"children":2630},{},[2631,2636],{"type":32,"tag":2584,"props":2632,"children":2633},{},[2634],{"type":37,"value":2635},"Revisión trimestral:",{"type":37,"value":2637}," Cada trimestre, audita tamaño de bundle, limpia dependencias sin usar.",{"type":32,"tag":33,"props":2639,"children":2640},{},[2641],{"type":37,"value":2642},"Con un cliente de comercio electrónico, este proceso resultó en: Liquid LCP 4,1 segundos → Hydrogen LCP 1,8 segundos, CVR de 2,3 % a 3,1 % (+35 %). Pero 6 meses después, con nuevas características, LCP subió a 2,9 segundos, CVR bajó a 2,9 % — porque el enforcement de presupuesto se relajó. Cuando reaplicamos el presupuesto, en 2 semanas bajó a 2,1 segundos.",{"type":32,"tag":40,"props":2644,"children":2646},{"id":2645},"trade-off-velocidad-vs",[2647],{"type":37,"value":2648},"Trade-off: Velocidad vs",{"type":32,"tag":2650,"props":2651,"children":2652},"style",{},[2653],{"type":37,"value":2654},"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":134,"depth":134,"links":2656},[2657,2658,2661,2662,2666,2667,2668],{"id":42,"depth":112,"text":45},{"id":78,"depth":112,"text":81,"children":2659},[2660],{"id":800,"depth":134,"text":803},{"id":818,"depth":112,"text":821},{"id":1854,"depth":112,"text":1857,"children":2663},[2664,2665],{"id":1865,"depth":134,"text":1868},{"id":2073,"depth":134,"text":2076},{"id":2310,"depth":112,"text":2313},{"id":2552,"depth":112,"text":2555},{"id":2645,"depth":112,"text":2648},"markdown","content:es:tech:web-performance-budgets-decision-making.md","content","es\u002Ftech\u002Fweb-performance-budgets-decision-making.md","es\u002Ftech\u002Fweb-performance-budgets-decision-making","md",1783289078210]