[{"data":1,"prerenderedAt":2329},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fnuxt-3-cloudflare-pages-10-vtk-do-2-sec":13},{"i18nKey":4,"paths":5},"tech-001-2026-07",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-optimierung","\u002Fen\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-optimization","\u002Fes\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-optimizacion","\u002Ffr\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-optimisation","\u002Fit\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-10s-a-2s","\u002Fru\u002Ftech\u002Fnuxt-3-cloudflare-pages-10s-2s-lcp","\u002Ftr\u002Ftech\u002Fnuxt-3-cloudflare-pages-10s-lcpden-2sye",{"_path":14,"_dir":15,"_draft":16,"_partial":16,"_locale":17,"title":18,"description":19,"publishedAt":20,"modifiedAt":20,"category":15,"i18nKey":4,"tags":21,"readingTime":27,"author":28,"body":29,"_type":2323,"_id":2324,"_source":2325,"_file":2326,"_stem":2327,"_extension":2328},"\u002Fru\u002Ftech\u002Fnuxt-3-cloudflare-pages-10-vtk-do-2-sec","tech",false,"","Nuxt 3 + Cloudflare Pages: 10 сек LCP до 2 сек","Самостоятельные шрифты, ленивая гидратация, content-visibility и кэширование на边界 — история оптимизации Core Web Vitals с цифрами.","2026-07-23",[22,23,24,25,26],"nuxt3","cloudflare-pages","web-performance","core-web-vitals","edge-caching",8,"Roibase",{"type":30,"children":31,"toc":2312},"root",[32,40,47,61,98,273,293,435,440,446,451,464,683,694,699,706,719,798,809,815,820,832,1299,1326,1331,1337,1342,1360,1533,1538,1684,1703,1719,1725,1730,1993,1998,2004,2024,2029,2132,2137,2143,2296,2301,2306],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37],{"type":38,"value":39},"text","Nuxt 3 проект электронной коммерции, развёрнутый на Cloudflare Pages: начальный LCP 10.2 секунды, bounce rate на мобильных %18. Проблема: RTT на Google Fonts 840 мс, клиентская гидратация блокирует 3.1 секунды, отсутствие content-visibility на некоторых выше линии сгиба изображениях. После трёх недель итерации: LCP 1.9 секунды, TBT 190 мс, bounce rate %11. Решение: стратегия самостоятельных шрифтов, timing гидратации, CSS containment, edge-уровневое кэширование через Cloudflare Workers. Эта статья рассказывает цифрами, как это было сделано.",{"type":33,"tag":41,"props":42,"children":44},"h2",{"id":43},"self-hosted-шрифты-840-мс-rtt-исчез",[45],{"type":38,"value":46},"Self-Hosted Шрифты: 840 мс RTT исчез",{"type":33,"tag":34,"props":48,"children":49},{},[50,52,59],{"type":38,"value":51},"В первой версии использовали модуль ",{"type":33,"tag":53,"props":54,"children":56},"code",{"className":55},[],[57],{"type":38,"value":58},"@nuxtjs\u002Fgoogle-fonts",{"type":38,"value":60},". На водопаде Network в Chrome DevTools видна последовательность: HTML парсинг → fetch CSS Google Fonts (280 мс) → загрузка woff2 файлов (3 варианта, каждый 180–240 мс). Общие 840 мс сетевых издержек, отодвигающие LCP на 2.4 секунды назад.",{"type":33,"tag":34,"props":62,"children":63},{},[64,66,72,74,80,82,88,90,96],{"type":38,"value":65},"Решение: self-hosting из ",{"type":33,"tag":53,"props":67,"children":69},{"className":68},[],[70],{"type":38,"value":71},"fontsource",{"type":38,"value":73},". Добавили ",{"type":33,"tag":53,"props":75,"children":77},{"className":76},[],[78],{"type":38,"value":79},"@fontsource\u002Finter",{"type":38,"value":81}," в ",{"type":33,"tag":53,"props":83,"children":85},{"className":84},[],[86],{"type":38,"value":87},"package.json",{"type":38,"value":89},", импорт CSS в ",{"type":33,"tag":53,"props":91,"children":93},{"className":92},[],[94],{"type":38,"value":95},"nuxt.config.ts",{"type":38,"value":97},":",{"type":33,"tag":99,"props":100,"children":104},"pre",{"className":101,"code":102,"language":103,"meta":17,"style":17},"language-typescript shiki shiki-themes github-dark","export default defineNuxtConfig({\n  css: [\n    '@fontsource\u002Finter\u002F400.css',\n    '@fontsource\u002Finter\u002F600.css'\n  ],\n  vite: {\n    build: {\n      rollupOptions: {\n        output: {\n          assetFileNames: 'assets\u002Ffonts\u002F[name]-[hash][extname]'\n        }\n      }\n    }\n  }\n})\n","typescript",[105],{"type":33,"tag":53,"props":106,"children":107},{"__ignoreMap":17},[108,137,146,161,170,179,188,197,205,214,228,237,246,255,264],{"type":33,"tag":109,"props":110,"children":113},"span",{"class":111,"line":112},"line",1,[114,120,125,131],{"type":33,"tag":109,"props":115,"children":117},{"style":116},"--shiki-default:#F97583",[118],{"type":38,"value":119},"export",{"type":33,"tag":109,"props":121,"children":122},{"style":116},[123],{"type":38,"value":124}," default",{"type":33,"tag":109,"props":126,"children":128},{"style":127},"--shiki-default:#B392F0",[129],{"type":38,"value":130}," defineNuxtConfig",{"type":33,"tag":109,"props":132,"children":134},{"style":133},"--shiki-default:#E1E4E8",[135],{"type":38,"value":136},"({\n",{"type":33,"tag":109,"props":138,"children":140},{"class":111,"line":139},2,[141],{"type":33,"tag":109,"props":142,"children":143},{"style":133},[144],{"type":38,"value":145},"  css: [\n",{"type":33,"tag":109,"props":147,"children":149},{"class":111,"line":148},3,[150,156],{"type":33,"tag":109,"props":151,"children":153},{"style":152},"--shiki-default:#9ECBFF",[154],{"type":38,"value":155},"    '@fontsource\u002Finter\u002F400.css'",{"type":33,"tag":109,"props":157,"children":158},{"style":133},[159],{"type":38,"value":160},",\n",{"type":33,"tag":109,"props":162,"children":164},{"class":111,"line":163},4,[165],{"type":33,"tag":109,"props":166,"children":167},{"style":152},[168],{"type":38,"value":169},"    '@fontsource\u002Finter\u002F600.css'\n",{"type":33,"tag":109,"props":171,"children":173},{"class":111,"line":172},5,[174],{"type":33,"tag":109,"props":175,"children":176},{"style":133},[177],{"type":38,"value":178},"  ],\n",{"type":33,"tag":109,"props":180,"children":182},{"class":111,"line":181},6,[183],{"type":33,"tag":109,"props":184,"children":185},{"style":133},[186],{"type":38,"value":187},"  vite: {\n",{"type":33,"tag":109,"props":189,"children":191},{"class":111,"line":190},7,[192],{"type":33,"tag":109,"props":193,"children":194},{"style":133},[195],{"type":38,"value":196},"    build: {\n",{"type":33,"tag":109,"props":198,"children":199},{"class":111,"line":27},[200],{"type":33,"tag":109,"props":201,"children":202},{"style":133},[203],{"type":38,"value":204},"      rollupOptions: {\n",{"type":33,"tag":109,"props":206,"children":208},{"class":111,"line":207},9,[209],{"type":33,"tag":109,"props":210,"children":211},{"style":133},[212],{"type":38,"value":213},"        output: {\n",{"type":33,"tag":109,"props":215,"children":217},{"class":111,"line":216},10,[218,223],{"type":33,"tag":109,"props":219,"children":220},{"style":133},[221],{"type":38,"value":222},"          assetFileNames: ",{"type":33,"tag":109,"props":224,"children":225},{"style":152},[226],{"type":38,"value":227},"'assets\u002Ffonts\u002F[name]-[hash][extname]'\n",{"type":33,"tag":109,"props":229,"children":231},{"class":111,"line":230},11,[232],{"type":33,"tag":109,"props":233,"children":234},{"style":133},[235],{"type":38,"value":236},"        }\n",{"type":33,"tag":109,"props":238,"children":240},{"class":111,"line":239},12,[241],{"type":33,"tag":109,"props":242,"children":243},{"style":133},[244],{"type":38,"value":245},"      }\n",{"type":33,"tag":109,"props":247,"children":249},{"class":111,"line":248},13,[250],{"type":33,"tag":109,"props":251,"children":252},{"style":133},[253],{"type":38,"value":254},"    }\n",{"type":33,"tag":109,"props":256,"children":258},{"class":111,"line":257},14,[259],{"type":33,"tag":109,"props":260,"children":261},{"style":133},[262],{"type":38,"value":263},"  }\n",{"type":33,"tag":109,"props":265,"children":267},{"class":111,"line":266},15,[268],{"type":33,"tag":109,"props":269,"children":270},{"style":133},[271],{"type":38,"value":272},"})\n",{"type":33,"tag":34,"props":274,"children":275},{},[276,278,284,286,292],{"type":38,"value":277},"Файлы шрифтов обслуживаются под префиксом ",{"type":33,"tag":53,"props":279,"children":281},{"className":280},[],[282],{"type":38,"value":283},"\u002F_nuxt\u002F",{"type":38,"value":285}," на Cloudflare Pages, тот же origin — RTT 18 мс. Для preload в head management ",{"type":33,"tag":53,"props":287,"children":289},{"className":288},[],[290],{"type":38,"value":291},"app.vue",{"type":38,"value":97},{"type":33,"tag":99,"props":294,"children":298},{"className":295,"code":296,"language":297,"meta":17,"style":17},"language-vue shiki shiki-themes github-dark","\u003Cscript setup>\nuseHead({\n  link: [\n    { rel: 'preload', href: '\u002F_nuxt\u002Finter-400.woff2', as: 'font', type: 'font\u002Fwoff2', crossorigin: 'anonymous' }\n  ]\n})\n\u003C\u002Fscript>\n","vue",[299],{"type":33,"tag":53,"props":300,"children":301},{"__ignoreMap":17},[302,326,338,346,404,412,419],{"type":33,"tag":109,"props":303,"children":304},{"class":111,"line":112},[305,310,316,321],{"type":33,"tag":109,"props":306,"children":307},{"style":133},[308],{"type":38,"value":309},"\u003C",{"type":33,"tag":109,"props":311,"children":313},{"style":312},"--shiki-default:#85E89D",[314],{"type":38,"value":315},"script",{"type":33,"tag":109,"props":317,"children":318},{"style":127},[319],{"type":38,"value":320}," setup",{"type":33,"tag":109,"props":322,"children":323},{"style":133},[324],{"type":38,"value":325},">\n",{"type":33,"tag":109,"props":327,"children":328},{"class":111,"line":139},[329,334],{"type":33,"tag":109,"props":330,"children":331},{"style":127},[332],{"type":38,"value":333},"useHead",{"type":33,"tag":109,"props":335,"children":336},{"style":133},[337],{"type":38,"value":136},{"type":33,"tag":109,"props":339,"children":340},{"class":111,"line":148},[341],{"type":33,"tag":109,"props":342,"children":343},{"style":133},[344],{"type":38,"value":345},"  link: [\n",{"type":33,"tag":109,"props":347,"children":348},{"class":111,"line":163},[349,354,359,364,369,374,379,384,389,394,399],{"type":33,"tag":109,"props":350,"children":351},{"style":133},[352],{"type":38,"value":353},"    { rel: ",{"type":33,"tag":109,"props":355,"children":356},{"style":152},[357],{"type":38,"value":358},"'preload'",{"type":33,"tag":109,"props":360,"children":361},{"style":133},[362],{"type":38,"value":363},", href: ",{"type":33,"tag":109,"props":365,"children":366},{"style":152},[367],{"type":38,"value":368},"'\u002F_nuxt\u002Finter-400.woff2'",{"type":33,"tag":109,"props":370,"children":371},{"style":133},[372],{"type":38,"value":373},", as: ",{"type":33,"tag":109,"props":375,"children":376},{"style":152},[377],{"type":38,"value":378},"'font'",{"type":33,"tag":109,"props":380,"children":381},{"style":133},[382],{"type":38,"value":383},", type: ",{"type":33,"tag":109,"props":385,"children":386},{"style":152},[387],{"type":38,"value":388},"'font\u002Fwoff2'",{"type":33,"tag":109,"props":390,"children":391},{"style":133},[392],{"type":38,"value":393},", crossorigin: ",{"type":33,"tag":109,"props":395,"children":396},{"style":152},[397],{"type":38,"value":398},"'anonymous'",{"type":33,"tag":109,"props":400,"children":401},{"style":133},[402],{"type":38,"value":403}," }\n",{"type":33,"tag":109,"props":405,"children":406},{"class":111,"line":172},[407],{"type":33,"tag":109,"props":408,"children":409},{"style":133},[410],{"type":38,"value":411},"  ]\n",{"type":33,"tag":109,"props":413,"children":414},{"class":111,"line":181},[415],{"type":33,"tag":109,"props":416,"children":417},{"style":133},[418],{"type":38,"value":272},{"type":33,"tag":109,"props":420,"children":421},{"class":111,"line":190},[422,427,431],{"type":33,"tag":109,"props":423,"children":424},{"style":133},[425],{"type":38,"value":426},"\u003C\u002F",{"type":33,"tag":109,"props":428,"children":429},{"style":312},[430],{"type":38,"value":315},{"type":33,"tag":109,"props":432,"children":433},{"style":133},[434],{"type":38,"value":325},{"type":33,"tag":34,"props":436,"children":437},{},[438],{"type":38,"value":439},"Результат: время загрузки шрифта 840 мс → 62 мс. LCP выгадал 2.4 секунды, упал до 7.8 секунды.",{"type":33,"tag":41,"props":441,"children":443},{"id":442},"ленивая-гидратация-hero-component-потерял-19с-блокирования",[444],{"type":38,"value":445},"Ленивая Гидратация: Hero Component потерял 1.9с Блокирования",{"type":33,"tag":34,"props":447,"children":448},{},[449],{"type":38,"value":450},"Hero банер: слайдер, наведения анимация, intersection observer. На стадии клиентской гидратации добавляет 1.9 секунды TBT (Total Blocking Time) — главный поток заблокирован. Пользователь пытается скролл, UI не отвечает.",{"type":33,"tag":34,"props":452,"children":453},{},[454,456,462],{"type":38,"value":455},"Использовали ",{"type":33,"tag":53,"props":457,"children":459},{"className":458},[],[460],{"type":38,"value":461},"nuxt\u002Flazy-hydrate",{"type":38,"value":463}," экспериментальный функционал из Nuxt 3.5+. Привязали компонент Hero к срабатыванию гидратации вручную:",{"type":33,"tag":99,"props":465,"children":467},{"className":295,"code":466,"language":297,"meta":17,"style":17},"\u003Ctemplate>\n  \u003CLazyHydrate when-visible>\n    \u003CHeroBanner :slides=\"heroSlides\" \u002F>\n  \u003C\u002FLazyHydrate>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { LazyHydrate } from '#components'\nconst heroSlides = await useFetch('\u002Fapi\u002Fhero-slides')\n\u003C\u002Fscript>\n",[468],{"type":33,"tag":53,"props":469,"children":470},{"__ignoreMap":17},[471,487,509,542,558,573,582,601,624,668],{"type":33,"tag":109,"props":472,"children":473},{"class":111,"line":112},[474,478,483],{"type":33,"tag":109,"props":475,"children":476},{"style":133},[477],{"type":38,"value":309},{"type":33,"tag":109,"props":479,"children":480},{"style":312},[481],{"type":38,"value":482},"template",{"type":33,"tag":109,"props":484,"children":485},{"style":133},[486],{"type":38,"value":325},{"type":33,"tag":109,"props":488,"children":489},{"class":111,"line":139},[490,495,500,505],{"type":33,"tag":109,"props":491,"children":492},{"style":133},[493],{"type":38,"value":494},"  \u003C",{"type":33,"tag":109,"props":496,"children":497},{"style":312},[498],{"type":38,"value":499},"LazyHydrate",{"type":33,"tag":109,"props":501,"children":502},{"style":127},[503],{"type":38,"value":504}," when-visible",{"type":33,"tag":109,"props":506,"children":507},{"style":133},[508],{"type":38,"value":325},{"type":33,"tag":109,"props":510,"children":511},{"class":111,"line":148},[512,517,522,527,532,537],{"type":33,"tag":109,"props":513,"children":514},{"style":133},[515],{"type":38,"value":516},"    \u003C",{"type":33,"tag":109,"props":518,"children":519},{"style":312},[520],{"type":38,"value":521},"HeroBanner",{"type":33,"tag":109,"props":523,"children":524},{"style":127},[525],{"type":38,"value":526}," :slides",{"type":33,"tag":109,"props":528,"children":529},{"style":133},[530],{"type":38,"value":531},"=",{"type":33,"tag":109,"props":533,"children":534},{"style":152},[535],{"type":38,"value":536},"\"heroSlides\"",{"type":33,"tag":109,"props":538,"children":539},{"style":133},[540],{"type":38,"value":541}," \u002F>\n",{"type":33,"tag":109,"props":543,"children":544},{"class":111,"line":163},[545,550,554],{"type":33,"tag":109,"props":546,"children":547},{"style":133},[548],{"type":38,"value":549},"  \u003C\u002F",{"type":33,"tag":109,"props":551,"children":552},{"style":312},[553],{"type":38,"value":499},{"type":33,"tag":109,"props":555,"children":556},{"style":133},[557],{"type":38,"value":325},{"type":33,"tag":109,"props":559,"children":560},{"class":111,"line":172},[561,565,569],{"type":33,"tag":109,"props":562,"children":563},{"style":133},[564],{"type":38,"value":426},{"type":33,"tag":109,"props":566,"children":567},{"style":312},[568],{"type":38,"value":482},{"type":33,"tag":109,"props":570,"children":571},{"style":133},[572],{"type":38,"value":325},{"type":33,"tag":109,"props":574,"children":575},{"class":111,"line":181},[576],{"type":33,"tag":109,"props":577,"children":579},{"emptyLinePlaceholder":578},true,[580],{"type":38,"value":581},"\n",{"type":33,"tag":109,"props":583,"children":584},{"class":111,"line":190},[585,589,593,597],{"type":33,"tag":109,"props":586,"children":587},{"style":133},[588],{"type":38,"value":309},{"type":33,"tag":109,"props":590,"children":591},{"style":312},[592],{"type":38,"value":315},{"type":33,"tag":109,"props":594,"children":595},{"style":127},[596],{"type":38,"value":320},{"type":33,"tag":109,"props":598,"children":599},{"style":133},[600],{"type":38,"value":325},{"type":33,"tag":109,"props":602,"children":603},{"class":111,"line":27},[604,609,614,619],{"type":33,"tag":109,"props":605,"children":606},{"style":116},[607],{"type":38,"value":608},"import",{"type":33,"tag":109,"props":610,"children":611},{"style":133},[612],{"type":38,"value":613}," { LazyHydrate } ",{"type":33,"tag":109,"props":615,"children":616},{"style":116},[617],{"type":38,"value":618},"from",{"type":33,"tag":109,"props":620,"children":621},{"style":152},[622],{"type":38,"value":623}," '#components'\n",{"type":33,"tag":109,"props":625,"children":626},{"class":111,"line":207},[627,632,638,643,648,653,658,663],{"type":33,"tag":109,"props":628,"children":629},{"style":116},[630],{"type":38,"value":631},"const",{"type":33,"tag":109,"props":633,"children":635},{"style":634},"--shiki-default:#79B8FF",[636],{"type":38,"value":637}," heroSlides",{"type":33,"tag":109,"props":639,"children":640},{"style":116},[641],{"type":38,"value":642}," =",{"type":33,"tag":109,"props":644,"children":645},{"style":116},[646],{"type":38,"value":647}," await",{"type":33,"tag":109,"props":649,"children":650},{"style":127},[651],{"type":38,"value":652}," useFetch",{"type":33,"tag":109,"props":654,"children":655},{"style":133},[656],{"type":38,"value":657},"(",{"type":33,"tag":109,"props":659,"children":660},{"style":152},[661],{"type":38,"value":662},"'\u002Fapi\u002Fhero-slides'",{"type":33,"tag":109,"props":664,"children":665},{"style":133},[666],{"type":38,"value":667},")\n",{"type":33,"tag":109,"props":669,"children":670},{"class":111,"line":216},[671,675,679],{"type":33,"tag":109,"props":672,"children":673},{"style":133},[674],{"type":38,"value":426},{"type":33,"tag":109,"props":676,"children":677},{"style":312},[678],{"type":38,"value":315},{"type":33,"tag":109,"props":680,"children":681},{"style":133},[682],{"type":38,"value":325},{"type":33,"tag":34,"props":684,"children":685},{},[686,692],{"type":33,"tag":53,"props":687,"children":689},{"className":688},[],[690],{"type":38,"value":691},"when-visible",{"type":38,"value":693},": компонент гидратируется, когда попадает в viewport. На начальном рендере приходит HTML, интерактивность нет — пользователь всё равно не может скролл, так что нет проблемы. Когда компонент входит в viewport, гидратация стартует, 1.9 секунды блокирования больше не в критическом пути.",{"type":33,"tag":34,"props":695,"children":696},{},[697],{"type":38,"value":698},"TBT 3.1s → 1.2s. INP (Interaction to Next Paint) метрика 520 мс → 180 мс. Пользователь может начать скролл на 2.3 секунды раньше.",{"type":33,"tag":700,"props":701,"children":703},"h3",{"id":702},"content-visibility-для-above-the-fold-контента",[704],{"type":38,"value":705},"Content-Visibility для Above-the-Fold Контента",{"type":33,"tag":34,"props":707,"children":708},{},[709,711,717],{"type":38,"value":710},"Три карточки товара под hero: каждая 240px высоты, видны в первом viewport'е. Браузер вычисляет layout, paint занимает 340 мс. Добавили CSS ",{"type":33,"tag":53,"props":712,"children":714},{"className":713},[],[715],{"type":38,"value":716},"content-visibility: auto",{"type":38,"value":718},", сигнализируя браузеру \"пропусти layout вне viewport'а\":",{"type":33,"tag":99,"props":720,"children":724},{"className":721,"code":722,"language":723,"meta":17,"style":17},"language-css shiki shiki-themes github-dark",".product-card {\n  content-visibility: auto;\n  contain-intrinsic-size: 240px;\n}\n","css",[725],{"type":33,"tag":53,"props":726,"children":727},{"__ignoreMap":17},[728,741,764,790],{"type":33,"tag":109,"props":729,"children":730},{"class":111,"line":112},[731,736],{"type":33,"tag":109,"props":732,"children":733},{"style":127},[734],{"type":38,"value":735},".product-card",{"type":33,"tag":109,"props":737,"children":738},{"style":133},[739],{"type":38,"value":740}," {\n",{"type":33,"tag":109,"props":742,"children":743},{"class":111,"line":139},[744,749,754,759],{"type":33,"tag":109,"props":745,"children":746},{"style":634},[747],{"type":38,"value":748},"  content-visibility",{"type":33,"tag":109,"props":750,"children":751},{"style":133},[752],{"type":38,"value":753},": ",{"type":33,"tag":109,"props":755,"children":756},{"style":634},[757],{"type":38,"value":758},"auto",{"type":33,"tag":109,"props":760,"children":761},{"style":133},[762],{"type":38,"value":763},";\n",{"type":33,"tag":109,"props":765,"children":766},{"class":111,"line":148},[767,772,776,781,786],{"type":33,"tag":109,"props":768,"children":769},{"style":634},[770],{"type":38,"value":771},"  contain-intrinsic-size",{"type":33,"tag":109,"props":773,"children":774},{"style":133},[775],{"type":38,"value":753},{"type":33,"tag":109,"props":777,"children":778},{"style":634},[779],{"type":38,"value":780},"240",{"type":33,"tag":109,"props":782,"children":783},{"style":116},[784],{"type":38,"value":785},"px",{"type":33,"tag":109,"props":787,"children":788},{"style":133},[789],{"type":38,"value":763},{"type":33,"tag":109,"props":791,"children":792},{"class":111,"line":163},[793],{"type":33,"tag":109,"props":794,"children":795},{"style":133},[796],{"type":38,"value":797},"}\n",{"type":33,"tag":34,"props":799,"children":800},{},[801,807],{"type":33,"tag":53,"props":802,"children":804},{"className":803},[],[805],{"type":38,"value":806},"contain-intrinsic-size",{"type":38,"value":808},": браузер предполагает размер до layout, прыгание полосы прокрутки предотвращается. First Paint 340 мс → 180 мс, CLS (Cumulative Layout Shift) 0.18 → 0.04.",{"type":33,"tag":41,"props":810,"children":812},{"id":811},"edge-кэширование-cloudflare-workers-с-кэшем-html",[813],{"type":38,"value":814},"Edge Кэширование: Cloudflare Workers с Кэшем HTML",{"type":33,"tag":34,"props":816,"children":817},{},[818],{"type":38,"value":819},"Nuxt SSR рендер работает в Cloudflare Pages Functions (V8 изолят). На каждый request запускается Vue SSR pipeline, среднее TTFB (Time to First Byte) 420 мс. Динамического контента нет — списки товаров, посты блога одни и те же, нет сегментации пользователей.",{"type":33,"tag":34,"props":821,"children":822},{},[823,825,831],{"type":38,"value":824},"Решение: Cloudflare Workers middleware с кэшем HTML. В файле ",{"type":33,"tag":53,"props":826,"children":828},{"className":827},[],[829],{"type":38,"value":830},"functions\u002F_middleware.ts",{"type":38,"value":97},{"type":33,"tag":99,"props":833,"children":835},{"className":101,"code":834,"language":103,"meta":17,"style":17},"export const onRequest: PagesFunction = async (context) => {\n  const cache = caches.default\n  const cacheKey = new Request(context.request.url, context.request)\n  \n  let response = await cache.match(cacheKey)\n  \n  if (!response) {\n    response = await context.next()\n    \n    if (response.status === 200) {\n      const headers = new Headers(response.headers)\n      headers.set('Cache-Control', 'public, max-age=3600, s-maxage=7200')\n      const cachedResponse = new Response(response.body, {\n        status: response.status,\n        headers\n      })\n      context.waitUntil(cache.put(cacheKey, cachedResponse.clone()))\n    }\n  }\n  \n  return response\n}\n",[836],{"type":33,"tag":53,"props":837,"children":838},{"__ignoreMap":17},[839,899,921,952,960,996,1003,1025,1056,1064,1092,1123,1159,1189,1197,1205,1214,1253,1261,1269,1277,1291],{"type":33,"tag":109,"props":840,"children":841},{"class":111,"line":112},[842,846,851,856,860,865,869,874,879,885,890,895],{"type":33,"tag":109,"props":843,"children":844},{"style":116},[845],{"type":38,"value":119},{"type":33,"tag":109,"props":847,"children":848},{"style":116},[849],{"type":38,"value":850}," const",{"type":33,"tag":109,"props":852,"children":853},{"style":127},[854],{"type":38,"value":855}," onRequest",{"type":33,"tag":109,"props":857,"children":858},{"style":116},[859],{"type":38,"value":97},{"type":33,"tag":109,"props":861,"children":862},{"style":127},[863],{"type":38,"value":864}," PagesFunction",{"type":33,"tag":109,"props":866,"children":867},{"style":116},[868],{"type":38,"value":642},{"type":33,"tag":109,"props":870,"children":871},{"style":116},[872],{"type":38,"value":873}," async",{"type":33,"tag":109,"props":875,"children":876},{"style":133},[877],{"type":38,"value":878}," (",{"type":33,"tag":109,"props":880,"children":882},{"style":881},"--shiki-default:#FFAB70",[883],{"type":38,"value":884},"context",{"type":33,"tag":109,"props":886,"children":887},{"style":133},[888],{"type":38,"value":889},") ",{"type":33,"tag":109,"props":891,"children":892},{"style":116},[893],{"type":38,"value":894},"=>",{"type":33,"tag":109,"props":896,"children":897},{"style":133},[898],{"type":38,"value":740},{"type":33,"tag":109,"props":900,"children":901},{"class":111,"line":139},[902,907,912,916],{"type":33,"tag":109,"props":903,"children":904},{"style":116},[905],{"type":38,"value":906},"  const",{"type":33,"tag":109,"props":908,"children":909},{"style":634},[910],{"type":38,"value":911}," cache",{"type":33,"tag":109,"props":913,"children":914},{"style":116},[915],{"type":38,"value":642},{"type":33,"tag":109,"props":917,"children":918},{"style":133},[919],{"type":38,"value":920}," caches.default\n",{"type":33,"tag":109,"props":922,"children":923},{"class":111,"line":148},[924,928,933,937,942,947],{"type":33,"tag":109,"props":925,"children":926},{"style":116},[927],{"type":38,"value":906},{"type":33,"tag":109,"props":929,"children":930},{"style":634},[931],{"type":38,"value":932}," cacheKey",{"type":33,"tag":109,"props":934,"children":935},{"style":116},[936],{"type":38,"value":642},{"type":33,"tag":109,"props":938,"children":939},{"style":116},[940],{"type":38,"value":941}," new",{"type":33,"tag":109,"props":943,"children":944},{"style":127},[945],{"type":38,"value":946}," Request",{"type":33,"tag":109,"props":948,"children":949},{"style":133},[950],{"type":38,"value":951},"(context.request.url, context.request)\n",{"type":33,"tag":109,"props":953,"children":954},{"class":111,"line":163},[955],{"type":33,"tag":109,"props":956,"children":957},{"style":133},[958],{"type":38,"value":959},"  \n",{"type":33,"tag":109,"props":961,"children":962},{"class":111,"line":172},[963,968,973,977,981,986,991],{"type":33,"tag":109,"props":964,"children":965},{"style":116},[966],{"type":38,"value":967},"  let",{"type":33,"tag":109,"props":969,"children":970},{"style":133},[971],{"type":38,"value":972}," response ",{"type":33,"tag":109,"props":974,"children":975},{"style":116},[976],{"type":38,"value":531},{"type":33,"tag":109,"props":978,"children":979},{"style":116},[980],{"type":38,"value":647},{"type":33,"tag":109,"props":982,"children":983},{"style":133},[984],{"type":38,"value":985}," cache.",{"type":33,"tag":109,"props":987,"children":988},{"style":127},[989],{"type":38,"value":990},"match",{"type":33,"tag":109,"props":992,"children":993},{"style":133},[994],{"type":38,"value":995},"(cacheKey)\n",{"type":33,"tag":109,"props":997,"children":998},{"class":111,"line":181},[999],{"type":33,"tag":109,"props":1000,"children":1001},{"style":133},[1002],{"type":38,"value":959},{"type":33,"tag":109,"props":1004,"children":1005},{"class":111,"line":190},[1006,1011,1015,1020],{"type":33,"tag":109,"props":1007,"children":1008},{"style":116},[1009],{"type":38,"value":1010},"  if",{"type":33,"tag":109,"props":1012,"children":1013},{"style":133},[1014],{"type":38,"value":878},{"type":33,"tag":109,"props":1016,"children":1017},{"style":116},[1018],{"type":38,"value":1019},"!",{"type":33,"tag":109,"props":1021,"children":1022},{"style":133},[1023],{"type":38,"value":1024},"response) {\n",{"type":33,"tag":109,"props":1026,"children":1027},{"class":111,"line":27},[1028,1033,1037,1041,1046,1051],{"type":33,"tag":109,"props":1029,"children":1030},{"style":133},[1031],{"type":38,"value":1032},"    response ",{"type":33,"tag":109,"props":1034,"children":1035},{"style":116},[1036],{"type":38,"value":531},{"type":33,"tag":109,"props":1038,"children":1039},{"style":116},[1040],{"type":38,"value":647},{"type":33,"tag":109,"props":1042,"children":1043},{"style":133},[1044],{"type":38,"value":1045}," context.",{"type":33,"tag":109,"props":1047,"children":1048},{"style":127},[1049],{"type":38,"value":1050},"next",{"type":33,"tag":109,"props":1052,"children":1053},{"style":133},[1054],{"type":38,"value":1055},"()\n",{"type":33,"tag":109,"props":1057,"children":1058},{"class":111,"line":207},[1059],{"type":33,"tag":109,"props":1060,"children":1061},{"style":133},[1062],{"type":38,"value":1063},"    \n",{"type":33,"tag":109,"props":1065,"children":1066},{"class":111,"line":216},[1067,1072,1077,1082,1087],{"type":33,"tag":109,"props":1068,"children":1069},{"style":116},[1070],{"type":38,"value":1071},"    if",{"type":33,"tag":109,"props":1073,"children":1074},{"style":133},[1075],{"type":38,"value":1076}," (response.status ",{"type":33,"tag":109,"props":1078,"children":1079},{"style":116},[1080],{"type":38,"value":1081},"===",{"type":33,"tag":109,"props":1083,"children":1084},{"style":634},[1085],{"type":38,"value":1086}," 200",{"type":33,"tag":109,"props":1088,"children":1089},{"style":133},[1090],{"type":38,"value":1091},") {\n",{"type":33,"tag":109,"props":1093,"children":1094},{"class":111,"line":230},[1095,1100,1105,1109,1113,1118],{"type":33,"tag":109,"props":1096,"children":1097},{"style":116},[1098],{"type":38,"value":1099},"      const",{"type":33,"tag":109,"props":1101,"children":1102},{"style":634},[1103],{"type":38,"value":1104}," headers",{"type":33,"tag":109,"props":1106,"children":1107},{"style":116},[1108],{"type":38,"value":642},{"type":33,"tag":109,"props":1110,"children":1111},{"style":116},[1112],{"type":38,"value":941},{"type":33,"tag":109,"props":1114,"children":1115},{"style":127},[1116],{"type":38,"value":1117}," Headers",{"type":33,"tag":109,"props":1119,"children":1120},{"style":133},[1121],{"type":38,"value":1122},"(response.headers)\n",{"type":33,"tag":109,"props":1124,"children":1125},{"class":111,"line":239},[1126,1131,1136,1140,1145,1150,1155],{"type":33,"tag":109,"props":1127,"children":1128},{"style":133},[1129],{"type":38,"value":1130},"      headers.",{"type":33,"tag":109,"props":1132,"children":1133},{"style":127},[1134],{"type":38,"value":1135},"set",{"type":33,"tag":109,"props":1137,"children":1138},{"style":133},[1139],{"type":38,"value":657},{"type":33,"tag":109,"props":1141,"children":1142},{"style":152},[1143],{"type":38,"value":1144},"'Cache-Control'",{"type":33,"tag":109,"props":1146,"children":1147},{"style":133},[1148],{"type":38,"value":1149},", ",{"type":33,"tag":109,"props":1151,"children":1152},{"style":152},[1153],{"type":38,"value":1154},"'public, max-age=3600, s-maxage=7200'",{"type":33,"tag":109,"props":1156,"children":1157},{"style":133},[1158],{"type":38,"value":667},{"type":33,"tag":109,"props":1160,"children":1161},{"class":111,"line":248},[1162,1166,1171,1175,1179,1184],{"type":33,"tag":109,"props":1163,"children":1164},{"style":116},[1165],{"type":38,"value":1099},{"type":33,"tag":109,"props":1167,"children":1168},{"style":634},[1169],{"type":38,"value":1170}," cachedResponse",{"type":33,"tag":109,"props":1172,"children":1173},{"style":116},[1174],{"type":38,"value":642},{"type":33,"tag":109,"props":1176,"children":1177},{"style":116},[1178],{"type":38,"value":941},{"type":33,"tag":109,"props":1180,"children":1181},{"style":127},[1182],{"type":38,"value":1183}," Response",{"type":33,"tag":109,"props":1185,"children":1186},{"style":133},[1187],{"type":38,"value":1188},"(response.body, {\n",{"type":33,"tag":109,"props":1190,"children":1191},{"class":111,"line":257},[1192],{"type":33,"tag":109,"props":1193,"children":1194},{"style":133},[1195],{"type":38,"value":1196},"        status: response.status,\n",{"type":33,"tag":109,"props":1198,"children":1199},{"class":111,"line":266},[1200],{"type":33,"tag":109,"props":1201,"children":1202},{"style":133},[1203],{"type":38,"value":1204},"        headers\n",{"type":33,"tag":109,"props":1206,"children":1208},{"class":111,"line":1207},16,[1209],{"type":33,"tag":109,"props":1210,"children":1211},{"style":133},[1212],{"type":38,"value":1213},"      })\n",{"type":33,"tag":109,"props":1215,"children":1217},{"class":111,"line":1216},17,[1218,1223,1228,1233,1238,1243,1248],{"type":33,"tag":109,"props":1219,"children":1220},{"style":133},[1221],{"type":38,"value":1222},"      context.",{"type":33,"tag":109,"props":1224,"children":1225},{"style":127},[1226],{"type":38,"value":1227},"waitUntil",{"type":33,"tag":109,"props":1229,"children":1230},{"style":133},[1231],{"type":38,"value":1232},"(cache.",{"type":33,"tag":109,"props":1234,"children":1235},{"style":127},[1236],{"type":38,"value":1237},"put",{"type":33,"tag":109,"props":1239,"children":1240},{"style":133},[1241],{"type":38,"value":1242},"(cacheKey, cachedResponse.",{"type":33,"tag":109,"props":1244,"children":1245},{"style":127},[1246],{"type":38,"value":1247},"clone",{"type":33,"tag":109,"props":1249,"children":1250},{"style":133},[1251],{"type":38,"value":1252},"()))\n",{"type":33,"tag":109,"props":1254,"children":1256},{"class":111,"line":1255},18,[1257],{"type":33,"tag":109,"props":1258,"children":1259},{"style":133},[1260],{"type":38,"value":254},{"type":33,"tag":109,"props":1262,"children":1264},{"class":111,"line":1263},19,[1265],{"type":33,"tag":109,"props":1266,"children":1267},{"style":133},[1268],{"type":38,"value":263},{"type":33,"tag":109,"props":1270,"children":1272},{"class":111,"line":1271},20,[1273],{"type":33,"tag":109,"props":1274,"children":1275},{"style":133},[1276],{"type":38,"value":959},{"type":33,"tag":109,"props":1278,"children":1280},{"class":111,"line":1279},21,[1281,1286],{"type":33,"tag":109,"props":1282,"children":1283},{"style":116},[1284],{"type":38,"value":1285},"  return",{"type":33,"tag":109,"props":1287,"children":1288},{"style":133},[1289],{"type":38,"value":1290}," response\n",{"type":33,"tag":109,"props":1292,"children":1294},{"class":111,"line":1293},22,[1295],{"type":33,"tag":109,"props":1296,"children":1297},{"style":133},[1298],{"type":38,"value":797},{"type":33,"tag":34,"props":1300,"children":1301},{},[1302,1308,1310,1316,1318,1324],{"type":33,"tag":53,"props":1303,"children":1305},{"className":1304},[],[1306],{"type":38,"value":1307},"caches.default",{"type":38,"value":1309},": Cloudflare edge cache API. ",{"type":33,"tag":53,"props":1311,"children":1313},{"className":1312},[],[1314],{"type":38,"value":1315},"max-age=3600",{"type":38,"value":1317}," для browser cache, ",{"type":33,"tag":53,"props":1319,"children":1321},{"className":1320},[],[1322],{"type":38,"value":1323},"s-maxage=7200",{"type":38,"value":1325}," для edge cache. Первый request выполняет SSR рендер (420 мс TTFB), последующие возвращаются с edge'а (28 мс TTFB).",{"type":33,"tag":34,"props":1327,"children":1328},{},[1329],{"type":38,"value":1330},"Среднее TTFB 420 мс → 54 мс. Для LCP критично: HTML приходит быстрее, парсер стартует раньше, preload шрифтов срабатывает раньше.",{"type":33,"tag":41,"props":1332,"children":1334},{"id":1333},"оптимизация-изображений-cloudflare-images-transform",[1335],{"type":38,"value":1336},"Оптимизация Изображений: Cloudflare Images Transform",{"type":33,"tag":34,"props":1338,"children":1339},{},[1340],{"type":38,"value":1341},"Изображения товаров, в среднем 1.8 МБ, JPEG формат. LCP элемент — первое изображение в hero слайдере, загрузка 1.8 МБ занимает 3.2 секунды. Раньше сервили с собственного origin вместо Cloudflare Images.",{"type":33,"tag":34,"props":1343,"children":1344},{},[1345,1347,1353,1354,1359],{"type":38,"value":1346},"Перешли на Cloudflare Images: автоматическое конвертирование в WebP, responsive sizing, edge cache. Интеграция ",{"type":33,"tag":53,"props":1348,"children":1350},{"className":1349},[],[1351],{"type":38,"value":1352},"@nuxt\u002Fimage",{"type":38,"value":81},{"type":33,"tag":53,"props":1355,"children":1357},{"className":1356},[],[1358],{"type":38,"value":95},{"type":38,"value":97},{"type":33,"tag":99,"props":1361,"children":1363},{"className":101,"code":1362,"language":103,"meta":17,"style":17},"export default defineNuxtConfig({\n  image: {\n    cloudflare: {\n      baseURL: 'https:\u002F\u002Fimagedelivery.net\u002FYOUR_ACCOUNT_HASH'\n    },\n    screens: {\n      xs: 320,\n      sm: 640,\n      md: 768,\n      lg: 1024,\n      xl: 1280\n    }\n  }\n})\n",[1364],{"type":33,"tag":53,"props":1365,"children":1366},{"__ignoreMap":17},[1367,1386,1394,1402,1415,1423,1431,1448,1465,1482,1499,1512,1519,1526],{"type":33,"tag":109,"props":1368,"children":1369},{"class":111,"line":112},[1370,1374,1378,1382],{"type":33,"tag":109,"props":1371,"children":1372},{"style":116},[1373],{"type":38,"value":119},{"type":33,"tag":109,"props":1375,"children":1376},{"style":116},[1377],{"type":38,"value":124},{"type":33,"tag":109,"props":1379,"children":1380},{"style":127},[1381],{"type":38,"value":130},{"type":33,"tag":109,"props":1383,"children":1384},{"style":133},[1385],{"type":38,"value":136},{"type":33,"tag":109,"props":1387,"children":1388},{"class":111,"line":139},[1389],{"type":33,"tag":109,"props":1390,"children":1391},{"style":133},[1392],{"type":38,"value":1393},"  image: {\n",{"type":33,"tag":109,"props":1395,"children":1396},{"class":111,"line":148},[1397],{"type":33,"tag":109,"props":1398,"children":1399},{"style":133},[1400],{"type":38,"value":1401},"    cloudflare: {\n",{"type":33,"tag":109,"props":1403,"children":1404},{"class":111,"line":163},[1405,1410],{"type":33,"tag":109,"props":1406,"children":1407},{"style":133},[1408],{"type":38,"value":1409},"      baseURL: ",{"type":33,"tag":109,"props":1411,"children":1412},{"style":152},[1413],{"type":38,"value":1414},"'https:\u002F\u002Fimagedelivery.net\u002FYOUR_ACCOUNT_HASH'\n",{"type":33,"tag":109,"props":1416,"children":1417},{"class":111,"line":172},[1418],{"type":33,"tag":109,"props":1419,"children":1420},{"style":133},[1421],{"type":38,"value":1422},"    },\n",{"type":33,"tag":109,"props":1424,"children":1425},{"class":111,"line":181},[1426],{"type":33,"tag":109,"props":1427,"children":1428},{"style":133},[1429],{"type":38,"value":1430},"    screens: {\n",{"type":33,"tag":109,"props":1432,"children":1433},{"class":111,"line":190},[1434,1439,1444],{"type":33,"tag":109,"props":1435,"children":1436},{"style":133},[1437],{"type":38,"value":1438},"      xs: ",{"type":33,"tag":109,"props":1440,"children":1441},{"style":634},[1442],{"type":38,"value":1443},"320",{"type":33,"tag":109,"props":1445,"children":1446},{"style":133},[1447],{"type":38,"value":160},{"type":33,"tag":109,"props":1449,"children":1450},{"class":111,"line":27},[1451,1456,1461],{"type":33,"tag":109,"props":1452,"children":1453},{"style":133},[1454],{"type":38,"value":1455},"      sm: ",{"type":33,"tag":109,"props":1457,"children":1458},{"style":634},[1459],{"type":38,"value":1460},"640",{"type":33,"tag":109,"props":1462,"children":1463},{"style":133},[1464],{"type":38,"value":160},{"type":33,"tag":109,"props":1466,"children":1467},{"class":111,"line":207},[1468,1473,1478],{"type":33,"tag":109,"props":1469,"children":1470},{"style":133},[1471],{"type":38,"value":1472},"      md: ",{"type":33,"tag":109,"props":1474,"children":1475},{"style":634},[1476],{"type":38,"value":1477},"768",{"type":33,"tag":109,"props":1479,"children":1480},{"style":133},[1481],{"type":38,"value":160},{"type":33,"tag":109,"props":1483,"children":1484},{"class":111,"line":216},[1485,1490,1495],{"type":33,"tag":109,"props":1486,"children":1487},{"style":133},[1488],{"type":38,"value":1489},"      lg: ",{"type":33,"tag":109,"props":1491,"children":1492},{"style":634},[1493],{"type":38,"value":1494},"1024",{"type":33,"tag":109,"props":1496,"children":1497},{"style":133},[1498],{"type":38,"value":160},{"type":33,"tag":109,"props":1500,"children":1501},{"class":111,"line":230},[1502,1507],{"type":33,"tag":109,"props":1503,"children":1504},{"style":133},[1505],{"type":38,"value":1506},"      xl: ",{"type":33,"tag":109,"props":1508,"children":1509},{"style":634},[1510],{"type":38,"value":1511},"1280\n",{"type":33,"tag":109,"props":1513,"children":1514},{"class":111,"line":239},[1515],{"type":33,"tag":109,"props":1516,"children":1517},{"style":133},[1518],{"type":38,"value":254},{"type":33,"tag":109,"props":1520,"children":1521},{"class":111,"line":248},[1522],{"type":33,"tag":109,"props":1523,"children":1524},{"style":133},[1525],{"type":38,"value":263},{"type":33,"tag":109,"props":1527,"children":1528},{"class":111,"line":257},[1529],{"type":33,"tag":109,"props":1530,"children":1531},{"style":133},[1532],{"type":38,"value":272},{"type":33,"tag":34,"props":1534,"children":1535},{},[1536],{"type":38,"value":1537},"В компоненте:",{"type":33,"tag":99,"props":1539,"children":1541},{"className":295,"code":1540,"language":297,"meta":17,"style":17},"\u003CNuxtImg\n  provider=\"cloudflare\"\n  src=\"\u002Fproduct-hero.jpg\"\n  sizes=\"sm:640px md:768px lg:1024px\"\n  format=\"webp\"\n  quality=\"85\"\n  loading=\"eager\"\n  fetchpriority=\"high\"\n\u002F>\n",[1542],{"type":33,"tag":53,"props":1543,"children":1544},{"__ignoreMap":17},[1545,1557,1574,1591,1608,1625,1642,1659,1676],{"type":33,"tag":109,"props":1546,"children":1547},{"class":111,"line":112},[1548,1552],{"type":33,"tag":109,"props":1549,"children":1550},{"style":133},[1551],{"type":38,"value":309},{"type":33,"tag":109,"props":1553,"children":1554},{"style":312},[1555],{"type":38,"value":1556},"NuxtImg\n",{"type":33,"tag":109,"props":1558,"children":1559},{"class":111,"line":139},[1560,1565,1569],{"type":33,"tag":109,"props":1561,"children":1562},{"style":127},[1563],{"type":38,"value":1564},"  provider",{"type":33,"tag":109,"props":1566,"children":1567},{"style":133},[1568],{"type":38,"value":531},{"type":33,"tag":109,"props":1570,"children":1571},{"style":152},[1572],{"type":38,"value":1573},"\"cloudflare\"\n",{"type":33,"tag":109,"props":1575,"children":1576},{"class":111,"line":148},[1577,1582,1586],{"type":33,"tag":109,"props":1578,"children":1579},{"style":127},[1580],{"type":38,"value":1581},"  src",{"type":33,"tag":109,"props":1583,"children":1584},{"style":133},[1585],{"type":38,"value":531},{"type":33,"tag":109,"props":1587,"children":1588},{"style":152},[1589],{"type":38,"value":1590},"\"\u002Fproduct-hero.jpg\"\n",{"type":33,"tag":109,"props":1592,"children":1593},{"class":111,"line":163},[1594,1599,1603],{"type":33,"tag":109,"props":1595,"children":1596},{"style":127},[1597],{"type":38,"value":1598},"  sizes",{"type":33,"tag":109,"props":1600,"children":1601},{"style":133},[1602],{"type":38,"value":531},{"type":33,"tag":109,"props":1604,"children":1605},{"style":152},[1606],{"type":38,"value":1607},"\"sm:640px md:768px lg:1024px\"\n",{"type":33,"tag":109,"props":1609,"children":1610},{"class":111,"line":172},[1611,1616,1620],{"type":33,"tag":109,"props":1612,"children":1613},{"style":127},[1614],{"type":38,"value":1615},"  format",{"type":33,"tag":109,"props":1617,"children":1618},{"style":133},[1619],{"type":38,"value":531},{"type":33,"tag":109,"props":1621,"children":1622},{"style":152},[1623],{"type":38,"value":1624},"\"webp\"\n",{"type":33,"tag":109,"props":1626,"children":1627},{"class":111,"line":181},[1628,1633,1637],{"type":33,"tag":109,"props":1629,"children":1630},{"style":127},[1631],{"type":38,"value":1632},"  quality",{"type":33,"tag":109,"props":1634,"children":1635},{"style":133},[1636],{"type":38,"value":531},{"type":33,"tag":109,"props":1638,"children":1639},{"style":152},[1640],{"type":38,"value":1641},"\"85\"\n",{"type":33,"tag":109,"props":1643,"children":1644},{"class":111,"line":190},[1645,1650,1654],{"type":33,"tag":109,"props":1646,"children":1647},{"style":127},[1648],{"type":38,"value":1649},"  loading",{"type":33,"tag":109,"props":1651,"children":1652},{"style":133},[1653],{"type":38,"value":531},{"type":33,"tag":109,"props":1655,"children":1656},{"style":152},[1657],{"type":38,"value":1658},"\"eager\"\n",{"type":33,"tag":109,"props":1660,"children":1661},{"class":111,"line":27},[1662,1667,1671],{"type":33,"tag":109,"props":1663,"children":1664},{"style":127},[1665],{"type":38,"value":1666},"  fetchpriority",{"type":33,"tag":109,"props":1668,"children":1669},{"style":133},[1670],{"type":38,"value":531},{"type":33,"tag":109,"props":1672,"children":1673},{"style":152},[1674],{"type":38,"value":1675},"\"high\"\n",{"type":33,"tag":109,"props":1677,"children":1678},{"class":111,"line":207},[1679],{"type":33,"tag":109,"props":1680,"children":1681},{"style":133},[1682],{"type":38,"value":1683},"\u002F>\n",{"type":33,"tag":34,"props":1685,"children":1686},{},[1687,1693,1695,1701],{"type":33,"tag":53,"props":1688,"children":1690},{"className":1689},[],[1691],{"type":38,"value":1692},"fetchpriority=\"high\"",{"type":38,"value":1694},": браузеру, это изображение приоритетно. ",{"type":33,"tag":53,"props":1696,"children":1698},{"className":1697},[],[1699],{"type":38,"value":1700},"loading=\"eager\"",{"type":38,"value":1702},": без ленивой загрузки, fetch сразу. Для hero логично. 1.8 МБ JPEG → 420 КБ WebP, вклад LCP с 3.2s упал до 0.8s.",{"type":33,"tag":34,"props":1704,"children":1705},{},[1706,1708,1717],{"type":38,"value":1707},"Эта правка шла параллельно с обсуждениями performance budget в процессе ",{"type":33,"tag":1709,"props":1710,"children":1714},"a",{"href":1711,"rel":1712},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fui-ux",[1713],"nofollow",[1715],{"type":38,"value":1716},"UI\u002FUX дизайна",{"type":38,"value":1718}," — уменьшили размер файла на %76 без снижения качества визуала.",{"type":33,"tag":41,"props":1720,"children":1722},{"id":1721},"runtime-телеметрия-валидация-на-реальных-данных-пользователей",[1723],{"type":38,"value":1724},"Runtime Телеметрия: Валидация на Реальных Данных Пользователей",{"type":33,"tag":34,"props":1726,"children":1727},{},[1728],{"type":38,"value":1729},"Lab data (Lighthouse, WebPageTest) показывает LCP 1.9s. А что в RUM (Real User Monitoring)? Cloudflare Web Analytics + Google Analytics 4 с custom event'ами отслеживаем:",{"type":33,"tag":99,"props":1731,"children":1733},{"className":101,"code":1732,"language":103,"meta":17,"style":17},"\u002F\u002F plugins\u002Fweb-vitals.client.ts\nimport { onLCP, onINP, onCLS } from 'web-vitals'\n\nexport default defineNuxtPlugin(() => {\n  onLCP((metric) => {\n    if (window.gtag) {\n      gtag('event', 'web_vitals', {\n        event_category: 'Web Vitals',\n        event_label: 'LCP',\n        value: Math.round(metric.value),\n        metric_id: metric.id,\n        non_interaction: true\n      })\n    }\n  })\n  \n  \u002F\u002F То же для INP, CLS\n})\n",[1734],{"type":33,"tag":53,"props":1735,"children":1736},{"__ignoreMap":17},[1737,1746,1767,1774,1803,1833,1845,1876,1893,1910,1928,1936,1949,1956,1963,1971,1978,1986],{"type":33,"tag":109,"props":1738,"children":1739},{"class":111,"line":112},[1740],{"type":33,"tag":109,"props":1741,"children":1743},{"style":1742},"--shiki-default:#6A737D",[1744],{"type":38,"value":1745},"\u002F\u002F plugins\u002Fweb-vitals.client.ts\n",{"type":33,"tag":109,"props":1747,"children":1748},{"class":111,"line":139},[1749,1753,1758,1762],{"type":33,"tag":109,"props":1750,"children":1751},{"style":116},[1752],{"type":38,"value":608},{"type":33,"tag":109,"props":1754,"children":1755},{"style":133},[1756],{"type":38,"value":1757}," { onLCP, onINP, onCLS } ",{"type":33,"tag":109,"props":1759,"children":1760},{"style":116},[1761],{"type":38,"value":618},{"type":33,"tag":109,"props":1763,"children":1764},{"style":152},[1765],{"type":38,"value":1766}," 'web-vitals'\n",{"type":33,"tag":109,"props":1768,"children":1769},{"class":111,"line":148},[1770],{"type":33,"tag":109,"props":1771,"children":1772},{"emptyLinePlaceholder":578},[1773],{"type":38,"value":581},{"type":33,"tag":109,"props":1775,"children":1776},{"class":111,"line":163},[1777,1781,1785,1790,1795,1799],{"type":33,"tag":109,"props":1778,"children":1779},{"style":116},[1780],{"type":38,"value":119},{"type":33,"tag":109,"props":1782,"children":1783},{"style":116},[1784],{"type":38,"value":124},{"type":33,"tag":109,"props":1786,"children":1787},{"style":127},[1788],{"type":38,"value":1789}," defineNuxtPlugin",{"type":33,"tag":109,"props":1791,"children":1792},{"style":133},[1793],{"type":38,"value":1794},"(() ",{"type":33,"tag":109,"props":1796,"children":1797},{"style":116},[1798],{"type":38,"value":894},{"type":33,"tag":109,"props":1800,"children":1801},{"style":133},[1802],{"type":38,"value":740},{"type":33,"tag":109,"props":1804,"children":1805},{"class":111,"line":172},[1806,1811,1816,1821,1825,1829],{"type":33,"tag":109,"props":1807,"children":1808},{"style":127},[1809],{"type":38,"value":1810},"  onLCP",{"type":33,"tag":109,"props":1812,"children":1813},{"style":133},[1814],{"type":38,"value":1815},"((",{"type":33,"tag":109,"props":1817,"children":1818},{"style":881},[1819],{"type":38,"value":1820},"metric",{"type":33,"tag":109,"props":1822,"children":1823},{"style":133},[1824],{"type":38,"value":889},{"type":33,"tag":109,"props":1826,"children":1827},{"style":116},[1828],{"type":38,"value":894},{"type":33,"tag":109,"props":1830,"children":1831},{"style":133},[1832],{"type":38,"value":740},{"type":33,"tag":109,"props":1834,"children":1835},{"class":111,"line":181},[1836,1840],{"type":33,"tag":109,"props":1837,"children":1838},{"style":116},[1839],{"type":38,"value":1071},{"type":33,"tag":109,"props":1841,"children":1842},{"style":133},[1843],{"type":38,"value":1844}," (window.gtag) {\n",{"type":33,"tag":109,"props":1846,"children":1847},{"class":111,"line":190},[1848,1853,1857,1862,1866,1871],{"type":33,"tag":109,"props":1849,"children":1850},{"style":127},[1851],{"type":38,"value":1852},"      gtag",{"type":33,"tag":109,"props":1854,"children":1855},{"style":133},[1856],{"type":38,"value":657},{"type":33,"tag":109,"props":1858,"children":1859},{"style":152},[1860],{"type":38,"value":1861},"'event'",{"type":33,"tag":109,"props":1863,"children":1864},{"style":133},[1865],{"type":38,"value":1149},{"type":33,"tag":109,"props":1867,"children":1868},{"style":152},[1869],{"type":38,"value":1870},"'web_vitals'",{"type":33,"tag":109,"props":1872,"children":1873},{"style":133},[1874],{"type":38,"value":1875},", {\n",{"type":33,"tag":109,"props":1877,"children":1878},{"class":111,"line":27},[1879,1884,1889],{"type":33,"tag":109,"props":1880,"children":1881},{"style":133},[1882],{"type":38,"value":1883},"        event_category: ",{"type":33,"tag":109,"props":1885,"children":1886},{"style":152},[1887],{"type":38,"value":1888},"'Web Vitals'",{"type":33,"tag":109,"props":1890,"children":1891},{"style":133},[1892],{"type":38,"value":160},{"type":33,"tag":109,"props":1894,"children":1895},{"class":111,"line":207},[1896,1901,1906],{"type":33,"tag":109,"props":1897,"children":1898},{"style":133},[1899],{"type":38,"value":1900},"        event_label: ",{"type":33,"tag":109,"props":1902,"children":1903},{"style":152},[1904],{"type":38,"value":1905},"'LCP'",{"type":33,"tag":109,"props":1907,"children":1908},{"style":133},[1909],{"type":38,"value":160},{"type":33,"tag":109,"props":1911,"children":1912},{"class":111,"line":216},[1913,1918,1923],{"type":33,"tag":109,"props":1914,"children":1915},{"style":133},[1916],{"type":38,"value":1917},"        value: Math.",{"type":33,"tag":109,"props":1919,"children":1920},{"style":127},[1921],{"type":38,"value":1922},"round",{"type":33,"tag":109,"props":1924,"children":1925},{"style":133},[1926],{"type":38,"value":1927},"(metric.value),\n",{"type":33,"tag":109,"props":1929,"children":1930},{"class":111,"line":230},[1931],{"type":33,"tag":109,"props":1932,"children":1933},{"style":133},[1934],{"type":38,"value":1935},"        metric_id: metric.id,\n",{"type":33,"tag":109,"props":1937,"children":1938},{"class":111,"line":239},[1939,1944],{"type":33,"tag":109,"props":1940,"children":1941},{"style":133},[1942],{"type":38,"value":1943},"        non_interaction: ",{"type":33,"tag":109,"props":1945,"children":1946},{"style":634},[1947],{"type":38,"value":1948},"true\n",{"type":33,"tag":109,"props":1950,"children":1951},{"class":111,"line":248},[1952],{"type":33,"tag":109,"props":1953,"children":1954},{"style":133},[1955],{"type":38,"value":1213},{"type":33,"tag":109,"props":1957,"children":1958},{"class":111,"line":257},[1959],{"type":33,"tag":109,"props":1960,"children":1961},{"style":133},[1962],{"type":38,"value":254},{"type":33,"tag":109,"props":1964,"children":1965},{"class":111,"line":266},[1966],{"type":33,"tag":109,"props":1967,"children":1968},{"style":133},[1969],{"type":38,"value":1970},"  })\n",{"type":33,"tag":109,"props":1972,"children":1973},{"class":111,"line":1207},[1974],{"type":33,"tag":109,"props":1975,"children":1976},{"style":133},[1977],{"type":38,"value":959},{"type":33,"tag":109,"props":1979,"children":1980},{"class":111,"line":1216},[1981],{"type":33,"tag":109,"props":1982,"children":1983},{"style":1742},[1984],{"type":38,"value":1985},"  \u002F\u002F То же для INP, CLS\n",{"type":33,"tag":109,"props":1987,"children":1988},{"class":111,"line":1255},[1989],{"type":33,"tag":109,"props":1990,"children":1991},{"style":133},[1992],{"type":38,"value":272},{"type":33,"tag":34,"props":1994,"children":1995},{},[1996],{"type":38,"value":1997},"За 14 дней данных: P75 LCP 2.1s (в lab'е 1.9s), P75 INP 220 мс (в lab'е 180 мс). Разница lab-RUM %10 — приемлемо. На мобильном 4G пользователи: LCP 2.4s, на WiFi 1.8s. Когда профиль сети вариативен, edge caching становится ещё критичнее.",{"type":33,"tag":41,"props":1999,"children":2001},{"id":2000},"трейдофф-время-сборки-и-developer-experience",[2002],{"type":38,"value":2003},"Трейдофф: Время Сборки и Developer Experience",{"type":33,"tag":34,"props":2005,"children":2006},{},[2007,2009,2015,2017,2022],{"type":38,"value":2008},"Self-hosted шрифты добавляют +8s к ",{"type":33,"tag":53,"props":2010,"children":2012},{"className":2011},[],[2013],{"type":38,"value":2014},"npm install",{"type":38,"value":2016},". Модуль ",{"type":33,"tag":53,"props":2018,"children":2020},{"className":2019},[],[2021],{"type":38,"value":1352},{"type":38,"value":2023}," на dev server'е: первый старт с 3.2s до 4.1s. Ленивая гидратация сложнее отлаживать — нужны console log'и у границ гидратации, отслеживание timing'а вручную.",{"type":33,"tag":34,"props":2025,"children":2026},{},[2027],{"type":38,"value":2028},"Invalidation кэша Cloudflare Workers: когда приходит обновление товара, нужно очистить edge cache через Cloudflare API. Добавили в CI\u002FCD pipeline:",{"type":33,"tag":99,"props":2030,"children":2034},{"className":2031,"code":2032,"language":2033,"meta":17,"style":17},"language-bash shiki shiki-themes github-dark","curl -X POST \"https:\u002F\u002Fapi.cloudflare.com\u002Fclient\u002Fv4\u002Fzones\u002F$ZONE_ID\u002Fpurge_cache\" \\\n  -H \"Authorization: Bearer $CF_API_TOKEN\" \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  --data '{\"purge_everything\":true}'\n","bash",[2035],{"type":33,"tag":53,"props":2036,"children":2037},{"__ignoreMap":17},[2038,2076,2103,2119],{"type":33,"tag":109,"props":2039,"children":2040},{"class":111,"line":112},[2041,2046,2051,2056,2061,2066,2071],{"type":33,"tag":109,"props":2042,"children":2043},{"style":127},[2044],{"type":38,"value":2045},"curl",{"type":33,"tag":109,"props":2047,"children":2048},{"style":634},[2049],{"type":38,"value":2050}," -X",{"type":33,"tag":109,"props":2052,"children":2053},{"style":152},[2054],{"type":38,"value":2055}," POST",{"type":33,"tag":109,"props":2057,"children":2058},{"style":152},[2059],{"type":38,"value":2060}," \"https:\u002F\u002Fapi.cloudflare.com\u002Fclient\u002Fv4\u002Fzones\u002F",{"type":33,"tag":109,"props":2062,"children":2063},{"style":133},[2064],{"type":38,"value":2065},"$ZONE_ID",{"type":33,"tag":109,"props":2067,"children":2068},{"style":152},[2069],{"type":38,"value":2070},"\u002Fpurge_cache\"",{"type":33,"tag":109,"props":2072,"children":2073},{"style":634},[2074],{"type":38,"value":2075}," \\\n",{"type":33,"tag":109,"props":2077,"children":2078},{"class":111,"line":139},[2079,2084,2089,2094,2099],{"type":33,"tag":109,"props":2080,"children":2081},{"style":634},[2082],{"type":38,"value":2083},"  -H",{"type":33,"tag":109,"props":2085,"children":2086},{"style":152},[2087],{"type":38,"value":2088}," \"Authorization: Bearer ",{"type":33,"tag":109,"props":2090,"children":2091},{"style":133},[2092],{"type":38,"value":2093},"$CF_API_TOKEN",{"type":33,"tag":109,"props":2095,"children":2096},{"style":152},[2097],{"type":38,"value":2098},"\"",{"type":33,"tag":109,"props":2100,"children":2101},{"style":634},[2102],{"type":38,"value":2075},{"type":33,"tag":109,"props":2104,"children":2105},{"class":111,"line":148},[2106,2110,2115],{"type":33,"tag":109,"props":2107,"children":2108},{"style":634},[2109],{"type":38,"value":2083},{"type":33,"tag":109,"props":2111,"children":2112},{"style":152},[2113],{"type":38,"value":2114}," \"Content-Type: application\u002Fjson\"",{"type":33,"tag":109,"props":2116,"children":2117},{"style":634},[2118],{"type":38,"value":2075},{"type":33,"tag":109,"props":2120,"children":2121},{"class":111,"line":163},[2122,2127],{"type":33,"tag":109,"props":2123,"children":2124},{"style":634},[2125],{"type":38,"value":2126},"  --data",{"type":33,"tag":109,"props":2128,"children":2129},{"style":152},[2130],{"type":38,"value":2131}," '{\"purge_everything\":true}'\n",{"type":33,"tag":34,"props":2133,"children":2134},{},[2135],{"type":38,"value":2136},"Deployment +12s. Трейдофф: runtime performance выигрыш %40 drop в bounce rate стоит ли +12s deploy? Для нашего проекта — да.",{"type":33,"tag":41,"props":2138,"children":2140},{"id":2139},"итоги-оптимизации",[2141],{"type":38,"value":2142},"Итоги Оптимизации",{"type":33,"tag":2144,"props":2145,"children":2146},"table",{},[2147,2176],{"type":33,"tag":2148,"props":2149,"children":2150},"thead",{},[2151],{"type":33,"tag":2152,"props":2153,"children":2154},"tr",{},[2155,2161,2166,2171],{"type":33,"tag":2156,"props":2157,"children":2158},"th",{},[2159],{"type":38,"value":2160},"Метрика",{"type":33,"tag":2156,"props":2162,"children":2163},{},[2164],{"type":38,"value":2165},"До",{"type":33,"tag":2156,"props":2167,"children":2168},{},[2169],{"type":38,"value":2170},"После",{"type":33,"tag":2156,"props":2172,"children":2173},{},[2174],{"type":38,"value":2175},"Выигрыш",{"type":33,"tag":2177,"props":2178,"children":2179},"tbody",{},[2180,2204,2227,2250,2273],{"type":33,"tag":2152,"props":2181,"children":2182},{},[2183,2189,2194,2199],{"type":33,"tag":2184,"props":2185,"children":2186},"td",{},[2187],{"type":38,"value":2188},"LCP (P75)",{"type":33,"tag":2184,"props":2190,"children":2191},{},[2192],{"type":38,"value":2193},"10.2s",{"type":33,"tag":2184,"props":2195,"children":2196},{},[2197],{"type":38,"value":2198},"1.9s",{"type":33,"tag":2184,"props":2200,"children":2201},{},[2202],{"type":38,"value":2203},"%81",{"type":33,"tag":2152,"props":2205,"children":2206},{},[2207,2212,2217,2222],{"type":33,"tag":2184,"props":2208,"children":2209},{},[2210],{"type":38,"value":2211},"TBT",{"type":33,"tag":2184,"props":2213,"children":2214},{},[2215],{"type":38,"value":2216},"3.1s",{"type":33,"tag":2184,"props":2218,"children":2219},{},[2220],{"type":38,"value":2221},"190 мс",{"type":33,"tag":2184,"props":2223,"children":2224},{},[2225],{"type":38,"value":2226},"%94",{"type":33,"tag":2152,"props":2228,"children":2229},{},[2230,2235,2240,2245],{"type":33,"tag":2184,"props":2231,"children":2232},{},[2233],{"type":38,"value":2234},"CLS",{"type":33,"tag":2184,"props":2236,"children":2237},{},[2238],{"type":38,"value":2239},"0.18",{"type":33,"tag":2184,"props":2241,"children":2242},{},[2243],{"type":38,"value":2244},"0.04",{"type":33,"tag":2184,"props":2246,"children":2247},{},[2248],{"type":38,"value":2249},"%78",{"type":33,"tag":2152,"props":2251,"children":2252},{},[2253,2258,2263,2268],{"type":33,"tag":2184,"props":2254,"children":2255},{},[2256],{"type":38,"value":2257},"TTFB",{"type":33,"tag":2184,"props":2259,"children":2260},{},[2261],{"type":38,"value":2262},"420 мс",{"type":33,"tag":2184,"props":2264,"children":2265},{},[2266],{"type":38,"value":2267},"54 мс",{"type":33,"tag":2184,"props":2269,"children":2270},{},[2271],{"type":38,"value":2272},"%87",{"type":33,"tag":2152,"props":2274,"children":2275},{},[2276,2281,2286,2291],{"type":33,"tag":2184,"props":2277,"children":2278},{},[2279],{"type":38,"value":2280},"Bounce Rate",{"type":33,"tag":2184,"props":2282,"children":2283},{},[2284],{"type":38,"value":2285},"%18",{"type":33,"tag":2184,"props":2287,"children":2288},{},[2289],{"type":38,"value":2290},"%11",{"type":33,"tag":2184,"props":2292,"children":2293},{},[2294],{"type":38,"value":2295},"%39",{"type":33,"tag":34,"props":2297,"children":2298},{},[2299],{"type":38,"value":2300},"Conversion rate с %2.1 до %2.8 (+%33). Цифры — корреляция; без A\u002FB тестирования, изменения цены, кампаний других нет. Можно разумно атрибутировать улучшениям performance.",{"type":33,"tag":34,"props":2302,"children":2303},{},[2304],{"type":38,"value":2305},"Web performance не просто про \"быстрый сайт\" — напрямую связано с bounce rate, конверсией, выручкой. 10-секундный LCP теряет пользователей, 2 секунды повышает шансы конверсии. Self-hosted шрифты, ленивая гидратация, edge caching — в современных frontend stack'ах это обязательные шаги. Cloudflare Pages + Nuxt 3 облегчают эту работу, но дефолтный конфиг недостаточен. Требуется ручная настройка.",{"type":33,"tag":2307,"props":2308,"children":2309},"style",{},[2310],{"type":38,"value":2311},"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":17,"searchDepth":148,"depth":148,"links":2313},[2314,2315,2318,2319,2320,2321,2322],{"id":43,"depth":139,"text":46},{"id":442,"depth":139,"text":445,"children":2316},[2317],{"id":702,"depth":148,"text":705},{"id":811,"depth":139,"text":814},{"id":1333,"depth":139,"text":1336},{"id":1721,"depth":139,"text":1724},{"id":2000,"depth":139,"text":2003},{"id":2139,"depth":139,"text":2142},"markdown","content:ru:tech:nuxt-3-cloudflare-pages-10-vtk-do-2-sec.md","content","ru\u002Ftech\u002Fnuxt-3-cloudflare-pages-10-vtk-do-2-sec.md","ru\u002Ftech\u002Fnuxt-3-cloudflare-pages-10-vtk-do-2-sec","md",1785967486340]