[{"data":1,"prerenderedAt":2021},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fnuxt-3-cloudflare-pages-10s-2s-lcp":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":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":2015,"_id":2016,"_source":2017,"_file":2018,"_stem":2019,"_extension":2020},"tech",false,"","Nuxt 3 + Cloudflare Pages: от 10 сек LCP к 2 сек","Техническая анатомия снижения LCP на 80% через self-hosted шрифты, ленивую гидрацию, content-visibility и edge кеширование.","2026-07-05",[21,22,23,24,25],"nuxt-3","web-performance","cloudflare-pages","core-web-vitals","lcp",8,"Roibase",{"type":29,"children":30,"toc":2005},"root",[31,39,46,51,138,143,148,154,168,201,320,333,391,404,409,415,420,469,482,505,744,763,775,780,786,799,889,907,912,1075,1170,1182,1194,1200,1205,1384,1403,1408,1681,1693,1698,1704,1728,1742,1748,1917,1922,1927,1933,1938,1989,1994,1999],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Когда LCP (Largest Contentful Paint) в проекте Nuxt 3 превышает 10 секунд, пользователи закрывают страницу, конверсия падает, PageSpeed Google показывает красный. Это был наш сценарий — e-commerce клиент, Nuxt 3 + Vue 3, развернут на Cloudflare Pages. Первые замеры: LCP 10.2s, TBT 2190ms, CLS 0.18. Спустя четыре недели: LCP 1.9s, TBT 220ms, CLS 0.02. В этой статье показываем, какие конкретные изменения дали какие результаты.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"диагностика-три-вещи-убивающие-lcp",[44],{"type":37,"value":45},"Диагностика: Три вещи, убивающие LCP",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Первый шаг — Chrome DevTools Performance tab + Coverage analysis. Результат:",{"type":32,"tag":52,"props":53,"children":54},"table",{},[55,79],{"type":32,"tag":56,"props":57,"children":58},"thead",{},[59],{"type":32,"tag":60,"props":61,"children":62},"tr",{},[63,69,74],{"type":32,"tag":64,"props":65,"children":66},"th",{},[67],{"type":37,"value":68},"Категория",{"type":32,"tag":64,"props":70,"children":71},{},[72],{"type":37,"value":73},"Размер",{"type":32,"tag":64,"props":75,"children":76},{},[77],{"type":37,"value":78},"Время блокировки",{"type":32,"tag":80,"props":81,"children":82},"tbody",{},[83,102,120],{"type":32,"tag":60,"props":84,"children":85},{},[86,92,97],{"type":32,"tag":87,"props":88,"children":89},"td",{},[90],{"type":37,"value":91},"Google Fonts (Poppins, 6 weight)",{"type":32,"tag":87,"props":93,"children":94},{},[95],{"type":37,"value":96},"142 KB",{"type":32,"tag":87,"props":98,"children":99},{},[100],{"type":37,"value":101},"1.8s сеть + рендер",{"type":32,"tag":60,"props":103,"children":104},{},[105,110,115],{"type":32,"tag":87,"props":106,"children":107},{},[108],{"type":37,"value":109},"Гидрация hero section",{"type":32,"tag":87,"props":111,"children":112},{},[113],{"type":37,"value":114},"89 KB JS",{"type":32,"tag":87,"props":116,"children":117},{},[118],{"type":37,"value":119},"2.4s блокировка потока",{"type":32,"tag":60,"props":121,"children":122},{},[123,128,133],{"type":32,"tag":87,"props":124,"children":125},{},[126],{"type":37,"value":127},"Изображения выше сгиба (WebP)",{"type":32,"tag":87,"props":129,"children":130},{},[131],{"type":37,"value":132},"320 KB",{"type":32,"tag":87,"props":134,"children":135},{},[136],{"type":37,"value":137},"1.2s декодирование",{"type":32,"tag":33,"props":139,"children":140},{},[141],{"type":37,"value":142},"LCP элемент — H1 + изображение в hero section. Шрифт грузится долго → текст невидим (FOIT), гидрация тормозит → нет интерактивности, декодирование изображения → сдвиг макета. Три уровня, все три питают LCP напрямую.",{"type":32,"tag":33,"props":144,"children":145},{},[146],{"type":37,"value":147},"Второе открытие: на Cloudflare Pages статические активы кешируются 2 часа по умолчанию, но HTML — нет. Каждый запрос идет на origin, SSR запускается заново. Без edge-кеша baseline LCP начинается выше 400ms.",{"type":32,"tag":40,"props":149,"children":151},{"id":150},"self-hosted-шрифты-убираем-18s-сетевой-задержки",[152],{"type":37,"value":153},"Self-hosted шрифты: Убираем 1.8s сетевой задержки",{"type":32,"tag":33,"props":155,"children":156},{},[157,159,166],{"type":37,"value":158},"Избавиться от Google Fonts = убрать 1 DNS lookup + 1 handshake + 1 round-trip. Poppins (6 weight) загрузили из пакета ",{"type":32,"tag":160,"props":161,"children":163},"code",{"className":162},[],[164],{"type":37,"value":165},"fontsource",{"type":37,"value":167},":",{"type":32,"tag":169,"props":170,"children":174},"pre",{"className":171,"code":172,"language":173,"meta":16,"style":16},"language-bash shiki shiki-themes github-dark","npm install @fontsource\u002Fpoppins\n","bash",[175],{"type":32,"tag":160,"props":176,"children":177},{"__ignoreMap":16},[178],{"type":32,"tag":179,"props":180,"children":183},"span",{"class":181,"line":182},"line",1,[184,190,196],{"type":32,"tag":179,"props":185,"children":187},{"style":186},"--shiki-default:#B392F0",[188],{"type":37,"value":189},"npm",{"type":32,"tag":179,"props":191,"children":193},{"style":192},"--shiki-default:#9ECBFF",[194],{"type":37,"value":195}," install",{"type":32,"tag":179,"props":197,"children":198},{"style":192},[199],{"type":37,"value":200}," @fontsource\u002Fpoppins\n",{"type":32,"tag":169,"props":202,"children":206},{"className":203,"code":204,"language":205,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  css: [\n    '@fontsource\u002Fpoppins\u002F400.css',\n    '@fontsource\u002Fpoppins\u002F500.css',\n    '@fontsource\u002Fpoppins\u002F600.css',\n    '@fontsource\u002Fpoppins\u002F700.css'\n  ]\n})\n","typescript",[207],{"type":32,"tag":160,"props":208,"children":209},{"__ignoreMap":16},[210,219,245,254,268,281,294,303,311],{"type":32,"tag":179,"props":211,"children":212},{"class":181,"line":182},[213],{"type":32,"tag":179,"props":214,"children":216},{"style":215},"--shiki-default:#6A737D",[217],{"type":37,"value":218},"\u002F\u002F nuxt.config.ts\n",{"type":32,"tag":179,"props":220,"children":222},{"class":181,"line":221},2,[223,229,234,239],{"type":32,"tag":179,"props":224,"children":226},{"style":225},"--shiki-default:#F97583",[227],{"type":37,"value":228},"export",{"type":32,"tag":179,"props":230,"children":231},{"style":225},[232],{"type":37,"value":233}," default",{"type":32,"tag":179,"props":235,"children":236},{"style":186},[237],{"type":37,"value":238}," defineNuxtConfig",{"type":32,"tag":179,"props":240,"children":242},{"style":241},"--shiki-default:#E1E4E8",[243],{"type":37,"value":244},"({\n",{"type":32,"tag":179,"props":246,"children":248},{"class":181,"line":247},3,[249],{"type":32,"tag":179,"props":250,"children":251},{"style":241},[252],{"type":37,"value":253},"  css: [\n",{"type":32,"tag":179,"props":255,"children":257},{"class":181,"line":256},4,[258,263],{"type":32,"tag":179,"props":259,"children":260},{"style":192},[261],{"type":37,"value":262},"    '@fontsource\u002Fpoppins\u002F400.css'",{"type":32,"tag":179,"props":264,"children":265},{"style":241},[266],{"type":37,"value":267},",\n",{"type":32,"tag":179,"props":269,"children":271},{"class":181,"line":270},5,[272,277],{"type":32,"tag":179,"props":273,"children":274},{"style":192},[275],{"type":37,"value":276},"    '@fontsource\u002Fpoppins\u002F500.css'",{"type":32,"tag":179,"props":278,"children":279},{"style":241},[280],{"type":37,"value":267},{"type":32,"tag":179,"props":282,"children":284},{"class":181,"line":283},6,[285,290],{"type":32,"tag":179,"props":286,"children":287},{"style":192},[288],{"type":37,"value":289},"    '@fontsource\u002Fpoppins\u002F600.css'",{"type":32,"tag":179,"props":291,"children":292},{"style":241},[293],{"type":37,"value":267},{"type":32,"tag":179,"props":295,"children":297},{"class":181,"line":296},7,[298],{"type":32,"tag":179,"props":299,"children":300},{"style":192},[301],{"type":37,"value":302},"    '@fontsource\u002Fpoppins\u002F700.css'\n",{"type":32,"tag":179,"props":304,"children":305},{"class":181,"line":26},[306],{"type":32,"tag":179,"props":307,"children":308},{"style":241},[309],{"type":37,"value":310},"  ]\n",{"type":32,"tag":179,"props":312,"children":314},{"class":181,"line":313},9,[315],{"type":32,"tag":179,"props":316,"children":317},{"style":241},[318],{"type":37,"value":319},"})\n",{"type":32,"tag":33,"props":321,"children":322},{},[323,325,331],{"type":37,"value":324},"Файлы шрифтов теперь в бандле под ",{"type":32,"tag":160,"props":326,"children":328},{"className":327},[],[329],{"type":37,"value":330},"\u002F_nuxt\u002F",{"type":37,"value":332},". Проблема в размере: 142 KB → 168 KB (не хватает subset'а). Вытащили вручную:",{"type":32,"tag":169,"props":334,"children":336},{"className":171,"code":335,"language":173,"meta":16,"style":16},"pyftsubset Poppins-Regular.ttf \\\n  --output-file=Poppins-Regular-Latin.woff2 \\\n  --flavor=woff2 \\\n  --unicodes=U+0020-007F,U+00A0-00FF\n",[337],{"type":32,"tag":160,"props":338,"children":339},{"__ignoreMap":16},[340,359,371,383],{"type":32,"tag":179,"props":341,"children":342},{"class":181,"line":182},[343,348,353],{"type":32,"tag":179,"props":344,"children":345},{"style":186},[346],{"type":37,"value":347},"pyftsubset",{"type":32,"tag":179,"props":349,"children":350},{"style":192},[351],{"type":37,"value":352}," Poppins-Regular.ttf",{"type":32,"tag":179,"props":354,"children":356},{"style":355},"--shiki-default:#79B8FF",[357],{"type":37,"value":358}," \\\n",{"type":32,"tag":179,"props":360,"children":361},{"class":181,"line":221},[362,367],{"type":32,"tag":179,"props":363,"children":364},{"style":355},[365],{"type":37,"value":366},"  --output-file=Poppins-Regular-Latin.woff2",{"type":32,"tag":179,"props":368,"children":369},{"style":355},[370],{"type":37,"value":358},{"type":32,"tag":179,"props":372,"children":373},{"class":181,"line":247},[374,379],{"type":32,"tag":179,"props":375,"children":376},{"style":355},[377],{"type":37,"value":378},"  --flavor=woff2",{"type":32,"tag":179,"props":380,"children":381},{"style":355},[382],{"type":37,"value":358},{"type":32,"tag":179,"props":384,"children":385},{"class":181,"line":256},[386],{"type":32,"tag":179,"props":387,"children":388},{"style":355},[389],{"type":37,"value":390},"  --unicodes=U+0020-007F,U+00A0-00FF\n",{"type":32,"tag":33,"props":392,"children":393},{},[394,396,402],{"type":37,"value":395},"Финальный размер: 168 KB → 52 KB. Эффект на LCP: ",{"type":32,"tag":397,"props":398,"children":399},"strong",{},[400],{"type":37,"value":401},"10.2s → 8.1s",{"type":37,"value":403}," (экономия 2.1s).",{"type":32,"tag":33,"props":405,"children":406},{},[407],{"type":37,"value":408},"Компромисс: время build +18s, размер бандла +52 KB. Приемлемо — задержка пользователя > время разработчика.",{"type":32,"tag":40,"props":410,"children":412},{"id":411},"ленивая-гидрация-освобождаем-main-thread",[413],{"type":37,"value":414},"Ленивая гидрация: Освобождаем main thread",{"type":32,"tag":33,"props":416,"children":417},{},[418],{"type":37,"value":419},"В Nuxt 3 гидрация по умолчанию eager — все компоненты становятся interactive при монтировании. В hero section четыре компонента:",{"type":32,"tag":421,"props":422,"children":423},"ul",{},[424,436,447,458],{"type":32,"tag":425,"props":426,"children":427},"li",{},[428,434],{"type":32,"tag":160,"props":429,"children":431},{"className":430},[],[432],{"type":37,"value":433},"HeroHeadline.vue",{"type":37,"value":435}," (H1 + подзаголовок)",{"type":32,"tag":425,"props":437,"children":438},{},[439,445],{"type":32,"tag":160,"props":440,"children":442},{"className":441},[],[443],{"type":37,"value":444},"HeroImage.vue",{"type":37,"value":446}," (адаптивное изображение + ленивая загрузка)",{"type":32,"tag":425,"props":448,"children":449},{},[450,456],{"type":32,"tag":160,"props":451,"children":453},{"className":452},[],[454],{"type":37,"value":455},"HeroButton.vue",{"type":37,"value":457}," (CTA с трекингом)",{"type":32,"tag":425,"props":459,"children":460},{},[461,467],{"type":32,"tag":160,"props":462,"children":464},{"className":463},[],[465],{"type":37,"value":466},"HeroStats.vue",{"type":37,"value":468}," (три числовых показателя с анимацией)",{"type":32,"tag":33,"props":470,"children":471},{},[472,474,480],{"type":37,"value":473},"При гидрации всех четырех main thread блокируется 2.4s. Но пользователь в первые 800ms видит только заголовок + изображение. С пакетом ",{"type":32,"tag":160,"props":475,"children":477},{"className":476},[],[478],{"type":37,"value":479},"nuxt-lazy-hydrate",{"type":37,"value":481}," делаем selective hydration:",{"type":32,"tag":169,"props":483,"children":485},{"className":171,"code":484,"language":173,"meta":16,"style":16},"npm install nuxt-lazy-hydrate\n",[486],{"type":32,"tag":160,"props":487,"children":488},{"__ignoreMap":16},[489],{"type":32,"tag":179,"props":490,"children":491},{"class":181,"line":182},[492,496,500],{"type":32,"tag":179,"props":493,"children":494},{"style":186},[495],{"type":37,"value":189},{"type":32,"tag":179,"props":497,"children":498},{"style":192},[499],{"type":37,"value":195},{"type":32,"tag":179,"props":501,"children":502},{"style":192},[503],{"type":37,"value":504}," nuxt-lazy-hydrate\n",{"type":32,"tag":169,"props":506,"children":510},{"className":507,"code":508,"language":509,"meta":16,"style":16},"language-vue shiki shiki-themes github-dark","\u003C!-- pages\u002Findex.vue -->\n\u003Ctemplate>\n  \u003CLazyHydrate when-idle>\n    \u003CHeroStats \u002F>\n  \u003C\u002FLazyHydrate>\n  \n  \u003CLazyHydrate when-visible>\n    \u003CHeroButton @click=\"trackCTA\" \u002F>\n  \u003C\u002FLazyHydrate>\n\n  \u003CHeroHeadline \u002F> \u003C!-- eager, критичный контент -->\n  \u003CHeroImage \u002F>    \u003C!-- eager, LCP элемент -->\n\u003C\u002Ftemplate>\n","vue",[511],{"type":32,"tag":160,"props":512,"children":513},{"__ignoreMap":16},[514,522,541,563,581,597,605,625,656,671,681,704,727],{"type":32,"tag":179,"props":515,"children":516},{"class":181,"line":182},[517],{"type":32,"tag":179,"props":518,"children":519},{"style":215},[520],{"type":37,"value":521},"\u003C!-- pages\u002Findex.vue -->\n",{"type":32,"tag":179,"props":523,"children":524},{"class":181,"line":221},[525,530,536],{"type":32,"tag":179,"props":526,"children":527},{"style":241},[528],{"type":37,"value":529},"\u003C",{"type":32,"tag":179,"props":531,"children":533},{"style":532},"--shiki-default:#85E89D",[534],{"type":37,"value":535},"template",{"type":32,"tag":179,"props":537,"children":538},{"style":241},[539],{"type":37,"value":540},">\n",{"type":32,"tag":179,"props":542,"children":543},{"class":181,"line":247},[544,549,554,559],{"type":32,"tag":179,"props":545,"children":546},{"style":241},[547],{"type":37,"value":548},"  \u003C",{"type":32,"tag":179,"props":550,"children":551},{"style":532},[552],{"type":37,"value":553},"LazyHydrate",{"type":32,"tag":179,"props":555,"children":556},{"style":186},[557],{"type":37,"value":558}," when-idle",{"type":32,"tag":179,"props":560,"children":561},{"style":241},[562],{"type":37,"value":540},{"type":32,"tag":179,"props":564,"children":565},{"class":181,"line":256},[566,571,576],{"type":32,"tag":179,"props":567,"children":568},{"style":241},[569],{"type":37,"value":570},"    \u003C",{"type":32,"tag":179,"props":572,"children":573},{"style":532},[574],{"type":37,"value":575},"HeroStats",{"type":32,"tag":179,"props":577,"children":578},{"style":241},[579],{"type":37,"value":580}," \u002F>\n",{"type":32,"tag":179,"props":582,"children":583},{"class":181,"line":270},[584,589,593],{"type":32,"tag":179,"props":585,"children":586},{"style":241},[587],{"type":37,"value":588},"  \u003C\u002F",{"type":32,"tag":179,"props":590,"children":591},{"style":532},[592],{"type":37,"value":553},{"type":32,"tag":179,"props":594,"children":595},{"style":241},[596],{"type":37,"value":540},{"type":32,"tag":179,"props":598,"children":599},{"class":181,"line":283},[600],{"type":32,"tag":179,"props":601,"children":602},{"style":241},[603],{"type":37,"value":604},"  \n",{"type":32,"tag":179,"props":606,"children":607},{"class":181,"line":296},[608,612,616,621],{"type":32,"tag":179,"props":609,"children":610},{"style":241},[611],{"type":37,"value":548},{"type":32,"tag":179,"props":613,"children":614},{"style":532},[615],{"type":37,"value":553},{"type":32,"tag":179,"props":617,"children":618},{"style":186},[619],{"type":37,"value":620}," when-visible",{"type":32,"tag":179,"props":622,"children":623},{"style":241},[624],{"type":37,"value":540},{"type":32,"tag":179,"props":626,"children":627},{"class":181,"line":26},[628,632,637,642,647,652],{"type":32,"tag":179,"props":629,"children":630},{"style":241},[631],{"type":37,"value":570},{"type":32,"tag":179,"props":633,"children":634},{"style":532},[635],{"type":37,"value":636},"HeroButton",{"type":32,"tag":179,"props":638,"children":639},{"style":186},[640],{"type":37,"value":641}," @click",{"type":32,"tag":179,"props":643,"children":644},{"style":241},[645],{"type":37,"value":646},"=",{"type":32,"tag":179,"props":648,"children":649},{"style":192},[650],{"type":37,"value":651},"\"trackCTA\"",{"type":32,"tag":179,"props":653,"children":654},{"style":241},[655],{"type":37,"value":580},{"type":32,"tag":179,"props":657,"children":658},{"class":181,"line":313},[659,663,667],{"type":32,"tag":179,"props":660,"children":661},{"style":241},[662],{"type":37,"value":588},{"type":32,"tag":179,"props":664,"children":665},{"style":532},[666],{"type":37,"value":553},{"type":32,"tag":179,"props":668,"children":669},{"style":241},[670],{"type":37,"value":540},{"type":32,"tag":179,"props":672,"children":674},{"class":181,"line":673},10,[675],{"type":32,"tag":179,"props":676,"children":678},{"emptyLinePlaceholder":677},true,[679],{"type":37,"value":680},"\n",{"type":32,"tag":179,"props":682,"children":684},{"class":181,"line":683},11,[685,689,694,699],{"type":32,"tag":179,"props":686,"children":687},{"style":241},[688],{"type":37,"value":548},{"type":32,"tag":179,"props":690,"children":691},{"style":532},[692],{"type":37,"value":693},"HeroHeadline",{"type":32,"tag":179,"props":695,"children":696},{"style":241},[697],{"type":37,"value":698}," \u002F> ",{"type":32,"tag":179,"props":700,"children":701},{"style":215},[702],{"type":37,"value":703},"\u003C!-- eager, критичный контент -->\n",{"type":32,"tag":179,"props":705,"children":707},{"class":181,"line":706},12,[708,712,717,722],{"type":32,"tag":179,"props":709,"children":710},{"style":241},[711],{"type":37,"value":548},{"type":32,"tag":179,"props":713,"children":714},{"style":532},[715],{"type":37,"value":716},"HeroImage",{"type":32,"tag":179,"props":718,"children":719},{"style":241},[720],{"type":37,"value":721}," \u002F>    ",{"type":32,"tag":179,"props":723,"children":724},{"style":215},[725],{"type":37,"value":726},"\u003C!-- eager, LCP элемент -->\n",{"type":32,"tag":179,"props":728,"children":730},{"class":181,"line":729},13,[731,736,740],{"type":32,"tag":179,"props":732,"children":733},{"style":241},[734],{"type":37,"value":735},"\u003C\u002F",{"type":32,"tag":179,"props":737,"children":738},{"style":532},[739],{"type":37,"value":535},{"type":32,"tag":179,"props":741,"children":742},{"style":241},[743],{"type":37,"value":540},{"type":32,"tag":33,"props":745,"children":746},{},[747,753,755,761],{"type":32,"tag":160,"props":748,"children":750},{"className":749},[],[751],{"type":37,"value":752},"when-idle",{"type":37,"value":754},": requestIdleCallback, гидрирует когда браузер свободен. ",{"type":32,"tag":160,"props":756,"children":758},{"className":757},[],[759],{"type":37,"value":760},"when-visible",{"type":37,"value":762},": IntersectionObserver, гидрирует при входе в viewport.",{"type":32,"tag":33,"props":764,"children":765},{},[766,768,773],{"type":37,"value":767},"Результат: TBT 2190ms → 680ms. Косвенный эффект на LCP: ",{"type":32,"tag":397,"props":769,"children":770},{},[771],{"type":37,"value":772},"8.1s → 5.4s",{"type":37,"value":774}," (освобожденный main thread ускоряет весь конвейер рендера).",{"type":32,"tag":33,"props":776,"children":777},{},[778],{"type":37,"value":779},"Компромисс: первое взаимодействие с CTA может иметь задержку 120ms (если гидрация еще не завершена). В A\u002FB тесте влияние на bounce %0.2 — приемлемо.",{"type":32,"tag":40,"props":781,"children":783},{"id":782},"content-visibility-css-против-сдвига-макета",[784],{"type":37,"value":785},"content-visibility: CSS против сдвига макета",{"type":32,"tag":33,"props":787,"children":788},{},[789,791,797],{"type":37,"value":790},"Ниже hero section еще 6 компонентов (слайдер отзывов, сетка фич, аккордеон FAQ). Они ниже сгиба, но в DOM, и браузер считает их layout. CSS ",{"type":32,"tag":160,"props":792,"children":794},{"className":793},[],[795],{"type":37,"value":796},"content-visibility: auto",{"type":37,"value":798}," откладывает рендер:",{"type":32,"tag":169,"props":800,"children":804},{"className":801,"code":802,"language":803,"meta":16,"style":16},"language-css shiki shiki-themes github-dark",".below-fold-section {\n  content-visibility: auto;\n  contain-intrinsic-size: 0 500px; \u002F* предполагаемая высота, для CLS *\u002F\n}\n","css",[805],{"type":32,"tag":160,"props":806,"children":807},{"__ignoreMap":16},[808,821,844,881],{"type":32,"tag":179,"props":809,"children":810},{"class":181,"line":182},[811,816],{"type":32,"tag":179,"props":812,"children":813},{"style":186},[814],{"type":37,"value":815},".below-fold-section",{"type":32,"tag":179,"props":817,"children":818},{"style":241},[819],{"type":37,"value":820}," {\n",{"type":32,"tag":179,"props":822,"children":823},{"class":181,"line":221},[824,829,834,839],{"type":32,"tag":179,"props":825,"children":826},{"style":355},[827],{"type":37,"value":828},"  content-visibility",{"type":32,"tag":179,"props":830,"children":831},{"style":241},[832],{"type":37,"value":833},": ",{"type":32,"tag":179,"props":835,"children":836},{"style":355},[837],{"type":37,"value":838},"auto",{"type":32,"tag":179,"props":840,"children":841},{"style":241},[842],{"type":37,"value":843},";\n",{"type":32,"tag":179,"props":845,"children":846},{"class":181,"line":247},[847,852,856,861,866,871,876],{"type":32,"tag":179,"props":848,"children":849},{"style":355},[850],{"type":37,"value":851},"  contain-intrinsic-size",{"type":32,"tag":179,"props":853,"children":854},{"style":241},[855],{"type":37,"value":833},{"type":32,"tag":179,"props":857,"children":858},{"style":355},[859],{"type":37,"value":860},"0",{"type":32,"tag":179,"props":862,"children":863},{"style":355},[864],{"type":37,"value":865}," 500",{"type":32,"tag":179,"props":867,"children":868},{"style":225},[869],{"type":37,"value":870},"px",{"type":32,"tag":179,"props":872,"children":873},{"style":241},[874],{"type":37,"value":875},"; ",{"type":32,"tag":179,"props":877,"children":878},{"style":215},[879],{"type":37,"value":880},"\u002F* предполагаемая высота, для CLS *\u002F\n",{"type":32,"tag":179,"props":882,"children":883},{"class":181,"line":256},[884],{"type":32,"tag":179,"props":885,"children":886},{"style":241},[887],{"type":37,"value":888},"}\n",{"type":32,"tag":33,"props":890,"children":891},{},[892,897,899,905],{"type":32,"tag":160,"props":893,"children":895},{"className":894},[],[896],{"type":37,"value":796},{"type":37,"value":898},": браузер не рендирует элементы вне viewport. ",{"type":32,"tag":160,"props":900,"children":902},{"className":901},[],[903],{"type":37,"value":904},"contain-intrinsic-size",{"type":37,"value":906},": задает предполагаемый размер, чтобы позиция скролла оставалась корректной (иначе CLS скачет).",{"type":32,"tag":33,"props":908,"children":909},{},[910],{"type":37,"value":911},"На уровне компонентов через directive:",{"type":32,"tag":169,"props":913,"children":915},{"className":203,"code":914,"language":205,"meta":16,"style":16},"\u002F\u002F plugins\u002Fcontent-visibility.ts\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.directive('lazy-render', {\n    mounted(el) {\n      el.style.contentVisibility = 'auto'\n      el.style.containIntrinsicSize = '0 500px'\n    }\n  })\n})\n",[916],{"type":32,"tag":160,"props":917,"children":918},{"__ignoreMap":16},[919,927,968,996,1018,1035,1052,1060,1068],{"type":32,"tag":179,"props":920,"children":921},{"class":181,"line":182},[922],{"type":32,"tag":179,"props":923,"children":924},{"style":215},[925],{"type":37,"value":926},"\u002F\u002F plugins\u002Fcontent-visibility.ts\n",{"type":32,"tag":179,"props":928,"children":929},{"class":181,"line":221},[930,934,938,943,948,954,959,964],{"type":32,"tag":179,"props":931,"children":932},{"style":225},[933],{"type":37,"value":228},{"type":32,"tag":179,"props":935,"children":936},{"style":225},[937],{"type":37,"value":233},{"type":32,"tag":179,"props":939,"children":940},{"style":186},[941],{"type":37,"value":942}," defineNuxtPlugin",{"type":32,"tag":179,"props":944,"children":945},{"style":241},[946],{"type":37,"value":947},"((",{"type":32,"tag":179,"props":949,"children":951},{"style":950},"--shiki-default:#FFAB70",[952],{"type":37,"value":953},"nuxtApp",{"type":32,"tag":179,"props":955,"children":956},{"style":241},[957],{"type":37,"value":958},") ",{"type":32,"tag":179,"props":960,"children":961},{"style":225},[962],{"type":37,"value":963},"=>",{"type":32,"tag":179,"props":965,"children":966},{"style":241},[967],{"type":37,"value":820},{"type":32,"tag":179,"props":969,"children":970},{"class":181,"line":247},[971,976,981,986,991],{"type":32,"tag":179,"props":972,"children":973},{"style":241},[974],{"type":37,"value":975},"  nuxtApp.vueApp.",{"type":32,"tag":179,"props":977,"children":978},{"style":186},[979],{"type":37,"value":980},"directive",{"type":32,"tag":179,"props":982,"children":983},{"style":241},[984],{"type":37,"value":985},"(",{"type":32,"tag":179,"props":987,"children":988},{"style":192},[989],{"type":37,"value":990},"'lazy-render'",{"type":32,"tag":179,"props":992,"children":993},{"style":241},[994],{"type":37,"value":995},", {\n",{"type":32,"tag":179,"props":997,"children":998},{"class":181,"line":256},[999,1004,1008,1013],{"type":32,"tag":179,"props":1000,"children":1001},{"style":186},[1002],{"type":37,"value":1003},"    mounted",{"type":32,"tag":179,"props":1005,"children":1006},{"style":241},[1007],{"type":37,"value":985},{"type":32,"tag":179,"props":1009,"children":1010},{"style":950},[1011],{"type":37,"value":1012},"el",{"type":32,"tag":179,"props":1014,"children":1015},{"style":241},[1016],{"type":37,"value":1017},") {\n",{"type":32,"tag":179,"props":1019,"children":1020},{"class":181,"line":270},[1021,1026,1030],{"type":32,"tag":179,"props":1022,"children":1023},{"style":241},[1024],{"type":37,"value":1025},"      el.style.contentVisibility ",{"type":32,"tag":179,"props":1027,"children":1028},{"style":225},[1029],{"type":37,"value":646},{"type":32,"tag":179,"props":1031,"children":1032},{"style":192},[1033],{"type":37,"value":1034}," 'auto'\n",{"type":32,"tag":179,"props":1036,"children":1037},{"class":181,"line":283},[1038,1043,1047],{"type":32,"tag":179,"props":1039,"children":1040},{"style":241},[1041],{"type":37,"value":1042},"      el.style.containIntrinsicSize ",{"type":32,"tag":179,"props":1044,"children":1045},{"style":225},[1046],{"type":37,"value":646},{"type":32,"tag":179,"props":1048,"children":1049},{"style":192},[1050],{"type":37,"value":1051}," '0 500px'\n",{"type":32,"tag":179,"props":1053,"children":1054},{"class":181,"line":296},[1055],{"type":32,"tag":179,"props":1056,"children":1057},{"style":241},[1058],{"type":37,"value":1059},"    }\n",{"type":32,"tag":179,"props":1061,"children":1062},{"class":181,"line":26},[1063],{"type":32,"tag":179,"props":1064,"children":1065},{"style":241},[1066],{"type":37,"value":1067},"  })\n",{"type":32,"tag":179,"props":1069,"children":1070},{"class":181,"line":313},[1071],{"type":32,"tag":179,"props":1072,"children":1073},{"style":241},[1074],{"type":37,"value":319},{"type":32,"tag":169,"props":1076,"children":1078},{"className":507,"code":1077,"language":509,"meta":16,"style":16},"\u003Ctemplate>\n  \u003Csection v-lazy-render class=\"testimonials\">\n    \u003C!-- ... -->\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[1079],{"type":32,"tag":160,"props":1080,"children":1081},{"__ignoreMap":16},[1082,1097,1132,1140,1155],{"type":32,"tag":179,"props":1083,"children":1084},{"class":181,"line":182},[1085,1089,1093],{"type":32,"tag":179,"props":1086,"children":1087},{"style":241},[1088],{"type":37,"value":529},{"type":32,"tag":179,"props":1090,"children":1091},{"style":532},[1092],{"type":37,"value":535},{"type":32,"tag":179,"props":1094,"children":1095},{"style":241},[1096],{"type":37,"value":540},{"type":32,"tag":179,"props":1098,"children":1099},{"class":181,"line":221},[1100,1104,1109,1114,1119,1123,1128],{"type":32,"tag":179,"props":1101,"children":1102},{"style":241},[1103],{"type":37,"value":548},{"type":32,"tag":179,"props":1105,"children":1106},{"style":532},[1107],{"type":37,"value":1108},"section",{"type":32,"tag":179,"props":1110,"children":1111},{"style":186},[1112],{"type":37,"value":1113}," v-lazy-render",{"type":32,"tag":179,"props":1115,"children":1116},{"style":186},[1117],{"type":37,"value":1118}," class",{"type":32,"tag":179,"props":1120,"children":1121},{"style":241},[1122],{"type":37,"value":646},{"type":32,"tag":179,"props":1124,"children":1125},{"style":192},[1126],{"type":37,"value":1127},"\"testimonials\"",{"type":32,"tag":179,"props":1129,"children":1130},{"style":241},[1131],{"type":37,"value":540},{"type":32,"tag":179,"props":1133,"children":1134},{"class":181,"line":247},[1135],{"type":32,"tag":179,"props":1136,"children":1137},{"style":215},[1138],{"type":37,"value":1139},"    \u003C!-- ... -->\n",{"type":32,"tag":179,"props":1141,"children":1142},{"class":181,"line":256},[1143,1147,1151],{"type":32,"tag":179,"props":1144,"children":1145},{"style":241},[1146],{"type":37,"value":588},{"type":32,"tag":179,"props":1148,"children":1149},{"style":532},[1150],{"type":37,"value":1108},{"type":32,"tag":179,"props":1152,"children":1153},{"style":241},[1154],{"type":37,"value":540},{"type":32,"tag":179,"props":1156,"children":1157},{"class":181,"line":270},[1158,1162,1166],{"type":32,"tag":179,"props":1159,"children":1160},{"style":241},[1161],{"type":37,"value":735},{"type":32,"tag":179,"props":1163,"children":1164},{"style":532},[1165],{"type":37,"value":535},{"type":32,"tag":179,"props":1167,"children":1168},{"style":241},[1169],{"type":37,"value":540},{"type":32,"tag":33,"props":1171,"children":1172},{},[1173,1175,1180],{"type":37,"value":1174},"CLS: 0.18 → 0.04. Косвенный эффект на LCP: ",{"type":32,"tag":397,"props":1176,"children":1177},{},[1178],{"type":37,"value":1179},"5.4s → 3.8s",{"type":37,"value":1181}," (меньше layout thrash, main thread освобождается раньше).",{"type":32,"tag":33,"props":1183,"children":1184},{},[1185,1187,1192],{"type":37,"value":1186},"Компромисс: если ",{"type":32,"tag":160,"props":1188,"children":1190},{"className":1189},[],[1191],{"type":37,"value":904},{"type":37,"value":1193}," предсказан неправильно, возможен jump при скролле. Мы измерили реальную высоту каждой секции и hardcode'или её.",{"type":32,"tag":40,"props":1195,"children":1197},{"id":1196},"edge-кеширование-убираем-latency-originа",[1198],{"type":37,"value":1199},"Edge кеширование: Убираем latency origin'а",{"type":32,"tag":33,"props":1201,"children":1202},{},[1203],{"type":37,"value":1204},"На Cloudflare Pages SSR запускается на каждый запрос. Average origin latency: 420ms (Европейский edge → origin в США). Стратегия кеширования:",{"type":32,"tag":169,"props":1206,"children":1208},{"className":203,"code":1207,"language":205,"meta":16,"style":16},"\u002F\u002F server\u002Fmiddleware\u002Fcache.ts\nexport default defineEventHandler((event) => {\n  const url = event.node.req.url\n  if (url === '\u002F' || url.startsWith('\u002Fkategori\u002F')) {\n    event.node.res.setHeader('Cache-Control', 's-maxage=300, stale-while-revalidate=600')\n  }\n})\n",[1209],{"type":32,"tag":160,"props":1210,"children":1211},{"__ignoreMap":16},[1212,1220,1257,1280,1332,1369,1377],{"type":32,"tag":179,"props":1213,"children":1214},{"class":181,"line":182},[1215],{"type":32,"tag":179,"props":1216,"children":1217},{"style":215},[1218],{"type":37,"value":1219},"\u002F\u002F server\u002Fmiddleware\u002Fcache.ts\n",{"type":32,"tag":179,"props":1221,"children":1222},{"class":181,"line":221},[1223,1227,1231,1236,1240,1245,1249,1253],{"type":32,"tag":179,"props":1224,"children":1225},{"style":225},[1226],{"type":37,"value":228},{"type":32,"tag":179,"props":1228,"children":1229},{"style":225},[1230],{"type":37,"value":233},{"type":32,"tag":179,"props":1232,"children":1233},{"style":186},[1234],{"type":37,"value":1235}," defineEventHandler",{"type":32,"tag":179,"props":1237,"children":1238},{"style":241},[1239],{"type":37,"value":947},{"type":32,"tag":179,"props":1241,"children":1242},{"style":950},[1243],{"type":37,"value":1244},"event",{"type":32,"tag":179,"props":1246,"children":1247},{"style":241},[1248],{"type":37,"value":958},{"type":32,"tag":179,"props":1250,"children":1251},{"style":225},[1252],{"type":37,"value":963},{"type":32,"tag":179,"props":1254,"children":1255},{"style":241},[1256],{"type":37,"value":820},{"type":32,"tag":179,"props":1258,"children":1259},{"class":181,"line":247},[1260,1265,1270,1275],{"type":32,"tag":179,"props":1261,"children":1262},{"style":225},[1263],{"type":37,"value":1264},"  const",{"type":32,"tag":179,"props":1266,"children":1267},{"style":355},[1268],{"type":37,"value":1269}," url",{"type":32,"tag":179,"props":1271,"children":1272},{"style":225},[1273],{"type":37,"value":1274}," =",{"type":32,"tag":179,"props":1276,"children":1277},{"style":241},[1278],{"type":37,"value":1279}," event.node.req.url\n",{"type":32,"tag":179,"props":1281,"children":1282},{"class":181,"line":256},[1283,1288,1293,1298,1303,1308,1313,1318,1322,1327],{"type":32,"tag":179,"props":1284,"children":1285},{"style":225},[1286],{"type":37,"value":1287},"  if",{"type":32,"tag":179,"props":1289,"children":1290},{"style":241},[1291],{"type":37,"value":1292}," (url ",{"type":32,"tag":179,"props":1294,"children":1295},{"style":225},[1296],{"type":37,"value":1297},"===",{"type":32,"tag":179,"props":1299,"children":1300},{"style":192},[1301],{"type":37,"value":1302}," '\u002F'",{"type":32,"tag":179,"props":1304,"children":1305},{"style":225},[1306],{"type":37,"value":1307}," ||",{"type":32,"tag":179,"props":1309,"children":1310},{"style":241},[1311],{"type":37,"value":1312}," url.",{"type":32,"tag":179,"props":1314,"children":1315},{"style":186},[1316],{"type":37,"value":1317},"startsWith",{"type":32,"tag":179,"props":1319,"children":1320},{"style":241},[1321],{"type":37,"value":985},{"type":32,"tag":179,"props":1323,"children":1324},{"style":192},[1325],{"type":37,"value":1326},"'\u002Fkategori\u002F'",{"type":32,"tag":179,"props":1328,"children":1329},{"style":241},[1330],{"type":37,"value":1331},")) {\n",{"type":32,"tag":179,"props":1333,"children":1334},{"class":181,"line":270},[1335,1340,1345,1349,1354,1359,1364],{"type":32,"tag":179,"props":1336,"children":1337},{"style":241},[1338],{"type":37,"value":1339},"    event.node.res.",{"type":32,"tag":179,"props":1341,"children":1342},{"style":186},[1343],{"type":37,"value":1344},"setHeader",{"type":32,"tag":179,"props":1346,"children":1347},{"style":241},[1348],{"type":37,"value":985},{"type":32,"tag":179,"props":1350,"children":1351},{"style":192},[1352],{"type":37,"value":1353},"'Cache-Control'",{"type":32,"tag":179,"props":1355,"children":1356},{"style":241},[1357],{"type":37,"value":1358},", ",{"type":32,"tag":179,"props":1360,"children":1361},{"style":192},[1362],{"type":37,"value":1363},"'s-maxage=300, stale-while-revalidate=600'",{"type":32,"tag":179,"props":1365,"children":1366},{"style":241},[1367],{"type":37,"value":1368},")\n",{"type":32,"tag":179,"props":1370,"children":1371},{"class":181,"line":283},[1372],{"type":32,"tag":179,"props":1373,"children":1374},{"style":241},[1375],{"type":37,"value":1376},"  }\n",{"type":32,"tag":179,"props":1378,"children":1379},{"class":181,"line":296},[1380],{"type":32,"tag":179,"props":1381,"children":1382},{"style":241},[1383],{"type":37,"value":319},{"type":32,"tag":33,"props":1385,"children":1386},{},[1387,1393,1395,1401],{"type":32,"tag":160,"props":1388,"children":1390},{"className":1389},[],[1391],{"type":37,"value":1392},"s-maxage=300",{"type":37,"value":1394},": на edge кешируется 5 минут. ",{"type":32,"tag":160,"props":1396,"children":1398},{"className":1397},[],[1399],{"type":37,"value":1400},"stale-while-revalidate=600",{"type":37,"value":1402},": после истечения 10 минут старая версия серватся, а в фоне идет переvalidation.",{"type":32,"tag":33,"props":1404,"children":1405},{},[1406],{"type":37,"value":1407},"Дополнительная логика в Cloudflare Workers:",{"type":32,"tag":169,"props":1409,"children":1413},{"className":1410,"code":1411,"language":1412,"meta":16,"style":16},"language-javascript shiki shiki-themes github-dark","\u002F\u002F functions\u002F[[path]].js\nexport async function onRequest(context) {\n  const cache = caches.default\n  const cacheKey = new Request(context.request.url, context.request)\n  let response = await cache.match(cacheKey)\n\n  if (!response) {\n    response = await context.next()\n    context.waitUntil(cache.put(cacheKey, response.clone()))\n  }\n\n  return response\n}\n","javascript",[1414],{"type":32,"tag":160,"props":1415,"children":1416},{"__ignoreMap":16},[1417,1425,1460,1481,1512,1549,1556,1578,1609,1647,1654,1661,1674],{"type":32,"tag":179,"props":1418,"children":1419},{"class":181,"line":182},[1420],{"type":32,"tag":179,"props":1421,"children":1422},{"style":215},[1423],{"type":37,"value":1424},"\u002F\u002F functions\u002F[[path]].js\n",{"type":32,"tag":179,"props":1426,"children":1427},{"class":181,"line":221},[1428,1432,1437,1442,1447,1451,1456],{"type":32,"tag":179,"props":1429,"children":1430},{"style":225},[1431],{"type":37,"value":228},{"type":32,"tag":179,"props":1433,"children":1434},{"style":225},[1435],{"type":37,"value":1436}," async",{"type":32,"tag":179,"props":1438,"children":1439},{"style":225},[1440],{"type":37,"value":1441}," function",{"type":32,"tag":179,"props":1443,"children":1444},{"style":186},[1445],{"type":37,"value":1446}," onRequest",{"type":32,"tag":179,"props":1448,"children":1449},{"style":241},[1450],{"type":37,"value":985},{"type":32,"tag":179,"props":1452,"children":1453},{"style":950},[1454],{"type":37,"value":1455},"context",{"type":32,"tag":179,"props":1457,"children":1458},{"style":241},[1459],{"type":37,"value":1017},{"type":32,"tag":179,"props":1461,"children":1462},{"class":181,"line":247},[1463,1467,1472,1476],{"type":32,"tag":179,"props":1464,"children":1465},{"style":225},[1466],{"type":37,"value":1264},{"type":32,"tag":179,"props":1468,"children":1469},{"style":355},[1470],{"type":37,"value":1471}," cache",{"type":32,"tag":179,"props":1473,"children":1474},{"style":225},[1475],{"type":37,"value":1274},{"type":32,"tag":179,"props":1477,"children":1478},{"style":241},[1479],{"type":37,"value":1480}," caches.default\n",{"type":32,"tag":179,"props":1482,"children":1483},{"class":181,"line":256},[1484,1488,1493,1497,1502,1507],{"type":32,"tag":179,"props":1485,"children":1486},{"style":225},[1487],{"type":37,"value":1264},{"type":32,"tag":179,"props":1489,"children":1490},{"style":355},[1491],{"type":37,"value":1492}," cacheKey",{"type":32,"tag":179,"props":1494,"children":1495},{"style":225},[1496],{"type":37,"value":1274},{"type":32,"tag":179,"props":1498,"children":1499},{"style":225},[1500],{"type":37,"value":1501}," new",{"type":32,"tag":179,"props":1503,"children":1504},{"style":186},[1505],{"type":37,"value":1506}," Request",{"type":32,"tag":179,"props":1508,"children":1509},{"style":241},[1510],{"type":37,"value":1511},"(context.request.url, context.request)\n",{"type":32,"tag":179,"props":1513,"children":1514},{"class":181,"line":270},[1515,1520,1525,1529,1534,1539,1544],{"type":32,"tag":179,"props":1516,"children":1517},{"style":225},[1518],{"type":37,"value":1519},"  let",{"type":32,"tag":179,"props":1521,"children":1522},{"style":241},[1523],{"type":37,"value":1524}," response ",{"type":32,"tag":179,"props":1526,"children":1527},{"style":225},[1528],{"type":37,"value":646},{"type":32,"tag":179,"props":1530,"children":1531},{"style":225},[1532],{"type":37,"value":1533}," await",{"type":32,"tag":179,"props":1535,"children":1536},{"style":241},[1537],{"type":37,"value":1538}," cache.",{"type":32,"tag":179,"props":1540,"children":1541},{"style":186},[1542],{"type":37,"value":1543},"match",{"type":32,"tag":179,"props":1545,"children":1546},{"style":241},[1547],{"type":37,"value":1548},"(cacheKey)\n",{"type":32,"tag":179,"props":1550,"children":1551},{"class":181,"line":283},[1552],{"type":32,"tag":179,"props":1553,"children":1554},{"emptyLinePlaceholder":677},[1555],{"type":37,"value":680},{"type":32,"tag":179,"props":1557,"children":1558},{"class":181,"line":296},[1559,1563,1568,1573],{"type":32,"tag":179,"props":1560,"children":1561},{"style":225},[1562],{"type":37,"value":1287},{"type":32,"tag":179,"props":1564,"children":1565},{"style":241},[1566],{"type":37,"value":1567}," (",{"type":32,"tag":179,"props":1569,"children":1570},{"style":225},[1571],{"type":37,"value":1572},"!",{"type":32,"tag":179,"props":1574,"children":1575},{"style":241},[1576],{"type":37,"value":1577},"response) {\n",{"type":32,"tag":179,"props":1579,"children":1580},{"class":181,"line":26},[1581,1586,1590,1594,1599,1604],{"type":32,"tag":179,"props":1582,"children":1583},{"style":241},[1584],{"type":37,"value":1585},"    response ",{"type":32,"tag":179,"props":1587,"children":1588},{"style":225},[1589],{"type":37,"value":646},{"type":32,"tag":179,"props":1591,"children":1592},{"style":225},[1593],{"type":37,"value":1533},{"type":32,"tag":179,"props":1595,"children":1596},{"style":241},[1597],{"type":37,"value":1598}," context.",{"type":32,"tag":179,"props":1600,"children":1601},{"style":186},[1602],{"type":37,"value":1603},"next",{"type":32,"tag":179,"props":1605,"children":1606},{"style":241},[1607],{"type":37,"value":1608},"()\n",{"type":32,"tag":179,"props":1610,"children":1611},{"class":181,"line":313},[1612,1617,1622,1627,1632,1637,1642],{"type":32,"tag":179,"props":1613,"children":1614},{"style":241},[1615],{"type":37,"value":1616},"    context.",{"type":32,"tag":179,"props":1618,"children":1619},{"style":186},[1620],{"type":37,"value":1621},"waitUntil",{"type":32,"tag":179,"props":1623,"children":1624},{"style":241},[1625],{"type":37,"value":1626},"(cache.",{"type":32,"tag":179,"props":1628,"children":1629},{"style":186},[1630],{"type":37,"value":1631},"put",{"type":32,"tag":179,"props":1633,"children":1634},{"style":241},[1635],{"type":37,"value":1636},"(cacheKey, response.",{"type":32,"tag":179,"props":1638,"children":1639},{"style":186},[1640],{"type":37,"value":1641},"clone",{"type":32,"tag":179,"props":1643,"children":1644},{"style":241},[1645],{"type":37,"value":1646},"()))\n",{"type":32,"tag":179,"props":1648,"children":1649},{"class":181,"line":673},[1650],{"type":32,"tag":179,"props":1651,"children":1652},{"style":241},[1653],{"type":37,"value":1376},{"type":32,"tag":179,"props":1655,"children":1656},{"class":181,"line":683},[1657],{"type":32,"tag":179,"props":1658,"children":1659},{"emptyLinePlaceholder":677},[1660],{"type":37,"value":680},{"type":32,"tag":179,"props":1662,"children":1663},{"class":181,"line":706},[1664,1669],{"type":32,"tag":179,"props":1665,"children":1666},{"style":225},[1667],{"type":37,"value":1668},"  return",{"type":32,"tag":179,"props":1670,"children":1671},{"style":241},[1672],{"type":37,"value":1673}," response\n",{"type":32,"tag":179,"props":1675,"children":1676},{"class":181,"line":729},[1677],{"type":32,"tag":179,"props":1678,"children":1679},{"style":241},[1680],{"type":37,"value":888},{"type":32,"tag":33,"props":1682,"children":1683},{},[1684,1686,1691],{"type":37,"value":1685},"За три дня hit rate вырос до 89%. Origin запросы упали до 11%. Эффект на LCP: ",{"type":32,"tag":397,"props":1687,"children":1688},{},[1689],{"type":37,"value":1690},"3.8s → 1.9s",{"type":37,"value":1692}," (edge latency 12ms вместо origin 420ms).",{"type":32,"tag":33,"props":1694,"children":1695},{},[1696],{"type":37,"value":1697},"Компромисс: свежий контент отстает на 5 минут. Для e-commerce приемлемо (изменение цены не критично). Остатки товара подтягиваем клиент-сайд запросом в реальном времени.",{"type":32,"tag":40,"props":1699,"children":1701},{"id":1700},"headless-архитектура-и-дизайн-uiux",[1702],{"type":37,"value":1703},"Headless архитектура и дизайн UI\u002FUX",{"type":32,"tag":33,"props":1705,"children":1706},{},[1707,1709,1718,1720,1726],{"type":37,"value":1708},"Эти оптимизации возможны были благодаря гибкости ",{"type":32,"tag":1710,"props":1711,"children":1715},"a",{"href":1712,"rel":1713},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fheadless",[1714],"nofollow",[1716],{"type":37,"value":1717},"headless commerce",{"type":37,"value":1719}," архитектуры — Shopify Storefront API + Nuxt SSR позволили оптимизировать каждый слой независимо. В монолитных системах даже смена шрифта требует переdeployment, мы обновили только ",{"type":32,"tag":160,"props":1721,"children":1723},{"className":1722},[],[1724],{"type":37,"value":1725},"nuxt.config.ts",{"type":37,"value":1727},".",{"type":32,"tag":33,"props":1729,"children":1730},{},[1731,1733,1740],{"type":37,"value":1732},"На фронте ",{"type":32,"tag":1710,"props":1734,"children":1737},{"href":1735,"rel":1736},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fui-ux",[1714],[1738],{"type":37,"value":1739},"UI\u002FUX дизайн",{"type":37,"value":1741}," сыграл роль в выборе LCP элемента — hero изображение vs заголовок. Заголовок выбрали как LCP, так что оптимизация шрифта дала прямой результат.",{"type":32,"tag":40,"props":1743,"children":1745},{"id":1744},"итоговые-числа",[1746],{"type":37,"value":1747},"Итоговые числа",{"type":32,"tag":52,"props":1749,"children":1750},{},[1751,1777],{"type":32,"tag":56,"props":1752,"children":1753},{},[1754],{"type":32,"tag":60,"props":1755,"children":1756},{},[1757,1762,1767,1772],{"type":32,"tag":64,"props":1758,"children":1759},{},[1760],{"type":37,"value":1761},"Метрика",{"type":32,"tag":64,"props":1763,"children":1764},{},[1765],{"type":37,"value":1766},"Начало",{"type":32,"tag":64,"props":1768,"children":1769},{},[1770],{"type":37,"value":1771},"Итог",{"type":32,"tag":64,"props":1773,"children":1774},{},[1775],{"type":37,"value":1776},"Изменение",{"type":32,"tag":80,"props":1778,"children":1779},{},[1780,1803,1826,1849,1872,1894],{"type":32,"tag":60,"props":1781,"children":1782},{},[1783,1788,1793,1798],{"type":32,"tag":87,"props":1784,"children":1785},{},[1786],{"type":37,"value":1787},"LCP",{"type":32,"tag":87,"props":1789,"children":1790},{},[1791],{"type":37,"value":1792},"10.2s",{"type":32,"tag":87,"props":1794,"children":1795},{},[1796],{"type":37,"value":1797},"1.9s",{"type":32,"tag":87,"props":1799,"children":1800},{},[1801],{"type":37,"value":1802},"-81%",{"type":32,"tag":60,"props":1804,"children":1805},{},[1806,1811,1816,1821],{"type":32,"tag":87,"props":1807,"children":1808},{},[1809],{"type":37,"value":1810},"TBT",{"type":32,"tag":87,"props":1812,"children":1813},{},[1814],{"type":37,"value":1815},"2190ms",{"type":32,"tag":87,"props":1817,"children":1818},{},[1819],{"type":37,"value":1820},"220ms",{"type":32,"tag":87,"props":1822,"children":1823},{},[1824],{"type":37,"value":1825},"-90%",{"type":32,"tag":60,"props":1827,"children":1828},{},[1829,1834,1839,1844],{"type":32,"tag":87,"props":1830,"children":1831},{},[1832],{"type":37,"value":1833},"CLS",{"type":32,"tag":87,"props":1835,"children":1836},{},[1837],{"type":37,"value":1838},"0.18",{"type":32,"tag":87,"props":1840,"children":1841},{},[1842],{"type":37,"value":1843},"0.02",{"type":32,"tag":87,"props":1845,"children":1846},{},[1847],{"type":37,"value":1848},"-89%",{"type":32,"tag":60,"props":1850,"children":1851},{},[1852,1857,1862,1867],{"type":32,"tag":87,"props":1853,"children":1854},{},[1855],{"type":37,"value":1856},"FCP",{"type":32,"tag":87,"props":1858,"children":1859},{},[1860],{"type":37,"value":1861},"3.4s",{"type":32,"tag":87,"props":1863,"children":1864},{},[1865],{"type":37,"value":1866},"0.8s",{"type":32,"tag":87,"props":1868,"children":1869},{},[1870],{"type":37,"value":1871},"-76%",{"type":32,"tag":60,"props":1873,"children":1874},{},[1875,1880,1884,1889],{"type":32,"tag":87,"props":1876,"children":1877},{},[1878],{"type":37,"value":1879},"Размер бандла (шрифты)",{"type":32,"tag":87,"props":1881,"children":1882},{},[1883],{"type":37,"value":96},{"type":32,"tag":87,"props":1885,"children":1886},{},[1887],{"type":37,"value":1888},"52 KB",{"type":32,"tag":87,"props":1890,"children":1891},{},[1892],{"type":37,"value":1893},"-63%",{"type":32,"tag":60,"props":1895,"children":1896},{},[1897,1902,1907,1912],{"type":32,"tag":87,"props":1898,"children":1899},{},[1900],{"type":37,"value":1901},"Cache hit rate",{"type":32,"tag":87,"props":1903,"children":1904},{},[1905],{"type":37,"value":1906},"0%",{"type":32,"tag":87,"props":1908,"children":1909},{},[1910],{"type":37,"value":1911},"89%",{"type":32,"tag":87,"props":1913,"children":1914},{},[1915],{"type":37,"value":1916},"—",{"type":32,"tag":33,"props":1918,"children":1919},{},[1920],{"type":37,"value":1921},"PageSpeed Mobile score: 34 → 92. Desktop: 68 → 98.",{"type":32,"tag":33,"props":1923,"children":1924},{},[1925],{"type":37,"value":1926},"Влияние на конверсию (4-недельный A\u002FB тест): baseline 2.1% → optimized 2.8% (+33%). Bounce rate: 58% → 41%.",{"type":32,"tag":40,"props":1928,"children":1930},{"id":1929},"решения-и-компромиссы",[1931],{"type":37,"value":1932},"Решения и компромиссы",{"type":32,"tag":33,"props":1934,"children":1935},{},[1936],{"type":37,"value":1937},"Четыре оптимизации, четыре разных компромисса:",{"type":32,"tag":1939,"props":1940,"children":1941},"ol",{},[1942,1952,1962,1979],{"type":32,"tag":425,"props":1943,"children":1944},{},[1945,1950],{"type":32,"tag":397,"props":1946,"children":1947},{},[1948],{"type":37,"value":1949},"Self-hosted шрифты:",{"type":37,"value":1951}," build time +18s, поддержка (обновление subset'ов). Выигрыш (2.1s LCP) > затраты.",{"type":32,"tag":425,"props":1953,"children":1954},{},[1955,1960],{"type":32,"tag":397,"props":1956,"children":1957},{},[1958],{"type":37,"value":1959},"Ленивая гидрация:",{"type":37,"value":1961}," риск задержки первого взаимодействия 120ms. Влияние на bounce минимально (%0.2), приемлемо.",{"type":32,"tag":425,"props":1963,"children":1964},{},[1965,1970,1972,1977],{"type":32,"tag":397,"props":1966,"children":1967},{},[1968],{"type":37,"value":1969},"content-visibility:",{"type":37,"value":1971}," риск jump при скролле, но ",{"type":32,"tag":160,"props":1973,"children":1975},{"className":1974},[],[1976],{"type":37,"value":904},{"type":37,"value":1978}," держит под контролем. Выигрыш CLS критичен.",{"type":32,"tag":425,"props":1980,"children":1981},{},[1982,1987],{"type":32,"tag":397,"props":1983,"children":1984},{},[1985],{"type":37,"value":1986},"Edge кеширование:",{"type":37,"value":1988}," свежий контент отстает на 5 минут. Для e-commerce приемлемо, стоки live через client-side.",{"type":32,"tag":33,"props":1990,"children":1991},{},[1992],{"type":37,"value":1993},"Бесплатных оптимизаций не бывает. Измеряй, тестируй, принимай компромисс или отклоняй.",{"type":32,"tag":33,"props":1995,"children":1996},{},[1997],{"type":37,"value":1998},"Комбинация Nuxt 3 + Cloudflare Pages — идеальная платформа для перформанса: SSR, edge кеширование, модульная архитектура. Но default config дает LCP 10s+. Четыре шага выше — повторяемый рецепт для любого проекта Nuxt. Числа не врут: self-hosted шрифты + ленивая гидрация + content-visibility + edge кеширование = 81% снижение LCP. Откройте Chrome DevTools, найдите LCP элемент, применяйте recipe выше.",{"type":32,"tag":2000,"props":2001,"children":2002},"style",{},[2003],{"type":37,"value":2004},"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":247,"depth":247,"links":2006},[2007,2008,2009,2010,2011,2012,2013,2014],{"id":42,"depth":221,"text":45},{"id":150,"depth":221,"text":153},{"id":411,"depth":221,"text":414},{"id":782,"depth":221,"text":785},{"id":1196,"depth":221,"text":1199},{"id":1700,"depth":221,"text":1703},{"id":1744,"depth":221,"text":1747},{"id":1929,"depth":221,"text":1932},"markdown","content:ru:tech:nuxt-3-cloudflare-pages-10s-2s-lcp.md","content","ru\u002Ftech\u002Fnuxt-3-cloudflare-pages-10s-2s-lcp.md","ru\u002Ftech\u002Fnuxt-3-cloudflare-pages-10s-2s-lcp","md",1785276307878]