[{"_1":2,"_21":-5,"_22":-5},"loaderData",{"_3":4},"routes/blog.$slug",{"_5":6,"_19":20},"frontmatter",{"_7":8,"_9":10,"_11":12,"_13":12,"_14":15},"title","Les améliorations invisibles d'un site e-commerce","description","Guide d'optimisation Shopify : performance, SEO et conversions sans toucher au design. Pour développeurs qui veulent des résultats mesurables.","date","2025-12-30T00:00:00.000Z","updated","tags",[16,17,18],"performance","seo","shopify","code","\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h2: \"h2\",\n h3: \"h3\",\n li: \"li\",\n ol: \"ol\",\n p: \"p\",\n pre: \"pre\",\n span: \"span\",\n strong: \"strong\",\n ul: \"ul\",\n ...props.components\n };\n return _jsxs(_Fragment, {\n children: [_jsx(_components.p, {\n children: \"Votre client refuse de changer le design. Parfait -- vous n'en avez pas besoin.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Les améliorations les plus rentables sont souvent invisibles : optimiser les images, ajouter des données structurées, nettoyer le tracking, améliorer l'accessibilité. Résultat : +20% de vitesse, meilleur référencement, plus de conversions. Zéro impact visuel.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Voici ce qu'il faut changer en premier.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"pourquoi-linvisible-génère-plus-de-résultats\",\n children: _jsx(_components.a, {\n href: \"#pourquoi-linvisible-génère-plus-de-résultats\",\n children: \"Pourquoi l'invisible génère plus de résultats\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"La plupart des e-commerçants pensent qu'améliorer leur site = refondre le design. Erreur.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Le design peut booster les conversions de 5-10%. Mais :\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"Optimiser les images\"\n }), \" = +30% de vitesse = +5-10% de conversions\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"Ajouter schema markup\"\n }), \" = rich snippets Google = +15-20% de CTR\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"Nettoyer le tracking\"\n }), \" = données fiables = meilleures décisions marketing\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"Améliorer l'accessibilité\"\n }), \" = +10% d'audience potentielle + conformité légale\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Ces optimisations ne demandent pas l'avis du directeur artistique. Elles nécessitent juste un développeur compétent et 2-3 jours de travail.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"le-client-qui-avait-peur-de-tout-casser\",\n children: _jsx(_components.a, {\n href: \"#le-client-qui-avait-peur-de-tout-casser\",\n children: \"Le client qui avait peur de tout casser\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Quand \", _jsx(_components.a, {\n href: \"/personnages\",\n children: \"Kendry\"\n }), \" a audité Jungle Urbaine -- la boutique de \", _jsx(_components.a, {\n href: \"/personnages\",\n children: \"Rory\"\n }), \" -- Rory a été clair : \\\"Les clients connaissent le site, ne touchez à rien.\\\"\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Jungle Urbaine vend des plantes exotiques pour terrariums. ~800K€/an. Rory a peur de casser son site.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Problèmes techniques trouvés par Kendry :\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"PageSpeed score : 28\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Images PNG non optimisées (4MB+ sur certaines pages produit)\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Zéro données structurées Product\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"8 apps de tracking (dont 3 cassées)\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"En 3 jours, sans toucher une ligne de CSS :\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Score PageSpeed : 28 → 62\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Poids moyen page : 6.2MB → 1.8MB\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Rich snippets actifs sur Google\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Tracking nettoyé et unifié\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Résultat\"\n }), \" : +18% de conversions en 4 semaines. Revenue supplémentaire : 144K€/an (18% × 800K€).\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Pas un pixel du design n'a bougé.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"performance-et-core-web-vitals--les-gains-rapides\",\n children: _jsx(_components.a, {\n href: \"#performance-et-core-web-vitals--les-gains-rapides\",\n children: \"Performance et Core Web Vitals : les gains rapides\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"1-convertir-les-images-en-webp\",\n children: _jsx(_components.a, {\n href: \"#1-convertir-les-images-en-webp\",\n children: \"1. Convertir les images en WebP\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Le format WebP réduit le poids des images de 60-80% vs PNG/JPEG, sans perte de qualité visible.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Test simple\"\n }), \" :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"# Check image sizes in your theme\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"find\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" ./assets\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" -name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" \\\"*.png\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" -o\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" -name\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" \\\"*.jpg\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" |\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" xargs\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" du\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" -h\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" |\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" sort\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" -rh\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" |\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" head\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" -20\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Si vous voyez des images de plus de 200KB, c'est une cible prioritaire.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Solution Shopify\"\n }), \" :\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Shopify génère automatiquement des WebP via le CDN. Utilisez le \", _jsxs(_components.a, {\n href: \"https://shopify.dev/docs/api/liquid/filters/image_url\",\n children: [\"filtre \", _jsx(_components.code, {\n children: \"image_url\"\n })]\n }), \" avec le format WebP :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{%- \"\n }), _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"# Shopify theme optimization: WebP images for better Core Web Vitals -\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"%}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"assign\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" image_url = \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".featured_image | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"image_url:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" width:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 800\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"format:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" 'pjpg'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"assign\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" webp_url = \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".featured_image | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"image_url:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" width:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 800\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \", \"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"format:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" 'webp'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"<\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"picture\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" <\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"source\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" srcset\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"webp_url\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"image/webp\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" <\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"img\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"image_url\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"featured_image\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"escape\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" loading\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"lazy\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"800\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"800\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Gain moyen\"\n }), \" : -1.5s de LCP (Largest Contentful Paint), amélioration des \", _jsx(_components.strong, {\n children: \"Core Web Vitals\"\n }), \", +10% de conversions.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"2-lazy-loading-sur-toutes-les-images-below-the-fold\",\n children: _jsx(_components.a, {\n href: \"#2-lazy-loading-sur-toutes-les-images-below-the-fold\",\n children: \"2. Lazy loading sur toutes les images below-the-fold\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Les images en bas de page n'ont pas besoin de se charger immédiatement.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Mauvais\"\n }), \" :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"for\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" in\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" collection\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".products %}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" <\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"img\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"featured_image\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"image_url:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" width:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 400\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"title\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endfor\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Toutes les images se chargent d'un coup. Sur une page collection avec 48 produits, ça fait 48 requêtes HTTP inutiles au chargement initial.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Bon\"\n }), \" :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"for\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" in\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" collection\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".products %}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" <\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"img\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"featured_image\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"image_url:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" width:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 400\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"title\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" loading\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"lazy\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" width\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"400\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" height\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"400\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endfor\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"L'attribut \", _jsx(_components.code, {\n children: \"loading=\\\"lazy\\\"\"\n }), \" est natif. Support : 95%+ des navigateurs.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Bonus\"\n }), \" : ajoutez toujours \", _jsx(_components.code, {\n children: \"width\"\n }), \" et \", _jsx(_components.code, {\n children: \"height\"\n }), \" pour éviter le CLS (Cumulative Layout Shift).\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Gain moyen\"\n }), \" : -40% de requêtes HTTP initiales, -2s de Load Time.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"3-précharger-les-ressources-critiques\",\n children: _jsx(_components.a, {\n href: \"#3-précharger-les-ressources-critiques\",\n children: \"3. Précharger les ressources critiques\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Le navigateur doit deviner ce qui est important. Aidez-le.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsxs(_components.strong, {\n children: [\"Dans votre \", _jsx(_components.code, {\n children: \"theme.liquid\"\n })]\n }), \", avant \", _jsx(_components.code, {\n children: \"\"\n }), \" :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{%- \"\n }), _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"# Shopify Liquid optimization: preload critical resources for better LCP -\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"%}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"<\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"link\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" rel\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"preload\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ 'theme.css' | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"asset_url\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"style\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"if\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" template\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".name \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"==\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" 'product'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {%- \"\n }), _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"# Preload hero image on product pages -\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"%}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" <\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"link\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" rel\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"preload\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" as\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"image\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"featured_image\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"image_url:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" width:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 1200\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" fetchpriority\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"high\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endif\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{%- \"\n }), _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"# Preconnect to external domains -\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"%}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"<\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"link\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" rel\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"preconnect\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"https://cdn.shopify.com\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"<\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"link\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" rel\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"preconnect\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" href\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"https://fonts.googleapis.com\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Gain moyen\"\n }), \" : -0.5s de LCP, meilleur score Lighthouse.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"4-différer-javascript-non-critique\",\n children: _jsx(_components.a, {\n href: \"#4-différer-javascript-non-critique\",\n children: \"4. Différer JavaScript non-critique\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Les scripts analytics, widgets de chat, et popups email n'ont pas besoin de se charger avant que la page soit interactive.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Identifiez les scripts bloquants\"\n }), \" :\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Utilisez \", _jsx(_components.strong, {\n children: \"Chrome DevTools\"\n }), \" (l'outil essentiel pour tout développeur Shopify) > Coverage :\"]\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Lancez l'enregistrement\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Rechargez la page\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Regardez les fichiers JS utilisés < 20%\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Ces scripts sont des candidats au defer/lazy load.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Solution\"\n }), \" :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"// Load non-critical scripts after page interactive\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"if\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" (\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"'requestIdleCallback'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" in\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" window) {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" requestIdleCallback\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"(loadNonCriticalScripts);\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"} \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"else\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" window.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"addEventListener\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"'load'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \", () \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"=>\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" setTimeout\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"(loadNonCriticalScripts, \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"2000\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" });\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\"\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"function\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" loadNonCriticalScripts\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"() {\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \" // Chat widget\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" chatScript\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" document.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"createElement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"'script'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" chatScript.src \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" 'https://cdn.chat-widget.com/widget.js'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" chatScript.async \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" true\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" document.body.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"appendChild\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"(chatScript);\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \" // Email popup\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" const\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" popupScript\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" =\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" document.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"createElement\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"'script'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \");\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" popupScript.src \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" 'https://cdn.email-popup.com/popup.js'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" popupScript.async \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" true\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \";\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" document.body.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"appendChild\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"(popupScript);\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"}\"\n })\n })]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Gain moyen\"\n }), \" : -1.5s de TBT (Total Blocking Time), meilleur INP.\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"seo-technique--les-données-structurées\",\n children: _jsx(_components.a, {\n href: \"#seo-technique--les-données-structurées\",\n children: \"SEO technique : les données structurées\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Google adore les données structurées. Elles permettent d'afficher des rich snippets : étoiles, prix, disponibilité, breadcrumb.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"CTR moyen\"\n }), \" :\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Résultat classique : 2-3%\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Résultat avec rich snippet : 3.5-5%\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Pour un site avec 100K impressions/mois, passer de 2.5% à 4% de CTR = \", _jsx(_components.strong, {\n children: \"1 500 visiteurs/mois\"\n }), \" supplémentaires. Gratuit.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"product-schema-le-minimum-vital\",\n children: _jsx(_components.a, {\n href: \"#product-schema-le-minimum-vital\",\n children: \"Product schema (le minimum vital)\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Shopify génère du JSON-LD basique, mais incomplet. Enrichissez-le.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsxs(_components.strong, {\n children: [\"Créez un snippet \", _jsx(_components.code, {\n children: \"schema-product.liquid\"\n })]\n }), \" :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{%- \"\n }), _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"# Enhanced product schema for rich snippets -\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"%}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"<\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"script\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"application/ld+json\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@context\\\": \\\"https://schema.org/\\\",\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@type\\\": \\\"Product\\\",\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"name\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".title | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"image\\\": [\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"for\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" image\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" in\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"images\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" limit:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 3\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"image\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"image_url:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" width:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 1200\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }}{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"unless\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" forloop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".last %},{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endunless\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endfor\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" ],\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"description\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".description | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"strip_html\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"truncate:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 300\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"sku\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".selected_or_first_available_variant.sku | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"brand\\\": {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@type\\\": \\\"Brand\\\",\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"name\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"shop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".name | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" },\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"offers\\\": {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@type\\\": \\\"Offer\\\",\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"url\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"request\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".origin | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"append:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".url | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"priceCurrency\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"cart\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"currency\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".iso_code | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"price\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".selected_or_first_available_variant.price | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"divided_by:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 100.0\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"availability\\\": \\\"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"if\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".available %}https://schema.org/InStock{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"else\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}https://schema.org/OutOfStock{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endif\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\\\",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"priceValidUntil\\\": \\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"'now'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"date:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" '%s'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"plus:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 31536000\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"date:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" '%Y-%m-%d'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }}\\\",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"itemCondition\\\": \\\"https://schema.org/NewCondition\\\"\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"if\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".metafields.reviews.rating.value %}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" ,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"aggregateRating\\\": {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@type\\\": \\\"AggregateRating\\\",\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"ratingValue\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".metafields.reviews.rating.value | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"reviewCount\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".metafields.reviews.count.value | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endif\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsxs(_components.strong, {\n children: [\"Incluez-le dans \", _jsx(_components.code, {\n children: \"product.liquid\"\n })]\n }), \" :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsx(_components.code, {\n children: _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"render\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" 'schema-product'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n })\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Validez\"\n }), \" sur \", _jsx(_components.a, {\n href: \"https://search.google.com/test/rich-results\",\n children: \"Google Rich Results Test\"\n }), \" et consultez la \", _jsx(_components.a, {\n href: \"https://schema.org/Product\",\n children: \"documentation schema.org\"\n }), \".\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Gain moyen\"\n }), \" : +15-25% de CTR sur Google.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"breadcrumblist-schema\",\n children: _jsx(_components.a, {\n href: \"#breadcrumblist-schema\",\n children: \"BreadcrumbList schema\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Le fil d'Ariane améliore la navigation ET le SEO.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsxs(_components.strong, {\n children: [\"Créez \", _jsx(_components.code, {\n children: \"schema-breadcrumb.liquid\"\n })]\n }), \" :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{%- \"\n }), _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"# Breadcrumb schema for better SERP display -\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"%}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"<\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"script\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"application/ld+json\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@context\\\": \\\"https://schema.org/\\\",\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@type\\\": \\\"BreadcrumbList\\\",\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"itemListElement\\\": [\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@type\\\": \\\"ListItem\\\",\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"position\\\": 1,\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"name\\\": \\\"Accueil\\\",\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"item\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"request\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".origin | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"if\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" collection\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" ,{\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@type\\\": \\\"ListItem\\\",\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"position\\\": 2,\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"name\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"collection\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".title | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"item\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"request\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".origin | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"append:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" collection\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".url | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endif\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"if\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" ,{\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@type\\\": \\\"ListItem\\\",\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"position\\\": {% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"if\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" collection\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}3{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"else\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}2{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endif\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %},\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"name\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".title | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"item\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"request\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".origin | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"append:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".url | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endif\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" ]\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Gain\"\n }), \" : Meilleure visibilité SERP, breadcrumb visible sous le titre.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"organization-schema-page-daccueil\",\n children: _jsx(_components.a, {\n href: \"#organization-schema-page-daccueil\",\n children: \"Organization schema (page d'accueil)\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Définit votre marque pour Google.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsxs(_components.strong, {\n children: [\"Dans \", _jsx(_components.code, {\n children: \"index.liquid\"\n }), \" ou \", _jsx(_components.code, {\n children: \"theme.liquid\"\n })]\n }), \" :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"if\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" template\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".name \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"==\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" 'index'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"<\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"script\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" type\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"application/ld+json\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@context\\\": \\\"https://schema.org/\\\",\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"@type\\\": \\\"Organization\\\",\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"name\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"shop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".name | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"url\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"request\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".origin | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"logo\\\": {{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"shop\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \".brand.logo | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"image_url:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" width:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 600\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"json\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" }},\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"sameAs\\\": [\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"https://www.facebook.com/yourpage\\\",\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"https://www.instagram.com/yourpage\\\",\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" \\\"https://twitter.com/yourpage\\\"\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" ]\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"{% \"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \"endif\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" %}\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsx(_components.h2, {\n id: \"accessibilité--les-quick-wins\",\n children: _jsx(_components.a, {\n href: \"#accessibilité--les-quick-wins\",\n children: \"Accessibilité : les quick wins\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"L'accessibilité n'est pas que morale. C'est du business :\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"10%\"\n }), \" de la population a un handicap (potentiel d'audience)\"]\n }), \"\\n\", _jsx(_components.li, {\n children: \"Google favorise les sites accessibles (SEO)\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Conformité légale (éviter les procès, surtout aux US/EU)\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"1-ajouter-les-attributs-alt-sur-les-images\",\n children: _jsx(_components.a, {\n href: \"#1-ajouter-les-attributs-alt-sur-les-images\",\n children: \"1. Ajouter les attributs ALT sur les images\"\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Checker\"\n }), \" :\"]\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"// Run in console to find images without alt\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"document.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"querySelectorAll\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"'img:not([alt])'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \").\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"forEach\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#FFAB70\"\n },\n children: \"img\"\n }), _jsx(_components.span, {\n style: {\n color: \"#F97583\"\n },\n children: \" =>\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" console.\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \"log\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"(\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"'Missing alt:'\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \", img.src);\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"});\"\n })\n })]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Fix dans Shopify\"\n }), \" :\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Toujours utiliser le champ \\\"Alt text\\\" dans l'admin. Si absent, utilisez le titre produit :\"\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"<\"\n }), _jsx(_components.span, {\n style: {\n color: \"#85E89D\"\n },\n children: \"img\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" src\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"featured_image\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"image_url:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" width:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" 600\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"{{ \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"featured_image\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"alt\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"default:\"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" product\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \".\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"title\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" | \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"escape\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \" }}\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \" loading\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"=\"\n }), _jsx(_components.span, {\n style: {\n color: \"#9ECBFF\"\n },\n children: \"\\\"lazy\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \">\"\n })]\n })]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Gain\"\n }), \" : Meilleur SEO images, accessibilité pour screen readers.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"2-contraste-des-couleurs\",\n children: _jsx(_components.a, {\n href: \"#2-contraste-des-couleurs\",\n children: \"2. Contraste des couleurs\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Vérifiez que le texte est lisible. WCAG 2.1 exige un ratio de contraste minimum :\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"4.5:1\"\n }), \" pour texte normal\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.strong, {\n children: \"3:1\"\n }), \" pour texte large (18pt+)\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Outil\"\n }), \" : \", _jsx(_components.a, {\n href: \"https://webaim.org/resources/contrastchecker/\",\n children: \"WebAIM Contrast Checker\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Fix rapide\"\n }), \" :\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Si votre texte gris sur fond blanc a un ratio de 2.8:1 (trop faible), assombrissez-le :\"\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki github-dark\",\n style: {\n backgroundColor: \"#24292e\",\n color: \"#e1e4e8\"\n },\n tabIndex: \"0\",\n children: _jsxs(_components.code, {\n children: [_jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"/* Bad: insufficient contrast */\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \".product-description\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \": \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"#999999\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"; \"\n }), _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"/* 2.85:1 ratio */\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\"\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"/* Good: sufficient contrast */\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#B392F0\"\n },\n children: \".product-description\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \" color\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \": \"\n }), _jsx(_components.span, {\n style: {\n color: \"#79B8FF\"\n },\n children: \"#666666\"\n }), _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"; \"\n }), _jsx(_components.span, {\n style: {\n color: \"#6A737D\"\n },\n children: \"/* 5.74:1 ratio */\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"#E1E4E8\"\n },\n children: \"}\"\n })\n })]\n })\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Gain\"\n }), \" : +5-10% de lisibilité, meilleur Lighthouse score.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"3-navigation-au-clavier\",\n children: _jsx(_components.a, {\n href: \"#3-navigation-au-clavier\",\n children: \"3. Navigation au clavier\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Tous les éléments interactifs doivent être accessibles au clavier (Tab, Enter, Espace).\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Test\"\n }), \" : Désactivez votre souris. Naviguez avec Tab. Pouvez-vous :\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Ouvrir le menu ?\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Ajouter un produit au panier ?\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Soumettre un formulaire ?\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.strong, {\n children: \"Fix commun\"\n }), \" : les \", _jsx(_components.code, {\n children: \"

\"\n }), \" cliquables doivent devenir des \", _jsx(_components.code, {\n children: \"