[{"data":1,"prerenderedAt":2647},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fweb-performance-budget-karar-mekanizmasi":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":2641,"_id":2642,"_source":2643,"_file":2644,"_stem":2645,"_extension":2646},"\u002Fru\u002Ftech\u002Fweb-performance-budget-karar-mekanizmasi","tech",false,"","Web Performance Budget'ы: Связь с Механизмом Принятия Решений","Интеграция Lighthouse CI, RUM и алармов регрессии производительности. Методология снижения TBT с 2190 мс до 200 мс.","2026-06-23",[21,22,23,24,25],"веб-производительность","lighthouse-ci","rum","core-web-vitals","performance-budget",9,"Roibase",{"type":29,"children":30,"toc":2628},"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,2315,2321,2326,2331,2552,2557,2563,2568,2581,2622],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","В 2026 году веб-производительность — это уже не просто \"сделать страницу быстрой\", а постоянный инженерный процесс с принятием обоснованных решений. Вы развёртываете интернет-магазин, оценка Lighthouse падает с 92 до 68, коэффициент конверсии снижается с 3,2% до 2,7% — но никто это не замечает, потому что мониторинг ограничивается проверкой \"сервер упал?\". Привязка performance budget к механизму принятия решений означает: поймать регрессию до развёртывания, оценить каждый коммит по порогам LCP\u002FTBT\u002FCLS и подать данные RUM в pipeline атрибуции. В этой статье мы покажем, как интегрировать Lighthouse CI, синтетический мониторинг, RUM и систему алармов в единую архитектуру.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"что-такое-performance-budget-и-почему-его-должна-контролировать-система-а-не-человек",[44],{"type":37,"value":45},"Что Такое Performance Budget и Почему его Должна Контролировать Система, а не Человек",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Performance budget — это числовые пороги на ресурсы и метрики производительности на странице: максимальный размер JavaScript-бандла (например, 200 КБ gzip), максимальный TBT (Total Blocking Time, 200 мс), максимальный LCP (Largest Contentful Paint, 2,5 сек). Эти цифры не произвольны — пороги Core Web Vitals от Google определяют полосу \"хорошо\", но вам нужно вывести более острые лимиты из данных о конверсии вашего сектора.",{"type":32,"tag":33,"props":52,"children":53},{},[54,56,62,64,69],{"type":37,"value":55},"Классический сценарий \"Lighthouse 95 в dev-среде, 72 в production\" возникает по этим причинам: синтетический тест работает в лабораторных условиях (быстрая сеть, пустой кеш, одна загрузка страницы), а RUM измеряет реального пользователя на 3G с полным кешем и разными типами навигации. Разница нормальна, но обе метрики нужно отслеживать. Lighthouse CI ловит регрессии размера бандла в каждом PR, RUM показывает production-реальность вроде \"у 22% мобильных пользователей LCP превышает 4 секунды\". Если budget определён только как \"score выше 75\", вы можете добавить 100 КБ в бандл, увеличить оценку с 74 до 76 — страница утяжелится, но score зелёный. Поэтому budget должен быть двойным: ",{"type":32,"tag":57,"props":58,"children":59},"em",{},[60],{"type":37,"value":61},"метрика-базированный",{"type":37,"value":63}," (LCP, TBT, CLS) и ",{"type":32,"tag":57,"props":65,"children":66},{},[67],{"type":37,"value":68},"ресурс-базированный",{"type":37,"value":70}," (JS, CSS, размер изображений в МБ).",{"type":32,"tag":33,"props":72,"children":73},{},[74],{"type":37,"value":75},"Ещё один момент: для enforcing budget'а недостаточно ручного код-ревью. \"Проверим performance при ревью\" не масштабируется при 20 PR\u002Fдень. Система должна измерять, система должна fail'ить, люди должны только понимать причину.",{"type":32,"tag":40,"props":77,"children":79},{"id":78},"lighthouse-ci-performance-gating-для-каждого-коммита",[80],{"type":37,"value":81},"Lighthouse CI: Performance Gating Для Каждого Коммита",{"type":32,"tag":33,"props":83,"children":84},{},[85],{"type":37,"value":86},"Lighthouse CI автоматически запускает Lighthouse-аудит на каждом коммите или PR и отправляет результаты в GitHub или внутренний dashboard. Интеграция в CI-pipeline:",{"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,238,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":218},{"class":101,"line":217},8,[219,224,229,233],{"type":32,"tag":99,"props":220,"children":221},{"style":122},[222],{"type":37,"value":223},"      - ",{"type":32,"tag":99,"props":225,"children":226},{"style":116},[227],{"type":37,"value":228},"uses",{"type":32,"tag":99,"props":230,"children":231},{"style":122},[232],{"type":37,"value":125},{"type":32,"tag":99,"props":234,"children":235},{"style":128},[236],{"type":37,"value":237},"actions\u002Fcheckout@v3\n",{"type":32,"tag":99,"props":239,"children":240},{"class":101,"line":26},[241,245,249,253],{"type":32,"tag":99,"props":242,"children":243},{"style":122},[244],{"type":37,"value":223},{"type":32,"tag":99,"props":246,"children":247},{"style":116},[248],{"type":37,"value":228},{"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":223},{"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":223},{"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},"В конфиге ",{"type":32,"tag":95,"props":375,"children":377},{"className":376},[],[378],{"type":37,"value":379},".lighthouserc.json",{"type":37,"value":381}," вы определяете budget'ы:",{"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":217},[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":26},[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},"При такой настройке, если PR добавляет 50 КБ лишнего JavaScript и TBT превысит 200 мс, CI упадёт и merge заблокируется. В проектах Roibase на ",{"type":32,"tag":787,"props":788,"children":792},"a",{"href":789,"rel":790},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fheadless",[791],"nofollow",[793],{"type":37,"value":794},"Headless Architecture",{"type":37,"value":796}," этим подходом мы сократили среднее TBT с 2190 мс до 200 мс — каждая библиотека тестировалась против budget перед добавлением.",{"type":32,"tag":798,"props":799,"children":801},"h3",{"id":800},"ограничения-lighthouse-ci-и-структурные-решения",[802],{"type":37,"value":803},"Ограничения Lighthouse CI и Структурные Решения",{"type":32,"tag":33,"props":805,"children":806},{},[807,809,814],{"type":37,"value":808},"Lighthouse CI выполняет синтетический тест: фиксированная пропускная способность (Moto G4, slow 4G), фиксированное замедление CPU (4x), одна страница. Реальный пользователь находится на другом устройстве, проходит разные сценарии (товар → корзина → оформление), видит варианты A\u002FB-тестов. Поэтому рассматривайте Lighthouse CI как ",{"type":32,"tag":57,"props":810,"children":811},{},[812],{"type":37,"value":813},"минимальный порог",{"type":37,"value":815}," — если pass, развёртывание возможно, но pass не означает идеальное production-состояние. RUM нужен для измерения production-реальности.",{"type":32,"tag":40,"props":817,"children":819},{"id":818},"rum-real-user-monitoring-превращение-production-реальности-в-данные-для-решений",[820],{"type":37,"value":821},"RUM (Real User Monitoring): Превращение Production-Реальности в Данные Для Решений",{"type":32,"tag":33,"props":823,"children":824},{},[825],{"type":37,"value":826},"RUM собирает метрики от реальных пользователей: Navigation Timing API, PerformanceObserver, CrUX. Сборку выполняет vendor (Speedcurve, Sentry Performance, Cloudflare Web Analytics) или собственный stack (библиотека web-vitals + BigQuery).",{"type":32,"tag":33,"props":828,"children":829},{},[830,832,838],{"type":37,"value":831},"Минимальная интеграция ",{"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":217},[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":26},[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},"Загрузите эти данные в BigQuery, затем объедините их с данными атрибуции маркетинга через 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":217},[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":26},[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},"Эта таблица покажет вам конкретику вроде \"при LCP ≤ 2,5 сек CVR 3,4%, при LCP > 2,5 сек CVR 2,1%\". Когда вы рапортируете это CMO, абстрактный запрос \"давайте оптимизируем производительность\" превращается в конкретику: \"если LCP ≤ 2,5 сек, +18K$ ежемесячного дохода\".",{"type":32,"tag":40,"props":1853,"children":1855},{"id":1854},"регрессионные-alarmy-в-slackpagerduty-автоматическое-обнаружение",[1856],{"type":37,"value":1857},"Регрессионные Alarmy в Slack\u002FPagerDuty: Автоматическое Обнаружение",{"type":32,"tag":33,"props":1859,"children":1860},{},[1861],{"type":37,"value":1862},"После сбора RUM-данных настройте автоматическое обнаружение регрессии. Если 7-дневное среднее LCP было 2,2 сек, а сегодня поднялось до 3,1 сек — это регрессия развёртывания или проблема CDN. Ловить это через ручной мониторинг неправильно — нужна автоматическая триггеризация.",{"type":32,"tag":798,"props":1864,"children":1866},{"id":1865},"metric-based-alerting-с-datadog",[1867],{"type":37,"value":1868},"Metric-Based Alerting с DataDog",{"type":32,"tag":33,"props":1870,"children":1871},{},[1872],{"type":37,"value":1873},"DataDog автоматически парсит RUM-метрики и выполняет anomaly detection. Пример конфигурации монитора:",{"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 за последний час превысил 2500 мс. Последнее развёртывание: {{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 за последний час превысил 2500 мс. Последнее развёртывание: {{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":217},[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":26},[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},"Когда аларм срабатывает, уведомление падает в Slack, incident открывается в PagerDuty, on-call разработчик получает уведомление. ID развёртывания в сообщении (поступает из CI-pipeline) позволит за 30 секунд найти проблемный коммит.",{"type":32,"tag":798,"props":2072,"children":2074},{"id":2073},"forwarding-lighthouse-ci-threshold-failure-as-alarm",[2075],{"type":37,"value":2076},"Forwarding Lighthouse CI Threshold Failure as Alarm",{"type":32,"tag":33,"props":2078,"children":2079},{},[2080],{"type":37,"value":2081},"Некоторые команды отправляют fail Lighthouse CI не только как блок PR, но и как Slack-уведомление:",{"type":32,"tag":88,"props":2083,"children":2085},{"className":90,"code":2084,"language":92,"meta":16,"style":16},"# .github\u002Fworkflows\u002Flighthouse-ci.yml (дополнительный step)\n- name: Notify Slack on Failure\n  if: failure()\n  uses: slackapi\u002Fslack-github-action@v1\n  with:\n    payload: |\n      {\n        \"text\": \"Lighthouse CI FAILED on PR #${{ github.event.pull_request.number }}\",\n        \"blocks\": [\n          {\n            \"type\": \"section\",\n            \"text\": {\n              \"type\": \"mrkdwn\",\n              \"text\": \"*Performance budget exceeded*\\nPR: \u003C${{ github.event.pull_request.html_url }}|#${{ github.event.pull_request.number }}>\\nBranch: `${{ github.head_ref }}`\"\n            }\n          }\n        ]\n      }\n  env:\n    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_PERF }}\n",[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 (дополнительный step)\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":217},[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":26},[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,2308,2313],{"type":37,"value":2307},"Так разработчик увидит красный флаг в CI ",{"type":32,"tag":57,"props":2309,"children":2310},{},[2311],{"type":37,"value":2312},"и",{"type":37,"value":2314}," получит Slack-сообщение одновременно — внимание привлечётся незамедлительно.",{"type":32,"tag":40,"props":2316,"children":2318},{"id":2317},"привязка-budgetов-к-системе-feature-flags",[2319],{"type":37,"value":2320},"Привязка Budget'ов к Системе Feature Flags",{"type":32,"tag":33,"props":2322,"children":2323},{},[2324],{"type":37,"value":2325},"Некоторые feature'ы наследственно тяжёлые: live chat (80 КБ JS), персонализация (150 КБ + runtime), видеоплеер (200 КБ). Вместо раскатывания всем пользователям, вы можете тестировать на сегменте с запасом по performance-budget (например, desktop + быстрое соединение), постепенно расширять.",{"type":32,"tag":33,"props":2327,"children":2328},{},[2329],{"type":37,"value":2330},"В LaunchDarkly или собственной системе flag'ов определите правила:",{"type":32,"tag":88,"props":2332,"children":2334},{"className":842,"code":2333,"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",[2335],{"type":32,"tag":95,"props":2336,"children":2337},{"__ignoreMap":16},[2338,2346,2371,2378,2418,2458,2493,2500,2545],{"type":32,"tag":99,"props":2339,"children":2340},{"class":101,"line":102},[2341],{"type":32,"tag":99,"props":2342,"children":2343},{"style":106},[2344],{"type":37,"value":2345},"\u002F\u002F featureFlags.js\n",{"type":32,"tag":99,"props":2347,"children":2348},{"class":101,"line":112},[2349,2353,2358,2362,2367],{"type":32,"tag":99,"props":2350,"children":2351},{"style":316},[2352],{"type":37,"value":864},{"type":32,"tag":99,"props":2354,"children":2355},{"style":122},[2356],{"type":37,"value":2357}," { getConnectionSpeed } ",{"type":32,"tag":99,"props":2359,"children":2360},{"style":316},[2361],{"type":37,"value":874},{"type":32,"tag":99,"props":2363,"children":2364},{"style":128},[2365],{"type":37,"value":2366}," '.\u002Futils'",{"type":32,"tag":99,"props":2368,"children":2369},{"style":122},[2370],{"type":37,"value":884},{"type":32,"tag":99,"props":2372,"children":2373},{"class":101,"line":134},[2374],{"type":32,"tag":99,"props":2375,"children":2376},{"emptyLinePlaceholder":890},[2377],{"type":37,"value":893},{"type":32,"tag":99,"props":2379,"children":2380},{"class":101,"line":159},[2381,2386,2391,2396,2400,2405,2409,2414],{"type":32,"tag":99,"props":2382,"children":2383},{"style":316},[2384],{"type":37,"value":2385},"export",{"type":32,"tag":99,"props":2387,"children":2388},{"style":316},[2389],{"type":37,"value":2390}," function",{"type":32,"tag":99,"props":2392,"children":2393},{"style":904},[2394],{"type":37,"value":2395}," shouldEnableChatWidget",{"type":32,"tag":99,"props":2397,"children":2398},{"style":122},[2399],{"type":37,"value":912},{"type":32,"tag":99,"props":2401,"children":2402},{"style":915},[2403],{"type":37,"value":2404},"user",{"type":32,"tag":99,"props":2406,"children":2407},{"style":122},[2408],{"type":37,"value":1993},{"type":32,"tag":99,"props":2410,"children":2411},{"style":915},[2412],{"type":37,"value":2413},"vitals",{"type":32,"tag":99,"props":2415,"children":2416},{"style":122},[2417],{"type":37,"value":923},{"type":32,"tag":99,"props":2419,"children":2420},{"class":101,"line":173},[2421,2425,2430,2434,2439,2444,2449,2454],{"type":32,"tag":99,"props":2422,"children":2423},{"style":316},[2424],{"type":37,"value":931},{"type":32,"tag":99,"props":2426,"children":2427},{"style":138},[2428],{"type":37,"value":2429}," is4G",{"type":32,"tag":99,"props":2431,"children":2432},{"style":316},[2433],{"type":37,"value":941},{"type":32,"tag":99,"props":2435,"children":2436},{"style":904},[2437],{"type":37,"value":2438}," getConnectionSpeed",{"type":32,"tag":99,"props":2440,"children":2441},{"style":122},[2442],{"type":37,"value":2443},"() ",{"type":32,"tag":99,"props":2445,"children":2446},{"style":316},[2447],{"type":37,"value":2448},"===",{"type":32,"tag":99,"props":2450,"children":2451},{"style":128},[2452],{"type":37,"value":2453}," '4g'",{"type":32,"tag":99,"props":2455,"children":2456},{"style":122},[2457],{"type":37,"value":884},{"type":32,"tag":99,"props":2459,"children":2460},{"class":101,"line":186},[2461,2465,2470,2474,2479,2484,2489],{"type":32,"tag":99,"props":2462,"children":2463},{"style":316},[2464],{"type":37,"value":931},{"type":32,"tag":99,"props":2466,"children":2467},{"style":138},[2468],{"type":37,"value":2469}," goodLCP",{"type":32,"tag":99,"props":2471,"children":2472},{"style":316},[2473],{"type":37,"value":941},{"type":32,"tag":99,"props":2475,"children":2476},{"style":122},[2477],{"type":37,"value":2478}," vitals.lcp ",{"type":32,"tag":99,"props":2480,"children":2481},{"style":316},[2482],{"type":37,"value":2483},"\u003C",{"type":32,"tag":99,"props":2485,"children":2486},{"style":138},[2487],{"type":37,"value":2488}," 2000",{"type":32,"tag":99,"props":2490,"children":2491},{"style":122},[2492],{"type":37,"value":884},{"type":32,"tag":99,"props":2494,"children":2495},{"class":101,"line":204},[2496],{"type":32,"tag":99,"props":2497,"children":2498},{"style":122},[2499],{"type":37,"value":1080},{"type":32,"tag":99,"props":2501,"children":2502},{"class":101,"line":217},[2503,2508,2513,2518,2523,2527,2532,2536,2541],{"type":32,"tag":99,"props":2504,"children":2505},{"style":316},[2506],{"type":37,"value":2507},"  return",{"type":32,"tag":99,"props":2509,"children":2510},{"style":122},[2511],{"type":37,"value":2512}," is4G ",{"type":32,"tag":99,"props":2514,"children":2515},{"style":316},[2516],{"type":37,"value":2517},"&&",{"type":32,"tag":99,"props":2519,"children":2520},{"style":122},[2521],{"type":37,"value":2522}," goodLCP ",{"type":32,"tag":99,"props":2524,"children":2525},{"style":316},[2526],{"type":37,"value":2517},{"type":32,"tag":99,"props":2528,"children":2529},{"style":122},[2530],{"type":37,"value":2531}," user.tier ",{"type":32,"tag":99,"props":2533,"children":2534},{"style":316},[2535],{"type":37,"value":2448},{"type":32,"tag":99,"props":2537,"children":2538},{"style":128},[2539],{"type":37,"value":2540}," 'premium'",{"type":32,"tag":99,"props":2542,"children":2543},{"style":122},[2544],{"type":37,"value":884},{"type":32,"tag":99,"props":2546,"children":2547},{"class":101,"line":26},[2548],{"type":32,"tag":99,"props":2549,"children":2550},{"style":122},[2551],{"type":37,"value":780},{"type":32,"tag":33,"props":2553,"children":2554},{},[2555],{"type":37,"value":2556},"Решение \"добавим chat widget\" не несёт риск \"LCP всех пользователей вырастет на 300 мс\" — открывается только для сегмента, собираются RUM-данные, измеряется CVR-влияние, потом full rollout или откат. При обсуждении с маркетингом и product вы привносите числа: \"Chat widget повышает CVR на 0,4%, но LCP переходит на 2,8 сек — нетто +8K$\u002Fмесяц доход, но UX падает. Как идти дальше?\"",{"type":32,"tag":40,"props":2558,"children":2560},{"id":2559},"performance-budget-на-headless-commerce",[2561],{"type":37,"value":2562},"Performance Budget на Headless Commerce",{"type":32,"tag":33,"props":2564,"children":2565},{},[2566],{"type":37,"value":2567},"Headless commerce (Shopify Hydrogen, Next.js + Shopify API) обычно быстрее Liquid-тема, потому что JS-контроль в ваших руках, возможна selective hydration. Но контроль на вас — регрессия тоже на вас. Обновление npm-пакета может добавить 70 КБ в бандл.",{"type":32,"tag":33,"props":2569,"children":2570},{},[2571,2573,2579],{"type":37,"value":2572},"В рамках ",{"type":32,"tag":787,"props":2574,"children":2576},{"href":789,"rel":2575},[791],[2577],{"type":37,"value":2578},"Headless Services",{"type":37,"value":2580}," Roibase мы применяем этот workflow при миграции:",{"type":32,"tag":2582,"props":2583,"children":2584},"ol",{},[2585,2597,2614],{"type":32,"tag":2586,"props":2587,"children":2588},"li",{},[2589,2595],{"type":32,"tag":2590,"props":2591,"children":2592},"strong",{},[2593],{"type":37,"value":2594},"Baseline:",{"type":37,"value":2596}," Соберите RUM-данные текущего Liquid-тема (30 дней). Запишите медиану LCP, TBT, CLS.",{"type":32,"tag":2586,"props":2598,"children":2599},{},[2600,2605,2607,2612],{"type":32,"tag":2590,"props":2601,"children":2602},{},[2603],{"type":37,"value":2604},"Headless Prototype с Lighthouse CI:",{"type":37,"value":2606}," Каждый коммит должен соответствовать ",{"type":32,"tag":95,"props":2608,"children":2610},{"className":2609},[],[2611],{"type":37,"value":379},{"type":37,"value":2613},". Первое развёртывание должно быть на 20% лучше baseline.",{"type":32,"tag":2586,"props":2615,"children":2616},{},[2617],{"type":32,"tag":2590,"props":2618,"children":2619},{},[2620],{"type":37,"value":2621},"A\u002FB на Production:",{"type":32,"tag":2623,"props":2624,"children":2625},"style",{},[2626],{"type":37,"value":2627},"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":2629},[2630,2631,2634,2635,2639,2640],{"id":42,"depth":112,"text":45},{"id":78,"depth":112,"text":81,"children":2632},[2633],{"id":800,"depth":134,"text":803},{"id":818,"depth":112,"text":821},{"id":1854,"depth":112,"text":1857,"children":2636},[2637,2638],{"id":1865,"depth":134,"text":1868},{"id":2073,"depth":134,"text":2076},{"id":2317,"depth":112,"text":2320},{"id":2559,"depth":112,"text":2562},"markdown","content:ru:tech:web-performance-budget-karar-mekanizmasi.md","content","ru\u002Ftech\u002Fweb-performance-budget-karar-mekanizmasi.md","ru\u002Ftech\u002Fweb-performance-budget-karar-mekanizmasi","md",1785967505868]