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