[{"data":1,"prerenderedAt":2412},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-verbesserung":13},{"i18nKey":4,"paths":5},"tech-001-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-verbesserung","\u002Fen\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-optimization","\u002Fes\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-2-segundos","\u002Ffr\u002Ftech\u002Fnuxt-3-cloudflare-pages-10s-lcp-vers-2s","\u002Fit\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-ottimizzazione","\u002Fru\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-optimizacija","\u002Ftr\u002Ftech\u002Fnuxt-3-cloudflare-pages-10s-lcpden-2sye",{"_path":6,"_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":2406,"_id":2407,"_source":2408,"_file":2409,"_stem":2410,"_extension":2411},"tech",false,"","Nuxt 3 + Cloudflare Pages: Von 10s LCP auf 2s","Self-gehostete Fonts, Lazy Hydration, content-visibility und Edge-Caching reduzierten Largest Contentful Paint um 80%. Mit Benchmark und Code-Beispielen.","2026-06-16",[21,22,23,24,25],"nuxt-3","cloudflare-pages","web-performance","core-web-vitals","edge-caching",9,"Roibase",{"type":29,"children":30,"toc":2394},"root",[31,48,55,68,101,114,143,155,349,362,367,373,378,399,483,488,832,837,850,857,870,957,970,976,989,1070,1081,1086,1193,1210,1318,1334,1340,1353,1361,1401,1406,1417,1423,1428,1703,1708,1714,1719,2106,2111,2183,2194,2318,2323,2329,2342,2366,2378,2383,2388],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36,39,46],{"type":37,"value":38},"text","Ein Nuxt 3 E-Commerce-Projekt auf Cloudflare Pages zeigte in PageSpeed Insights eine LCP von 10,2s. Google Fonts, clientseitige Hydration, Above-the-Fold-Laden und fehlende CDN-Cache-Header waren klassische Engpässe. Mit Self-Hosting von Font-Subsets, Vue 3 Lazy Hydration API, CSS ",{"type":32,"tag":40,"props":41,"children":43},"code",{"className":42},[],[44],{"type":37,"value":45},"content-visibility",{"type":37,"value":47}," und Cloudflare Edge Cache TTL-Optimierungen reduzierten wir die LCP auf 2,1s. Dieser Artikel dokumentiert vier Maßnahmen mit technischen Details und Benchmark-Ergebnissen.",{"type":32,"tag":49,"props":50,"children":52},"h2",{"id":51},"self-gehostete-font-subsets-900ms-fcp-verbesserung",[53],{"type":37,"value":54},"Self-gehostete Font-Subsets: 900ms FCP-Verbesserung",{"type":32,"tag":33,"props":56,"children":57},{},[58,60,66],{"type":37,"value":59},"Die Google Fonts CSS-Datei war ein Render-Blocking Request von 320ms. Das Herunterladen der Variable Font WOFF2 verzögerte First Contentful Paint auf ~3,8s. Wir installierten das ",{"type":32,"tag":40,"props":61,"children":63},{"className":62},[],[64],{"type":37,"value":65},"@fontsource",{"type":37,"value":67},"-Paket und selektierten nur das lateinische Subset mit den Gewichten 400-700:",{"type":32,"tag":69,"props":70,"children":74},"pre",{"code":71,"language":72,"meta":16,"className":73,"style":16},"npm install @fontsource-variable\u002Finter\n","bash","language-bash shiki shiki-themes github-dark",[75],{"type":32,"tag":40,"props":76,"children":77},{"__ignoreMap":16},[78],{"type":32,"tag":79,"props":80,"children":83},"span",{"class":81,"line":82},"line",1,[84,90,96],{"type":32,"tag":79,"props":85,"children":87},{"style":86},"--shiki-default:#B392F0",[88],{"type":37,"value":89},"npm",{"type":32,"tag":79,"props":91,"children":93},{"style":92},"--shiki-default:#9ECBFF",[94],{"type":37,"value":95}," install",{"type":32,"tag":79,"props":97,"children":98},{"style":92},[99],{"type":37,"value":100}," @fontsource-variable\u002Finter\n",{"type":32,"tag":33,"props":102,"children":103},{},[104,106,112],{"type":37,"value":105},"Import in ",{"type":32,"tag":40,"props":107,"children":109},{"className":108},[],[110],{"type":37,"value":111},"app.vue",{"type":37,"value":113},":",{"type":32,"tag":69,"props":115,"children":119},{"code":116,"language":117,"meta":16,"className":118,"style":16},"import '@fontsource-variable\u002Finter\u002Fwght.css';\n","javascript","language-javascript shiki shiki-themes github-dark",[120],{"type":32,"tag":40,"props":121,"children":122},{"__ignoreMap":16},[123],{"type":32,"tag":79,"props":124,"children":125},{"class":81,"line":82},[126,132,137],{"type":32,"tag":79,"props":127,"children":129},{"style":128},"--shiki-default:#F97583",[130],{"type":37,"value":131},"import",{"type":32,"tag":79,"props":133,"children":134},{"style":92},[135],{"type":37,"value":136}," '@fontsource-variable\u002Finter\u002Fwght.css'",{"type":32,"tag":79,"props":138,"children":140},{"style":139},"--shiki-default:#E1E4E8",[141],{"type":37,"value":142},";\n",{"type":32,"tag":33,"props":144,"children":145},{},[146,148,154],{"type":37,"value":147},"Konfiguration in ",{"type":32,"tag":40,"props":149,"children":151},{"className":150},[],[152],{"type":37,"value":153},"nuxt.config.ts",{"type":37,"value":113},{"type":32,"tag":69,"props":156,"children":160},{"code":157,"language":158,"meta":16,"className":159,"style":16},"export default defineNuxtConfig({\n  css: ['@fontsource-variable\u002Finter\u002Fwght.css'],\n  vite: {\n    css: {\n      postcss: {\n        plugins: [\n          require('postcss-preset-env')({\n            features: { 'custom-properties': false }\n          })\n        ]\n      }\n    }\n  }\n});\n","typescript","language-typescript shiki shiki-themes github-dark",[161],{"type":32,"tag":40,"props":162,"children":163},{"__ignoreMap":16},[164,187,206,215,224,233,242,266,296,304,313,322,331,340],{"type":32,"tag":79,"props":165,"children":166},{"class":81,"line":82},[167,172,177,182],{"type":32,"tag":79,"props":168,"children":169},{"style":128},[170],{"type":37,"value":171},"export",{"type":32,"tag":79,"props":173,"children":174},{"style":128},[175],{"type":37,"value":176}," default",{"type":32,"tag":79,"props":178,"children":179},{"style":86},[180],{"type":37,"value":181}," defineNuxtConfig",{"type":32,"tag":79,"props":183,"children":184},{"style":139},[185],{"type":37,"value":186},"({\n",{"type":32,"tag":79,"props":188,"children":190},{"class":81,"line":189},2,[191,196,201],{"type":32,"tag":79,"props":192,"children":193},{"style":139},[194],{"type":37,"value":195},"  css: [",{"type":32,"tag":79,"props":197,"children":198},{"style":92},[199],{"type":37,"value":200},"'@fontsource-variable\u002Finter\u002Fwght.css'",{"type":32,"tag":79,"props":202,"children":203},{"style":139},[204],{"type":37,"value":205},"],\n",{"type":32,"tag":79,"props":207,"children":209},{"class":81,"line":208},3,[210],{"type":32,"tag":79,"props":211,"children":212},{"style":139},[213],{"type":37,"value":214},"  vite: {\n",{"type":32,"tag":79,"props":216,"children":218},{"class":81,"line":217},4,[219],{"type":32,"tag":79,"props":220,"children":221},{"style":139},[222],{"type":37,"value":223},"    css: {\n",{"type":32,"tag":79,"props":225,"children":227},{"class":81,"line":226},5,[228],{"type":32,"tag":79,"props":229,"children":230},{"style":139},[231],{"type":37,"value":232},"      postcss: {\n",{"type":32,"tag":79,"props":234,"children":236},{"class":81,"line":235},6,[237],{"type":32,"tag":79,"props":238,"children":239},{"style":139},[240],{"type":37,"value":241},"        plugins: [\n",{"type":32,"tag":79,"props":243,"children":245},{"class":81,"line":244},7,[246,251,256,261],{"type":32,"tag":79,"props":247,"children":248},{"style":86},[249],{"type":37,"value":250},"          require",{"type":32,"tag":79,"props":252,"children":253},{"style":139},[254],{"type":37,"value":255},"(",{"type":32,"tag":79,"props":257,"children":258},{"style":92},[259],{"type":37,"value":260},"'postcss-preset-env'",{"type":32,"tag":79,"props":262,"children":263},{"style":139},[264],{"type":37,"value":265},")({\n",{"type":32,"tag":79,"props":267,"children":269},{"class":81,"line":268},8,[270,275,280,285,291],{"type":32,"tag":79,"props":271,"children":272},{"style":139},[273],{"type":37,"value":274},"            features: { ",{"type":32,"tag":79,"props":276,"children":277},{"style":92},[278],{"type":37,"value":279},"'custom-properties'",{"type":32,"tag":79,"props":281,"children":282},{"style":139},[283],{"type":37,"value":284},": ",{"type":32,"tag":79,"props":286,"children":288},{"style":287},"--shiki-default:#79B8FF",[289],{"type":37,"value":290},"false",{"type":32,"tag":79,"props":292,"children":293},{"style":139},[294],{"type":37,"value":295}," }\n",{"type":32,"tag":79,"props":297,"children":298},{"class":81,"line":26},[299],{"type":32,"tag":79,"props":300,"children":301},{"style":139},[302],{"type":37,"value":303},"          })\n",{"type":32,"tag":79,"props":305,"children":307},{"class":81,"line":306},10,[308],{"type":32,"tag":79,"props":309,"children":310},{"style":139},[311],{"type":37,"value":312},"        ]\n",{"type":32,"tag":79,"props":314,"children":316},{"class":81,"line":315},11,[317],{"type":32,"tag":79,"props":318,"children":319},{"style":139},[320],{"type":37,"value":321},"      }\n",{"type":32,"tag":79,"props":323,"children":325},{"class":81,"line":324},12,[326],{"type":32,"tag":79,"props":327,"children":328},{"style":139},[329],{"type":37,"value":330},"    }\n",{"type":32,"tag":79,"props":332,"children":334},{"class":81,"line":333},13,[335],{"type":32,"tag":79,"props":336,"children":337},{"style":139},[338],{"type":37,"value":339},"  }\n",{"type":32,"tag":79,"props":341,"children":343},{"class":81,"line":342},14,[344],{"type":32,"tag":79,"props":345,"children":346},{"style":139},[347],{"type":37,"value":348},"});\n",{"type":32,"tag":33,"props":350,"children":351},{},[352,354,360],{"type":37,"value":353},"Ergebnis: Die WOFF2-Datei belegt nur 24KB und wird inline beim ersten Request serviert. FCP sank von 3,8s auf 2,9s, Render-Blocking-Zeit von 320ms auf 0ms. Variable Font-Achsen bleiben erhalten — wir importierten ",{"type":32,"tag":40,"props":355,"children":357},{"className":356},[],[358],{"type":37,"value":359},"wght.css",{"type":37,"value":361}," statt statischer Weight-Dateien.",{"type":32,"tag":33,"props":363,"children":364},{},[365],{"type":37,"value":366},"Das Google Fonts CDN hat zwar viele Edge Locations, aber DNS-Lookup und TLS-Handshake addieren pro Besuch 200-300ms hinzu. Durch Self-Hosting wird dieser zusätzliche DNS-Hop eliminiert.",{"type":32,"tag":49,"props":368,"children":370},{"id":369},"lazy-hydration-tbt-von-2190ms-auf-200ms",[371],{"type":37,"value":372},"Lazy Hydration: TBT von 2190ms auf 200ms",{"type":32,"tag":33,"props":374,"children":375},{},[376],{"type":37,"value":377},"Nuxt 3 hydratisiert standardmäßig alle Komponenten clientseitig. Eine Product-Listing-Page mit 48 Produktkarten führte zu 120KB JavaScript pro Karte für Vue's Reactivity-System. Total Blocking Time betrug 2190ms — Nutzer konnten die Seite 2 Sekunden lang nicht scrollen.",{"type":32,"tag":33,"props":379,"children":380},{},[381,383,389,391,397],{"type":37,"value":382},"Mit Vue 3.5+ und ",{"type":32,"tag":40,"props":384,"children":386},{"className":385},[],[387],{"type":37,"value":388},"defineAsyncComponent",{"type":37,"value":390}," + ",{"type":32,"tag":40,"props":392,"children":394},{"className":393},[],[395],{"type":37,"value":396},"hydration:lazy",{"type":37,"value":398}," führten wir Lazy Hydration für Below-the-Fold-Komponenten ein:",{"type":32,"tag":69,"props":400,"children":402},{"code":401,"language":117,"meta":16,"className":118,"style":16},"\u002F\u002F components\u002FProductCard.vue\n\u003Cscript setup>\ndefineOptions({\n  hydration: 'lazy'\n});\n\u003C\u002Fscript>\n",[403],{"type":32,"tag":40,"props":404,"children":405},{"__ignoreMap":16},[406,415,439,447,460,467],{"type":32,"tag":79,"props":407,"children":408},{"class":81,"line":82},[409],{"type":32,"tag":79,"props":410,"children":412},{"style":411},"--shiki-default:#6A737D",[413],{"type":37,"value":414},"\u002F\u002F components\u002FProductCard.vue\n",{"type":32,"tag":79,"props":416,"children":417},{"class":81,"line":189},[418,423,429,434],{"type":32,"tag":79,"props":419,"children":420},{"style":139},[421],{"type":37,"value":422},"\u003C",{"type":32,"tag":79,"props":424,"children":426},{"style":425},"--shiki-default:#85E89D",[427],{"type":37,"value":428},"script",{"type":32,"tag":79,"props":430,"children":431},{"style":86},[432],{"type":37,"value":433}," setup",{"type":32,"tag":79,"props":435,"children":436},{"style":139},[437],{"type":37,"value":438},">\n",{"type":32,"tag":79,"props":440,"children":441},{"class":81,"line":208},[442],{"type":32,"tag":79,"props":443,"children":444},{"style":139},[445],{"type":37,"value":446},"defineOptions({\n",{"type":32,"tag":79,"props":448,"children":449},{"class":81,"line":217},[450,455],{"type":32,"tag":79,"props":451,"children":452},{"style":139},[453],{"type":37,"value":454},"  hydration: ",{"type":32,"tag":79,"props":456,"children":457},{"style":92},[458],{"type":37,"value":459},"'lazy'\n",{"type":32,"tag":79,"props":461,"children":462},{"class":81,"line":226},[463],{"type":32,"tag":79,"props":464,"children":465},{"style":139},[466],{"type":37,"value":348},{"type":32,"tag":79,"props":468,"children":469},{"class":81,"line":235},[470,475,479],{"type":32,"tag":79,"props":471,"children":472},{"style":139},[473],{"type":37,"value":474},"\u003C\u002F",{"type":32,"tag":79,"props":476,"children":477},{"style":425},[478],{"type":37,"value":428},{"type":32,"tag":79,"props":480,"children":481},{"style":139},[482],{"type":37,"value":438},{"type":32,"tag":33,"props":484,"children":485},{},[486],{"type":37,"value":487},"Intersection Observer triggert Hydration, sobald eine Komponente in den Viewport eintritt:",{"type":32,"tag":69,"props":489,"children":491},{"code":490,"language":117,"meta":16,"className":118,"style":16},"\u002F\u002F plugins\u002Flazy-hydration.client.ts\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.mixin({\n    mounted() {\n      if (this.$options.hydration === 'lazy') {\n        const observer = new IntersectionObserver((entries) => {\n          entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n              this.$forceUpdate();\n              observer.disconnect();\n            }\n          });\n        });\n        observer.observe(this.$el);\n      }\n    }\n  });\n});\n",[492],{"type":32,"tag":40,"props":493,"children":494},{"__ignoreMap":16},[495,503,545,562,575,613,662,696,709,732,749,757,765,773,799,807,815,824],{"type":32,"tag":79,"props":496,"children":497},{"class":81,"line":82},[498],{"type":32,"tag":79,"props":499,"children":500},{"style":411},[501],{"type":37,"value":502},"\u002F\u002F plugins\u002Flazy-hydration.client.ts\n",{"type":32,"tag":79,"props":504,"children":505},{"class":81,"line":189},[506,510,514,519,524,530,535,540],{"type":32,"tag":79,"props":507,"children":508},{"style":128},[509],{"type":37,"value":171},{"type":32,"tag":79,"props":511,"children":512},{"style":128},[513],{"type":37,"value":176},{"type":32,"tag":79,"props":515,"children":516},{"style":86},[517],{"type":37,"value":518}," defineNuxtPlugin",{"type":32,"tag":79,"props":520,"children":521},{"style":139},[522],{"type":37,"value":523},"((",{"type":32,"tag":79,"props":525,"children":527},{"style":526},"--shiki-default:#FFAB70",[528],{"type":37,"value":529},"nuxtApp",{"type":32,"tag":79,"props":531,"children":532},{"style":139},[533],{"type":37,"value":534},") ",{"type":32,"tag":79,"props":536,"children":537},{"style":128},[538],{"type":37,"value":539},"=>",{"type":32,"tag":79,"props":541,"children":542},{"style":139},[543],{"type":37,"value":544}," {\n",{"type":32,"tag":79,"props":546,"children":547},{"class":81,"line":208},[548,553,558],{"type":32,"tag":79,"props":549,"children":550},{"style":139},[551],{"type":37,"value":552},"  nuxtApp.vueApp.",{"type":32,"tag":79,"props":554,"children":555},{"style":86},[556],{"type":37,"value":557},"mixin",{"type":32,"tag":79,"props":559,"children":560},{"style":139},[561],{"type":37,"value":186},{"type":32,"tag":79,"props":563,"children":564},{"class":81,"line":217},[565,570],{"type":32,"tag":79,"props":566,"children":567},{"style":86},[568],{"type":37,"value":569},"    mounted",{"type":32,"tag":79,"props":571,"children":572},{"style":139},[573],{"type":37,"value":574},"() {\n",{"type":32,"tag":79,"props":576,"children":577},{"class":81,"line":226},[578,583,588,593,598,603,608],{"type":32,"tag":79,"props":579,"children":580},{"style":128},[581],{"type":37,"value":582},"      if",{"type":32,"tag":79,"props":584,"children":585},{"style":139},[586],{"type":37,"value":587}," (",{"type":32,"tag":79,"props":589,"children":590},{"style":287},[591],{"type":37,"value":592},"this",{"type":32,"tag":79,"props":594,"children":595},{"style":139},[596],{"type":37,"value":597},".$options.hydration ",{"type":32,"tag":79,"props":599,"children":600},{"style":128},[601],{"type":37,"value":602},"===",{"type":32,"tag":79,"props":604,"children":605},{"style":92},[606],{"type":37,"value":607}," 'lazy'",{"type":32,"tag":79,"props":609,"children":610},{"style":139},[611],{"type":37,"value":612},") {\n",{"type":32,"tag":79,"props":614,"children":615},{"class":81,"line":235},[616,621,626,631,636,641,645,650,654,658],{"type":32,"tag":79,"props":617,"children":618},{"style":128},[619],{"type":37,"value":620},"        const",{"type":32,"tag":79,"props":622,"children":623},{"style":287},[624],{"type":37,"value":625}," observer",{"type":32,"tag":79,"props":627,"children":628},{"style":128},[629],{"type":37,"value":630}," =",{"type":32,"tag":79,"props":632,"children":633},{"style":128},[634],{"type":37,"value":635}," new",{"type":32,"tag":79,"props":637,"children":638},{"style":86},[639],{"type":37,"value":640}," IntersectionObserver",{"type":32,"tag":79,"props":642,"children":643},{"style":139},[644],{"type":37,"value":523},{"type":32,"tag":79,"props":646,"children":647},{"style":526},[648],{"type":37,"value":649},"entries",{"type":32,"tag":79,"props":651,"children":652},{"style":139},[653],{"type":37,"value":534},{"type":32,"tag":79,"props":655,"children":656},{"style":128},[657],{"type":37,"value":539},{"type":32,"tag":79,"props":659,"children":660},{"style":139},[661],{"type":37,"value":544},{"type":32,"tag":79,"props":663,"children":664},{"class":81,"line":244},[665,670,675,679,684,688,692],{"type":32,"tag":79,"props":666,"children":667},{"style":139},[668],{"type":37,"value":669},"          entries.",{"type":32,"tag":79,"props":671,"children":672},{"style":86},[673],{"type":37,"value":674},"forEach",{"type":32,"tag":79,"props":676,"children":677},{"style":139},[678],{"type":37,"value":523},{"type":32,"tag":79,"props":680,"children":681},{"style":526},[682],{"type":37,"value":683},"entry",{"type":32,"tag":79,"props":685,"children":686},{"style":139},[687],{"type":37,"value":534},{"type":32,"tag":79,"props":689,"children":690},{"style":128},[691],{"type":37,"value":539},{"type":32,"tag":79,"props":693,"children":694},{"style":139},[695],{"type":37,"value":544},{"type":32,"tag":79,"props":697,"children":698},{"class":81,"line":268},[699,704],{"type":32,"tag":79,"props":700,"children":701},{"style":128},[702],{"type":37,"value":703},"            if",{"type":32,"tag":79,"props":705,"children":706},{"style":139},[707],{"type":37,"value":708}," (entry.isIntersecting) {\n",{"type":32,"tag":79,"props":710,"children":711},{"class":81,"line":26},[712,717,722,727],{"type":32,"tag":79,"props":713,"children":714},{"style":287},[715],{"type":37,"value":716},"              this",{"type":32,"tag":79,"props":718,"children":719},{"style":139},[720],{"type":37,"value":721},".",{"type":32,"tag":79,"props":723,"children":724},{"style":86},[725],{"type":37,"value":726},"$forceUpdate",{"type":32,"tag":79,"props":728,"children":729},{"style":139},[730],{"type":37,"value":731},"();\n",{"type":32,"tag":79,"props":733,"children":734},{"class":81,"line":306},[735,740,745],{"type":32,"tag":79,"props":736,"children":737},{"style":139},[738],{"type":37,"value":739},"              observer.",{"type":32,"tag":79,"props":741,"children":742},{"style":86},[743],{"type":37,"value":744},"disconnect",{"type":32,"tag":79,"props":746,"children":747},{"style":139},[748],{"type":37,"value":731},{"type":32,"tag":79,"props":750,"children":751},{"class":81,"line":315},[752],{"type":32,"tag":79,"props":753,"children":754},{"style":139},[755],{"type":37,"value":756},"            }\n",{"type":32,"tag":79,"props":758,"children":759},{"class":81,"line":324},[760],{"type":32,"tag":79,"props":761,"children":762},{"style":139},[763],{"type":37,"value":764},"          });\n",{"type":32,"tag":79,"props":766,"children":767},{"class":81,"line":333},[768],{"type":32,"tag":79,"props":769,"children":770},{"style":139},[771],{"type":37,"value":772},"        });\n",{"type":32,"tag":79,"props":774,"children":775},{"class":81,"line":342},[776,781,786,790,794],{"type":32,"tag":79,"props":777,"children":778},{"style":139},[779],{"type":37,"value":780},"        observer.",{"type":32,"tag":79,"props":782,"children":783},{"style":86},[784],{"type":37,"value":785},"observe",{"type":32,"tag":79,"props":787,"children":788},{"style":139},[789],{"type":37,"value":255},{"type":32,"tag":79,"props":791,"children":792},{"style":287},[793],{"type":37,"value":592},{"type":32,"tag":79,"props":795,"children":796},{"style":139},[797],{"type":37,"value":798},".$el);\n",{"type":32,"tag":79,"props":800,"children":802},{"class":81,"line":801},15,[803],{"type":32,"tag":79,"props":804,"children":805},{"style":139},[806],{"type":37,"value":321},{"type":32,"tag":79,"props":808,"children":810},{"class":81,"line":809},16,[811],{"type":32,"tag":79,"props":812,"children":813},{"style":139},[814],{"type":37,"value":330},{"type":32,"tag":79,"props":816,"children":818},{"class":81,"line":817},17,[819],{"type":32,"tag":79,"props":820,"children":821},{"style":139},[822],{"type":37,"value":823},"  });\n",{"type":32,"tag":79,"props":825,"children":827},{"class":81,"line":826},18,[828],{"type":32,"tag":79,"props":829,"children":830},{"style":139},[831],{"type":37,"value":348},{"type":32,"tag":33,"props":833,"children":834},{},[835],{"type":37,"value":836},"Above-the-Fold Hero und erste 6 Produkte wurden sofort hydratisiert, der Rest lazy. Das Bundle schrumpfte von 480KB auf 280KB Initial + 200KB Lazy Chunk. TBT fiel von 2190ms auf 200ms — Nutzer können nach 1 Sekunde scrollen.",{"type":32,"tag":33,"props":838,"children":839},{},[840,842,848],{"type":37,"value":841},"Kompromiss: Verzögerung beim Event-Listener-Attach. Komponenten mit Click-Handlern (Add-to-Cart-Button) behielten ",{"type":32,"tag":40,"props":843,"children":845},{"className":844},[],[846],{"type":37,"value":847},"hydration: 'immediate'",{"type":37,"value":849},". Für Scroll-triggered Content ist Lazy Hydration ideal.",{"type":32,"tag":851,"props":852,"children":854},"h3",{"id":853},"nuxts-eingebaute-lazy-komponenten",[855],{"type":37,"value":856},"Nuxt's eingebaute Lazy-Komponenten",{"type":32,"tag":33,"props":858,"children":859},{},[860,862,868],{"type":37,"value":861},"Nuxt 3.0+ bietet das ",{"type":32,"tag":40,"props":863,"children":865},{"className":864},[],[866],{"type":37,"value":867},"\u003CLazyComponentName>",{"type":37,"value":869},"-Präfix als einfachere Variante:",{"type":32,"tag":69,"props":871,"children":875},{"code":872,"language":873,"meta":16,"className":874,"style":16},"\u003Ctemplate>\n  \u003CLazyProductCard v-for=\"product in products\" :key=\"product.id\" \u002F>\n\u003C\u002Ftemplate>\n","vue","language-vue shiki shiki-themes github-dark",[876],{"type":32,"tag":40,"props":877,"children":878},{"__ignoreMap":16},[879,895,942],{"type":32,"tag":79,"props":880,"children":881},{"class":81,"line":82},[882,886,891],{"type":32,"tag":79,"props":883,"children":884},{"style":139},[885],{"type":37,"value":422},{"type":32,"tag":79,"props":887,"children":888},{"style":425},[889],{"type":37,"value":890},"template",{"type":32,"tag":79,"props":892,"children":893},{"style":139},[894],{"type":37,"value":438},{"type":32,"tag":79,"props":896,"children":897},{"class":81,"line":189},[898,903,908,913,918,923,928,932,937],{"type":32,"tag":79,"props":899,"children":900},{"style":139},[901],{"type":37,"value":902},"  \u003C",{"type":32,"tag":79,"props":904,"children":905},{"style":425},[906],{"type":37,"value":907},"LazyProductCard",{"type":32,"tag":79,"props":909,"children":910},{"style":86},[911],{"type":37,"value":912}," v-for",{"type":32,"tag":79,"props":914,"children":915},{"style":139},[916],{"type":37,"value":917},"=",{"type":32,"tag":79,"props":919,"children":920},{"style":92},[921],{"type":37,"value":922},"\"product in products\"",{"type":32,"tag":79,"props":924,"children":925},{"style":86},[926],{"type":37,"value":927}," :key",{"type":32,"tag":79,"props":929,"children":930},{"style":139},[931],{"type":37,"value":917},{"type":32,"tag":79,"props":933,"children":934},{"style":92},[935],{"type":37,"value":936},"\"product.id\"",{"type":32,"tag":79,"props":938,"children":939},{"style":139},[940],{"type":37,"value":941}," \u002F>\n",{"type":32,"tag":79,"props":943,"children":944},{"class":81,"line":208},[945,949,953],{"type":32,"tag":79,"props":946,"children":947},{"style":139},[948],{"type":37,"value":474},{"type":32,"tag":79,"props":950,"children":951},{"style":425},[952],{"type":37,"value":890},{"type":32,"tag":79,"props":954,"children":955},{"style":139},[956],{"type":37,"value":438},{"type":32,"tag":33,"props":958,"children":959},{},[960,962,968],{"type":37,"value":961},"Diese Methode rendert die Komponente nicht serverseitig, nur clientseitig. Da SEO SSR erforderte, bevorzugten wir die ",{"type":32,"tag":40,"props":963,"children":965},{"className":964},[],[966],{"type":37,"value":967},"defineOptions",{"type":37,"value":969},"-Methode.",{"type":32,"tag":49,"props":971,"children":973},{"id":972},"css-content-visibility-14s-lcp-gewinn",[974],{"type":37,"value":975},"CSS content-visibility: 1,4s LCP-Gewinn",{"type":32,"tag":33,"props":977,"children":978},{},[979,981,987],{"type":37,"value":980},"Das Product-Grid mit 48 Karten verursachte Rendering-Verzögerungen und Layout Shift. Browser renderte jede Karte und rechnete CLS neu. Mit ",{"type":32,"tag":40,"props":982,"children":984},{"className":983},[],[985],{"type":37,"value":986},"content-visibility: auto",{"type":37,"value":988}," eliminierten wir Off-Screen-Content aus dem Render-Cycle:",{"type":32,"tag":69,"props":990,"children":994},{"code":991,"language":992,"meta":16,"className":993,"style":16},".product-card {\n  content-visibility: auto;\n  contain-intrinsic-size: 0 360px;\n}\n","css","language-css shiki shiki-themes github-dark",[995],{"type":32,"tag":40,"props":996,"children":997},{"__ignoreMap":16},[998,1010,1031,1062],{"type":32,"tag":79,"props":999,"children":1000},{"class":81,"line":82},[1001,1006],{"type":32,"tag":79,"props":1002,"children":1003},{"style":86},[1004],{"type":37,"value":1005},".product-card",{"type":32,"tag":79,"props":1007,"children":1008},{"style":139},[1009],{"type":37,"value":544},{"type":32,"tag":79,"props":1011,"children":1012},{"class":81,"line":189},[1013,1018,1022,1027],{"type":32,"tag":79,"props":1014,"children":1015},{"style":287},[1016],{"type":37,"value":1017},"  content-visibility",{"type":32,"tag":79,"props":1019,"children":1020},{"style":139},[1021],{"type":37,"value":284},{"type":32,"tag":79,"props":1023,"children":1024},{"style":287},[1025],{"type":37,"value":1026},"auto",{"type":32,"tag":79,"props":1028,"children":1029},{"style":139},[1030],{"type":37,"value":142},{"type":32,"tag":79,"props":1032,"children":1033},{"class":81,"line":208},[1034,1039,1043,1048,1053,1058],{"type":32,"tag":79,"props":1035,"children":1036},{"style":287},[1037],{"type":37,"value":1038},"  contain-intrinsic-size",{"type":32,"tag":79,"props":1040,"children":1041},{"style":139},[1042],{"type":37,"value":284},{"type":32,"tag":79,"props":1044,"children":1045},{"style":287},[1046],{"type":37,"value":1047},"0",{"type":32,"tag":79,"props":1049,"children":1050},{"style":287},[1051],{"type":37,"value":1052}," 360",{"type":32,"tag":79,"props":1054,"children":1055},{"style":128},[1056],{"type":37,"value":1057},"px",{"type":32,"tag":79,"props":1059,"children":1060},{"style":139},[1061],{"type":37,"value":142},{"type":32,"tag":79,"props":1063,"children":1064},{"class":81,"line":217},[1065],{"type":32,"tag":79,"props":1066,"children":1067},{"style":139},[1068],{"type":37,"value":1069},"}\n",{"type":32,"tag":33,"props":1071,"children":1072},{},[1073,1079],{"type":32,"tag":40,"props":1074,"children":1076},{"className":1075},[],[1077],{"type":37,"value":1078},"contain-intrinsic-size",{"type":37,"value":1080}," teilt dem Browser mit: \"Dieses Element ist 360px hoch\". Viewport-externe Elemente behalten ihre Höhe, ohne gerendert zu werden. CLS sank von 0,18 auf 0,02.",{"type":32,"tag":33,"props":1082,"children":1083},{},[1084],{"type":37,"value":1085},"Benchmark (Lighthouse 10.4, Throttle 4G):",{"type":32,"tag":1087,"props":1088,"children":1089},"table",{},[1090,1119],{"type":32,"tag":1091,"props":1092,"children":1093},"thead",{},[1094],{"type":32,"tag":1095,"props":1096,"children":1097},"tr",{},[1098,1104,1109,1114],{"type":32,"tag":1099,"props":1100,"children":1101},"th",{},[1102],{"type":37,"value":1103},"Metrik",{"type":32,"tag":1099,"props":1105,"children":1106},{},[1107],{"type":37,"value":1108},"Vorher",{"type":32,"tag":1099,"props":1110,"children":1111},{},[1112],{"type":37,"value":1113},"Nachher",{"type":32,"tag":1099,"props":1115,"children":1116},{},[1117],{"type":37,"value":1118},"Differenz",{"type":32,"tag":1120,"props":1121,"children":1122},"tbody",{},[1123,1147,1170],{"type":32,"tag":1095,"props":1124,"children":1125},{},[1126,1132,1137,1142],{"type":32,"tag":1127,"props":1128,"children":1129},"td",{},[1130],{"type":37,"value":1131},"LCP",{"type":32,"tag":1127,"props":1133,"children":1134},{},[1135],{"type":37,"value":1136},"10,2s",{"type":32,"tag":1127,"props":1138,"children":1139},{},[1140],{"type":37,"value":1141},"2,1s",{"type":32,"tag":1127,"props":1143,"children":1144},{},[1145],{"type":37,"value":1146},"–8,1s",{"type":32,"tag":1095,"props":1148,"children":1149},{},[1150,1155,1160,1165],{"type":32,"tag":1127,"props":1151,"children":1152},{},[1153],{"type":37,"value":1154},"CLS",{"type":32,"tag":1127,"props":1156,"children":1157},{},[1158],{"type":37,"value":1159},"0,18",{"type":32,"tag":1127,"props":1161,"children":1162},{},[1163],{"type":37,"value":1164},"0,02",{"type":32,"tag":1127,"props":1166,"children":1167},{},[1168],{"type":37,"value":1169},"–0,16",{"type":32,"tag":1095,"props":1171,"children":1172},{},[1173,1178,1183,1188],{"type":32,"tag":1127,"props":1174,"children":1175},{},[1176],{"type":37,"value":1177},"TBT",{"type":32,"tag":1127,"props":1179,"children":1180},{},[1181],{"type":37,"value":1182},"2190ms",{"type":32,"tag":1127,"props":1184,"children":1185},{},[1186],{"type":37,"value":1187},"200ms",{"type":32,"tag":1127,"props":1189,"children":1190},{},[1191],{"type":37,"value":1192},"–1990ms",{"type":32,"tag":33,"props":1194,"children":1195},{},[1196,1201,1203,1209],{"type":32,"tag":40,"props":1197,"children":1199},{"className":1198},[],[1200],{"type":37,"value":45},{"type":37,"value":1202}," wird ab Safari 17+ unterstützt, iOS 16 greift auf normales Rendering zurück. Progressive Enhancement mit ",{"type":32,"tag":40,"props":1204,"children":1206},{"className":1205},[],[1207],{"type":37,"value":1208},"@supports",{"type":37,"value":113},{"type":32,"tag":69,"props":1211,"children":1213},{"code":1212,"language":992,"meta":16,"className":993,"style":16},"@supports (content-visibility: auto) {\n  .product-card {\n    content-visibility: auto;\n    contain-intrinsic-size: 0 360px;\n  }\n}\n",[1214],{"type":32,"tag":40,"props":1215,"children":1216},{"__ignoreMap":16},[1217,1244,1256,1276,1304,1311],{"type":32,"tag":79,"props":1218,"children":1219},{"class":81,"line":82},[1220,1224,1228,1232,1236,1240],{"type":32,"tag":79,"props":1221,"children":1222},{"style":128},[1223],{"type":37,"value":1208},{"type":32,"tag":79,"props":1225,"children":1226},{"style":139},[1227],{"type":37,"value":587},{"type":32,"tag":79,"props":1229,"children":1230},{"style":287},[1231],{"type":37,"value":45},{"type":32,"tag":79,"props":1233,"children":1234},{"style":139},[1235],{"type":37,"value":284},{"type":32,"tag":79,"props":1237,"children":1238},{"style":287},[1239],{"type":37,"value":1026},{"type":32,"tag":79,"props":1241,"children":1242},{"style":139},[1243],{"type":37,"value":612},{"type":32,"tag":79,"props":1245,"children":1246},{"class":81,"line":189},[1247,1252],{"type":32,"tag":79,"props":1248,"children":1249},{"style":86},[1250],{"type":37,"value":1251},"  .product-card",{"type":32,"tag":79,"props":1253,"children":1254},{"style":139},[1255],{"type":37,"value":544},{"type":32,"tag":79,"props":1257,"children":1258},{"class":81,"line":208},[1259,1264,1268,1272],{"type":32,"tag":79,"props":1260,"children":1261},{"style":287},[1262],{"type":37,"value":1263},"    content-visibility",{"type":32,"tag":79,"props":1265,"children":1266},{"style":139},[1267],{"type":37,"value":284},{"type":32,"tag":79,"props":1269,"children":1270},{"style":287},[1271],{"type":37,"value":1026},{"type":32,"tag":79,"props":1273,"children":1274},{"style":139},[1275],{"type":37,"value":142},{"type":32,"tag":79,"props":1277,"children":1278},{"class":81,"line":217},[1279,1284,1288,1292,1296,1300],{"type":32,"tag":79,"props":1280,"children":1281},{"style":287},[1282],{"type":37,"value":1283},"    contain-intrinsic-size",{"type":32,"tag":79,"props":1285,"children":1286},{"style":139},[1287],{"type":37,"value":284},{"type":32,"tag":79,"props":1289,"children":1290},{"style":287},[1291],{"type":37,"value":1047},{"type":32,"tag":79,"props":1293,"children":1294},{"style":287},[1295],{"type":37,"value":1052},{"type":32,"tag":79,"props":1297,"children":1298},{"style":128},[1299],{"type":37,"value":1057},{"type":32,"tag":79,"props":1301,"children":1302},{"style":139},[1303],{"type":37,"value":142},{"type":32,"tag":79,"props":1305,"children":1306},{"class":81,"line":226},[1307],{"type":32,"tag":79,"props":1308,"children":1309},{"style":139},[1310],{"type":37,"value":339},{"type":32,"tag":79,"props":1312,"children":1313},{"class":81,"line":235},[1314],{"type":32,"tag":79,"props":1315,"children":1316},{"style":139},[1317],{"type":37,"value":1069},{"type":32,"tag":33,"props":1319,"children":1320},{},[1321,1323,1332],{"type":37,"value":1322},"Diese Technik ist für ",{"type":32,"tag":1324,"props":1325,"children":1329},"a",{"href":1326,"rel":1327},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fui-ux",[1328],"nofollow",[1330],{"type":37,"value":1331},"UI\u002FUX-Design",{"type":37,"value":1333}," Prozesse kritisch hinsichtlich Layout-Stabilität. User Experience wird unabhängig von Rendering-Kosten außerhalb des Viewports.",{"type":32,"tag":49,"props":1335,"children":1337},{"id":1336},"cloudflare-pages-edge-cache-ttl-optimierung",[1338],{"type":37,"value":1339},"Cloudflare Pages Edge Cache TTL Optimierung",{"type":32,"tag":33,"props":1341,"children":1342},{},[1343,1345,1351],{"type":37,"value":1344},"Cloudflare Pages setzt standard TTL auf 2 Stunden. Produktpreise aktualisieren sich alle 15 Minuten, visuelle Assets (Bilder, Fonts) sind 7 Tage statisch. Mit ",{"type":32,"tag":40,"props":1346,"children":1348},{"className":1347},[],[1349],{"type":37,"value":1350},"_headers",{"type":37,"value":1352},"-Datei definierten wir granulare Cache-Kontrolle:",{"type":32,"tag":69,"props":1354,"children":1356},{"code":1355},"# _headers\n\u002Fassets\u002F*\n  Cache-Control: public, max-age=604800, immutable\n\n\u002F_nuxt\u002F*\n  Cache-Control: public, max-age=31536000, immutable\n\n\u002Fapi\u002F*\n  Cache-Control: public, s-maxage=900, stale-while-revalidate=60\n\n\u002F*\n  Cache-Control: public, max-age=0, s-maxage=3600, stale-while-revalidate=300\n",[1357],{"type":32,"tag":40,"props":1358,"children":1359},{"__ignoreMap":16},[1360],{"type":37,"value":1355},{"type":32,"tag":1362,"props":1363,"children":1364},"ul",{},[1365,1385,1396],{"type":32,"tag":1366,"props":1367,"children":1368},"li",{},[1369,1375,1377,1383],{"type":32,"tag":40,"props":1370,"children":1372},{"className":1371},[],[1373],{"type":37,"value":1374},"\u002Fassets\u002F*",{"type":37,"value":1376}," und ",{"type":32,"tag":40,"props":1378,"children":1380},{"className":1379},[],[1381],{"type":37,"value":1382},"\u002F_nuxt\u002F*",{"type":37,"value":1384},": 1 Jahr immutable (URL ändert sich bei neuem Fingerprint-Hash)",{"type":32,"tag":1366,"props":1386,"children":1387},{},[1388,1394],{"type":32,"tag":40,"props":1389,"children":1391},{"className":1390},[],[1392],{"type":37,"value":1393},"\u002Fapi\u002F*",{"type":37,"value":1395},": 15 Min Edge Cache, 60 Sekunden stale-while-revalidate (origin-Fehler: alte Daten servieren)",{"type":32,"tag":1366,"props":1397,"children":1398},{},[1399],{"type":37,"value":1400},"Root HTML: 1 Stunde Edge Cache, 5 Min stale-while-revalidate",{"type":32,"tag":33,"props":1402,"children":1403},{},[1404],{"type":37,"value":1405},"TTFB von der Edge-Location: 40ms, vom Origin: 280ms. Cache-Hit-Rate stieg von 89% auf 96%. Median TTFB: 280ms → 45ms.",{"type":32,"tag":33,"props":1407,"children":1408},{},[1409,1415],{"type":32,"tag":40,"props":1410,"children":1412},{"className":1411},[],[1413],{"type":37,"value":1414},"stale-while-revalidate",{"type":37,"value":1416}," ist entscheidend: Aktualisiert der Origin die Daten, wird dem Nutzer der alte Cache serviert, während im Hintergrund neue Daten geholt werden. Nutzer wartet nicht.",{"type":32,"tag":851,"props":1418,"children":1420},{"id":1419},"cloudflare-kv-für-dynamisches-cache-invalidation",[1421],{"type":37,"value":1422},"Cloudflare KV für dynamisches Cache-Invalidation",{"type":32,"tag":33,"props":1424,"children":1425},{},[1426],{"type":37,"value":1427},"Statt globales Cache-Purging bei Preis-Updates nutzen wir Cloudflare KV + Workers für selektives Invalidieren:",{"type":32,"tag":69,"props":1429,"children":1431},{"code":1430,"language":117,"meta":16,"className":118,"style":16},"\u002F\u002F workers\u002Fcache-purge.js\nexport default {\n  async fetch(request, env) {\n    const url = new URL(request.url);\n    const productId = url.searchParams.get('id');\n    \n    const cacheKey = `product:${productId}`;\n    await env.CACHE_KV.delete(cacheKey);\n    \n    return new Response('Cache purged', { status: 200 });\n  }\n};\n",[1432],{"type":32,"tag":40,"props":1433,"children":1434},{"__ignoreMap":16},[1435,1443,1458,1494,1525,1565,1573,1608,1640,1647,1688,1695],{"type":32,"tag":79,"props":1436,"children":1437},{"class":81,"line":82},[1438],{"type":32,"tag":79,"props":1439,"children":1440},{"style":411},[1441],{"type":37,"value":1442},"\u002F\u002F workers\u002Fcache-purge.js\n",{"type":32,"tag":79,"props":1444,"children":1445},{"class":81,"line":189},[1446,1450,1454],{"type":32,"tag":79,"props":1447,"children":1448},{"style":128},[1449],{"type":37,"value":171},{"type":32,"tag":79,"props":1451,"children":1452},{"style":128},[1453],{"type":37,"value":176},{"type":32,"tag":79,"props":1455,"children":1456},{"style":139},[1457],{"type":37,"value":544},{"type":32,"tag":79,"props":1459,"children":1460},{"class":81,"line":208},[1461,1466,1471,1475,1480,1485,1490],{"type":32,"tag":79,"props":1462,"children":1463},{"style":128},[1464],{"type":37,"value":1465},"  async",{"type":32,"tag":79,"props":1467,"children":1468},{"style":86},[1469],{"type":37,"value":1470}," fetch",{"type":32,"tag":79,"props":1472,"children":1473},{"style":139},[1474],{"type":37,"value":255},{"type":32,"tag":79,"props":1476,"children":1477},{"style":526},[1478],{"type":37,"value":1479},"request",{"type":32,"tag":79,"props":1481,"children":1482},{"style":139},[1483],{"type":37,"value":1484},", ",{"type":32,"tag":79,"props":1486,"children":1487},{"style":526},[1488],{"type":37,"value":1489},"env",{"type":32,"tag":79,"props":1491,"children":1492},{"style":139},[1493],{"type":37,"value":612},{"type":32,"tag":79,"props":1495,"children":1496},{"class":81,"line":217},[1497,1502,1507,1511,1515,1520],{"type":32,"tag":79,"props":1498,"children":1499},{"style":128},[1500],{"type":37,"value":1501},"    const",{"type":32,"tag":79,"props":1503,"children":1504},{"style":287},[1505],{"type":37,"value":1506}," url",{"type":32,"tag":79,"props":1508,"children":1509},{"style":128},[1510],{"type":37,"value":630},{"type":32,"tag":79,"props":1512,"children":1513},{"style":128},[1514],{"type":37,"value":635},{"type":32,"tag":79,"props":1516,"children":1517},{"style":86},[1518],{"type":37,"value":1519}," URL",{"type":32,"tag":79,"props":1521,"children":1522},{"style":139},[1523],{"type":37,"value":1524},"(request.url);\n",{"type":32,"tag":79,"props":1526,"children":1527},{"class":81,"line":226},[1528,1532,1537,1541,1546,1551,1555,1560],{"type":32,"tag":79,"props":1529,"children":1530},{"style":128},[1531],{"type":37,"value":1501},{"type":32,"tag":79,"props":1533,"children":1534},{"style":287},[1535],{"type":37,"value":1536}," productId",{"type":32,"tag":79,"props":1538,"children":1539},{"style":128},[1540],{"type":37,"value":630},{"type":32,"tag":79,"props":1542,"children":1543},{"style":139},[1544],{"type":37,"value":1545}," url.searchParams.",{"type":32,"tag":79,"props":1547,"children":1548},{"style":86},[1549],{"type":37,"value":1550},"get",{"type":32,"tag":79,"props":1552,"children":1553},{"style":139},[1554],{"type":37,"value":255},{"type":32,"tag":79,"props":1556,"children":1557},{"style":92},[1558],{"type":37,"value":1559},"'id'",{"type":32,"tag":79,"props":1561,"children":1562},{"style":139},[1563],{"type":37,"value":1564},");\n",{"type":32,"tag":79,"props":1566,"children":1567},{"class":81,"line":235},[1568],{"type":32,"tag":79,"props":1569,"children":1570},{"style":139},[1571],{"type":37,"value":1572},"    \n",{"type":32,"tag":79,"props":1574,"children":1575},{"class":81,"line":244},[1576,1580,1585,1589,1594,1599,1604],{"type":32,"tag":79,"props":1577,"children":1578},{"style":128},[1579],{"type":37,"value":1501},{"type":32,"tag":79,"props":1581,"children":1582},{"style":287},[1583],{"type":37,"value":1584}," cacheKey",{"type":32,"tag":79,"props":1586,"children":1587},{"style":128},[1588],{"type":37,"value":630},{"type":32,"tag":79,"props":1590,"children":1591},{"style":92},[1592],{"type":37,"value":1593}," `product:${",{"type":32,"tag":79,"props":1595,"children":1596},{"style":139},[1597],{"type":37,"value":1598},"productId",{"type":32,"tag":79,"props":1600,"children":1601},{"style":92},[1602],{"type":37,"value":1603},"}`",{"type":32,"tag":79,"props":1605,"children":1606},{"style":139},[1607],{"type":37,"value":142},{"type":32,"tag":79,"props":1609,"children":1610},{"class":81,"line":268},[1611,1616,1621,1626,1630,1635],{"type":32,"tag":79,"props":1612,"children":1613},{"style":128},[1614],{"type":37,"value":1615},"    await",{"type":32,"tag":79,"props":1617,"children":1618},{"style":139},[1619],{"type":37,"value":1620}," env.",{"type":32,"tag":79,"props":1622,"children":1623},{"style":287},[1624],{"type":37,"value":1625},"CACHE_KV",{"type":32,"tag":79,"props":1627,"children":1628},{"style":139},[1629],{"type":37,"value":721},{"type":32,"tag":79,"props":1631,"children":1632},{"style":86},[1633],{"type":37,"value":1634},"delete",{"type":32,"tag":79,"props":1636,"children":1637},{"style":139},[1638],{"type":37,"value":1639},"(cacheKey);\n",{"type":32,"tag":79,"props":1641,"children":1642},{"class":81,"line":26},[1643],{"type":32,"tag":79,"props":1644,"children":1645},{"style":139},[1646],{"type":37,"value":1572},{"type":32,"tag":79,"props":1648,"children":1649},{"class":81,"line":306},[1650,1655,1659,1664,1668,1673,1678,1683],{"type":32,"tag":79,"props":1651,"children":1652},{"style":128},[1653],{"type":37,"value":1654},"    return",{"type":32,"tag":79,"props":1656,"children":1657},{"style":128},[1658],{"type":37,"value":635},{"type":32,"tag":79,"props":1660,"children":1661},{"style":86},[1662],{"type":37,"value":1663}," Response",{"type":32,"tag":79,"props":1665,"children":1666},{"style":139},[1667],{"type":37,"value":255},{"type":32,"tag":79,"props":1669,"children":1670},{"style":92},[1671],{"type":37,"value":1672},"'Cache purged'",{"type":32,"tag":79,"props":1674,"children":1675},{"style":139},[1676],{"type":37,"value":1677},", { status: ",{"type":32,"tag":79,"props":1679,"children":1680},{"style":287},[1681],{"type":37,"value":1682},"200",{"type":32,"tag":79,"props":1684,"children":1685},{"style":139},[1686],{"type":37,"value":1687}," });\n",{"type":32,"tag":79,"props":1689,"children":1690},{"class":81,"line":315},[1691],{"type":32,"tag":79,"props":1692,"children":1693},{"style":139},[1694],{"type":37,"value":339},{"type":32,"tag":79,"props":1696,"children":1697},{"class":81,"line":324},[1698],{"type":32,"tag":79,"props":1699,"children":1700},{"style":139},[1701],{"type":37,"value":1702},"};\n",{"type":32,"tag":33,"props":1704,"children":1705},{},[1706],{"type":37,"value":1707},"Admin-Panel Preis-Update → Webhook → Cloudflare Worker → KV Delete. Edge Cache TTL bleibt erhalten, nur betroffene Produkte invalidieren.",{"type":32,"tag":49,"props":1709,"children":1711},{"id":1710},"performance-monitoring-und-regression-prevention",[1712],{"type":37,"value":1713},"Performance-Monitoring und Regression Prevention",{"type":32,"tag":33,"props":1715,"children":1716},{},[1717],{"type":37,"value":1718},"Für RUM (Real User Monitoring) kombinierten wir Cloudflare Web Analytics mit Custom Navigation Timing Beacon:",{"type":32,"tag":69,"props":1720,"children":1722},{"code":1721,"language":117,"meta":16,"className":118,"style":16},"\u002F\u002F plugins\u002Fanalytics.client.ts\nexport default defineNuxtPlugin(() => {\n  if (typeof window !== 'undefined') {\n    window.addEventListener('load', () => {\n      const perfData = performance.getEntriesByType('navigation')[0];\n      const lcp = performance.getEntriesByType('largest-contentful-paint')[0];\n      \n      fetch('\u002Fapi\u002Fperf', {\n        method: 'POST',\n        body: JSON.stringify({\n          ttfb: perfData.responseStart - perfData.requestStart,\n          fcp: perfData.domContentLoadedEventEnd - perfData.fetchStart,\n          lcp: lcp?.renderTime || 0,\n          pathname: window.location.pathname\n        })\n      });\n    });\n  }\n});\n",[1723],{"type":32,"tag":40,"props":1724,"children":1725},{"__ignoreMap":16},[1726,1734,1762,1798,1833,1883,1928,1936,1958,1976,2002,2020,2037,2059,2067,2075,2083,2091,2098],{"type":32,"tag":79,"props":1727,"children":1728},{"class":81,"line":82},[1729],{"type":32,"tag":79,"props":1730,"children":1731},{"style":411},[1732],{"type":37,"value":1733},"\u002F\u002F plugins\u002Fanalytics.client.ts\n",{"type":32,"tag":79,"props":1735,"children":1736},{"class":81,"line":189},[1737,1741,1745,1749,1754,1758],{"type":32,"tag":79,"props":1738,"children":1739},{"style":128},[1740],{"type":37,"value":171},{"type":32,"tag":79,"props":1742,"children":1743},{"style":128},[1744],{"type":37,"value":176},{"type":32,"tag":79,"props":1746,"children":1747},{"style":86},[1748],{"type":37,"value":518},{"type":32,"tag":79,"props":1750,"children":1751},{"style":139},[1752],{"type":37,"value":1753},"(() ",{"type":32,"tag":79,"props":1755,"children":1756},{"style":128},[1757],{"type":37,"value":539},{"type":32,"tag":79,"props":1759,"children":1760},{"style":139},[1761],{"type":37,"value":544},{"type":32,"tag":79,"props":1763,"children":1764},{"class":81,"line":208},[1765,1770,1774,1779,1784,1789,1794],{"type":32,"tag":79,"props":1766,"children":1767},{"style":128},[1768],{"type":37,"value":1769},"  if",{"type":32,"tag":79,"props":1771,"children":1772},{"style":139},[1773],{"type":37,"value":587},{"type":32,"tag":79,"props":1775,"children":1776},{"style":128},[1777],{"type":37,"value":1778},"typeof",{"type":32,"tag":79,"props":1780,"children":1781},{"style":139},[1782],{"type":37,"value":1783}," window ",{"type":32,"tag":79,"props":1785,"children":1786},{"style":128},[1787],{"type":37,"value":1788},"!==",{"type":32,"tag":79,"props":1790,"children":1791},{"style":92},[1792],{"type":37,"value":1793}," 'undefined'",{"type":32,"tag":79,"props":1795,"children":1796},{"style":139},[1797],{"type":37,"value":612},{"type":32,"tag":79,"props":1799,"children":1800},{"class":81,"line":217},[1801,1806,1811,1815,1820,1825,1829],{"type":32,"tag":79,"props":1802,"children":1803},{"style":139},[1804],{"type":37,"value":1805},"    window.",{"type":32,"tag":79,"props":1807,"children":1808},{"style":86},[1809],{"type":37,"value":1810},"addEventListener",{"type":32,"tag":79,"props":1812,"children":1813},{"style":139},[1814],{"type":37,"value":255},{"type":32,"tag":79,"props":1816,"children":1817},{"style":92},[1818],{"type":37,"value":1819},"'load'",{"type":32,"tag":79,"props":1821,"children":1822},{"style":139},[1823],{"type":37,"value":1824},", () ",{"type":32,"tag":79,"props":1826,"children":1827},{"style":128},[1828],{"type":37,"value":539},{"type":32,"tag":79,"props":1830,"children":1831},{"style":139},[1832],{"type":37,"value":544},{"type":32,"tag":79,"props":1834,"children":1835},{"class":81,"line":226},[1836,1841,1846,1850,1855,1860,1864,1869,1874,1878],{"type":32,"tag":79,"props":1837,"children":1838},{"style":128},[1839],{"type":37,"value":1840},"      const",{"type":32,"tag":79,"props":1842,"children":1843},{"style":287},[1844],{"type":37,"value":1845}," perfData",{"type":32,"tag":79,"props":1847,"children":1848},{"style":128},[1849],{"type":37,"value":630},{"type":32,"tag":79,"props":1851,"children":1852},{"style":139},[1853],{"type":37,"value":1854}," performance.",{"type":32,"tag":79,"props":1856,"children":1857},{"style":86},[1858],{"type":37,"value":1859},"getEntriesByType",{"type":32,"tag":79,"props":1861,"children":1862},{"style":139},[1863],{"type":37,"value":255},{"type":32,"tag":79,"props":1865,"children":1866},{"style":92},[1867],{"type":37,"value":1868},"'navigation'",{"type":32,"tag":79,"props":1870,"children":1871},{"style":139},[1872],{"type":37,"value":1873},")[",{"type":32,"tag":79,"props":1875,"children":1876},{"style":287},[1877],{"type":37,"value":1047},{"type":32,"tag":79,"props":1879,"children":1880},{"style":139},[1881],{"type":37,"value":1882},"];\n",{"type":32,"tag":79,"props":1884,"children":1885},{"class":81,"line":235},[1886,1890,1895,1899,1903,1907,1911,1916,1920,1924],{"type":32,"tag":79,"props":1887,"children":1888},{"style":128},[1889],{"type":37,"value":1840},{"type":32,"tag":79,"props":1891,"children":1892},{"style":287},[1893],{"type":37,"value":1894}," lcp",{"type":32,"tag":79,"props":1896,"children":1897},{"style":128},[1898],{"type":37,"value":630},{"type":32,"tag":79,"props":1900,"children":1901},{"style":139},[1902],{"type":37,"value":1854},{"type":32,"tag":79,"props":1904,"children":1905},{"style":86},[1906],{"type":37,"value":1859},{"type":32,"tag":79,"props":1908,"children":1909},{"style":139},[1910],{"type":37,"value":255},{"type":32,"tag":79,"props":1912,"children":1913},{"style":92},[1914],{"type":37,"value":1915},"'largest-contentful-paint'",{"type":32,"tag":79,"props":1917,"children":1918},{"style":139},[1919],{"type":37,"value":1873},{"type":32,"tag":79,"props":1921,"children":1922},{"style":287},[1923],{"type":37,"value":1047},{"type":32,"tag":79,"props":1925,"children":1926},{"style":139},[1927],{"type":37,"value":1882},{"type":32,"tag":79,"props":1929,"children":1930},{"class":81,"line":244},[1931],{"type":32,"tag":79,"props":1932,"children":1933},{"style":139},[1934],{"type":37,"value":1935},"      \n",{"type":32,"tag":79,"props":1937,"children":1938},{"class":81,"line":268},[1939,1944,1948,1953],{"type":32,"tag":79,"props":1940,"children":1941},{"style":86},[1942],{"type":37,"value":1943},"      fetch",{"type":32,"tag":79,"props":1945,"children":1946},{"style":139},[1947],{"type":37,"value":255},{"type":32,"tag":79,"props":1949,"children":1950},{"style":92},[1951],{"type":37,"value":1952},"'\u002Fapi\u002Fperf'",{"type":32,"tag":79,"props":1954,"children":1955},{"style":139},[1956],{"type":37,"value":1957},", {\n",{"type":32,"tag":79,"props":1959,"children":1960},{"class":81,"line":26},[1961,1966,1971],{"type":32,"tag":79,"props":1962,"children":1963},{"style":139},[1964],{"type":37,"value":1965},"        method: ",{"type":32,"tag":79,"props":1967,"children":1968},{"style":92},[1969],{"type":37,"value":1970},"'POST'",{"type":32,"tag":79,"props":1972,"children":1973},{"style":139},[1974],{"type":37,"value":1975},",\n",{"type":32,"tag":79,"props":1977,"children":1978},{"class":81,"line":306},[1979,1984,1989,1993,1998],{"type":32,"tag":79,"props":1980,"children":1981},{"style":139},[1982],{"type":37,"value":1983},"        body: ",{"type":32,"tag":79,"props":1985,"children":1986},{"style":287},[1987],{"type":37,"value":1988},"JSON",{"type":32,"tag":79,"props":1990,"children":1991},{"style":139},[1992],{"type":37,"value":721},{"type":32,"tag":79,"props":1994,"children":1995},{"style":86},[1996],{"type":37,"value":1997},"stringify",{"type":32,"tag":79,"props":1999,"children":2000},{"style":139},[2001],{"type":37,"value":186},{"type":32,"tag":79,"props":2003,"children":2004},{"class":81,"line":315},[2005,2010,2015],{"type":32,"tag":79,"props":2006,"children":2007},{"style":139},[2008],{"type":37,"value":2009},"          ttfb: perfData.responseStart ",{"type":32,"tag":79,"props":2011,"children":2012},{"style":128},[2013],{"type":37,"value":2014},"-",{"type":32,"tag":79,"props":2016,"children":2017},{"style":139},[2018],{"type":37,"value":2019}," perfData.requestStart,\n",{"type":32,"tag":79,"props":2021,"children":2022},{"class":81,"line":324},[2023,2028,2032],{"type":32,"tag":79,"props":2024,"children":2025},{"style":139},[2026],{"type":37,"value":2027},"          fcp: perfData.domContentLoadedEventEnd ",{"type":32,"tag":79,"props":2029,"children":2030},{"style":128},[2031],{"type":37,"value":2014},{"type":32,"tag":79,"props":2033,"children":2034},{"style":139},[2035],{"type":37,"value":2036}," perfData.fetchStart,\n",{"type":32,"tag":79,"props":2038,"children":2039},{"class":81,"line":333},[2040,2045,2050,2055],{"type":32,"tag":79,"props":2041,"children":2042},{"style":139},[2043],{"type":37,"value":2044},"          lcp: lcp?.renderTime ",{"type":32,"tag":79,"props":2046,"children":2047},{"style":128},[2048],{"type":37,"value":2049},"||",{"type":32,"tag":79,"props":2051,"children":2052},{"style":287},[2053],{"type":37,"value":2054}," 0",{"type":32,"tag":79,"props":2056,"children":2057},{"style":139},[2058],{"type":37,"value":1975},{"type":32,"tag":79,"props":2060,"children":2061},{"class":81,"line":342},[2062],{"type":32,"tag":79,"props":2063,"children":2064},{"style":139},[2065],{"type":37,"value":2066},"          pathname: window.location.pathname\n",{"type":32,"tag":79,"props":2068,"children":2069},{"class":81,"line":801},[2070],{"type":32,"tag":79,"props":2071,"children":2072},{"style":139},[2073],{"type":37,"value":2074},"        })\n",{"type":32,"tag":79,"props":2076,"children":2077},{"class":81,"line":809},[2078],{"type":32,"tag":79,"props":2079,"children":2080},{"style":139},[2081],{"type":37,"value":2082},"      });\n",{"type":32,"tag":79,"props":2084,"children":2085},{"class":81,"line":817},[2086],{"type":32,"tag":79,"props":2087,"children":2088},{"style":139},[2089],{"type":37,"value":2090},"    });\n",{"type":32,"tag":79,"props":2092,"children":2093},{"class":81,"line":826},[2094],{"type":32,"tag":79,"props":2095,"children":2096},{"style":139},[2097],{"type":37,"value":339},{"type":32,"tag":79,"props":2099,"children":2101},{"class":81,"line":2100},19,[2102],{"type":32,"tag":79,"props":2103,"children":2104},{"style":139},[2105],{"type":37,"value":348},{"type":32,"tag":33,"props":2107,"children":2108},{},[2109],{"type":37,"value":2110},"BigQuery speichert tägliche P75-LCP. Überschreitung von 2,5s triggert Slack-Alert. CI\u002FCD nutzt Lighthouse CI für Regression-Checks:",{"type":32,"tag":69,"props":2112,"children":2116},{"code":2113,"language":2114,"meta":16,"className":2115,"style":16},"# .github\u002Fworkflows\u002Flighthouse.yml\n- name: Lighthouse CI\n  run: |\n    npm install -g @lhci\u002Fcli\n    lhci autorun --config=.\u002Flighthouserc.json\n","yaml","language-yaml shiki shiki-themes github-dark",[2117],{"type":32,"tag":40,"props":2118,"children":2119},{"__ignoreMap":16},[2120,2128,2150,2167,2175],{"type":32,"tag":79,"props":2121,"children":2122},{"class":81,"line":82},[2123],{"type":32,"tag":79,"props":2124,"children":2125},{"style":411},[2126],{"type":37,"value":2127},"# .github\u002Fworkflows\u002Flighthouse.yml\n",{"type":32,"tag":79,"props":2129,"children":2130},{"class":81,"line":189},[2131,2136,2141,2145],{"type":32,"tag":79,"props":2132,"children":2133},{"style":139},[2134],{"type":37,"value":2135},"- ",{"type":32,"tag":79,"props":2137,"children":2138},{"style":425},[2139],{"type":37,"value":2140},"name",{"type":32,"tag":79,"props":2142,"children":2143},{"style":139},[2144],{"type":37,"value":284},{"type":32,"tag":79,"props":2146,"children":2147},{"style":92},[2148],{"type":37,"value":2149},"Lighthouse CI\n",{"type":32,"tag":79,"props":2151,"children":2152},{"class":81,"line":208},[2153,2158,2162],{"type":32,"tag":79,"props":2154,"children":2155},{"style":425},[2156],{"type":37,"value":2157},"  run",{"type":32,"tag":79,"props":2159,"children":2160},{"style":139},[2161],{"type":37,"value":284},{"type":32,"tag":79,"props":2163,"children":2164},{"style":128},[2165],{"type":37,"value":2166},"|\n",{"type":32,"tag":79,"props":2168,"children":2169},{"class":81,"line":217},[2170],{"type":32,"tag":79,"props":2171,"children":2172},{"style":92},[2173],{"type":37,"value":2174},"    npm install -g @lhci\u002Fcli\n",{"type":32,"tag":79,"props":2176,"children":2177},{"class":81,"line":226},[2178],{"type":32,"tag":79,"props":2179,"children":2180},{"style":92},[2181],{"type":37,"value":2182},"    lhci autorun --config=.\u002Flighthouserc.json\n",{"type":32,"tag":33,"props":2184,"children":2185},{},[2186,2192],{"type":32,"tag":40,"props":2187,"children":2189},{"className":2188},[],[2190],{"type":37,"value":2191},"lighthouserc.json",{"type":37,"value":2193}," mit LCP Assertion:",{"type":32,"tag":69,"props":2195,"children":2199},{"code":2196,"language":2197,"meta":16,"className":2198,"style":16},"{\n  \"ci\": {\n    \"assert\": {\n      \"assertions\": {\n        \"largest-contentful-paint\": [\"error\", { \"maxNumericValue\": 2500 }]\n      }\n    }\n  }\n}\n","json","language-json shiki shiki-themes github-dark",[2200],{"type":32,"tag":40,"props":2201,"children":2202},{"__ignoreMap":16},[2203,2211,2224,2236,2248,2290,2297,2304,2311],{"type":32,"tag":79,"props":2204,"children":2205},{"class":81,"line":82},[2206],{"type":32,"tag":79,"props":2207,"children":2208},{"style":139},[2209],{"type":37,"value":2210},"{\n",{"type":32,"tag":79,"props":2212,"children":2213},{"class":81,"line":189},[2214,2219],{"type":32,"tag":79,"props":2215,"children":2216},{"style":287},[2217],{"type":37,"value":2218},"  \"ci\"",{"type":32,"tag":79,"props":2220,"children":2221},{"style":139},[2222],{"type":37,"value":2223},": {\n",{"type":32,"tag":79,"props":2225,"children":2226},{"class":81,"line":208},[2227,2232],{"type":32,"tag":79,"props":2228,"children":2229},{"style":287},[2230],{"type":37,"value":2231},"    \"assert\"",{"type":32,"tag":79,"props":2233,"children":2234},{"style":139},[2235],{"type":37,"value":2223},{"type":32,"tag":79,"props":2237,"children":2238},{"class":81,"line":217},[2239,2244],{"type":32,"tag":79,"props":2240,"children":2241},{"style":287},[2242],{"type":37,"value":2243},"      \"assertions\"",{"type":32,"tag":79,"props":2245,"children":2246},{"style":139},[2247],{"type":37,"value":2223},{"type":32,"tag":79,"props":2249,"children":2250},{"class":81,"line":226},[2251,2256,2261,2266,2271,2276,2280,2285],{"type":32,"tag":79,"props":2252,"children":2253},{"style":287},[2254],{"type":37,"value":2255},"        \"largest-contentful-paint\"",{"type":32,"tag":79,"props":2257,"children":2258},{"style":139},[2259],{"type":37,"value":2260},": [",{"type":32,"tag":79,"props":2262,"children":2263},{"style":92},[2264],{"type":37,"value":2265},"\"error\"",{"type":32,"tag":79,"props":2267,"children":2268},{"style":139},[2269],{"type":37,"value":2270},", { ",{"type":32,"tag":79,"props":2272,"children":2273},{"style":287},[2274],{"type":37,"value":2275},"\"maxNumericValue\"",{"type":32,"tag":79,"props":2277,"children":2278},{"style":139},[2279],{"type":37,"value":284},{"type":32,"tag":79,"props":2281,"children":2282},{"style":287},[2283],{"type":37,"value":2284},"2500",{"type":32,"tag":79,"props":2286,"children":2287},{"style":139},[2288],{"type":37,"value":2289}," }]\n",{"type":32,"tag":79,"props":2291,"children":2292},{"class":81,"line":235},[2293],{"type":32,"tag":79,"props":2294,"children":2295},{"style":139},[2296],{"type":37,"value":321},{"type":32,"tag":79,"props":2298,"children":2299},{"class":81,"line":244},[2300],{"type":32,"tag":79,"props":2301,"children":2302},{"style":139},[2303],{"type":37,"value":330},{"type":32,"tag":79,"props":2305,"children":2306},{"class":81,"line":268},[2307],{"type":32,"tag":79,"props":2308,"children":2309},{"style":139},[2310],{"type":37,"value":339},{"type":32,"tag":79,"props":2312,"children":2313},{"class":81,"line":26},[2314],{"type":32,"tag":79,"props":2315,"children":2316},{"style":139},[2317],{"type":37,"value":1069},{"type":32,"tag":33,"props":2319,"children":2320},{},[2321],{"type":37,"value":2322},"Build schlägt fehl, falls LCP über 2,5s liegt. Regressions-Schutz in Production.",{"type":32,"tag":49,"props":2324,"children":2326},{"id":2325},"tradeoffs-und-edge-cases",[2327],{"type":37,"value":2328},"Tradeoffs und Edge Cases",{"type":32,"tag":33,"props":2330,"children":2331},{},[2332,2334,2340],{"type":37,"value":2333},"Lazy Hydration hängt von Scroll-Position ab. Schnelles Scrollen kann Hydration-Verzögerung beeinträchtigen. Mitigation: Intersection Observer mit ",{"type":32,"tag":40,"props":2335,"children":2337},{"className":2336},[],[2338],{"type":37,"value":2339},"rootMargin: '100px'",{"type":37,"value":2341}," triggert 100px vor Eintritt ins Viewport.",{"type":32,"tag":33,"props":2343,"children":2344},{},[2345,2350,2352,2358,2359,2364],{"type":32,"tag":40,"props":2346,"children":2348},{"className":2347},[],[2349],{"type":37,"value":45},{"type":37,"value":2351}," kann in Grid-Layouts bei Spalten-Anzahl-Änderung CLS erhöhen. Kombination aus fester ",{"type":32,"tag":40,"props":2353,"children":2355},{"className":2354},[],[2356],{"type":37,"value":2357},"grid-template-columns",{"type":37,"value":1376},{"type":32,"tag":40,"props":2360,"children":2362},{"className":2361},[],[2363],{"type":37,"value":1078},{"type":37,"value":2365}," ist obligatorisch.",{"type":32,"tag":33,"props":2367,"children":2368},{},[2369,2371,2376],{"type":37,"value":2370},"Edge Cache ",{"type":32,"tag":40,"props":2372,"children":2374},{"className":2373},[],[2375],{"type":37,"value":1414},{"type":37,"value":2377}," trägt Preis-Inkonsistenz-Risiko: Nutzer A sieht alte Preis, Nutzer B neue Preis. Abhängig vom Business-Requirement: E-Commerce toleriert 60 Sekunden Stale Window, Fintech nicht.",{"type":32,"tag":33,"props":2379,"children":2380},{},[2381],{"type":37,"value":2382},"Self-gehostete Fonts erfordern Lizenz-Kontrolle. Google Fonts nutzt SIL Open Font License (frei), kommerzielle Fonts erfordern Lizenz-Überprüfung.",{"type":32,"tag":33,"props":2384,"children":2385},{},[2386],{"type":37,"value":2387},"Diese vier Maßnahmen verbesserten LCP um 80%. Nuxt 3's Vue 3 Reactivity-System eignet sich ideal für Lazy Hydration. Cloudflare Pages als CDN ist ausreichend, für dynamische Inhalte ist KV + Workers-Kombination notwendig für Cache-Granularität. RUM + Lighthouse CI sind für Production-Regression-Prevention unverzichtbar.",{"type":32,"tag":2389,"props":2390,"children":2391},"style",{},[2392],{"type":37,"value":2393},"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":208,"depth":208,"links":2395},[2396,2397,2400,2401,2404,2405],{"id":51,"depth":189,"text":54},{"id":369,"depth":189,"text":372,"children":2398},[2399],{"id":853,"depth":208,"text":856},{"id":972,"depth":189,"text":975},{"id":1336,"depth":189,"text":1339,"children":2402},[2403],{"id":1419,"depth":208,"text":1422},{"id":1710,"depth":189,"text":1713},{"id":2325,"depth":189,"text":2328},"markdown","content:de:tech:nuxt-3-cloudflare-pages-lcp-verbesserung.md","content","de\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-verbesserung.md","de\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-verbesserung","md",1782079489141]