[{"data":1,"prerenderedAt":2431},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fnuxt-3-cloudflare-pages-optimisation-lcp":11},{"i18nKey":4,"paths":5},"tech-001-2026-05",{"de":6,"es":7,"fr":8,"it":9,"ru":10},"\u002Fde\u002Ftech\u002Fnuxt3-cloudflare-pages-lcp-optimierung","\u002Fes\u002Ftech\u002Fnuxt3-cloudflare-pages-lcp-optimizacion","\u002Ffr\u002Ftech\u002Fnuxt-3-cloudflare-pages-optimisation-lcp","\u002Fit\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-10s-a-2s","\u002Fru\u002Ftech\u002Fnuxt-3-cloudflare-pages-lcp-optimizatsiya",{"_path":8,"_dir":12,"_draft":13,"_partial":13,"_locale":14,"title":15,"description":16,"publishedAt":17,"modifiedAt":17,"category":12,"i18nKey":4,"tags":18,"readingTime":24,"author":25,"body":26,"_type":2425,"_id":2426,"_source":2427,"_file":2428,"_stem":2429,"_extension":2430},"tech",false,"","Nuxt 3 + Cloudflare Pages : 10s LCP en 2s","Polices auto-hébergées, hydratation lazy, content-visibility et cache edge : nous avons réduit le LCP de 80 % sur un projet Nuxt 3. Code concret et chiffres.","2026-05-28",[19,20,21,22,23],"nuxt3","web-performance","cloudflare-pages","core-web-vitals","edge-computing",9,"Roibase",{"type":27,"children":28,"toc":2411},"root",[29,46,53,74,95,406,411,733,746,752,765,772,785,1240,1261,1267,1304,1408,1421,1427,1440,1530,1541,1547,1559,1567,1587,1593,1605,1752,1757,2126,2132,2308,2313,2319,2332,2358,2363,2369,2392,2405],{"type":30,"tag":31,"props":32,"children":33},"element","p",{},[34,37,44],{"type":35,"value":36},"text","La combinaison Cloudflare Pages + Nuxt 3 promet un cache edge et un déploiement zéro-config, mais elle ne suffit pas pour les Core Web Vitals. Sur un projet e-commerce en production, le LCP atteignait 10,2 secondes et le TBT 2190 millisecondes. Google Fonts, l'hydratation côté client, le CSS global et le rendu JavaScript synchrone bloquaient le rendu critique. Avec des polices auto-hébergées, l'hydratation lazy, la propriété CSS ",{"type":30,"tag":38,"props":39,"children":41},"code",{"className":40},[],[42],{"type":35,"value":43},"content-visibility",{"type":35,"value":45}," et une stratégie de cache edge, nous avons réduit le LCP à 2,1 secondes et le TBT à 180 millisecondes. Cet article détaille l'implémentation étape par étape et les compromis acceptés.",{"type":30,"tag":47,"props":48,"children":50},"h2",{"id":49},"google-fonts-perte-de-38s-due-au-blocage-du-rendu",[51],{"type":35,"value":52},"Google Fonts : perte de 3,8s due au blocage du rendu",{"type":30,"tag":31,"props":54,"children":55},{},[56,58,64,66,72],{"type":35,"value":57},"Les polices importées depuis le CDN Google Fonts via ",{"type":30,"tag":38,"props":59,"children":61},{"className":60},[],[62],{"type":35,"value":63},"@import",{"type":35,"value":65}," ou ",{"type":30,"tag":38,"props":67,"children":69},{"className":68},[],[70],{"type":35,"value":71},"\u003Clink>",{"type":35,"value":73}," bloquent le rendu. Le risque FOIT (Flash of Invisible Text) et les 3+ allers-retours de latence impactent directement le LCP. Chrome DevTools Lighthouse signalait « Éliminer les ressources bloquant le rendu » avec une perte estimée à 3,8 secondes.",{"type":30,"tag":31,"props":75,"children":76},{},[77,79,85,87,93],{"type":35,"value":78},"Solution : nous avons auto-hébergé les polices. En utilisant le paquet npm ",{"type":30,"tag":38,"props":80,"children":82},{"className":81},[],[83],{"type":35,"value":84},"@fontsource\u002Finter",{"type":35,"value":86},", nous avons placé les fichiers Woff2 dans le répertoire ",{"type":30,"tag":38,"props":88,"children":90},{"className":89},[],[91],{"type":35,"value":92},"public\u002Ffonts",{"type":35,"value":94},". Puis nous avons ajouté des directives de préchargement dans la config Nuxt :",{"type":30,"tag":96,"props":97,"children":101},"pre",{"code":98,"language":99,"meta":14,"className":100,"style":14},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  app: {\n    head: {\n      link: [\n        {\n          rel: 'preload',\n          as: 'font',\n          type: 'font\u002Fwoff2',\n          href: '\u002Ffonts\u002Finter-latin-400-normal.woff2',\n          crossorigin: 'anonymous'\n        },\n        {\n          rel: 'preload',\n          as: 'font',\n          type: 'font\u002Fwoff2',\n          href: '\u002Ffonts\u002Finter-latin-600-normal.woff2',\n          crossorigin: 'anonymous'\n        }\n      ]\n    }\n  }\n})\n","typescript","language-typescript shiki shiki-themes github-dark",[102],{"type":30,"tag":38,"props":103,"children":104},{"__ignoreMap":14},[105,117,144,153,162,171,180,200,218,235,253,267,276,284,300,316,332,349,361,370,379,388,397],{"type":30,"tag":106,"props":107,"children":110},"span",{"class":108,"line":109},"line",1,[111],{"type":30,"tag":106,"props":112,"children":114},{"style":113},"--shiki-default:#6A737D",[115],{"type":35,"value":116},"\u002F\u002F nuxt.config.ts\n",{"type":30,"tag":106,"props":118,"children":120},{"class":108,"line":119},2,[121,127,132,138],{"type":30,"tag":106,"props":122,"children":124},{"style":123},"--shiki-default:#F97583",[125],{"type":35,"value":126},"export",{"type":30,"tag":106,"props":128,"children":129},{"style":123},[130],{"type":35,"value":131}," default",{"type":30,"tag":106,"props":133,"children":135},{"style":134},"--shiki-default:#B392F0",[136],{"type":35,"value":137}," defineNuxtConfig",{"type":30,"tag":106,"props":139,"children":141},{"style":140},"--shiki-default:#E1E4E8",[142],{"type":35,"value":143},"({\n",{"type":30,"tag":106,"props":145,"children":147},{"class":108,"line":146},3,[148],{"type":30,"tag":106,"props":149,"children":150},{"style":140},[151],{"type":35,"value":152},"  app: {\n",{"type":30,"tag":106,"props":154,"children":156},{"class":108,"line":155},4,[157],{"type":30,"tag":106,"props":158,"children":159},{"style":140},[160],{"type":35,"value":161},"    head: {\n",{"type":30,"tag":106,"props":163,"children":165},{"class":108,"line":164},5,[166],{"type":30,"tag":106,"props":167,"children":168},{"style":140},[169],{"type":35,"value":170},"      link: [\n",{"type":30,"tag":106,"props":172,"children":174},{"class":108,"line":173},6,[175],{"type":30,"tag":106,"props":176,"children":177},{"style":140},[178],{"type":35,"value":179},"        {\n",{"type":30,"tag":106,"props":181,"children":183},{"class":108,"line":182},7,[184,189,195],{"type":30,"tag":106,"props":185,"children":186},{"style":140},[187],{"type":35,"value":188},"          rel: ",{"type":30,"tag":106,"props":190,"children":192},{"style":191},"--shiki-default:#9ECBFF",[193],{"type":35,"value":194},"'preload'",{"type":30,"tag":106,"props":196,"children":197},{"style":140},[198],{"type":35,"value":199},",\n",{"type":30,"tag":106,"props":201,"children":203},{"class":108,"line":202},8,[204,209,214],{"type":30,"tag":106,"props":205,"children":206},{"style":140},[207],{"type":35,"value":208},"          as: ",{"type":30,"tag":106,"props":210,"children":211},{"style":191},[212],{"type":35,"value":213},"'font'",{"type":30,"tag":106,"props":215,"children":216},{"style":140},[217],{"type":35,"value":199},{"type":30,"tag":106,"props":219,"children":220},{"class":108,"line":24},[221,226,231],{"type":30,"tag":106,"props":222,"children":223},{"style":140},[224],{"type":35,"value":225},"          type: ",{"type":30,"tag":106,"props":227,"children":228},{"style":191},[229],{"type":35,"value":230},"'font\u002Fwoff2'",{"type":30,"tag":106,"props":232,"children":233},{"style":140},[234],{"type":35,"value":199},{"type":30,"tag":106,"props":236,"children":238},{"class":108,"line":237},10,[239,244,249],{"type":30,"tag":106,"props":240,"children":241},{"style":140},[242],{"type":35,"value":243},"          href: ",{"type":30,"tag":106,"props":245,"children":246},{"style":191},[247],{"type":35,"value":248},"'\u002Ffonts\u002Finter-latin-400-normal.woff2'",{"type":30,"tag":106,"props":250,"children":251},{"style":140},[252],{"type":35,"value":199},{"type":30,"tag":106,"props":254,"children":256},{"class":108,"line":255},11,[257,262],{"type":30,"tag":106,"props":258,"children":259},{"style":140},[260],{"type":35,"value":261},"          crossorigin: ",{"type":30,"tag":106,"props":263,"children":264},{"style":191},[265],{"type":35,"value":266},"'anonymous'\n",{"type":30,"tag":106,"props":268,"children":270},{"class":108,"line":269},12,[271],{"type":30,"tag":106,"props":272,"children":273},{"style":140},[274],{"type":35,"value":275},"        },\n",{"type":30,"tag":106,"props":277,"children":279},{"class":108,"line":278},13,[280],{"type":30,"tag":106,"props":281,"children":282},{"style":140},[283],{"type":35,"value":179},{"type":30,"tag":106,"props":285,"children":287},{"class":108,"line":286},14,[288,292,296],{"type":30,"tag":106,"props":289,"children":290},{"style":140},[291],{"type":35,"value":188},{"type":30,"tag":106,"props":293,"children":294},{"style":191},[295],{"type":35,"value":194},{"type":30,"tag":106,"props":297,"children":298},{"style":140},[299],{"type":35,"value":199},{"type":30,"tag":106,"props":301,"children":303},{"class":108,"line":302},15,[304,308,312],{"type":30,"tag":106,"props":305,"children":306},{"style":140},[307],{"type":35,"value":208},{"type":30,"tag":106,"props":309,"children":310},{"style":191},[311],{"type":35,"value":213},{"type":30,"tag":106,"props":313,"children":314},{"style":140},[315],{"type":35,"value":199},{"type":30,"tag":106,"props":317,"children":319},{"class":108,"line":318},16,[320,324,328],{"type":30,"tag":106,"props":321,"children":322},{"style":140},[323],{"type":35,"value":225},{"type":30,"tag":106,"props":325,"children":326},{"style":191},[327],{"type":35,"value":230},{"type":30,"tag":106,"props":329,"children":330},{"style":140},[331],{"type":35,"value":199},{"type":30,"tag":106,"props":333,"children":335},{"class":108,"line":334},17,[336,340,345],{"type":30,"tag":106,"props":337,"children":338},{"style":140},[339],{"type":35,"value":243},{"type":30,"tag":106,"props":341,"children":342},{"style":191},[343],{"type":35,"value":344},"'\u002Ffonts\u002Finter-latin-600-normal.woff2'",{"type":30,"tag":106,"props":346,"children":347},{"style":140},[348],{"type":35,"value":199},{"type":30,"tag":106,"props":350,"children":352},{"class":108,"line":351},18,[353,357],{"type":30,"tag":106,"props":354,"children":355},{"style":140},[356],{"type":35,"value":261},{"type":30,"tag":106,"props":358,"children":359},{"style":191},[360],{"type":35,"value":266},{"type":30,"tag":106,"props":362,"children":364},{"class":108,"line":363},19,[365],{"type":30,"tag":106,"props":366,"children":367},{"style":140},[368],{"type":35,"value":369},"        }\n",{"type":30,"tag":106,"props":371,"children":373},{"class":108,"line":372},20,[374],{"type":30,"tag":106,"props":375,"children":376},{"style":140},[377],{"type":35,"value":378},"      ]\n",{"type":30,"tag":106,"props":380,"children":382},{"class":108,"line":381},21,[383],{"type":30,"tag":106,"props":384,"children":385},{"style":140},[386],{"type":35,"value":387},"    }\n",{"type":30,"tag":106,"props":389,"children":391},{"class":108,"line":390},22,[392],{"type":30,"tag":106,"props":393,"children":394},{"style":140},[395],{"type":35,"value":396},"  }\n",{"type":30,"tag":106,"props":398,"children":400},{"class":108,"line":399},23,[401],{"type":30,"tag":106,"props":402,"children":403},{"style":140},[404],{"type":35,"value":405},"})\n",{"type":30,"tag":31,"props":407,"children":408},{},[409],{"type":35,"value":410},"Nous avons défini les polices en CSS en limitant les variantes aux poids réellement utilisés :",{"type":30,"tag":96,"props":412,"children":416},{"code":413,"language":414,"meta":14,"className":415,"style":14},"\u002F* assets\u002Fcss\u002Ffonts.css *\u002F\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url('\u002Ffonts\u002Finter-latin-400-normal.woff2') format('woff2');\n}\n\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url('\u002Ffonts\u002Finter-latin-600-normal.woff2') format('woff2');\n}\n","css","language-css shiki shiki-themes github-dark",[417],{"type":30,"tag":38,"props":418,"children":419},{"__ignoreMap":14},[420,428,441,465,486,507,528,578,586,595,606,625,644,664,683,726],{"type":30,"tag":106,"props":421,"children":422},{"class":108,"line":109},[423],{"type":30,"tag":106,"props":424,"children":425},{"style":113},[426],{"type":35,"value":427},"\u002F* assets\u002Fcss\u002Ffonts.css *\u002F\n",{"type":30,"tag":106,"props":429,"children":430},{"class":108,"line":119},[431,436],{"type":30,"tag":106,"props":432,"children":433},{"style":123},[434],{"type":35,"value":435},"@font-face",{"type":30,"tag":106,"props":437,"children":438},{"style":140},[439],{"type":35,"value":440}," {\n",{"type":30,"tag":106,"props":442,"children":443},{"class":108,"line":146},[444,450,455,460],{"type":30,"tag":106,"props":445,"children":447},{"style":446},"--shiki-default:#79B8FF",[448],{"type":35,"value":449},"  font-family",{"type":30,"tag":106,"props":451,"children":452},{"style":140},[453],{"type":35,"value":454},": ",{"type":30,"tag":106,"props":456,"children":457},{"style":191},[458],{"type":35,"value":459},"'Inter'",{"type":30,"tag":106,"props":461,"children":462},{"style":140},[463],{"type":35,"value":464},";\n",{"type":30,"tag":106,"props":466,"children":467},{"class":108,"line":155},[468,473,477,482],{"type":30,"tag":106,"props":469,"children":470},{"style":446},[471],{"type":35,"value":472},"  font-style",{"type":30,"tag":106,"props":474,"children":475},{"style":140},[476],{"type":35,"value":454},{"type":30,"tag":106,"props":478,"children":479},{"style":446},[480],{"type":35,"value":481},"normal",{"type":30,"tag":106,"props":483,"children":484},{"style":140},[485],{"type":35,"value":464},{"type":30,"tag":106,"props":487,"children":488},{"class":108,"line":164},[489,494,498,503],{"type":30,"tag":106,"props":490,"children":491},{"style":446},[492],{"type":35,"value":493},"  font-weight",{"type":30,"tag":106,"props":495,"children":496},{"style":140},[497],{"type":35,"value":454},{"type":30,"tag":106,"props":499,"children":500},{"style":446},[501],{"type":35,"value":502},"400",{"type":30,"tag":106,"props":504,"children":505},{"style":140},[506],{"type":35,"value":464},{"type":30,"tag":106,"props":508,"children":509},{"class":108,"line":173},[510,515,519,524],{"type":30,"tag":106,"props":511,"children":512},{"style":446},[513],{"type":35,"value":514},"  font-display",{"type":30,"tag":106,"props":516,"children":517},{"style":140},[518],{"type":35,"value":454},{"type":30,"tag":106,"props":520,"children":521},{"style":446},[522],{"type":35,"value":523},"swap",{"type":30,"tag":106,"props":525,"children":526},{"style":140},[527],{"type":35,"value":464},{"type":30,"tag":106,"props":529,"children":530},{"class":108,"line":182},[531,536,540,545,550,554,559,564,568,573],{"type":30,"tag":106,"props":532,"children":533},{"style":446},[534],{"type":35,"value":535},"  src",{"type":30,"tag":106,"props":537,"children":538},{"style":140},[539],{"type":35,"value":454},{"type":30,"tag":106,"props":541,"children":542},{"style":446},[543],{"type":35,"value":544},"url",{"type":30,"tag":106,"props":546,"children":547},{"style":140},[548],{"type":35,"value":549},"(",{"type":30,"tag":106,"props":551,"children":552},{"style":191},[553],{"type":35,"value":248},{"type":30,"tag":106,"props":555,"children":556},{"style":140},[557],{"type":35,"value":558},") ",{"type":30,"tag":106,"props":560,"children":561},{"style":446},[562],{"type":35,"value":563},"format",{"type":30,"tag":106,"props":565,"children":566},{"style":140},[567],{"type":35,"value":549},{"type":30,"tag":106,"props":569,"children":570},{"style":191},[571],{"type":35,"value":572},"'woff2'",{"type":30,"tag":106,"props":574,"children":575},{"style":140},[576],{"type":35,"value":577},");\n",{"type":30,"tag":106,"props":579,"children":580},{"class":108,"line":202},[581],{"type":30,"tag":106,"props":582,"children":583},{"style":140},[584],{"type":35,"value":585},"}\n",{"type":30,"tag":106,"props":587,"children":588},{"class":108,"line":24},[589],{"type":30,"tag":106,"props":590,"children":592},{"emptyLinePlaceholder":591},true,[593],{"type":35,"value":594},"\n",{"type":30,"tag":106,"props":596,"children":597},{"class":108,"line":237},[598,602],{"type":30,"tag":106,"props":599,"children":600},{"style":123},[601],{"type":35,"value":435},{"type":30,"tag":106,"props":603,"children":604},{"style":140},[605],{"type":35,"value":440},{"type":30,"tag":106,"props":607,"children":608},{"class":108,"line":255},[609,613,617,621],{"type":30,"tag":106,"props":610,"children":611},{"style":446},[612],{"type":35,"value":449},{"type":30,"tag":106,"props":614,"children":615},{"style":140},[616],{"type":35,"value":454},{"type":30,"tag":106,"props":618,"children":619},{"style":191},[620],{"type":35,"value":459},{"type":30,"tag":106,"props":622,"children":623},{"style":140},[624],{"type":35,"value":464},{"type":30,"tag":106,"props":626,"children":627},{"class":108,"line":269},[628,632,636,640],{"type":30,"tag":106,"props":629,"children":630},{"style":446},[631],{"type":35,"value":472},{"type":30,"tag":106,"props":633,"children":634},{"style":140},[635],{"type":35,"value":454},{"type":30,"tag":106,"props":637,"children":638},{"style":446},[639],{"type":35,"value":481},{"type":30,"tag":106,"props":641,"children":642},{"style":140},[643],{"type":35,"value":464},{"type":30,"tag":106,"props":645,"children":646},{"class":108,"line":278},[647,651,655,660],{"type":30,"tag":106,"props":648,"children":649},{"style":446},[650],{"type":35,"value":493},{"type":30,"tag":106,"props":652,"children":653},{"style":140},[654],{"type":35,"value":454},{"type":30,"tag":106,"props":656,"children":657},{"style":446},[658],{"type":35,"value":659},"600",{"type":30,"tag":106,"props":661,"children":662},{"style":140},[663],{"type":35,"value":464},{"type":30,"tag":106,"props":665,"children":666},{"class":108,"line":286},[667,671,675,679],{"type":30,"tag":106,"props":668,"children":669},{"style":446},[670],{"type":35,"value":514},{"type":30,"tag":106,"props":672,"children":673},{"style":140},[674],{"type":35,"value":454},{"type":30,"tag":106,"props":676,"children":677},{"style":446},[678],{"type":35,"value":523},{"type":30,"tag":106,"props":680,"children":681},{"style":140},[682],{"type":35,"value":464},{"type":30,"tag":106,"props":684,"children":685},{"class":108,"line":302},[686,690,694,698,702,706,710,714,718,722],{"type":30,"tag":106,"props":687,"children":688},{"style":446},[689],{"type":35,"value":535},{"type":30,"tag":106,"props":691,"children":692},{"style":140},[693],{"type":35,"value":454},{"type":30,"tag":106,"props":695,"children":696},{"style":446},[697],{"type":35,"value":544},{"type":30,"tag":106,"props":699,"children":700},{"style":140},[701],{"type":35,"value":549},{"type":30,"tag":106,"props":703,"children":704},{"style":191},[705],{"type":35,"value":344},{"type":30,"tag":106,"props":707,"children":708},{"style":140},[709],{"type":35,"value":558},{"type":30,"tag":106,"props":711,"children":712},{"style":446},[713],{"type":35,"value":563},{"type":30,"tag":106,"props":715,"children":716},{"style":140},[717],{"type":35,"value":549},{"type":30,"tag":106,"props":719,"children":720},{"style":191},[721],{"type":35,"value":572},{"type":30,"tag":106,"props":723,"children":724},{"style":140},[725],{"type":35,"value":577},{"type":30,"tag":106,"props":727,"children":728},{"class":108,"line":318},[729],{"type":30,"tag":106,"props":730,"children":731},{"style":140},[732],{"type":35,"value":585},{"type":30,"tag":31,"props":734,"children":735},{},[736,738,744],{"type":35,"value":737},"Avec ",{"type":30,"tag":38,"props":739,"children":741},{"className":740},[],[742],{"type":35,"value":743},"font-display: swap",{"type":35,"value":745},", nous acceptons le compromis du FOUT (Flash of Unstyled Text) : la police système s'affiche rapidement, puis la police personnalisée la remplace dès qu'elle est disponible. Le LCP a chuté à 6,4 secondes. L'augmentation de la taille du bundle (72 Ko en Woff2 compressé) est largement compensée par le gain de 3,8 secondes.",{"type":30,"tag":47,"props":747,"children":749},{"id":748},"hydratation-côté-client-tbt-à-2190ms",[750],{"type":35,"value":751},"Hydratation côté client : TBT à 2190ms",{"type":30,"tag":31,"props":753,"children":754},{},[755,757,763],{"type":35,"value":756},"Nuxt 3 hydrate par défaut tous les composants côté client. Avec 40+ composants dans ",{"type":30,"tag":38,"props":758,"children":760},{"className":759},[],[761],{"type":35,"value":762},"app.vue",{"type":35,"value":764},", un état global (Pinia), des composables et des bibliothèques tierces (Swiper, vue-gtag), le thread principal était bloqué. L'onglet Performance de Chrome DevTools montrait 8 « Long Tasks », la plus longue durant 1240 millisecondes.",{"type":30,"tag":766,"props":767,"children":769},"h3",{"id":768},"priorisation-avec-lhydratation-lazy",[770],{"type":35,"value":771},"Priorisation avec l'hydratation lazy",{"type":30,"tag":31,"props":773,"children":774},{},[775,777,783],{"type":35,"value":776},"Nous avons hydraté en différé les composants situés sous la ligne de flottaison. Après avoir activé le suivi avec le module ",{"type":30,"tag":38,"props":778,"children":780},{"className":779},[],[781],{"type":35,"value":782},"@nuxtjs\u002Fweb-vitals",{"type":35,"value":784},", nous avons identifié le chemin critique :",{"type":30,"tag":96,"props":786,"children":790},{"code":787,"language":788,"meta":14,"className":789,"style":14},"\u003C!-- pages\u002Findex.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- Au-dessus de la ligne de flottaison : hydratation immédiate -->\n    \u003CHeroSection \u002F>\n    \u003CProductGrid :products=\"products\" \u002F>\n\n    \u003C!-- Sous la ligne de flottaison : hydratation différée -->\n    \u003CLazyFooter v-if=\"mounted\" \u002F>\n    \u003CLazyNewsletterForm v-if=\"mounted\" \u002F>\n    \u003Cclient-only>\n      \u003CLazyReviewCarousel :reviews=\"reviews\" \u002F>\n    \u003C\u002Fclient-only>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst mounted = ref(false)\n\nonMounted(() => {\n  requestIdleCallback(() => {\n    mounted.value = true\n  })\n})\n\u003C\u002Fscript>\n","vue","language-vue shiki shiki-themes github-dark",[791],{"type":30,"tag":38,"props":792,"children":793},{"__ignoreMap":14},[794,802,821,838,846,864,895,902,910,940,968,984,1015,1031,1047,1063,1070,1105,1142,1149,1171,1191,1208,1216,1224],{"type":30,"tag":106,"props":795,"children":796},{"class":108,"line":109},[797],{"type":30,"tag":106,"props":798,"children":799},{"style":113},[800],{"type":35,"value":801},"\u003C!-- pages\u002Findex.vue -->\n",{"type":30,"tag":106,"props":803,"children":804},{"class":108,"line":119},[805,810,816],{"type":30,"tag":106,"props":806,"children":807},{"style":140},[808],{"type":35,"value":809},"\u003C",{"type":30,"tag":106,"props":811,"children":813},{"style":812},"--shiki-default:#85E89D",[814],{"type":35,"value":815},"template",{"type":30,"tag":106,"props":817,"children":818},{"style":140},[819],{"type":35,"value":820},">\n",{"type":30,"tag":106,"props":822,"children":823},{"class":108,"line":146},[824,829,834],{"type":30,"tag":106,"props":825,"children":826},{"style":140},[827],{"type":35,"value":828},"  \u003C",{"type":30,"tag":106,"props":830,"children":831},{"style":812},[832],{"type":35,"value":833},"div",{"type":30,"tag":106,"props":835,"children":836},{"style":140},[837],{"type":35,"value":820},{"type":30,"tag":106,"props":839,"children":840},{"class":108,"line":155},[841],{"type":30,"tag":106,"props":842,"children":843},{"style":113},[844],{"type":35,"value":845},"    \u003C!-- Au-dessus de la ligne de flottaison : hydratation immédiate -->\n",{"type":30,"tag":106,"props":847,"children":848},{"class":108,"line":164},[849,854,859],{"type":30,"tag":106,"props":850,"children":851},{"style":140},[852],{"type":35,"value":853},"    \u003C",{"type":30,"tag":106,"props":855,"children":856},{"style":812},[857],{"type":35,"value":858},"HeroSection",{"type":30,"tag":106,"props":860,"children":861},{"style":140},[862],{"type":35,"value":863}," \u002F>\n",{"type":30,"tag":106,"props":865,"children":866},{"class":108,"line":173},[867,871,876,881,886,891],{"type":30,"tag":106,"props":868,"children":869},{"style":140},[870],{"type":35,"value":853},{"type":30,"tag":106,"props":872,"children":873},{"style":812},[874],{"type":35,"value":875},"ProductGrid",{"type":30,"tag":106,"props":877,"children":878},{"style":134},[879],{"type":35,"value":880}," :products",{"type":30,"tag":106,"props":882,"children":883},{"style":140},[884],{"type":35,"value":885},"=",{"type":30,"tag":106,"props":887,"children":888},{"style":191},[889],{"type":35,"value":890},"\"products\"",{"type":30,"tag":106,"props":892,"children":893},{"style":140},[894],{"type":35,"value":863},{"type":30,"tag":106,"props":896,"children":897},{"class":108,"line":182},[898],{"type":30,"tag":106,"props":899,"children":900},{"emptyLinePlaceholder":591},[901],{"type":35,"value":594},{"type":30,"tag":106,"props":903,"children":904},{"class":108,"line":202},[905],{"type":30,"tag":106,"props":906,"children":907},{"style":113},[908],{"type":35,"value":909},"    \u003C!-- Sous la ligne de flottaison : hydratation différée -->\n",{"type":30,"tag":106,"props":911,"children":912},{"class":108,"line":24},[913,917,922,927,931,936],{"type":30,"tag":106,"props":914,"children":915},{"style":140},[916],{"type":35,"value":853},{"type":30,"tag":106,"props":918,"children":919},{"style":812},[920],{"type":35,"value":921},"LazyFooter",{"type":30,"tag":106,"props":923,"children":924},{"style":134},[925],{"type":35,"value":926}," v-if",{"type":30,"tag":106,"props":928,"children":929},{"style":140},[930],{"type":35,"value":885},{"type":30,"tag":106,"props":932,"children":933},{"style":191},[934],{"type":35,"value":935},"\"mounted\"",{"type":30,"tag":106,"props":937,"children":938},{"style":140},[939],{"type":35,"value":863},{"type":30,"tag":106,"props":941,"children":942},{"class":108,"line":237},[943,947,952,956,960,964],{"type":30,"tag":106,"props":944,"children":945},{"style":140},[946],{"type":35,"value":853},{"type":30,"tag":106,"props":948,"children":949},{"style":812},[950],{"type":35,"value":951},"LazyNewsletterForm",{"type":30,"tag":106,"props":953,"children":954},{"style":134},[955],{"type":35,"value":926},{"type":30,"tag":106,"props":957,"children":958},{"style":140},[959],{"type":35,"value":885},{"type":30,"tag":106,"props":961,"children":962},{"style":191},[963],{"type":35,"value":935},{"type":30,"tag":106,"props":965,"children":966},{"style":140},[967],{"type":35,"value":863},{"type":30,"tag":106,"props":969,"children":970},{"class":108,"line":255},[971,975,980],{"type":30,"tag":106,"props":972,"children":973},{"style":140},[974],{"type":35,"value":853},{"type":30,"tag":106,"props":976,"children":977},{"style":812},[978],{"type":35,"value":979},"client-only",{"type":30,"tag":106,"props":981,"children":982},{"style":140},[983],{"type":35,"value":820},{"type":30,"tag":106,"props":985,"children":986},{"class":108,"line":269},[987,992,997,1002,1006,1011],{"type":30,"tag":106,"props":988,"children":989},{"style":140},[990],{"type":35,"value":991},"      \u003C",{"type":30,"tag":106,"props":993,"children":994},{"style":812},[995],{"type":35,"value":996},"LazyReviewCarousel",{"type":30,"tag":106,"props":998,"children":999},{"style":134},[1000],{"type":35,"value":1001}," :reviews",{"type":30,"tag":106,"props":1003,"children":1004},{"style":140},[1005],{"type":35,"value":885},{"type":30,"tag":106,"props":1007,"children":1008},{"style":191},[1009],{"type":35,"value":1010},"\"reviews\"",{"type":30,"tag":106,"props":1012,"children":1013},{"style":140},[1014],{"type":35,"value":863},{"type":30,"tag":106,"props":1016,"children":1017},{"class":108,"line":278},[1018,1023,1027],{"type":30,"tag":106,"props":1019,"children":1020},{"style":140},[1021],{"type":35,"value":1022},"    \u003C\u002F",{"type":30,"tag":106,"props":1024,"children":1025},{"style":812},[1026],{"type":35,"value":979},{"type":30,"tag":106,"props":1028,"children":1029},{"style":140},[1030],{"type":35,"value":820},{"type":30,"tag":106,"props":1032,"children":1033},{"class":108,"line":286},[1034,1039,1043],{"type":30,"tag":106,"props":1035,"children":1036},{"style":140},[1037],{"type":35,"value":1038},"  \u003C\u002F",{"type":30,"tag":106,"props":1040,"children":1041},{"style":812},[1042],{"type":35,"value":833},{"type":30,"tag":106,"props":1044,"children":1045},{"style":140},[1046],{"type":35,"value":820},{"type":30,"tag":106,"props":1048,"children":1049},{"class":108,"line":302},[1050,1055,1059],{"type":30,"tag":106,"props":1051,"children":1052},{"style":140},[1053],{"type":35,"value":1054},"\u003C\u002F",{"type":30,"tag":106,"props":1056,"children":1057},{"style":812},[1058],{"type":35,"value":815},{"type":30,"tag":106,"props":1060,"children":1061},{"style":140},[1062],{"type":35,"value":820},{"type":30,"tag":106,"props":1064,"children":1065},{"class":108,"line":318},[1066],{"type":30,"tag":106,"props":1067,"children":1068},{"emptyLinePlaceholder":591},[1069],{"type":35,"value":594},{"type":30,"tag":106,"props":1071,"children":1072},{"class":108,"line":334},[1073,1077,1082,1087,1092,1096,1101],{"type":30,"tag":106,"props":1074,"children":1075},{"style":140},[1076],{"type":35,"value":809},{"type":30,"tag":106,"props":1078,"children":1079},{"style":812},[1080],{"type":35,"value":1081},"script",{"type":30,"tag":106,"props":1083,"children":1084},{"style":134},[1085],{"type":35,"value":1086}," setup",{"type":30,"tag":106,"props":1088,"children":1089},{"style":134},[1090],{"type":35,"value":1091}," lang",{"type":30,"tag":106,"props":1093,"children":1094},{"style":140},[1095],{"type":35,"value":885},{"type":30,"tag":106,"props":1097,"children":1098},{"style":191},[1099],{"type":35,"value":1100},"\"ts\"",{"type":30,"tag":106,"props":1102,"children":1103},{"style":140},[1104],{"type":35,"value":820},{"type":30,"tag":106,"props":1106,"children":1107},{"class":108,"line":351},[1108,1113,1118,1123,1128,1132,1137],{"type":30,"tag":106,"props":1109,"children":1110},{"style":123},[1111],{"type":35,"value":1112},"const",{"type":30,"tag":106,"props":1114,"children":1115},{"style":446},[1116],{"type":35,"value":1117}," mounted",{"type":30,"tag":106,"props":1119,"children":1120},{"style":123},[1121],{"type":35,"value":1122}," =",{"type":30,"tag":106,"props":1124,"children":1125},{"style":134},[1126],{"type":35,"value":1127}," ref",{"type":30,"tag":106,"props":1129,"children":1130},{"style":140},[1131],{"type":35,"value":549},{"type":30,"tag":106,"props":1133,"children":1134},{"style":446},[1135],{"type":35,"value":1136},"false",{"type":30,"tag":106,"props":1138,"children":1139},{"style":140},[1140],{"type":35,"value":1141},")\n",{"type":30,"tag":106,"props":1143,"children":1144},{"class":108,"line":363},[1145],{"type":30,"tag":106,"props":1146,"children":1147},{"emptyLinePlaceholder":591},[1148],{"type":35,"value":594},{"type":30,"tag":106,"props":1150,"children":1151},{"class":108,"line":372},[1152,1157,1162,1167],{"type":30,"tag":106,"props":1153,"children":1154},{"style":134},[1155],{"type":35,"value":1156},"onMounted",{"type":30,"tag":106,"props":1158,"children":1159},{"style":140},[1160],{"type":35,"value":1161},"(() ",{"type":30,"tag":106,"props":1163,"children":1164},{"style":123},[1165],{"type":35,"value":1166},"=>",{"type":30,"tag":106,"props":1168,"children":1169},{"style":140},[1170],{"type":35,"value":440},{"type":30,"tag":106,"props":1172,"children":1173},{"class":108,"line":381},[1174,1179,1183,1187],{"type":30,"tag":106,"props":1175,"children":1176},{"style":134},[1177],{"type":35,"value":1178},"  requestIdleCallback",{"type":30,"tag":106,"props":1180,"children":1181},{"style":140},[1182],{"type":35,"value":1161},{"type":30,"tag":106,"props":1184,"children":1185},{"style":123},[1186],{"type":35,"value":1166},{"type":30,"tag":106,"props":1188,"children":1189},{"style":140},[1190],{"type":35,"value":440},{"type":30,"tag":106,"props":1192,"children":1193},{"class":108,"line":390},[1194,1199,1203],{"type":30,"tag":106,"props":1195,"children":1196},{"style":140},[1197],{"type":35,"value":1198},"    mounted.value ",{"type":30,"tag":106,"props":1200,"children":1201},{"style":123},[1202],{"type":35,"value":885},{"type":30,"tag":106,"props":1204,"children":1205},{"style":446},[1206],{"type":35,"value":1207}," true\n",{"type":30,"tag":106,"props":1209,"children":1210},{"class":108,"line":399},[1211],{"type":30,"tag":106,"props":1212,"children":1213},{"style":140},[1214],{"type":35,"value":1215},"  })\n",{"type":30,"tag":106,"props":1217,"children":1219},{"class":108,"line":1218},24,[1220],{"type":30,"tag":106,"props":1221,"children":1222},{"style":140},[1223],{"type":35,"value":405},{"type":30,"tag":106,"props":1225,"children":1227},{"class":108,"line":1226},25,[1228,1232,1236],{"type":30,"tag":106,"props":1229,"children":1230},{"style":140},[1231],{"type":35,"value":1054},{"type":30,"tag":106,"props":1233,"children":1234},{"style":812},[1235],{"type":35,"value":1081},{"type":30,"tag":106,"props":1237,"children":1238},{"style":140},[1239],{"type":35,"value":820},{"type":30,"tag":31,"props":1241,"children":1242},{},[1243,1245,1251,1253,1259],{"type":35,"value":1244},"Le wrapper ",{"type":30,"tag":38,"props":1246,"children":1248},{"className":1247},[],[1249],{"type":35,"value":1250},"\u003Cclient-only>",{"type":35,"value":1252}," a permis de retirer du SSR les bibliothèques dépendantes du DOM comme Swiper. Avec ",{"type":30,"tag":38,"props":1254,"children":1256},{"className":1255},[],[1257],{"type":35,"value":1258},"requestIdleCallback",{"type":35,"value":1260},", l'hydratation s'effectue dès que le thread principal est libre. Le TBT a chuté à 840 millisecondes.",{"type":30,"tag":766,"props":1262,"children":1264},{"id":1263},"séparation-et-code-splitting",[1265],{"type":35,"value":1266},"Séparation et code splitting",{"type":30,"tag":31,"props":1268,"children":1269},{},[1270,1272,1278,1280,1286,1288,1294,1296,1302],{"type":35,"value":1271},"Nous avons analysé le bundle avec ",{"type":30,"tag":38,"props":1273,"children":1275},{"className":1274},[],[1276],{"type":35,"value":1277},"vite-plugin-inspect",{"type":35,"value":1279},". La bibliothèque Swiper représentait 168 Ko minifiés, mais elle n'était utilisée que pour le carousel de commentaires. Plutôt que d'implémenter un import dynamique, nous avons d'abord réduit la dépendance : suppression des modules ",{"type":30,"tag":38,"props":1281,"children":1283},{"className":1282},[],[1284],{"type":35,"value":1285},"Virtual",{"type":35,"value":1287}," et ",{"type":30,"tag":38,"props":1289,"children":1291},{"className":1290},[],[1292],{"type":35,"value":1293},"Autoplay",{"type":35,"value":1295}," de Swiper, conservation du seul module ",{"type":30,"tag":38,"props":1297,"children":1299},{"className":1298},[],[1300],{"type":35,"value":1301},"Navigation",{"type":35,"value":1303}," :",{"type":30,"tag":96,"props":1305,"children":1307},{"code":1306,"language":99,"meta":14,"className":100,"style":14},"\u002F\u002F composables\u002FuseSwiper.ts\nimport { Navigation } from 'swiper\u002Fmodules'\nimport 'swiper\u002Fcss'\nimport 'swiper\u002Fcss\u002Fnavigation'\n\nexport const useSwiperModules = () => [Navigation]\n",[1308],{"type":30,"tag":38,"props":1309,"children":1310},{"__ignoreMap":14},[1311,1319,1342,1354,1366,1373],{"type":30,"tag":106,"props":1312,"children":1313},{"class":108,"line":109},[1314],{"type":30,"tag":106,"props":1315,"children":1316},{"style":113},[1317],{"type":35,"value":1318},"\u002F\u002F composables\u002FuseSwiper.ts\n",{"type":30,"tag":106,"props":1320,"children":1321},{"class":108,"line":119},[1322,1327,1332,1337],{"type":30,"tag":106,"props":1323,"children":1324},{"style":123},[1325],{"type":35,"value":1326},"import",{"type":30,"tag":106,"props":1328,"children":1329},{"style":140},[1330],{"type":35,"value":1331}," { Navigation } ",{"type":30,"tag":106,"props":1333,"children":1334},{"style":123},[1335],{"type":35,"value":1336},"from",{"type":30,"tag":106,"props":1338,"children":1339},{"style":191},[1340],{"type":35,"value":1341}," 'swiper\u002Fmodules'\n",{"type":30,"tag":106,"props":1343,"children":1344},{"class":108,"line":146},[1345,1349],{"type":30,"tag":106,"props":1346,"children":1347},{"style":123},[1348],{"type":35,"value":1326},{"type":30,"tag":106,"props":1350,"children":1351},{"style":191},[1352],{"type":35,"value":1353}," 'swiper\u002Fcss'\n",{"type":30,"tag":106,"props":1355,"children":1356},{"class":108,"line":155},[1357,1361],{"type":30,"tag":106,"props":1358,"children":1359},{"style":123},[1360],{"type":35,"value":1326},{"type":30,"tag":106,"props":1362,"children":1363},{"style":191},[1364],{"type":35,"value":1365}," 'swiper\u002Fcss\u002Fnavigation'\n",{"type":30,"tag":106,"props":1367,"children":1368},{"class":108,"line":164},[1369],{"type":30,"tag":106,"props":1370,"children":1371},{"emptyLinePlaceholder":591},[1372],{"type":35,"value":594},{"type":30,"tag":106,"props":1374,"children":1375},{"class":108,"line":173},[1376,1380,1385,1390,1394,1399,1403],{"type":30,"tag":106,"props":1377,"children":1378},{"style":123},[1379],{"type":35,"value":126},{"type":30,"tag":106,"props":1381,"children":1382},{"style":123},[1383],{"type":35,"value":1384}," const",{"type":30,"tag":106,"props":1386,"children":1387},{"style":134},[1388],{"type":35,"value":1389}," useSwiperModules",{"type":30,"tag":106,"props":1391,"children":1392},{"style":123},[1393],{"type":35,"value":1122},{"type":30,"tag":106,"props":1395,"children":1396},{"style":140},[1397],{"type":35,"value":1398}," () ",{"type":30,"tag":106,"props":1400,"children":1401},{"style":123},[1402],{"type":35,"value":1166},{"type":30,"tag":106,"props":1404,"children":1405},{"style":140},[1406],{"type":35,"value":1407}," [Navigation]\n",{"type":30,"tag":31,"props":1409,"children":1410},{},[1411,1413,1419],{"type":35,"value":1412},"Le bundle a été réduit de 168 Ko à 42 Ko. Puisque ",{"type":30,"tag":38,"props":1414,"children":1416},{"className":1415},[],[1417],{"type":35,"value":1418},"\u003CLazyReviewCarousel>",{"type":35,"value":1420}," était déjà en chargement lazy, le code Swiper n'entrait pas dans le bundle initial.",{"type":30,"tag":47,"props":1422,"children":1424},{"id":1423},"content-visibility-réduction-de-la-période-de-rendu",[1425],{"type":35,"value":1426},"Content-Visibility : réduction de la période de rendu",{"type":30,"tag":31,"props":1428,"children":1429},{},[1430,1432,1438],{"type":35,"value":1431},"La grille de produits affichait 48 cartes, chacune avec image, titre, prix et bouton. Lors du rendu initial, le navigateur calculait la mise en page de 48 cartes simultanément, allongeant le LCP. Grâce à la propriété CSS ",{"type":30,"tag":38,"props":1433,"children":1435},{"className":1434},[],[1436],{"type":35,"value":1437},"content-visibility: auto",{"type":35,"value":1439},", les cartes situées sous la ligne de flottaison ont été exclues du rendu :",{"type":30,"tag":96,"props":1441,"children":1443},{"code":1442,"language":414,"meta":14,"className":415,"style":14},"\u002F* components\u002FProductCard.vue *\u002F\n.product-card {\n  content-visibility: auto;\n  contain-intrinsic-size: 320px 420px;\n}\n",[1444],{"type":30,"tag":38,"props":1445,"children":1446},{"__ignoreMap":14},[1447,1455,1467,1488,1523],{"type":30,"tag":106,"props":1448,"children":1449},{"class":108,"line":109},[1450],{"type":30,"tag":106,"props":1451,"children":1452},{"style":113},[1453],{"type":35,"value":1454},"\u002F* components\u002FProductCard.vue *\u002F\n",{"type":30,"tag":106,"props":1456,"children":1457},{"class":108,"line":119},[1458,1463],{"type":30,"tag":106,"props":1459,"children":1460},{"style":134},[1461],{"type":35,"value":1462},".product-card",{"type":30,"tag":106,"props":1464,"children":1465},{"style":140},[1466],{"type":35,"value":440},{"type":30,"tag":106,"props":1468,"children":1469},{"class":108,"line":146},[1470,1475,1479,1484],{"type":30,"tag":106,"props":1471,"children":1472},{"style":446},[1473],{"type":35,"value":1474},"  content-visibility",{"type":30,"tag":106,"props":1476,"children":1477},{"style":140},[1478],{"type":35,"value":454},{"type":30,"tag":106,"props":1480,"children":1481},{"style":446},[1482],{"type":35,"value":1483},"auto",{"type":30,"tag":106,"props":1485,"children":1486},{"style":140},[1487],{"type":35,"value":464},{"type":30,"tag":106,"props":1489,"children":1490},{"class":108,"line":155},[1491,1496,1500,1505,1510,1515,1519],{"type":30,"tag":106,"props":1492,"children":1493},{"style":446},[1494],{"type":35,"value":1495},"  contain-intrinsic-size",{"type":30,"tag":106,"props":1497,"children":1498},{"style":140},[1499],{"type":35,"value":454},{"type":30,"tag":106,"props":1501,"children":1502},{"style":446},[1503],{"type":35,"value":1504},"320",{"type":30,"tag":106,"props":1506,"children":1507},{"style":123},[1508],{"type":35,"value":1509},"px",{"type":30,"tag":106,"props":1511,"children":1512},{"style":446},[1513],{"type":35,"value":1514}," 420",{"type":30,"tag":106,"props":1516,"children":1517},{"style":123},[1518],{"type":35,"value":1509},{"type":30,"tag":106,"props":1520,"children":1521},{"style":140},[1522],{"type":35,"value":464},{"type":30,"tag":106,"props":1524,"children":1525},{"class":108,"line":164},[1526],{"type":30,"tag":106,"props":1527,"children":1528},{"style":140},[1529],{"type":35,"value":585},{"type":30,"tag":31,"props":1531,"children":1532},{},[1533,1539],{"type":30,"tag":38,"props":1534,"children":1536},{"className":1535},[],[1537],{"type":35,"value":1538},"contain-intrinsic-size",{"type":35,"value":1540}," indique au navigateur les dimensions de l'espace réservé, évitant les sauts lors du défilement. Le LCP est passé de 6,4 à 3,9 secondes. Le compromis : les cartes en dehors du viewport initial se renderisent lors du défilement, avec un impact mesuré de 12 millisecondes sur l'INP (acceptable).",{"type":30,"tag":47,"props":1542,"children":1544},{"id":1543},"cache-edge-ttfb-de-12s-à-40ms",[1545],{"type":35,"value":1546},"Cache edge : TTFB de 1,2s à 40ms",{"type":30,"tag":31,"props":1548,"children":1549},{},[1550,1552,1558],{"type":35,"value":1551},"Cloudflare Pages ne cache pas le HTML par défaut ; chaque requête remonte à l'origine. Le temps de réponse SSR de Nuxt 3 s'élevait en moyenne à 1200 millisecondes (appels API + rendu). Nous avons activé le cache edge via un fichier ",{"type":30,"tag":38,"props":1553,"children":1555},{"className":1554},[],[1556],{"type":35,"value":1557},"_headers",{"type":35,"value":1303},{"type":30,"tag":96,"props":1560,"children":1562},{"code":1561},"# public\u002F_headers\n\u002F*\n  Cache-Control: public, max-age=0, s-maxage=600, stale-while-revalidate=86400\n  X-Frame-Options: DENY\n  X-Content-Type-Options: nosniff\n",[1563],{"type":30,"tag":38,"props":1564,"children":1565},{"__ignoreMap":14},[1566],{"type":35,"value":1561},{"type":30,"tag":31,"props":1568,"children":1569},{},[1570,1571,1577,1579,1585],{"type":35,"value":737},{"type":30,"tag":38,"props":1572,"children":1574},{"className":1573},[],[1575],{"type":35,"value":1576},"s-maxage=600",{"type":35,"value":1578},", Cloudflare cache à la périphérie pendant 10 minutes. ",{"type":30,"tag":38,"props":1580,"children":1582},{"className":1581},[],[1583],{"type":35,"value":1584},"stale-while-revalidate=86400",{"type":35,"value":1586}," sert la version en cache lors de l'expiration, pendant qu'un rendu neuf est généré en arrière-plan. Le TTFB a chuté à 40 millisecondes (cache hit). Les requêtes à l'origine ne se font que lors d'un miss ou d'une revalidation périmée.",{"type":30,"tag":766,"props":1588,"children":1590},{"id":1589},"rendu-hybride-avec-isr",[1591],{"type":35,"value":1592},"Rendu hybride avec ISR",{"type":30,"tag":31,"props":1594,"children":1595},{},[1596,1598,1604],{"type":35,"value":1597},"Pour les pages produits, nous avons implémenté la Régénération Statique Incrémentale. Dans Nuxt, cela se configure via ",{"type":30,"tag":38,"props":1599,"children":1601},{"className":1600},[],[1602],{"type":35,"value":1603},"routeRules",{"type":35,"value":1303},{"type":30,"tag":96,"props":1606,"children":1608},{"code":1607,"language":99,"meta":14,"className":100,"style":14},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  routeRules: {\n    '\u002Fproducts\u002F**': { \n      swr: 600,  \u002F\u002F 10 minutes\n      prerender: false\n    },\n    '\u002F': { \n      swr: 300   \u002F\u002F 5 minutes\n    }\n  }\n})\n",[1609],{"type":30,"tag":38,"props":1610,"children":1611},{"__ignoreMap":14},[1612,1619,1638,1646,1659,1681,1694,1702,1714,1731,1738,1745],{"type":30,"tag":106,"props":1613,"children":1614},{"class":108,"line":109},[1615],{"type":30,"tag":106,"props":1616,"children":1617},{"style":113},[1618],{"type":35,"value":116},{"type":30,"tag":106,"props":1620,"children":1621},{"class":108,"line":119},[1622,1626,1630,1634],{"type":30,"tag":106,"props":1623,"children":1624},{"style":123},[1625],{"type":35,"value":126},{"type":30,"tag":106,"props":1627,"children":1628},{"style":123},[1629],{"type":35,"value":131},{"type":30,"tag":106,"props":1631,"children":1632},{"style":134},[1633],{"type":35,"value":137},{"type":30,"tag":106,"props":1635,"children":1636},{"style":140},[1637],{"type":35,"value":143},{"type":30,"tag":106,"props":1639,"children":1640},{"class":108,"line":146},[1641],{"type":30,"tag":106,"props":1642,"children":1643},{"style":140},[1644],{"type":35,"value":1645},"  routeRules: {\n",{"type":30,"tag":106,"props":1647,"children":1648},{"class":108,"line":155},[1649,1654],{"type":30,"tag":106,"props":1650,"children":1651},{"style":191},[1652],{"type":35,"value":1653},"    '\u002Fproducts\u002F**'",{"type":30,"tag":106,"props":1655,"children":1656},{"style":140},[1657],{"type":35,"value":1658},": { \n",{"type":30,"tag":106,"props":1660,"children":1661},{"class":108,"line":164},[1662,1667,1671,1676],{"type":30,"tag":106,"props":1663,"children":1664},{"style":140},[1665],{"type":35,"value":1666},"      swr: ",{"type":30,"tag":106,"props":1668,"children":1669},{"style":446},[1670],{"type":35,"value":659},{"type":30,"tag":106,"props":1672,"children":1673},{"style":140},[1674],{"type":35,"value":1675},",  ",{"type":30,"tag":106,"props":1677,"children":1678},{"style":113},[1679],{"type":35,"value":1680},"\u002F\u002F 10 minutes\n",{"type":30,"tag":106,"props":1682,"children":1683},{"class":108,"line":173},[1684,1689],{"type":30,"tag":106,"props":1685,"children":1686},{"style":140},[1687],{"type":35,"value":1688},"      prerender: ",{"type":30,"tag":106,"props":1690,"children":1691},{"style":446},[1692],{"type":35,"value":1693},"false\n",{"type":30,"tag":106,"props":1695,"children":1696},{"class":108,"line":182},[1697],{"type":30,"tag":106,"props":1698,"children":1699},{"style":140},[1700],{"type":35,"value":1701},"    },\n",{"type":30,"tag":106,"props":1703,"children":1704},{"class":108,"line":202},[1705,1710],{"type":30,"tag":106,"props":1706,"children":1707},{"style":191},[1708],{"type":35,"value":1709},"    '\u002F'",{"type":30,"tag":106,"props":1711,"children":1712},{"style":140},[1713],{"type":35,"value":1658},{"type":30,"tag":106,"props":1715,"children":1716},{"class":108,"line":24},[1717,1721,1726],{"type":30,"tag":106,"props":1718,"children":1719},{"style":140},[1720],{"type":35,"value":1666},{"type":30,"tag":106,"props":1722,"children":1723},{"style":446},[1724],{"type":35,"value":1725},"300",{"type":30,"tag":106,"props":1727,"children":1728},{"style":113},[1729],{"type":35,"value":1730},"   \u002F\u002F 5 minutes\n",{"type":30,"tag":106,"props":1732,"children":1733},{"class":108,"line":237},[1734],{"type":30,"tag":106,"props":1735,"children":1736},{"style":140},[1737],{"type":35,"value":387},{"type":30,"tag":106,"props":1739,"children":1740},{"class":108,"line":255},[1741],{"type":30,"tag":106,"props":1742,"children":1743},{"style":140},[1744],{"type":35,"value":396},{"type":30,"tag":106,"props":1746,"children":1747},{"class":108,"line":269},[1748],{"type":30,"tag":106,"props":1749,"children":1750},{"style":140},[1751],{"type":35,"value":405},{"type":30,"tag":31,"props":1753,"children":1754},{},[1755],{"type":35,"value":1756},"La première requête utilise le SSR, les suivantes proviennent du cache edge. Pour les mises à jour de stock, nous déclenchons un purge manuel via webhook :",{"type":30,"tag":96,"props":1758,"children":1760},{"code":1759,"language":99,"meta":14,"className":100,"style":14},"\u002F\u002F server\u002Fapi\u002Fpurge-cache.post.ts\nexport default defineEventHandler(async (event) => {\n  const { productId } = await readBody(event)\n  \n  await fetch(`https:\u002F\u002Fapi.cloudflare.com\u002Fclient\u002Fv4\u002Fzones\u002F${process.env.CF_ZONE_ID}\u002Fpurge_cache`, {\n    method: 'POST',\n    headers: {\n      'Authorization': `Bearer ${process.env.CF_API_TOKEN}`,\n      'Content-Type': 'application\u002Fjson'\n    },\n    body: JSON.stringify({\n      files: [`https:\u002F\u002Fexample.com\u002Fproducts\u002F${productId}`]\n    })\n  })\n  \n  return { success: true }\n})\n",[1761],{"type":30,"tag":38,"props":1762,"children":1763},{"__ignoreMap":14},[1764,1772,1820,1862,1870,1926,1943,1951,1998,2015,2022,2048,2074,2082,2089,2096,2119],{"type":30,"tag":106,"props":1765,"children":1766},{"class":108,"line":109},[1767],{"type":30,"tag":106,"props":1768,"children":1769},{"style":113},[1770],{"type":35,"value":1771},"\u002F\u002F server\u002Fapi\u002Fpurge-cache.post.ts\n",{"type":30,"tag":106,"props":1773,"children":1774},{"class":108,"line":119},[1775,1779,1783,1788,1792,1797,1802,1808,1812,1816],{"type":30,"tag":106,"props":1776,"children":1777},{"style":123},[1778],{"type":35,"value":126},{"type":30,"tag":106,"props":1780,"children":1781},{"style":123},[1782],{"type":35,"value":131},{"type":30,"tag":106,"props":1784,"children":1785},{"style":134},[1786],{"type":35,"value":1787}," defineEventHandler",{"type":30,"tag":106,"props":1789,"children":1790},{"style":140},[1791],{"type":35,"value":549},{"type":30,"tag":106,"props":1793,"children":1794},{"style":123},[1795],{"type":35,"value":1796},"async",{"type":30,"tag":106,"props":1798,"children":1799},{"style":140},[1800],{"type":35,"value":1801}," (",{"type":30,"tag":106,"props":1803,"children":1805},{"style":1804},"--shiki-default:#FFAB70",[1806],{"type":35,"value":1807},"event",{"type":30,"tag":106,"props":1809,"children":1810},{"style":140},[1811],{"type":35,"value":558},{"type":30,"tag":106,"props":1813,"children":1814},{"style":123},[1815],{"type":35,"value":1166},{"type":30,"tag":106,"props":1817,"children":1818},{"style":140},[1819],{"type":35,"value":440},{"type":30,"tag":106,"props":1821,"children":1822},{"class":108,"line":146},[1823,1828,1833,1838,1843,1847,1852,1857],{"type":30,"tag":106,"props":1824,"children":1825},{"style":123},[1826],{"type":35,"value":1827},"  const",{"type":30,"tag":106,"props":1829,"children":1830},{"style":140},[1831],{"type":35,"value":1832}," { ",{"type":30,"tag":106,"props":1834,"children":1835},{"style":446},[1836],{"type":35,"value":1837},"productId",{"type":30,"tag":106,"props":1839,"children":1840},{"style":140},[1841],{"type":35,"value":1842}," } ",{"type":30,"tag":106,"props":1844,"children":1845},{"style":123},[1846],{"type":35,"value":885},{"type":30,"tag":106,"props":1848,"children":1849},{"style":123},[1850],{"type":35,"value":1851}," await",{"type":30,"tag":106,"props":1853,"children":1854},{"style":134},[1855],{"type":35,"value":1856}," readBody",{"type":30,"tag":106,"props":1858,"children":1859},{"style":140},[1860],{"type":35,"value":1861},"(event)\n",{"type":30,"tag":106,"props":1863,"children":1864},{"class":108,"line":155},[1865],{"type":30,"tag":106,"props":1866,"children":1867},{"style":140},[1868],{"type":35,"value":1869},"  \n",{"type":30,"tag":106,"props":1871,"children":1872},{"class":108,"line":164},[1873,1878,1883,1887,1892,1897,1902,1907,1911,1916,1921],{"type":30,"tag":106,"props":1874,"children":1875},{"style":123},[1876],{"type":35,"value":1877},"  await",{"type":30,"tag":106,"props":1879,"children":1880},{"style":134},[1881],{"type":35,"value":1882}," fetch",{"type":30,"tag":106,"props":1884,"children":1885},{"style":140},[1886],{"type":35,"value":549},{"type":30,"tag":106,"props":1888,"children":1889},{"style":191},[1890],{"type":35,"value":1891},"`https:\u002F\u002Fapi.cloudflare.com\u002Fclient\u002Fv4\u002Fzones\u002F${",{"type":30,"tag":106,"props":1893,"children":1894},{"style":140},[1895],{"type":35,"value":1896},"process",{"type":30,"tag":106,"props":1898,"children":1899},{"style":191},[1900],{"type":35,"value":1901},".",{"type":30,"tag":106,"props":1903,"children":1904},{"style":140},[1905],{"type":35,"value":1906},"env",{"type":30,"tag":106,"props":1908,"children":1909},{"style":191},[1910],{"type":35,"value":1901},{"type":30,"tag":106,"props":1912,"children":1913},{"style":446},[1914],{"type":35,"value":1915},"CF_ZONE_ID",{"type":30,"tag":106,"props":1917,"children":1918},{"style":191},[1919],{"type":35,"value":1920},"}\u002Fpurge_cache`",{"type":30,"tag":106,"props":1922,"children":1923},{"style":140},[1924],{"type":35,"value":1925},", {\n",{"type":30,"tag":106,"props":1927,"children":1928},{"class":108,"line":173},[1929,1934,1939],{"type":30,"tag":106,"props":1930,"children":1931},{"style":140},[1932],{"type":35,"value":1933},"    method: ",{"type":30,"tag":106,"props":1935,"children":1936},{"style":191},[1937],{"type":35,"value":1938},"'POST'",{"type":30,"tag":106,"props":1940,"children":1941},{"style":140},[1942],{"type":35,"value":199},{"type":30,"tag":106,"props":1944,"children":1945},{"class":108,"line":182},[1946],{"type":30,"tag":106,"props":1947,"children":1948},{"style":140},[1949],{"type":35,"value":1950},"    headers: {\n",{"type":30,"tag":106,"props":1952,"children":1953},{"class":108,"line":202},[1954,1959,1963,1968,1972,1976,1980,1984,1989,1994],{"type":30,"tag":106,"props":1955,"children":1956},{"style":191},[1957],{"type":35,"value":1958},"      'Authorization'",{"type":30,"tag":106,"props":1960,"children":1961},{"style":140},[1962],{"type":35,"value":454},{"type":30,"tag":106,"props":1964,"children":1965},{"style":191},[1966],{"type":35,"value":1967},"`Bearer ${",{"type":30,"tag":106,"props":1969,"children":1970},{"style":140},[1971],{"type":35,"value":1896},{"type":30,"tag":106,"props":1973,"children":1974},{"style":191},[1975],{"type":35,"value":1901},{"type":30,"tag":106,"props":1977,"children":1978},{"style":140},[1979],{"type":35,"value":1906},{"type":30,"tag":106,"props":1981,"children":1982},{"style":191},[1983],{"type":35,"value":1901},{"type":30,"tag":106,"props":1985,"children":1986},{"style":446},[1987],{"type":35,"value":1988},"CF_API_TOKEN",{"type":30,"tag":106,"props":1990,"children":1991},{"style":191},[1992],{"type":35,"value":1993},"}`",{"type":30,"tag":106,"props":1995,"children":1996},{"style":140},[1997],{"type":35,"value":199},{"type":30,"tag":106,"props":1999,"children":2000},{"class":108,"line":24},[2001,2006,2010],{"type":30,"tag":106,"props":2002,"children":2003},{"style":191},[2004],{"type":35,"value":2005},"      'Content-Type'",{"type":30,"tag":106,"props":2007,"children":2008},{"style":140},[2009],{"type":35,"value":454},{"type":30,"tag":106,"props":2011,"children":2012},{"style":191},[2013],{"type":35,"value":2014},"'application\u002Fjson'\n",{"type":30,"tag":106,"props":2016,"children":2017},{"class":108,"line":237},[2018],{"type":30,"tag":106,"props":2019,"children":2020},{"style":140},[2021],{"type":35,"value":1701},{"type":30,"tag":106,"props":2023,"children":2024},{"class":108,"line":255},[2025,2030,2035,2039,2044],{"type":30,"tag":106,"props":2026,"children":2027},{"style":140},[2028],{"type":35,"value":2029},"    body: ",{"type":30,"tag":106,"props":2031,"children":2032},{"style":446},[2033],{"type":35,"value":2034},"JSON",{"type":30,"tag":106,"props":2036,"children":2037},{"style":140},[2038],{"type":35,"value":1901},{"type":30,"tag":106,"props":2040,"children":2041},{"style":134},[2042],{"type":35,"value":2043},"stringify",{"type":30,"tag":106,"props":2045,"children":2046},{"style":140},[2047],{"type":35,"value":143},{"type":30,"tag":106,"props":2049,"children":2050},{"class":108,"line":269},[2051,2056,2061,2065,2069],{"type":30,"tag":106,"props":2052,"children":2053},{"style":140},[2054],{"type":35,"value":2055},"      files: [",{"type":30,"tag":106,"props":2057,"children":2058},{"style":191},[2059],{"type":35,"value":2060},"`https:\u002F\u002Fexample.com\u002Fproducts\u002F${",{"type":30,"tag":106,"props":2062,"children":2063},{"style":140},[2064],{"type":35,"value":1837},{"type":30,"tag":106,"props":2066,"children":2067},{"style":191},[2068],{"type":35,"value":1993},{"type":30,"tag":106,"props":2070,"children":2071},{"style":140},[2072],{"type":35,"value":2073},"]\n",{"type":30,"tag":106,"props":2075,"children":2076},{"class":108,"line":278},[2077],{"type":30,"tag":106,"props":2078,"children":2079},{"style":140},[2080],{"type":35,"value":2081},"    })\n",{"type":30,"tag":106,"props":2083,"children":2084},{"class":108,"line":286},[2085],{"type":30,"tag":106,"props":2086,"children":2087},{"style":140},[2088],{"type":35,"value":1215},{"type":30,"tag":106,"props":2090,"children":2091},{"class":108,"line":302},[2092],{"type":30,"tag":106,"props":2093,"children":2094},{"style":140},[2095],{"type":35,"value":1869},{"type":30,"tag":106,"props":2097,"children":2098},{"class":108,"line":318},[2099,2104,2109,2114],{"type":30,"tag":106,"props":2100,"children":2101},{"style":123},[2102],{"type":35,"value":2103},"  return",{"type":30,"tag":106,"props":2105,"children":2106},{"style":140},[2107],{"type":35,"value":2108}," { success: ",{"type":30,"tag":106,"props":2110,"children":2111},{"style":446},[2112],{"type":35,"value":2113},"true",{"type":30,"tag":106,"props":2115,"children":2116},{"style":140},[2117],{"type":35,"value":2118}," }\n",{"type":30,"tag":106,"props":2120,"children":2121},{"class":108,"line":334},[2122],{"type":30,"tag":106,"props":2123,"children":2124},{"style":140},[2125],{"type":35,"value":405},{"type":30,"tag":47,"props":2127,"children":2129},{"id":2128},"comparatif-des-performances",[2130],{"type":35,"value":2131},"Comparatif des performances",{"type":30,"tag":2133,"props":2134,"children":2135},"table",{},[2136,2165],{"type":30,"tag":2137,"props":2138,"children":2139},"thead",{},[2140],{"type":30,"tag":2141,"props":2142,"children":2143},"tr",{},[2144,2150,2155,2160],{"type":30,"tag":2145,"props":2146,"children":2147},"th",{},[2148],{"type":35,"value":2149},"Métrique",{"type":30,"tag":2145,"props":2151,"children":2152},{},[2153],{"type":35,"value":2154},"Avant",{"type":30,"tag":2145,"props":2156,"children":2157},{},[2158],{"type":35,"value":2159},"Après",{"type":30,"tag":2145,"props":2161,"children":2162},{},[2163],{"type":35,"value":2164},"Variation",{"type":30,"tag":2166,"props":2167,"children":2168},"tbody",{},[2169,2193,2216,2239,2262,2285],{"type":30,"tag":2141,"props":2170,"children":2171},{},[2172,2178,2183,2188],{"type":30,"tag":2173,"props":2174,"children":2175},"td",{},[2176],{"type":35,"value":2177},"LCP",{"type":30,"tag":2173,"props":2179,"children":2180},{},[2181],{"type":35,"value":2182},"10,2s",{"type":30,"tag":2173,"props":2184,"children":2185},{},[2186],{"type":35,"value":2187},"2,1s",{"type":30,"tag":2173,"props":2189,"children":2190},{},[2191],{"type":35,"value":2192},"-79%",{"type":30,"tag":2141,"props":2194,"children":2195},{},[2196,2201,2206,2211],{"type":30,"tag":2173,"props":2197,"children":2198},{},[2199],{"type":35,"value":2200},"TBT",{"type":30,"tag":2173,"props":2202,"children":2203},{},[2204],{"type":35,"value":2205},"2190ms",{"type":30,"tag":2173,"props":2207,"children":2208},{},[2209],{"type":35,"value":2210},"180ms",{"type":30,"tag":2173,"props":2212,"children":2213},{},[2214],{"type":35,"value":2215},"-92%",{"type":30,"tag":2141,"props":2217,"children":2218},{},[2219,2224,2229,2234],{"type":30,"tag":2173,"props":2220,"children":2221},{},[2222],{"type":35,"value":2223},"TTFB",{"type":30,"tag":2173,"props":2225,"children":2226},{},[2227],{"type":35,"value":2228},"1200ms",{"type":30,"tag":2173,"props":2230,"children":2231},{},[2232],{"type":35,"value":2233},"40ms",{"type":30,"tag":2173,"props":2235,"children":2236},{},[2237],{"type":35,"value":2238},"-97%",{"type":30,"tag":2141,"props":2240,"children":2241},{},[2242,2247,2252,2257],{"type":30,"tag":2173,"props":2243,"children":2244},{},[2245],{"type":35,"value":2246},"FCP",{"type":30,"tag":2173,"props":2248,"children":2249},{},[2250],{"type":35,"value":2251},"4,8s",{"type":30,"tag":2173,"props":2253,"children":2254},{},[2255],{"type":35,"value":2256},"1,2s",{"type":30,"tag":2173,"props":2258,"children":2259},{},[2260],{"type":35,"value":2261},"-75%",{"type":30,"tag":2141,"props":2263,"children":2264},{},[2265,2270,2275,2280],{"type":30,"tag":2173,"props":2266,"children":2267},{},[2268],{"type":35,"value":2269},"CLS",{"type":30,"tag":2173,"props":2271,"children":2272},{},[2273],{"type":35,"value":2274},"0,18",{"type":30,"tag":2173,"props":2276,"children":2277},{},[2278],{"type":35,"value":2279},"0,02",{"type":30,"tag":2173,"props":2281,"children":2282},{},[2283],{"type":35,"value":2284},"-89%",{"type":30,"tag":2141,"props":2286,"children":2287},{},[2288,2293,2298,2303],{"type":30,"tag":2173,"props":2289,"children":2290},{},[2291],{"type":35,"value":2292},"Bundle (initial)",{"type":30,"tag":2173,"props":2294,"children":2295},{},[2296],{"type":35,"value":2297},"284 Ko",{"type":30,"tag":2173,"props":2299,"children":2300},{},[2301],{"type":35,"value":2302},"186 Ko",{"type":30,"tag":2173,"props":2304,"children":2305},{},[2306],{"type":35,"value":2307},"-34%",{"type":30,"tag":31,"props":2309,"children":2310},{},[2311],{"type":35,"value":2312},"Contexte de test : Chrome 121, throttling 4G, Lighthouse CI. Moyenne de 10 passages. Le LCP cible (sous 2,5 secondes, seuil « Bon » de Google) est atteint.",{"type":30,"tag":47,"props":2314,"children":2316},{"id":2315},"compromis-et-points-dattention",[2317],{"type":35,"value":2318},"Compromis et points d'attention",{"type":30,"tag":31,"props":2320,"children":2321},{},[2322,2324,2330],{"type":35,"value":2323},"L'auto-hébergement des polices sacrifie le réseau de périphérie global du CDN, mais Cloudflare Pages étant déjà hébergé en périphérie, la latence additionnelle reste minime. La compression Woff2 limite ce surcoût. L'hydratation lazy entraîne une perte d'interactivité initiale : les composants situés sous la ligne de flottaison ne deviennent interactifs qu'après le hook ",{"type":30,"tag":38,"props":2325,"children":2327},{"className":2326},[],[2328],{"type":35,"value":2329},"mounted",{"type":35,"value":2331},". Il convient d'ajouter une métrique analytique « time to interactive below fold ».",{"type":30,"tag":31,"props":2333,"children":2334},{},[2335,2340,2342,2348,2350,2356],{"type":30,"tag":38,"props":2336,"children":2338},{"className":2337},[],[2339],{"type":35,"value":43},{"type":35,"value":2341}," ne bénéficie pas du support sur Safari antérieur à 17.4 ; une directive ",{"type":30,"tag":38,"props":2343,"children":2345},{"className":2344},[],[2346],{"type":35,"value":2347},"@supports",{"type":35,"value":2349}," est recommandée. Le cache edge crée un risque de conflit avec la personnalisation : le contenu dans le panier, l'état de connexion utilisateur doivent être protégés par ",{"type":30,"tag":38,"props":2351,"children":2353},{"className":2352},[],[2354],{"type":35,"value":2355},"Cache-Control: private",{"type":35,"value":2357}," ou rendus côté client.",{"type":30,"tag":31,"props":2359,"children":2360},{},[2361],{"type":35,"value":2362},"Le purge du webhook ISR est un processus manuel ; l'intégrer à un système de gestion d'inventaire automatiserait mieux les opérations. Pour les pages critiques (paiement, checkout), désactiver ISR en faveur d'une revalidation plus fréquente est prudent.",{"type":30,"tag":47,"props":2364,"children":2366},{"id":2365},"architecture-composable-et-passage-à-léchelle",[2367],{"type":35,"value":2368},"Architecture composable et passage à l'échelle",{"type":30,"tag":31,"props":2370,"children":2371},{},[2372,2374,2383,2385,2390],{"type":35,"value":2373},"Nous avons testé ces optimisations dans une architecture ",{"type":30,"tag":2375,"props":2376,"children":2380},"a",{"href":2377,"rel":2378},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[2379],"nofollow",[2381],{"type":35,"value":2382},"Headless Commerce",{"type":35,"value":2384}," : frontend Nuxt 3, backend Shopify Storefront API. Le même pattern fonctionne avec Next.js + Hydrogen ou Remix. La stratégie de cache edge est indépendante du framework : Cloudflare Workers KV ou Vercel Edge Config permettent d'étendre. Pour la surveillance, ",{"type":30,"tag":38,"props":2386,"children":2388},{"className":2387},[],[2389],{"type":35,"value":782},{"type":35,"value":2391}," doit être complétée par du RUM (Real User Monitoring) — Cloudflare Web Analytics ou Sentry Performance.",{"type":30,"tag":31,"props":2393,"children":2394},{},[2395,2397,2403],{"type":35,"value":2396},"Avec un LCP de 2,1 secondes, le site atteint la catégorie « Bon » de Google, mais un test en 4G inférieur sur mobile reste essentiel. L'amélioration progressive garantit que le rendu HTML critique fonctionne sans JavaScript. Nuxt propose le composant ",{"type":30,"tag":38,"props":2398,"children":2400},{"className":2399},[],[2401],{"type":35,"value":2402},"\u003CNoScript>",{"type":35,"value":2404}," pour les cas de défaillance. Le contenu critique doit rester accessible sans dépendre de JavaScript pour être rendu.",{"type":30,"tag":2406,"props":2407,"children":2408},"style",{},[2409],{"type":35,"value":2410},"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":14,"searchDepth":146,"depth":146,"links":2412},[2413,2414,2418,2419,2422,2423,2424],{"id":49,"depth":119,"text":52},{"id":748,"depth":119,"text":751,"children":2415},[2416,2417],{"id":768,"depth":146,"text":771},{"id":1263,"depth":146,"text":1266},{"id":1423,"depth":119,"text":1426},{"id":1543,"depth":119,"text":1546,"children":2420},[2421],{"id":1589,"depth":146,"text":1592},{"id":2128,"depth":119,"text":2131},{"id":2315,"depth":119,"text":2318},{"id":2365,"depth":119,"text":2368},"markdown","content:fr:tech:nuxt-3-cloudflare-pages-optimisation-lcp.md","content","fr\u002Ftech\u002Fnuxt-3-cloudflare-pages-optimisation-lcp.md","fr\u002Ftech\u002Fnuxt-3-cloudflare-pages-optimisation-lcp","md",1781705142086]