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