[{"data":1,"prerenderedAt":2538},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fpresupuesti-proizvodstva-integraciya-v-pipeline":13},{"i18nKey":4,"paths":5},"tech-004-2026-07",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fweb-performance-budgets-in-ci-cd","\u002Fen\u002Ftech\u002Fweb-performance-budgets-decision-framework","\u002Fes\u002Ftech\u002Fpresupuestos-rendimiento-web-conectar-decision","\u002Ffr\u002Ftech\u002Fbudgets-de-performance-web-mecanismes-de-decision","\u002Fit\u002Ftech\u002Fweb-performance-budget-decision-mechanism","\u002Fru\u002Ftech\u002Fpresupuesti-proizvodstva-integraciya-v-pipeline","\u002Ftr\u002Ftech\u002Fweb-performance-budgetlari-karar-mekanizmasina-baglamak",{"_path":11,"_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":2532,"_id":2533,"_source":2534,"_file":2535,"_stem":2536,"_extension":2537},"tech",false,"","Бюджеты производительности: Связывание с механизмом принятия решений","Интеграция Lighthouse CI, RUM и алармов регрессии производительности в CI\u002FCD pipeline для остановки замедления на этапе развёртывания — реальные сценарии применения.","2026-07-30",[21,22,23,24,25],"web-performance","lighthouse-ci","rum","performance-budget","core-web-vitals",9,"Roibase",{"type":29,"children":30,"toc":2523},"root",[31,39,46,51,56,61,74,575,594,600,605,1112,1133,1138,1146,1151,1175,1181,1186,1191,1597,1610,1736,1741,1746,1753,1758,2290,2295,2303,2309,2314,2323,2358,2366,2396,2401,2406,2412,2417,2430,2517],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Обнаружить регрессию производительности после развёртывания в production — всё равно что проверить курс валюты уже после сделки. По отчёту Google Commerce Signals за 2026 год каждые дополнительные 100 мс LCP приводят к увеличению bounce rate на 3,5 %. Мы ловим баги на этапе развёртывания в CI\u002FCD pipeline точно так же, как мы ловим там регрессии производительности. В этой статье покажем, как интегрировать Lighthouse CI, RUM, synthetic monitoring и performance budget'ы в автоматизированный workflow — с кодом и реальными цифрами.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"что-такое-performance-budget-и-почему-он-обязателен-в-cicd",[44],{"type":37,"value":45},"Что такое Performance Budget и почему он обязателен в CI\u002FCD",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Performance budget — это верхний лимит на объём ресурсов, которые может потребить страница. Пример: «LCP \u003C 2 секунды, Total Blocking Time \u003C 200 мс, JS bundle \u003C 400 КБ». Это работает как SLA: если хотя бы одна метрика превышена, сборка падает, развёртывание блокируется.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"Классический подход — запускать Lighthouse вручную в конце спринта и изучать отчёт — обнаруживает регрессию на две недели позже. Современный подход встраивает budget прямо в CI. Каждый pull request проходит через Lighthouse CI: инструмент запускает headless Chromium, рендерит страницу, измеряет метрики производительности. Если budget превышен — GitHub Action выдаёт ошибку, merge блокируется.",{"type":32,"tag":33,"props":57,"children":58},{},[59],{"type":37,"value":60},"Реальный сценарий: в Shopify Hydrogen storefront добавили новый компонент рекомендаций товаров. Размер JS bundle вырос с 340 КБ до 510 КБ. CI pipeline это обнаружил моментально, PR окрасился в красный. Widget перепроектировали с lazy-loading — только тогда bundle вернулся в норму и PR объединили. В старом workflow этот код попал бы в production, 510 КБ bundle означал бы дополнительные 4 секунды блокировки на мобильном 3G — это было бы 48 часов потерянного дохода.",{"type":32,"tag":33,"props":62,"children":63},{},[64,66,72],{"type":37,"value":65},"Для установки performance budget используем ",{"type":32,"tag":67,"props":68,"children":70},"code",{"className":69},[],[71],{"type":37,"value":22},{"type":37,"value":73},". Этот инструмент берёт URL development preview, рендерит его в Chromium, замеряет Core Web Vitals и пользовательские метрики, сравнивает с JSON конфигом бюджета.",{"type":32,"tag":75,"props":76,"children":80},"pre",{"code":77,"language":78,"meta":16,"className":79,"style":16},"\u002F\u002F lighthouserc.json\n{\n  \"ci\": {\n    \"assert\": {\n      \"preset\": \"lighthouse:recommended\",\n      \"assertions\": {\n        \"largest-contentful-paint\": [\"error\", { \"maxNumericValue\": 2000 }],\n        \"total-blocking-time\": [\"error\", { \"maxNumericValue\": 200 }],\n        \"cumulative-layout-shift\": [\"error\", { \"maxNumericValue\": 0.1 }],\n        \"speed-index\": [\"error\", { \"maxNumericValue\": 3000 }],\n        \"resource-summary:script:size\": [\"error\", { \"maxNumericValue\": 400000 }]\n      }\n    },\n    \"collect\": {\n      \"numberOfRuns\": 3,\n      \"url\": [\"https:\u002F\u002Fpreview-{PR_NUMBER}.vercel.app\"],\n      \"settings\": {\n        \"throttling\": {\n          \"rttMs\": 150,\n          \"throughputKbps\": 1638.4,\n          \"cpuSlowdownMultiplier\": 4\n        }\n      }\n    }\n  }\n}\n","json","language-json shiki shiki-themes github-dark",[81],{"type":32,"tag":67,"props":82,"children":83},{"__ignoreMap":16},[84,96,106,121,134,159,172,215,253,290,328,367,376,385,398,420,443,456,469,491,513,531,540,548,557,566],{"type":32,"tag":85,"props":86,"children":89},"span",{"class":87,"line":88},"line",1,[90],{"type":32,"tag":85,"props":91,"children":93},{"style":92},"--shiki-default:#6A737D",[94],{"type":37,"value":95},"\u002F\u002F lighthouserc.json\n",{"type":32,"tag":85,"props":97,"children":99},{"class":87,"line":98},2,[100],{"type":32,"tag":85,"props":101,"children":103},{"style":102},"--shiki-default:#E1E4E8",[104],{"type":37,"value":105},"{\n",{"type":32,"tag":85,"props":107,"children":109},{"class":87,"line":108},3,[110,116],{"type":32,"tag":85,"props":111,"children":113},{"style":112},"--shiki-default:#79B8FF",[114],{"type":37,"value":115},"  \"ci\"",{"type":32,"tag":85,"props":117,"children":118},{"style":102},[119],{"type":37,"value":120},": {\n",{"type":32,"tag":85,"props":122,"children":124},{"class":87,"line":123},4,[125,130],{"type":32,"tag":85,"props":126,"children":127},{"style":112},[128],{"type":37,"value":129},"    \"assert\"",{"type":32,"tag":85,"props":131,"children":132},{"style":102},[133],{"type":37,"value":120},{"type":32,"tag":85,"props":135,"children":137},{"class":87,"line":136},5,[138,143,148,154],{"type":32,"tag":85,"props":139,"children":140},{"style":112},[141],{"type":37,"value":142},"      \"preset\"",{"type":32,"tag":85,"props":144,"children":145},{"style":102},[146],{"type":37,"value":147},": ",{"type":32,"tag":85,"props":149,"children":151},{"style":150},"--shiki-default:#9ECBFF",[152],{"type":37,"value":153},"\"lighthouse:recommended\"",{"type":32,"tag":85,"props":155,"children":156},{"style":102},[157],{"type":37,"value":158},",\n",{"type":32,"tag":85,"props":160,"children":162},{"class":87,"line":161},6,[163,168],{"type":32,"tag":85,"props":164,"children":165},{"style":112},[166],{"type":37,"value":167},"      \"assertions\"",{"type":32,"tag":85,"props":169,"children":170},{"style":102},[171],{"type":37,"value":120},{"type":32,"tag":85,"props":173,"children":175},{"class":87,"line":174},7,[176,181,186,191,196,201,205,210],{"type":32,"tag":85,"props":177,"children":178},{"style":112},[179],{"type":37,"value":180},"        \"largest-contentful-paint\"",{"type":32,"tag":85,"props":182,"children":183},{"style":102},[184],{"type":37,"value":185},": [",{"type":32,"tag":85,"props":187,"children":188},{"style":150},[189],{"type":37,"value":190},"\"error\"",{"type":32,"tag":85,"props":192,"children":193},{"style":102},[194],{"type":37,"value":195},", { ",{"type":32,"tag":85,"props":197,"children":198},{"style":112},[199],{"type":37,"value":200},"\"maxNumericValue\"",{"type":32,"tag":85,"props":202,"children":203},{"style":102},[204],{"type":37,"value":147},{"type":32,"tag":85,"props":206,"children":207},{"style":112},[208],{"type":37,"value":209},"2000",{"type":32,"tag":85,"props":211,"children":212},{"style":102},[213],{"type":37,"value":214}," }],\n",{"type":32,"tag":85,"props":216,"children":218},{"class":87,"line":217},8,[219,224,228,232,236,240,244,249],{"type":32,"tag":85,"props":220,"children":221},{"style":112},[222],{"type":37,"value":223},"        \"total-blocking-time\"",{"type":32,"tag":85,"props":225,"children":226},{"style":102},[227],{"type":37,"value":185},{"type":32,"tag":85,"props":229,"children":230},{"style":150},[231],{"type":37,"value":190},{"type":32,"tag":85,"props":233,"children":234},{"style":102},[235],{"type":37,"value":195},{"type":32,"tag":85,"props":237,"children":238},{"style":112},[239],{"type":37,"value":200},{"type":32,"tag":85,"props":241,"children":242},{"style":102},[243],{"type":37,"value":147},{"type":32,"tag":85,"props":245,"children":246},{"style":112},[247],{"type":37,"value":248},"200",{"type":32,"tag":85,"props":250,"children":251},{"style":102},[252],{"type":37,"value":214},{"type":32,"tag":85,"props":254,"children":255},{"class":87,"line":26},[256,261,265,269,273,277,281,286],{"type":32,"tag":85,"props":257,"children":258},{"style":112},[259],{"type":37,"value":260},"        \"cumulative-layout-shift\"",{"type":32,"tag":85,"props":262,"children":263},{"style":102},[264],{"type":37,"value":185},{"type":32,"tag":85,"props":266,"children":267},{"style":150},[268],{"type":37,"value":190},{"type":32,"tag":85,"props":270,"children":271},{"style":102},[272],{"type":37,"value":195},{"type":32,"tag":85,"props":274,"children":275},{"style":112},[276],{"type":37,"value":200},{"type":32,"tag":85,"props":278,"children":279},{"style":102},[280],{"type":37,"value":147},{"type":32,"tag":85,"props":282,"children":283},{"style":112},[284],{"type":37,"value":285},"0.1",{"type":32,"tag":85,"props":287,"children":288},{"style":102},[289],{"type":37,"value":214},{"type":32,"tag":85,"props":291,"children":293},{"class":87,"line":292},10,[294,299,303,307,311,315,319,324],{"type":32,"tag":85,"props":295,"children":296},{"style":112},[297],{"type":37,"value":298},"        \"speed-index\"",{"type":32,"tag":85,"props":300,"children":301},{"style":102},[302],{"type":37,"value":185},{"type":32,"tag":85,"props":304,"children":305},{"style":150},[306],{"type":37,"value":190},{"type":32,"tag":85,"props":308,"children":309},{"style":102},[310],{"type":37,"value":195},{"type":32,"tag":85,"props":312,"children":313},{"style":112},[314],{"type":37,"value":200},{"type":32,"tag":85,"props":316,"children":317},{"style":102},[318],{"type":37,"value":147},{"type":32,"tag":85,"props":320,"children":321},{"style":112},[322],{"type":37,"value":323},"3000",{"type":32,"tag":85,"props":325,"children":326},{"style":102},[327],{"type":37,"value":214},{"type":32,"tag":85,"props":329,"children":331},{"class":87,"line":330},11,[332,337,341,345,349,353,357,362],{"type":32,"tag":85,"props":333,"children":334},{"style":112},[335],{"type":37,"value":336},"        \"resource-summary:script:size\"",{"type":32,"tag":85,"props":338,"children":339},{"style":102},[340],{"type":37,"value":185},{"type":32,"tag":85,"props":342,"children":343},{"style":150},[344],{"type":37,"value":190},{"type":32,"tag":85,"props":346,"children":347},{"style":102},[348],{"type":37,"value":195},{"type":32,"tag":85,"props":350,"children":351},{"style":112},[352],{"type":37,"value":200},{"type":32,"tag":85,"props":354,"children":355},{"style":102},[356],{"type":37,"value":147},{"type":32,"tag":85,"props":358,"children":359},{"style":112},[360],{"type":37,"value":361},"400000",{"type":32,"tag":85,"props":363,"children":364},{"style":102},[365],{"type":37,"value":366}," }]\n",{"type":32,"tag":85,"props":368,"children":370},{"class":87,"line":369},12,[371],{"type":32,"tag":85,"props":372,"children":373},{"style":102},[374],{"type":37,"value":375},"      }\n",{"type":32,"tag":85,"props":377,"children":379},{"class":87,"line":378},13,[380],{"type":32,"tag":85,"props":381,"children":382},{"style":102},[383],{"type":37,"value":384},"    },\n",{"type":32,"tag":85,"props":386,"children":388},{"class":87,"line":387},14,[389,394],{"type":32,"tag":85,"props":390,"children":391},{"style":112},[392],{"type":37,"value":393},"    \"collect\"",{"type":32,"tag":85,"props":395,"children":396},{"style":102},[397],{"type":37,"value":120},{"type":32,"tag":85,"props":399,"children":401},{"class":87,"line":400},15,[402,407,411,416],{"type":32,"tag":85,"props":403,"children":404},{"style":112},[405],{"type":37,"value":406},"      \"numberOfRuns\"",{"type":32,"tag":85,"props":408,"children":409},{"style":102},[410],{"type":37,"value":147},{"type":32,"tag":85,"props":412,"children":413},{"style":112},[414],{"type":37,"value":415},"3",{"type":32,"tag":85,"props":417,"children":418},{"style":102},[419],{"type":37,"value":158},{"type":32,"tag":85,"props":421,"children":423},{"class":87,"line":422},16,[424,429,433,438],{"type":32,"tag":85,"props":425,"children":426},{"style":112},[427],{"type":37,"value":428},"      \"url\"",{"type":32,"tag":85,"props":430,"children":431},{"style":102},[432],{"type":37,"value":185},{"type":32,"tag":85,"props":434,"children":435},{"style":150},[436],{"type":37,"value":437},"\"https:\u002F\u002Fpreview-{PR_NUMBER}.vercel.app\"",{"type":32,"tag":85,"props":439,"children":440},{"style":102},[441],{"type":37,"value":442},"],\n",{"type":32,"tag":85,"props":444,"children":446},{"class":87,"line":445},17,[447,452],{"type":32,"tag":85,"props":448,"children":449},{"style":112},[450],{"type":37,"value":451},"      \"settings\"",{"type":32,"tag":85,"props":453,"children":454},{"style":102},[455],{"type":37,"value":120},{"type":32,"tag":85,"props":457,"children":459},{"class":87,"line":458},18,[460,465],{"type":32,"tag":85,"props":461,"children":462},{"style":112},[463],{"type":37,"value":464},"        \"throttling\"",{"type":32,"tag":85,"props":466,"children":467},{"style":102},[468],{"type":37,"value":120},{"type":32,"tag":85,"props":470,"children":472},{"class":87,"line":471},19,[473,478,482,487],{"type":32,"tag":85,"props":474,"children":475},{"style":112},[476],{"type":37,"value":477},"          \"rttMs\"",{"type":32,"tag":85,"props":479,"children":480},{"style":102},[481],{"type":37,"value":147},{"type":32,"tag":85,"props":483,"children":484},{"style":112},[485],{"type":37,"value":486},"150",{"type":32,"tag":85,"props":488,"children":489},{"style":102},[490],{"type":37,"value":158},{"type":32,"tag":85,"props":492,"children":494},{"class":87,"line":493},20,[495,500,504,509],{"type":32,"tag":85,"props":496,"children":497},{"style":112},[498],{"type":37,"value":499},"          \"throughputKbps\"",{"type":32,"tag":85,"props":501,"children":502},{"style":102},[503],{"type":37,"value":147},{"type":32,"tag":85,"props":505,"children":506},{"style":112},[507],{"type":37,"value":508},"1638.4",{"type":32,"tag":85,"props":510,"children":511},{"style":102},[512],{"type":37,"value":158},{"type":32,"tag":85,"props":514,"children":516},{"class":87,"line":515},21,[517,522,526],{"type":32,"tag":85,"props":518,"children":519},{"style":112},[520],{"type":37,"value":521},"          \"cpuSlowdownMultiplier\"",{"type":32,"tag":85,"props":523,"children":524},{"style":102},[525],{"type":37,"value":147},{"type":32,"tag":85,"props":527,"children":528},{"style":112},[529],{"type":37,"value":530},"4\n",{"type":32,"tag":85,"props":532,"children":534},{"class":87,"line":533},22,[535],{"type":32,"tag":85,"props":536,"children":537},{"style":102},[538],{"type":37,"value":539},"        }\n",{"type":32,"tag":85,"props":541,"children":543},{"class":87,"line":542},23,[544],{"type":32,"tag":85,"props":545,"children":546},{"style":102},[547],{"type":37,"value":375},{"type":32,"tag":85,"props":549,"children":551},{"class":87,"line":550},24,[552],{"type":32,"tag":85,"props":553,"children":554},{"style":102},[555],{"type":37,"value":556},"    }\n",{"type":32,"tag":85,"props":558,"children":560},{"class":87,"line":559},25,[561],{"type":32,"tag":85,"props":562,"children":563},{"style":102},[564],{"type":37,"value":565},"  }\n",{"type":32,"tag":85,"props":567,"children":569},{"class":87,"line":568},26,[570],{"type":32,"tag":85,"props":571,"children":572},{"style":102},[573],{"type":37,"value":574},"}\n",{"type":32,"tag":33,"props":576,"children":577},{},[578,584,586,592],{"type":32,"tag":67,"props":579,"children":581},{"className":580},[],[582],{"type":37,"value":583},"numberOfRuns: 3",{"type":37,"value":585}," снижает вариативность результатов за счёт медианы. ",{"type":32,"tag":67,"props":587,"children":589},{"className":588},[],[590],{"type":37,"value":591},"throttling",{"type":37,"value":593}," имитирует мобильный 3G — наихудший реальный сценарий конечного пользователя.",{"type":32,"tag":40,"props":595,"children":597},{"id":596},"автоматизация-lighthouse-ci-через-github-actions",[598],{"type":37,"value":599},"Автоматизация Lighthouse CI через GitHub Actions",{"type":32,"tag":33,"props":601,"children":602},{},[603],{"type":37,"value":604},"Чтобы запустить Lighthouse в CI pipeline, используем Vercel preview deployment + GitHub Actions. При каждом открытии PR Vercel автоматически создаёт preview URL, Lighthouse CI сканирует эту ссылку. Результаты появляются как комментарий в PR. Если budget превышен — CI падает.",{"type":32,"tag":75,"props":606,"children":610},{"code":607,"language":608,"meta":16,"className":609,"style":16},"# .github\u002Fworkflows\u002Flighthouse.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        with:\n          node-version: '20'\n      - run: npm ci\n      - run: npm run build\n      - name: Wait for Vercel Preview\n        uses: patrickedqvist\u002Fwait-for-vercel-preview@v1.3.1\n        id: vercel_preview\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          max_timeout: 300\n      - name: Run Lighthouse CI\n        env:\n          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_TOKEN }}\n        run: |\n          npm install -g @lhci\u002Fcli\n          lhci autorun --collect.url=${{ steps.vercel_preview.outputs.url }}\n      - name: Comment PR\n        uses: treosh\u002Flighthouse-ci-action@v9\n        with:\n          urls: ${{ steps.vercel_preview.outputs.url }}\n          uploadArtifacts: true\n          temporaryPublicStorage: true\n","yaml","language-yaml shiki shiki-themes github-dark",[611],{"type":32,"tag":67,"props":612,"children":613},{"__ignoreMap":16},[614,622,640,662,675,687,704,716,738,758,770,787,808,828,848,865,882,893,910,927,947,959,976,994,1002,1010,1030,1047,1059,1077,1095],{"type":32,"tag":85,"props":615,"children":616},{"class":87,"line":88},[617],{"type":32,"tag":85,"props":618,"children":619},{"style":92},[620],{"type":37,"value":621},"# .github\u002Fworkflows\u002Flighthouse.yml\n",{"type":32,"tag":85,"props":623,"children":624},{"class":87,"line":98},[625,631,635],{"type":32,"tag":85,"props":626,"children":628},{"style":627},"--shiki-default:#85E89D",[629],{"type":37,"value":630},"name",{"type":32,"tag":85,"props":632,"children":633},{"style":102},[634],{"type":37,"value":147},{"type":32,"tag":85,"props":636,"children":637},{"style":150},[638],{"type":37,"value":639},"Lighthouse CI\n",{"type":32,"tag":85,"props":641,"children":642},{"class":87,"line":108},[643,648,652,657],{"type":32,"tag":85,"props":644,"children":645},{"style":112},[646],{"type":37,"value":647},"on",{"type":32,"tag":85,"props":649,"children":650},{"style":102},[651],{"type":37,"value":185},{"type":32,"tag":85,"props":653,"children":654},{"style":150},[655],{"type":37,"value":656},"pull_request",{"type":32,"tag":85,"props":658,"children":659},{"style":102},[660],{"type":37,"value":661},"]\n",{"type":32,"tag":85,"props":663,"children":664},{"class":87,"line":123},[665,670],{"type":32,"tag":85,"props":666,"children":667},{"style":627},[668],{"type":37,"value":669},"jobs",{"type":32,"tag":85,"props":671,"children":672},{"style":102},[673],{"type":37,"value":674},":\n",{"type":32,"tag":85,"props":676,"children":677},{"class":87,"line":136},[678,683],{"type":32,"tag":85,"props":679,"children":680},{"style":627},[681],{"type":37,"value":682},"  lighthouse",{"type":32,"tag":85,"props":684,"children":685},{"style":102},[686],{"type":37,"value":674},{"type":32,"tag":85,"props":688,"children":689},{"class":87,"line":161},[690,695,699],{"type":32,"tag":85,"props":691,"children":692},{"style":627},[693],{"type":37,"value":694},"    runs-on",{"type":32,"tag":85,"props":696,"children":697},{"style":102},[698],{"type":37,"value":147},{"type":32,"tag":85,"props":700,"children":701},{"style":150},[702],{"type":37,"value":703},"ubuntu-latest\n",{"type":32,"tag":85,"props":705,"children":706},{"class":87,"line":174},[707,712],{"type":32,"tag":85,"props":708,"children":709},{"style":627},[710],{"type":37,"value":711},"    steps",{"type":32,"tag":85,"props":713,"children":714},{"style":102},[715],{"type":37,"value":674},{"type":32,"tag":85,"props":717,"children":718},{"class":87,"line":217},[719,724,729,733],{"type":32,"tag":85,"props":720,"children":721},{"style":102},[722],{"type":37,"value":723},"      - ",{"type":32,"tag":85,"props":725,"children":726},{"style":627},[727],{"type":37,"value":728},"uses",{"type":32,"tag":85,"props":730,"children":731},{"style":102},[732],{"type":37,"value":147},{"type":32,"tag":85,"props":734,"children":735},{"style":150},[736],{"type":37,"value":737},"actions\u002Fcheckout@v3\n",{"type":32,"tag":85,"props":739,"children":740},{"class":87,"line":26},[741,745,749,753],{"type":32,"tag":85,"props":742,"children":743},{"style":102},[744],{"type":37,"value":723},{"type":32,"tag":85,"props":746,"children":747},{"style":627},[748],{"type":37,"value":728},{"type":32,"tag":85,"props":750,"children":751},{"style":102},[752],{"type":37,"value":147},{"type":32,"tag":85,"props":754,"children":755},{"style":150},[756],{"type":37,"value":757},"actions\u002Fsetup-node@v3\n",{"type":32,"tag":85,"props":759,"children":760},{"class":87,"line":292},[761,766],{"type":32,"tag":85,"props":762,"children":763},{"style":627},[764],{"type":37,"value":765},"        with",{"type":32,"tag":85,"props":767,"children":768},{"style":102},[769],{"type":37,"value":674},{"type":32,"tag":85,"props":771,"children":772},{"class":87,"line":330},[773,778,782],{"type":32,"tag":85,"props":774,"children":775},{"style":627},[776],{"type":37,"value":777},"          node-version",{"type":32,"tag":85,"props":779,"children":780},{"style":102},[781],{"type":37,"value":147},{"type":32,"tag":85,"props":783,"children":784},{"style":150},[785],{"type":37,"value":786},"'20'\n",{"type":32,"tag":85,"props":788,"children":789},{"class":87,"line":369},[790,794,799,803],{"type":32,"tag":85,"props":791,"children":792},{"style":102},[793],{"type":37,"value":723},{"type":32,"tag":85,"props":795,"children":796},{"style":627},[797],{"type":37,"value":798},"run",{"type":32,"tag":85,"props":800,"children":801},{"style":102},[802],{"type":37,"value":147},{"type":32,"tag":85,"props":804,"children":805},{"style":150},[806],{"type":37,"value":807},"npm ci\n",{"type":32,"tag":85,"props":809,"children":810},{"class":87,"line":378},[811,815,819,823],{"type":32,"tag":85,"props":812,"children":813},{"style":102},[814],{"type":37,"value":723},{"type":32,"tag":85,"props":816,"children":817},{"style":627},[818],{"type":37,"value":798},{"type":32,"tag":85,"props":820,"children":821},{"style":102},[822],{"type":37,"value":147},{"type":32,"tag":85,"props":824,"children":825},{"style":150},[826],{"type":37,"value":827},"npm run build\n",{"type":32,"tag":85,"props":829,"children":830},{"class":87,"line":387},[831,835,839,843],{"type":32,"tag":85,"props":832,"children":833},{"style":102},[834],{"type":37,"value":723},{"type":32,"tag":85,"props":836,"children":837},{"style":627},[838],{"type":37,"value":630},{"type":32,"tag":85,"props":840,"children":841},{"style":102},[842],{"type":37,"value":147},{"type":32,"tag":85,"props":844,"children":845},{"style":150},[846],{"type":37,"value":847},"Wait for Vercel Preview\n",{"type":32,"tag":85,"props":849,"children":850},{"class":87,"line":400},[851,856,860],{"type":32,"tag":85,"props":852,"children":853},{"style":627},[854],{"type":37,"value":855},"        uses",{"type":32,"tag":85,"props":857,"children":858},{"style":102},[859],{"type":37,"value":147},{"type":32,"tag":85,"props":861,"children":862},{"style":150},[863],{"type":37,"value":864},"patrickedqvist\u002Fwait-for-vercel-preview@v1.3.1\n",{"type":32,"tag":85,"props":866,"children":867},{"class":87,"line":422},[868,873,877],{"type":32,"tag":85,"props":869,"children":870},{"style":627},[871],{"type":37,"value":872},"        id",{"type":32,"tag":85,"props":874,"children":875},{"style":102},[876],{"type":37,"value":147},{"type":32,"tag":85,"props":878,"children":879},{"style":150},[880],{"type":37,"value":881},"vercel_preview\n",{"type":32,"tag":85,"props":883,"children":884},{"class":87,"line":445},[885,889],{"type":32,"tag":85,"props":886,"children":887},{"style":627},[888],{"type":37,"value":765},{"type":32,"tag":85,"props":890,"children":891},{"style":102},[892],{"type":37,"value":674},{"type":32,"tag":85,"props":894,"children":895},{"class":87,"line":458},[896,901,905],{"type":32,"tag":85,"props":897,"children":898},{"style":627},[899],{"type":37,"value":900},"          token",{"type":32,"tag":85,"props":902,"children":903},{"style":102},[904],{"type":37,"value":147},{"type":32,"tag":85,"props":906,"children":907},{"style":150},[908],{"type":37,"value":909},"${{ secrets.GITHUB_TOKEN }}\n",{"type":32,"tag":85,"props":911,"children":912},{"class":87,"line":471},[913,918,922],{"type":32,"tag":85,"props":914,"children":915},{"style":627},[916],{"type":37,"value":917},"          max_timeout",{"type":32,"tag":85,"props":919,"children":920},{"style":102},[921],{"type":37,"value":147},{"type":32,"tag":85,"props":923,"children":924},{"style":112},[925],{"type":37,"value":926},"300\n",{"type":32,"tag":85,"props":928,"children":929},{"class":87,"line":493},[930,934,938,942],{"type":32,"tag":85,"props":931,"children":932},{"style":102},[933],{"type":37,"value":723},{"type":32,"tag":85,"props":935,"children":936},{"style":627},[937],{"type":37,"value":630},{"type":32,"tag":85,"props":939,"children":940},{"style":102},[941],{"type":37,"value":147},{"type":32,"tag":85,"props":943,"children":944},{"style":150},[945],{"type":37,"value":946},"Run Lighthouse CI\n",{"type":32,"tag":85,"props":948,"children":949},{"class":87,"line":515},[950,955],{"type":32,"tag":85,"props":951,"children":952},{"style":627},[953],{"type":37,"value":954},"        env",{"type":32,"tag":85,"props":956,"children":957},{"style":102},[958],{"type":37,"value":674},{"type":32,"tag":85,"props":960,"children":961},{"class":87,"line":533},[962,967,971],{"type":32,"tag":85,"props":963,"children":964},{"style":627},[965],{"type":37,"value":966},"          LHCI_GITHUB_APP_TOKEN",{"type":32,"tag":85,"props":968,"children":969},{"style":102},[970],{"type":37,"value":147},{"type":32,"tag":85,"props":972,"children":973},{"style":150},[974],{"type":37,"value":975},"${{ secrets.LHCI_TOKEN }}\n",{"type":32,"tag":85,"props":977,"children":978},{"class":87,"line":542},[979,984,988],{"type":32,"tag":85,"props":980,"children":981},{"style":627},[982],{"type":37,"value":983},"        run",{"type":32,"tag":85,"props":985,"children":986},{"style":102},[987],{"type":37,"value":147},{"type":32,"tag":85,"props":989,"children":991},{"style":990},"--shiki-default:#F97583",[992],{"type":37,"value":993},"|\n",{"type":32,"tag":85,"props":995,"children":996},{"class":87,"line":550},[997],{"type":32,"tag":85,"props":998,"children":999},{"style":150},[1000],{"type":37,"value":1001},"          npm install -g @lhci\u002Fcli\n",{"type":32,"tag":85,"props":1003,"children":1004},{"class":87,"line":559},[1005],{"type":32,"tag":85,"props":1006,"children":1007},{"style":150},[1008],{"type":37,"value":1009},"          lhci autorun --collect.url=${{ steps.vercel_preview.outputs.url }}\n",{"type":32,"tag":85,"props":1011,"children":1012},{"class":87,"line":568},[1013,1017,1021,1025],{"type":32,"tag":85,"props":1014,"children":1015},{"style":102},[1016],{"type":37,"value":723},{"type":32,"tag":85,"props":1018,"children":1019},{"style":627},[1020],{"type":37,"value":630},{"type":32,"tag":85,"props":1022,"children":1023},{"style":102},[1024],{"type":37,"value":147},{"type":32,"tag":85,"props":1026,"children":1027},{"style":150},[1028],{"type":37,"value":1029},"Comment PR\n",{"type":32,"tag":85,"props":1031,"children":1033},{"class":87,"line":1032},27,[1034,1038,1042],{"type":32,"tag":85,"props":1035,"children":1036},{"style":627},[1037],{"type":37,"value":855},{"type":32,"tag":85,"props":1039,"children":1040},{"style":102},[1041],{"type":37,"value":147},{"type":32,"tag":85,"props":1043,"children":1044},{"style":150},[1045],{"type":37,"value":1046},"treosh\u002Flighthouse-ci-action@v9\n",{"type":32,"tag":85,"props":1048,"children":1050},{"class":87,"line":1049},28,[1051,1055],{"type":32,"tag":85,"props":1052,"children":1053},{"style":627},[1054],{"type":37,"value":765},{"type":32,"tag":85,"props":1056,"children":1057},{"style":102},[1058],{"type":37,"value":674},{"type":32,"tag":85,"props":1060,"children":1062},{"class":87,"line":1061},29,[1063,1068,1072],{"type":32,"tag":85,"props":1064,"children":1065},{"style":627},[1066],{"type":37,"value":1067},"          urls",{"type":32,"tag":85,"props":1069,"children":1070},{"style":102},[1071],{"type":37,"value":147},{"type":32,"tag":85,"props":1073,"children":1074},{"style":150},[1075],{"type":37,"value":1076},"${{ steps.vercel_preview.outputs.url }}\n",{"type":32,"tag":85,"props":1078,"children":1080},{"class":87,"line":1079},30,[1081,1086,1090],{"type":32,"tag":85,"props":1082,"children":1083},{"style":627},[1084],{"type":37,"value":1085},"          uploadArtifacts",{"type":32,"tag":85,"props":1087,"children":1088},{"style":102},[1089],{"type":37,"value":147},{"type":32,"tag":85,"props":1091,"children":1092},{"style":112},[1093],{"type":37,"value":1094},"true\n",{"type":32,"tag":85,"props":1096,"children":1098},{"class":87,"line":1097},31,[1099,1104,1108],{"type":32,"tag":85,"props":1100,"children":1101},{"style":627},[1102],{"type":37,"value":1103},"          temporaryPublicStorage",{"type":32,"tag":85,"props":1105,"children":1106},{"style":102},[1107],{"type":37,"value":147},{"type":32,"tag":85,"props":1109,"children":1110},{"style":112},[1111],{"type":37,"value":1094},{"type":32,"tag":33,"props":1113,"children":1114},{},[1115,1117,1123,1125,1131],{"type":37,"value":1116},"Шаг ",{"type":32,"tag":67,"props":1118,"children":1120},{"className":1119},[],[1121],{"type":37,"value":1122},"wait-for-vercel-preview",{"type":37,"value":1124}," критичен: если Lighthouse запустится до окончания развёртывания, он получит 404. ",{"type":32,"tag":67,"props":1126,"children":1128},{"className":1127},[],[1129],{"type":37,"value":1130},"max_timeout: 300",{"type":37,"value":1132}," даёт 5 минут на развёртывание. Когда оно завершится, Lighthouse начинает работать.",{"type":32,"tag":33,"props":1134,"children":1135},{},[1136],{"type":37,"value":1137},"Результат в PR выглядит так:",{"type":32,"tag":75,"props":1139,"children":1141},{"code":1140},"Lighthouse CI Report\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n✅ Performance: 92\u002F100 (+2)\n❌ LCP: 2.3s (budget: 2.0s) — FAILED\n✅ TBT: 180ms (budget: 200ms)\n✅ CLS: 0.08 (budget: 0.1)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n",[1142],{"type":32,"tag":67,"props":1143,"children":1144},{"__ignoreMap":16},[1145],{"type":37,"value":1140},{"type":32,"tag":33,"props":1147,"children":1148},{},[1149],{"type":37,"value":1150},"LCP 2,3 секунды — превышение budget'а на 0,3 с, CI падает. Merge блокируется. Разработчик видит, что hero image был eagerly loaded вместо lazy-load, исправляет, LCP падает до 1,9 с, CI зелёная, merge открывается.",{"type":32,"tag":33,"props":1152,"children":1153},{},[1154,1156,1165,1167,1173],{"type":37,"value":1155},"Этот подход критичен для ",{"type":32,"tag":1157,"props":1158,"children":1162},"a",{"href":1159,"rel":1160},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fheadless",[1161],"nofollow",[1163],{"type":37,"value":1164},"Headless Commerce",{"type":37,"value":1166}," проектов. Hydrogen или Next.js Commerce магазины добавляют компоненты ежедневно. Если где-то забыть ",{"type":32,"tag":67,"props":1168,"children":1170},{"className":1169},[],[1171],{"type":37,"value":1172},"await fetch()",{"type":37,"value":1174},", основной поток блокируется. Lighthouse CI ловит это через bundle size + TBT.",{"type":32,"tag":40,"props":1176,"children":1178},{"id":1177},"real-user-monitoring-отслеживание-реальных-цифр-в-production",[1179],{"type":37,"value":1180},"Real User Monitoring: отслеживание реальных цифр в production",{"type":32,"tag":33,"props":1182,"children":1183},{},[1184],{"type":37,"value":1185},"Lighthouse CI использует synthetic monitoring — работает в лабораторной среде. Реальные пользователи имеют другие устройства, сети, состояние кеша. Для мониторинга production нужен RUM (Real User Monitoring). RUM собирает поток метрик от живых пользователей.",{"type":32,"tag":33,"props":1187,"children":1188},{},[1189],{"type":37,"value":1190},"Через библиотеку Web Vitals можно отправлять RUM данные на собственный backend:",{"type":32,"tag":75,"props":1192,"children":1196},{"code":1193,"language":1194,"meta":16,"className":1195,"style":16},"\u002F\u002F analytics\u002Fweb-vitals.ts\nimport { onCLS, onFID, onLCP, onTTFB, onINP } from 'web-vitals';\n\nfunction sendToAnalytics(metric: Metric) {\n  const body = JSON.stringify({\n    name: metric.name,\n    value: metric.value,\n    rating: metric.rating,\n    delta: metric.delta,\n    id: metric.id,\n    navigationType: metric.navigationType,\n    url: window.location.href,\n    userAgent: navigator.userAgent,\n    timestamp: Date.now()\n  });\n\n  \u002F\u002F Beacon API гарантирует отправку даже при закрытии страницы\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);\nonLCP(sendToAnalytics);\nonINP(sendToAnalytics);\nonTTFB(sendToAnalytics);\n","typescript","language-typescript shiki shiki-themes github-dark",[1197],{"type":32,"tag":67,"props":1198,"children":1199},{"__ignoreMap":16},[1200,1208,1236,1245,1285,1323,1331,1339,1347,1355,1363,1371,1379,1387,1405,1413,1420,1428,1441,1468,1486,1527,1534,1541,1548,1561,1573,1585],{"type":32,"tag":85,"props":1201,"children":1202},{"class":87,"line":88},[1203],{"type":32,"tag":85,"props":1204,"children":1205},{"style":92},[1206],{"type":37,"value":1207},"\u002F\u002F analytics\u002Fweb-vitals.ts\n",{"type":32,"tag":85,"props":1209,"children":1210},{"class":87,"line":98},[1211,1216,1221,1226,1231],{"type":32,"tag":85,"props":1212,"children":1213},{"style":990},[1214],{"type":37,"value":1215},"import",{"type":32,"tag":85,"props":1217,"children":1218},{"style":102},[1219],{"type":37,"value":1220}," { onCLS, onFID, onLCP, onTTFB, onINP } ",{"type":32,"tag":85,"props":1222,"children":1223},{"style":990},[1224],{"type":37,"value":1225},"from",{"type":32,"tag":85,"props":1227,"children":1228},{"style":150},[1229],{"type":37,"value":1230}," 'web-vitals'",{"type":32,"tag":85,"props":1232,"children":1233},{"style":102},[1234],{"type":37,"value":1235},";\n",{"type":32,"tag":85,"props":1237,"children":1238},{"class":87,"line":108},[1239],{"type":32,"tag":85,"props":1240,"children":1242},{"emptyLinePlaceholder":1241},true,[1243],{"type":37,"value":1244},"\n",{"type":32,"tag":85,"props":1246,"children":1247},{"class":87,"line":123},[1248,1253,1259,1264,1270,1275,1280],{"type":32,"tag":85,"props":1249,"children":1250},{"style":990},[1251],{"type":37,"value":1252},"function",{"type":32,"tag":85,"props":1254,"children":1256},{"style":1255},"--shiki-default:#B392F0",[1257],{"type":37,"value":1258}," sendToAnalytics",{"type":32,"tag":85,"props":1260,"children":1261},{"style":102},[1262],{"type":37,"value":1263},"(",{"type":32,"tag":85,"props":1265,"children":1267},{"style":1266},"--shiki-default:#FFAB70",[1268],{"type":37,"value":1269},"metric",{"type":32,"tag":85,"props":1271,"children":1272},{"style":990},[1273],{"type":37,"value":1274},":",{"type":32,"tag":85,"props":1276,"children":1277},{"style":1255},[1278],{"type":37,"value":1279}," Metric",{"type":32,"tag":85,"props":1281,"children":1282},{"style":102},[1283],{"type":37,"value":1284},") {\n",{"type":32,"tag":85,"props":1286,"children":1287},{"class":87,"line":136},[1288,1293,1298,1303,1308,1313,1318],{"type":32,"tag":85,"props":1289,"children":1290},{"style":990},[1291],{"type":37,"value":1292},"  const",{"type":32,"tag":85,"props":1294,"children":1295},{"style":112},[1296],{"type":37,"value":1297}," body",{"type":32,"tag":85,"props":1299,"children":1300},{"style":990},[1301],{"type":37,"value":1302}," =",{"type":32,"tag":85,"props":1304,"children":1305},{"style":112},[1306],{"type":37,"value":1307}," JSON",{"type":32,"tag":85,"props":1309,"children":1310},{"style":102},[1311],{"type":37,"value":1312},".",{"type":32,"tag":85,"props":1314,"children":1315},{"style":1255},[1316],{"type":37,"value":1317},"stringify",{"type":32,"tag":85,"props":1319,"children":1320},{"style":102},[1321],{"type":37,"value":1322},"({\n",{"type":32,"tag":85,"props":1324,"children":1325},{"class":87,"line":161},[1326],{"type":32,"tag":85,"props":1327,"children":1328},{"style":102},[1329],{"type":37,"value":1330},"    name: metric.name,\n",{"type":32,"tag":85,"props":1332,"children":1333},{"class":87,"line":174},[1334],{"type":32,"tag":85,"props":1335,"children":1336},{"style":102},[1337],{"type":37,"value":1338},"    value: metric.value,\n",{"type":32,"tag":85,"props":1340,"children":1341},{"class":87,"line":217},[1342],{"type":32,"tag":85,"props":1343,"children":1344},{"style":102},[1345],{"type":37,"value":1346},"    rating: metric.rating,\n",{"type":32,"tag":85,"props":1348,"children":1349},{"class":87,"line":26},[1350],{"type":32,"tag":85,"props":1351,"children":1352},{"style":102},[1353],{"type":37,"value":1354},"    delta: metric.delta,\n",{"type":32,"tag":85,"props":1356,"children":1357},{"class":87,"line":292},[1358],{"type":32,"tag":85,"props":1359,"children":1360},{"style":102},[1361],{"type":37,"value":1362},"    id: metric.id,\n",{"type":32,"tag":85,"props":1364,"children":1365},{"class":87,"line":330},[1366],{"type":32,"tag":85,"props":1367,"children":1368},{"style":102},[1369],{"type":37,"value":1370},"    navigationType: metric.navigationType,\n",{"type":32,"tag":85,"props":1372,"children":1373},{"class":87,"line":369},[1374],{"type":32,"tag":85,"props":1375,"children":1376},{"style":102},[1377],{"type":37,"value":1378},"    url: window.location.href,\n",{"type":32,"tag":85,"props":1380,"children":1381},{"class":87,"line":378},[1382],{"type":32,"tag":85,"props":1383,"children":1384},{"style":102},[1385],{"type":37,"value":1386},"    userAgent: navigator.userAgent,\n",{"type":32,"tag":85,"props":1388,"children":1389},{"class":87,"line":387},[1390,1395,1400],{"type":32,"tag":85,"props":1391,"children":1392},{"style":102},[1393],{"type":37,"value":1394},"    timestamp: Date.",{"type":32,"tag":85,"props":1396,"children":1397},{"style":1255},[1398],{"type":37,"value":1399},"now",{"type":32,"tag":85,"props":1401,"children":1402},{"style":102},[1403],{"type":37,"value":1404},"()\n",{"type":32,"tag":85,"props":1406,"children":1407},{"class":87,"line":400},[1408],{"type":32,"tag":85,"props":1409,"children":1410},{"style":102},[1411],{"type":37,"value":1412},"  });\n",{"type":32,"tag":85,"props":1414,"children":1415},{"class":87,"line":422},[1416],{"type":32,"tag":85,"props":1417,"children":1418},{"emptyLinePlaceholder":1241},[1419],{"type":37,"value":1244},{"type":32,"tag":85,"props":1421,"children":1422},{"class":87,"line":445},[1423],{"type":32,"tag":85,"props":1424,"children":1425},{"style":92},[1426],{"type":37,"value":1427},"  \u002F\u002F Beacon API гарантирует отправку даже при закрытии страницы\n",{"type":32,"tag":85,"props":1429,"children":1430},{"class":87,"line":458},[1431,1436],{"type":32,"tag":85,"props":1432,"children":1433},{"style":990},[1434],{"type":37,"value":1435},"  if",{"type":32,"tag":85,"props":1437,"children":1438},{"style":102},[1439],{"type":37,"value":1440}," (navigator.sendBeacon) {\n",{"type":32,"tag":85,"props":1442,"children":1443},{"class":87,"line":471},[1444,1449,1454,1458,1463],{"type":32,"tag":85,"props":1445,"children":1446},{"style":102},[1447],{"type":37,"value":1448},"    navigator.",{"type":32,"tag":85,"props":1450,"children":1451},{"style":1255},[1452],{"type":37,"value":1453},"sendBeacon",{"type":32,"tag":85,"props":1455,"children":1456},{"style":102},[1457],{"type":37,"value":1263},{"type":32,"tag":85,"props":1459,"children":1460},{"style":150},[1461],{"type":37,"value":1462},"'\u002Fapi\u002Fvitals'",{"type":32,"tag":85,"props":1464,"children":1465},{"style":102},[1466],{"type":37,"value":1467},", body);\n",{"type":32,"tag":85,"props":1469,"children":1470},{"class":87,"line":493},[1471,1476,1481],{"type":32,"tag":85,"props":1472,"children":1473},{"style":102},[1474],{"type":37,"value":1475},"  } ",{"type":32,"tag":85,"props":1477,"children":1478},{"style":990},[1479],{"type":37,"value":1480},"else",{"type":32,"tag":85,"props":1482,"children":1483},{"style":102},[1484],{"type":37,"value":1485}," {\n",{"type":32,"tag":85,"props":1487,"children":1488},{"class":87,"line":515},[1489,1494,1498,1502,1507,1512,1517,1522],{"type":32,"tag":85,"props":1490,"children":1491},{"style":1255},[1492],{"type":37,"value":1493},"    fetch",{"type":32,"tag":85,"props":1495,"children":1496},{"style":102},[1497],{"type":37,"value":1263},{"type":32,"tag":85,"props":1499,"children":1500},{"style":150},[1501],{"type":37,"value":1462},{"type":32,"tag":85,"props":1503,"children":1504},{"style":102},[1505],{"type":37,"value":1506},", { method: ",{"type":32,"tag":85,"props":1508,"children":1509},{"style":150},[1510],{"type":37,"value":1511},"'POST'",{"type":32,"tag":85,"props":1513,"children":1514},{"style":102},[1515],{"type":37,"value":1516},", body, keepalive: ",{"type":32,"tag":85,"props":1518,"children":1519},{"style":112},[1520],{"type":37,"value":1521},"true",{"type":32,"tag":85,"props":1523,"children":1524},{"style":102},[1525],{"type":37,"value":1526}," });\n",{"type":32,"tag":85,"props":1528,"children":1529},{"class":87,"line":533},[1530],{"type":32,"tag":85,"props":1531,"children":1532},{"style":102},[1533],{"type":37,"value":565},{"type":32,"tag":85,"props":1535,"children":1536},{"class":87,"line":542},[1537],{"type":32,"tag":85,"props":1538,"children":1539},{"style":102},[1540],{"type":37,"value":574},{"type":32,"tag":85,"props":1542,"children":1543},{"class":87,"line":550},[1544],{"type":32,"tag":85,"props":1545,"children":1546},{"emptyLinePlaceholder":1241},[1547],{"type":37,"value":1244},{"type":32,"tag":85,"props":1549,"children":1550},{"class":87,"line":559},[1551,1556],{"type":32,"tag":85,"props":1552,"children":1553},{"style":1255},[1554],{"type":37,"value":1555},"onCLS",{"type":32,"tag":85,"props":1557,"children":1558},{"style":102},[1559],{"type":37,"value":1560},"(sendToAnalytics);\n",{"type":32,"tag":85,"props":1562,"children":1563},{"class":87,"line":568},[1564,1569],{"type":32,"tag":85,"props":1565,"children":1566},{"style":1255},[1567],{"type":37,"value":1568},"onLCP",{"type":32,"tag":85,"props":1570,"children":1571},{"style":102},[1572],{"type":37,"value":1560},{"type":32,"tag":85,"props":1574,"children":1575},{"class":87,"line":1032},[1576,1581],{"type":32,"tag":85,"props":1577,"children":1578},{"style":1255},[1579],{"type":37,"value":1580},"onINP",{"type":32,"tag":85,"props":1582,"children":1583},{"style":102},[1584],{"type":37,"value":1560},{"type":32,"tag":85,"props":1586,"children":1587},{"class":87,"line":1049},[1588,1593],{"type":32,"tag":85,"props":1589,"children":1590},{"style":1255},[1591],{"type":37,"value":1592},"onTTFB",{"type":32,"tag":85,"props":1594,"children":1595},{"style":102},[1596],{"type":37,"value":1560},{"type":32,"tag":33,"props":1598,"children":1599},{},[1600,1602,1608],{"type":37,"value":1601},"Backend endpoint ",{"type":32,"tag":67,"props":1603,"children":1605},{"className":1604},[],[1606],{"type":37,"value":1607},"\u002Fapi\u002Fvitals",{"type":37,"value":1609}," записывает метрики в BigQuery или Cloudflare Analytics. Суточный агрегированный отчёт выглядит так:",{"type":32,"tag":1611,"props":1612,"children":1613},"table",{},[1614,1648],{"type":32,"tag":1615,"props":1616,"children":1617},"thead",{},[1618],{"type":32,"tag":1619,"props":1620,"children":1621},"tr",{},[1622,1628,1633,1638,1643],{"type":32,"tag":1623,"props":1624,"children":1625},"th",{},[1626],{"type":37,"value":1627},"Дата",{"type":32,"tag":1623,"props":1629,"children":1630},{},[1631],{"type":37,"value":1632},"LCP p75",{"type":32,"tag":1623,"props":1634,"children":1635},{},[1636],{"type":37,"value":1637},"INP p75",{"type":32,"tag":1623,"props":1639,"children":1640},{},[1641],{"type":37,"value":1642},"CLS p75",{"type":32,"tag":1623,"props":1644,"children":1645},{},[1646],{"type":37,"value":1647},"Pageviews",{"type":32,"tag":1649,"props":1650,"children":1651},"tbody",{},[1652,1681,1709],{"type":32,"tag":1619,"props":1653,"children":1654},{},[1655,1661,1666,1671,1676],{"type":32,"tag":1656,"props":1657,"children":1658},"td",{},[1659],{"type":37,"value":1660},"2026-07-28",{"type":32,"tag":1656,"props":1662,"children":1663},{},[1664],{"type":37,"value":1665},"1.8s",{"type":32,"tag":1656,"props":1667,"children":1668},{},[1669],{"type":37,"value":1670},"140ms",{"type":32,"tag":1656,"props":1672,"children":1673},{},[1674],{"type":37,"value":1675},"0.06",{"type":32,"tag":1656,"props":1677,"children":1678},{},[1679],{"type":37,"value":1680},"12,400",{"type":32,"tag":1619,"props":1682,"children":1683},{},[1684,1689,1694,1699,1704],{"type":32,"tag":1656,"props":1685,"children":1686},{},[1687],{"type":37,"value":1688},"2026-07-29",{"type":32,"tag":1656,"props":1690,"children":1691},{},[1692],{"type":37,"value":1693},"2.1s",{"type":32,"tag":1656,"props":1695,"children":1696},{},[1697],{"type":37,"value":1698},"180ms",{"type":32,"tag":1656,"props":1700,"children":1701},{},[1702],{"type":37,"value":1703},"0.09",{"type":32,"tag":1656,"props":1705,"children":1706},{},[1707],{"type":37,"value":1708},"13,100",{"type":32,"tag":1619,"props":1710,"children":1711},{},[1712,1716,1721,1726,1731],{"type":32,"tag":1656,"props":1713,"children":1714},{},[1715],{"type":37,"value":19},{"type":32,"tag":1656,"props":1717,"children":1718},{},[1719],{"type":37,"value":1720},"3.2s",{"type":32,"tag":1656,"props":1722,"children":1723},{},[1724],{"type":37,"value":1725},"320ms",{"type":32,"tag":1656,"props":1727,"children":1728},{},[1729],{"type":37,"value":1730},"0.14",{"type":32,"tag":1656,"props":1732,"children":1733},{},[1734],{"type":37,"value":1735},"11,800",{"type":32,"tag":33,"props":1737,"children":1738},{},[1739],{"type":37,"value":1740},"29 июля было развёртывание. LCP скочил с 2,1 с до 3,2 с, INP с 180 мс до 320 мс. Bounce rate вырос на 4,2 %. RUM уловил это в production за 2 часа — тогда как Lighthouse CI в lab показал LCP \u003C 2 с, но реальные пользователи на более медленных устройствах видели другое.",{"type":32,"tag":33,"props":1742,"children":1743},{},[1744],{"type":37,"value":1745},"На основе RUM данных было принято решение откатить развёртывание. LCP вернулся к 1.9 с.",{"type":32,"tag":1747,"props":1748,"children":1750},"h3",{"id":1749},"pipeline-алармов-rum",[1751],{"type":37,"value":1752},"Pipeline алармов RUM",{"type":32,"tag":33,"props":1754,"children":1755},{},[1756],{"type":37,"value":1757},"Только смотреть RUM метрики на dashboard недостаточно. Нужны instant alertы в Slack при регрессии. Можно настроить scheduled query в BigQuery:",{"type":32,"tag":75,"props":1759,"children":1763},{"code":1760,"language":1761,"meta":16,"className":1762,"style":16},"-- BigQuery scheduled query (каждый час)\nWITH current_hour AS (\n  SELECT\n    APPROX_QUANTILES(lcp_value, 100)[OFFSET(75)] AS lcp_p75,\n    APPROX_QUANTILES(inp_value, 100)[OFFSET(75)] AS inp_p75\n  FROM `project.dataset.web_vitals`\n  WHERE timestamp >= TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 1 HOUR)\n),\nbaseline AS (\n  SELECT\n    APPROX_QUANTILES(lcp_value, 100)[OFFSET(75)] AS lcp_p75_baseline\n  FROM `project.dataset.web_vitals`\n  WHERE timestamp BETWEEN TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 8 HOUR)\n    AND TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 2 HOUR)\n)\nSELECT\n  c.lcp_p75,\n  b.lcp_p75_baseline,\n  (c.lcp_p75 - b.lcp_p75_baseline) \u002F b.lcp_p75_baseline * 100 AS lcp_regression_pct\nFROM current_hour c, baseline b\nWHERE (c.lcp_p75 - b.lcp_p75_baseline) \u002F b.lcp_p75_baseline > 0.15\n","sql","language-sql shiki shiki-themes github-dark",[1764],{"type":32,"tag":67,"props":1765,"children":1766},{"__ignoreMap":16},[1767,1775,1798,1806,1833,1858,1871,1919,1927,1943,1950,1974,1985,2026,2059,2066,2074,2095,2116,2197,2210],{"type":32,"tag":85,"props":1768,"children":1769},{"class":87,"line":88},[1770],{"type":32,"tag":85,"props":1771,"children":1772},{"style":92},[1773],{"type":37,"value":1774},"-- BigQuery scheduled query (каждый час)\n",{"type":32,"tag":85,"props":1776,"children":1777},{"class":87,"line":98},[1778,1783,1788,1793],{"type":32,"tag":85,"props":1779,"children":1780},{"style":990},[1781],{"type":37,"value":1782},"WITH",{"type":32,"tag":85,"props":1784,"children":1785},{"style":102},[1786],{"type":37,"value":1787}," current_hour ",{"type":32,"tag":85,"props":1789,"children":1790},{"style":990},[1791],{"type":37,"value":1792},"AS",{"type":32,"tag":85,"props":1794,"children":1795},{"style":102},[1796],{"type":37,"value":1797}," (\n",{"type":32,"tag":85,"props":1799,"children":1800},{"class":87,"line":108},[1801],{"type":32,"tag":85,"props":1802,"children":1803},{"style":990},[1804],{"type":37,"value":1805},"  SELECT\n",{"type":32,"tag":85,"props":1807,"children":1808},{"class":87,"line":123},[1809,1814,1819,1824,1828],{"type":32,"tag":85,"props":1810,"children":1811},{"style":102},[1812],{"type":37,"value":1813},"    APPROX_QUANTILES(lcp_value, ",{"type":32,"tag":85,"props":1815,"children":1816},{"style":112},[1817],{"type":37,"value":1818},"100",{"type":32,"tag":85,"props":1820,"children":1821},{"style":102},[1822],{"type":37,"value":1823},")[OFFSET(75)] ",{"type":32,"tag":85,"props":1825,"children":1826},{"style":990},[1827],{"type":37,"value":1792},{"type":32,"tag":85,"props":1829,"children":1830},{"style":102},[1831],{"type":37,"value":1832}," lcp_p75,\n",{"type":32,"tag":85,"props":1834,"children":1835},{"class":87,"line":136},[1836,1841,1845,1849,1853],{"type":32,"tag":85,"props":1837,"children":1838},{"style":102},[1839],{"type":37,"value":1840},"    APPROX_QUANTILES(inp_value, ",{"type":32,"tag":85,"props":1842,"children":1843},{"style":112},[1844],{"type":37,"value":1818},{"type":32,"tag":85,"props":1846,"children":1847},{"style":102},[1848],{"type":37,"value":1823},{"type":32,"tag":85,"props":1850,"children":1851},{"style":990},[1852],{"type":37,"value":1792},{"type":32,"tag":85,"props":1854,"children":1855},{"style":102},[1856],{"type":37,"value":1857}," inp_p75\n",{"type":32,"tag":85,"props":1859,"children":1860},{"class":87,"line":161},[1861,1866],{"type":32,"tag":85,"props":1862,"children":1863},{"style":990},[1864],{"type":37,"value":1865},"  FROM",{"type":32,"tag":85,"props":1867,"children":1868},{"style":150},[1869],{"type":37,"value":1870}," `project.dataset.web_vitals`\n",{"type":32,"tag":85,"props":1872,"children":1873},{"class":87,"line":174},[1874,1879,1884,1889,1894,1899,1904,1909,1914],{"type":32,"tag":85,"props":1875,"children":1876},{"style":990},[1877],{"type":37,"value":1878},"  WHERE",{"type":32,"tag":85,"props":1880,"children":1881},{"style":990},[1882],{"type":37,"value":1883}," timestamp",{"type":32,"tag":85,"props":1885,"children":1886},{"style":990},[1887],{"type":37,"value":1888}," >=",{"type":32,"tag":85,"props":1890,"children":1891},{"style":102},[1892],{"type":37,"value":1893}," TIMESTAMP_SUB(",{"type":32,"tag":85,"props":1895,"children":1896},{"style":112},[1897],{"type":37,"value":1898},"CURRENT_TIMESTAMP",{"type":32,"tag":85,"props":1900,"children":1901},{"style":102},[1902],{"type":37,"value":1903},"(), INTERVAL ",{"type":32,"tag":85,"props":1905,"children":1906},{"style":112},[1907],{"type":37,"value":1908},"1",{"type":32,"tag":85,"props":1910,"children":1911},{"style":990},[1912],{"type":37,"value":1913}," HOUR",{"type":32,"tag":85,"props":1915,"children":1916},{"style":102},[1917],{"type":37,"value":1918},")\n",{"type":32,"tag":85,"props":1920,"children":1921},{"class":87,"line":217},[1922],{"type":32,"tag":85,"props":1923,"children":1924},{"style":102},[1925],{"type":37,"value":1926},"),\n",{"type":32,"tag":85,"props":1928,"children":1929},{"class":87,"line":26},[1930,1935,1939],{"type":32,"tag":85,"props":1931,"children":1932},{"style":102},[1933],{"type":37,"value":1934},"baseline ",{"type":32,"tag":85,"props":1936,"children":1937},{"style":990},[1938],{"type":37,"value":1792},{"type":32,"tag":85,"props":1940,"children":1941},{"style":102},[1942],{"type":37,"value":1797},{"type":32,"tag":85,"props":1944,"children":1945},{"class":87,"line":292},[1946],{"type":32,"tag":85,"props":1947,"children":1948},{"style":990},[1949],{"type":37,"value":1805},{"type":32,"tag":85,"props":1951,"children":1952},{"class":87,"line":330},[1953,1957,1961,1965,1969],{"type":32,"tag":85,"props":1954,"children":1955},{"style":102},[1956],{"type":37,"value":1813},{"type":32,"tag":85,"props":1958,"children":1959},{"style":112},[1960],{"type":37,"value":1818},{"type":32,"tag":85,"props":1962,"children":1963},{"style":102},[1964],{"type":37,"value":1823},{"type":32,"tag":85,"props":1966,"children":1967},{"style":990},[1968],{"type":37,"value":1792},{"type":32,"tag":85,"props":1970,"children":1971},{"style":102},[1972],{"type":37,"value":1973}," lcp_p75_baseline\n",{"type":32,"tag":85,"props":1975,"children":1976},{"class":87,"line":369},[1977,1981],{"type":32,"tag":85,"props":1978,"children":1979},{"style":990},[1980],{"type":37,"value":1865},{"type":32,"tag":85,"props":1982,"children":1983},{"style":150},[1984],{"type":37,"value":1870},{"type":32,"tag":85,"props":1986,"children":1987},{"class":87,"line":378},[1988,1992,1996,2001,2005,2009,2013,2018,2022],{"type":32,"tag":85,"props":1989,"children":1990},{"style":990},[1991],{"type":37,"value":1878},{"type":32,"tag":85,"props":1993,"children":1994},{"style":990},[1995],{"type":37,"value":1883},{"type":32,"tag":85,"props":1997,"children":1998},{"style":990},[1999],{"type":37,"value":2000}," BETWEEN",{"type":32,"tag":85,"props":2002,"children":2003},{"style":102},[2004],{"type":37,"value":1893},{"type":32,"tag":85,"props":2006,"children":2007},{"style":112},[2008],{"type":37,"value":1898},{"type":32,"tag":85,"props":2010,"children":2011},{"style":102},[2012],{"type":37,"value":1903},{"type":32,"tag":85,"props":2014,"children":2015},{"style":112},[2016],{"type":37,"value":2017},"8",{"type":32,"tag":85,"props":2019,"children":2020},{"style":990},[2021],{"type":37,"value":1913},{"type":32,"tag":85,"props":2023,"children":2024},{"style":102},[2025],{"type":37,"value":1918},{"type":32,"tag":85,"props":2027,"children":2028},{"class":87,"line":387},[2029,2034,2038,2042,2046,2051,2055],{"type":32,"tag":85,"props":2030,"children":2031},{"style":990},[2032],{"type":37,"value":2033},"    AND",{"type":32,"tag":85,"props":2035,"children":2036},{"style":102},[2037],{"type":37,"value":1893},{"type":32,"tag":85,"props":2039,"children":2040},{"style":112},[2041],{"type":37,"value":1898},{"type":32,"tag":85,"props":2043,"children":2044},{"style":102},[2045],{"type":37,"value":1903},{"type":32,"tag":85,"props":2047,"children":2048},{"style":112},[2049],{"type":37,"value":2050},"2",{"type":32,"tag":85,"props":2052,"children":2053},{"style":990},[2054],{"type":37,"value":1913},{"type":32,"tag":85,"props":2056,"children":2057},{"style":102},[2058],{"type":37,"value":1918},{"type":32,"tag":85,"props":2060,"children":2061},{"class":87,"line":400},[2062],{"type":32,"tag":85,"props":2063,"children":2064},{"style":102},[2065],{"type":37,"value":1918},{"type":32,"tag":85,"props":2067,"children":2068},{"class":87,"line":422},[2069],{"type":32,"tag":85,"props":2070,"children":2071},{"style":990},[2072],{"type":37,"value":2073},"SELECT\n",{"type":32,"tag":85,"props":2075,"children":2076},{"class":87,"line":445},[2077,2082,2086,2091],{"type":32,"tag":85,"props":2078,"children":2079},{"style":112},[2080],{"type":37,"value":2081},"  c",{"type":32,"tag":85,"props":2083,"children":2084},{"style":102},[2085],{"type":37,"value":1312},{"type":32,"tag":85,"props":2087,"children":2088},{"style":112},[2089],{"type":37,"value":2090},"lcp_p75",{"type":32,"tag":85,"props":2092,"children":2093},{"style":102},[2094],{"type":37,"value":158},{"type":32,"tag":85,"props":2096,"children":2097},{"class":87,"line":458},[2098,2103,2107,2112],{"type":32,"tag":85,"props":2099,"children":2100},{"style":112},[2101],{"type":37,"value":2102},"  b",{"type":32,"tag":85,"props":2104,"children":2105},{"style":102},[2106],{"type":37,"value":1312},{"type":32,"tag":85,"props":2108,"children":2109},{"style":112},[2110],{"type":37,"value":2111},"lcp_p75_baseline",{"type":32,"tag":85,"props":2113,"children":2114},{"style":102},[2115],{"type":37,"value":158},{"type":32,"tag":85,"props":2117,"children":2118},{"class":87,"line":471},[2119,2124,2129,2133,2137,2142,2147,2151,2155,2160,2165,2169,2173,2177,2182,2187,2192],{"type":32,"tag":85,"props":2120,"children":2121},{"style":102},[2122],{"type":37,"value":2123},"  (",{"type":32,"tag":85,"props":2125,"children":2126},{"style":112},[2127],{"type":37,"value":2128},"c",{"type":32,"tag":85,"props":2130,"children":2131},{"style":102},[2132],{"type":37,"value":1312},{"type":32,"tag":85,"props":2134,"children":2135},{"style":112},[2136],{"type":37,"value":2090},{"type":32,"tag":85,"props":2138,"children":2139},{"style":990},[2140],{"type":37,"value":2141}," -",{"type":32,"tag":85,"props":2143,"children":2144},{"style":112},[2145],{"type":37,"value":2146}," b",{"type":32,"tag":85,"props":2148,"children":2149},{"style":102},[2150],{"type":37,"value":1312},{"type":32,"tag":85,"props":2152,"children":2153},{"style":112},[2154],{"type":37,"value":2111},{"type":32,"tag":85,"props":2156,"children":2157},{"style":102},[2158],{"type":37,"value":2159},") ",{"type":32,"tag":85,"props":2161,"children":2162},{"style":990},[2163],{"type":37,"value":2164},"\u002F",{"type":32,"tag":85,"props":2166,"children":2167},{"style":112},[2168],{"type":37,"value":2146},{"type":32,"tag":85,"props":2170,"children":2171},{"style":102},[2172],{"type":37,"value":1312},{"type":32,"tag":85,"props":2174,"children":2175},{"style":112},[2176],{"type":37,"value":2111},{"type":32,"tag":85,"props":2178,"children":2179},{"style":990},[2180],{"type":37,"value":2181}," *",{"type":32,"tag":85,"props":2183,"children":2184},{"style":112},[2185],{"type":37,"value":2186}," 100",{"type":32,"tag":85,"props":2188,"children":2189},{"style":990},[2190],{"type":37,"value":2191}," AS",{"type":32,"tag":85,"props":2193,"children":2194},{"style":102},[2195],{"type":37,"value":2196}," lcp_regression_pct\n",{"type":32,"tag":85,"props":2198,"children":2199},{"class":87,"line":493},[2200,2205],{"type":32,"tag":85,"props":2201,"children":2202},{"style":990},[2203],{"type":37,"value":2204},"FROM",{"type":32,"tag":85,"props":2206,"children":2207},{"style":102},[2208],{"type":37,"value":2209}," current_hour c, baseline b\n",{"type":32,"tag":85,"props":2211,"children":2212},{"class":87,"line":515},[2213,2218,2223,2227,2231,2235,2239,2243,2247,2251,2255,2259,2263,2267,2271,2276,2281,2285],{"type":32,"tag":85,"props":2214,"children":2215},{"style":990},[2216],{"type":37,"value":2217},"WHERE",{"type":32,"tag":85,"props":2219,"children":2220},{"style":102},[2221],{"type":37,"value":2222}," (",{"type":32,"tag":85,"props":2224,"children":2225},{"style":112},[2226],{"type":37,"value":2128},{"type":32,"tag":85,"props":2228,"children":2229},{"style":102},[2230],{"type":37,"value":1312},{"type":32,"tag":85,"props":2232,"children":2233},{"style":112},[2234],{"type":37,"value":2090},{"type":32,"tag":85,"props":2236,"children":2237},{"style":990},[2238],{"type":37,"value":2141},{"type":32,"tag":85,"props":2240,"children":2241},{"style":112},[2242],{"type":37,"value":2146},{"type":32,"tag":85,"props":2244,"children":2245},{"style":102},[2246],{"type":37,"value":1312},{"type":32,"tag":85,"props":2248,"children":2249},{"style":112},[2250],{"type":37,"value":2111},{"type":32,"tag":85,"props":2252,"children":2253},{"style":102},[2254],{"type":37,"value":2159},{"type":32,"tag":85,"props":2256,"children":2257},{"style":990},[2258],{"type":37,"value":2164},{"type":32,"tag":85,"props":2260,"children":2261},{"style":112},[2262],{"type":37,"value":2146},{"type":32,"tag":85,"props":2264,"children":2265},{"style":102},[2266],{"type":37,"value":1312},{"type":32,"tag":85,"props":2268,"children":2269},{"style":112},[2270],{"type":37,"value":2111},{"type":32,"tag":85,"props":2272,"children":2273},{"style":990},[2274],{"type":37,"value":2275}," >",{"type":32,"tag":85,"props":2277,"children":2278},{"style":112},[2279],{"type":37,"value":2280}," 0",{"type":32,"tag":85,"props":2282,"children":2283},{"style":102},[2284],{"type":37,"value":1312},{"type":32,"tag":85,"props":2286,"children":2287},{"style":112},[2288],{"type":37,"value":2289},"15\n",{"type":32,"tag":33,"props":2291,"children":2292},{},[2293],{"type":37,"value":2294},"Query проверяет, не деградировал ли LCP p75 более чем на 15 % относительно baseline. При превышении срабатывает Cloud Function, посылающая alert в Slack webhook:",{"type":32,"tag":75,"props":2296,"children":2298},{"code":2297},"⚠️ Performance Regression Detected\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nLCP p75: 3.2s (+68% vs 6h baseline)\nBaseline: 1.9s\nURL: \u002Fproduct\u002Fxyz\nDeploy: #4521 (30 min ago)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n",[2299],{"type":32,"tag":67,"props":2300,"children":2301},{"__ignoreMap":16},[2302],{"type":37,"value":2297},{"type":32,"tag":40,"props":2304,"children":2306},{"id":2305},"trade-off-synthetic-vs-rum-где-какие-цифры-использовать",[2307],{"type":37,"value":2308},"Trade-off: Synthetic vs RUM — где какие цифры использовать",{"type":32,"tag":33,"props":2310,"children":2311},{},[2312],{"type":37,"value":2313},"Lighthouse CI и RUM дополняют друг друга. Не нужно выбирать один из них — нужно использовать оба параллельно.",{"type":32,"tag":33,"props":2315,"children":2316},{},[2317],{"type":32,"tag":2318,"props":2319,"children":2320},"strong",{},[2321],{"type":37,"value":2322},"Lighthouse CI (synthetic):",{"type":32,"tag":2324,"props":2325,"children":2326},"ul",{},[2327,2338,2348],{"type":32,"tag":2328,"props":2329,"children":2330},"li",{},[2331,2336],{"type":32,"tag":2318,"props":2332,"children":2333},{},[2334],{"type":37,"value":2335},"Плюсы:",{"type":37,"value":2337}," контролируемая среда, повторяемые результаты, запускается при каждом commit",{"type":32,"tag":2328,"props":2339,"children":2340},{},[2341,2346],{"type":32,"tag":2318,"props":2342,"children":2343},{},[2344],{"type":37,"value":2345},"Минусы:",{"type":37,"value":2347}," не видит вариативность реальных устройств, не может имитировать состояние кеша",{"type":32,"tag":2328,"props":2349,"children":2350},{},[2351,2356],{"type":32,"tag":2318,"props":2352,"children":2353},{},[2354],{"type":37,"value":2355},"Применение:",{"type":37,"value":2357}," prevention регрессий в CI pipeline — «заблокирует ли этот PR развёртывание?»",{"type":32,"tag":33,"props":2359,"children":2360},{},[2361],{"type":32,"tag":2318,"props":2362,"children":2363},{},[2364],{"type":37,"value":2365},"RUM (real user):",{"type":32,"tag":2324,"props":2367,"children":2368},{},[2369,2378,2387],{"type":32,"tag":2328,"props":2370,"children":2371},{},[2372,2376],{"type":32,"tag":2318,"props":2373,"children":2374},{},[2375],{"type":37,"value":2335},{"type":37,"value":2377}," реальные данные пользователей, ловит edge case'ы (например, LCP 5s на старом iPhone в Safari)",{"type":32,"tag":2328,"props":2379,"children":2380},{},[2381,2385],{"type":32,"tag":2318,"props":2382,"children":2383},{},[2384],{"type":37,"value":2345},{"type":37,"value":2386}," шумные данные (много outlier'ов), не помогает до развёртывания",{"type":32,"tag":2328,"props":2388,"children":2389},{},[2390,2394],{"type":32,"tag":2318,"props":2391,"children":2392},{},[2393],{"type":37,"value":2355},{"type":37,"value":2395}," production мониторинг — «деградировала ли производительность после deploy?»",{"type":32,"tag":33,"props":2397,"children":2398},{},[2399],{"type":37,"value":2400},"Зрелая система использует оба. Lighthouse CI блокирует merge при регрессии. Если merge прошёл, RUM за 2 часа подтверждает или опровергает lab данные. Если RUM показывает регрессию — rollback.",{"type":32,"tag":33,"props":2402,"children":2403},{},[2404],{"type":37,"value":2405},"Пример: в Shopify storefront добавили новый компонент выбора вариантов. Lighthouse CI показал 380 мс TBT (budget 200 мс). PR отклонена. После code-split и lazy-load TBT упал до 150 мс, merge прошёл. В production через 4 часа RUM показал INP p75 120 мс → 145 мс — приемлемо (budget 200 мс). Развёртывание остаётся.",{"type":32,"tag":40,"props":2407,"children":2409},{"id":2408},"интеграция-алармов-регрессии-в-deployment-pipeline",[2410],{"type":37,"value":2411},"Интеграция алармов регрессии в deployment pipeline",{"type":32,"tag":33,"props":2413,"children":2414},{},[2415],{"type":37,"value":2416},"Если RUM alarm срабатывает независимо от deployment, теряется контекст. Приходит alert «LCP деградировал», но неясно, какое именно развёртывание это вызвало. Нужно привязать metadata deployment'а к каждому RUM event.",{"type":32,"tag":33,"props":2418,"children":2419},{},[2420,2422,2428],{"type":37,"value":2421},"У Vercel и Netlify есть environment переменная ",{"type":32,"tag":67,"props":2423,"children":2425},{"className":2424},[],[2426],{"type":37,"value":2427},"VERCEL_GIT_COMMIT_SHA",{"type":37,"value":2429},". Инжектим её в frontend, добавляя к каждому RUM event:",{"type":32,"tag":75,"props":2431,"children":2433},{"code":2432,"language":1194,"meta":16,"className":1195,"style":16},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  runtimeConfig: {\n    public: {\n      deploymentId: process.env.VERCEL_GIT_COMMIT_SHA || 'local',\n      deployment\n",[2434],{"type":32,"tag":67,"props":2435,"children":2436},{"__ignoreMap":16},[2437,2445,2467,2475,2483,2509],{"type":32,"tag":85,"props":2438,"children":2439},{"class":87,"line":88},[2440],{"type":32,"tag":85,"props":2441,"children":2442},{"style":92},[2443],{"type":37,"value":2444},"\u002F\u002F nuxt.config.ts\n",{"type":32,"tag":85,"props":2446,"children":2447},{"class":87,"line":98},[2448,2453,2458,2463],{"type":32,"tag":85,"props":2449,"children":2450},{"style":990},[2451],{"type":37,"value":2452},"export",{"type":32,"tag":85,"props":2454,"children":2455},{"style":990},[2456],{"type":37,"value":2457}," default",{"type":32,"tag":85,"props":2459,"children":2460},{"style":1255},[2461],{"type":37,"value":2462}," defineNuxtConfig",{"type":32,"tag":85,"props":2464,"children":2465},{"style":102},[2466],{"type":37,"value":1322},{"type":32,"tag":85,"props":2468,"children":2469},{"class":87,"line":108},[2470],{"type":32,"tag":85,"props":2471,"children":2472},{"style":102},[2473],{"type":37,"value":2474},"  runtimeConfig: {\n",{"type":32,"tag":85,"props":2476,"children":2477},{"class":87,"line":123},[2478],{"type":32,"tag":85,"props":2479,"children":2480},{"style":102},[2481],{"type":37,"value":2482},"    public: {\n",{"type":32,"tag":85,"props":2484,"children":2485},{"class":87,"line":136},[2486,2491,2495,2500,2505],{"type":32,"tag":85,"props":2487,"children":2488},{"style":102},[2489],{"type":37,"value":2490},"      deploymentId: process.env.",{"type":32,"tag":85,"props":2492,"children":2493},{"style":112},[2494],{"type":37,"value":2427},{"type":32,"tag":85,"props":2496,"children":2497},{"style":990},[2498],{"type":37,"value":2499}," ||",{"type":32,"tag":85,"props":2501,"children":2502},{"style":150},[2503],{"type":37,"value":2504}," 'local'",{"type":32,"tag":85,"props":2506,"children":2507},{"style":102},[2508],{"type":37,"value":158},{"type":32,"tag":85,"props":2510,"children":2511},{"class":87,"line":161},[2512],{"type":32,"tag":85,"props":2513,"children":2514},{"style":102},[2515],{"type":37,"value":2516},"      deployment\n",{"type":32,"tag":2518,"props":2519,"children":2520},"style",{},[2521],{"type":37,"value":2522},"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":108,"depth":108,"links":2524},[2525,2526,2527,2530,2531],{"id":42,"depth":98,"text":45},{"id":596,"depth":98,"text":599},{"id":1177,"depth":98,"text":1180,"children":2528},[2529],{"id":1749,"depth":108,"text":1752},{"id":2305,"depth":98,"text":2308},{"id":2408,"depth":98,"text":2411},"markdown","content:ru:tech:presupuesti-proizvodstva-integraciya-v-pipeline.md","content","ru\u002Ftech\u002Fpresupuesti-proizvodstva-integraciya-v-pipeline.md","ru\u002Ftech\u002Fpresupuesti-proizvodstva-integraciya-v-pipeline","md",1785967485936]