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