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