electron-rare.github.io/docs/audit-approfondi-webdesign-webmarketing-2026-03-02.md

Audit approfondi — Webdesign, conversion, SEO, performance, accessibilité

Date: 2026-03-02 Repo: electron-rare.github.io Périmètre: home Astro (src/**), publication statique (dist/), tracking, SEO, préflight CI local.

Méthode

• Audit local: structure HTML/sections, CTA/tracking, assets, build, typecheck, preflight.
• Vérifications exécutées:
  • npm run build ✅
  • npm run preflight:pages ✅
  • npm run tracking:check ✅
  • npm run typecheck ❌ (2 erreurs hors scope produit)
• Veille web officielle (W3C/Google/MDN/Astro/web.dev) pour aligner les recommandations.

Findings (ordre de sévérité)

P0 — Performance LCP/poids média très élevé en hero

• Observation:
  • Le hero charge des PNG lourds (2.3–3.1 MB chacun), dont 2 en loading="eager".
  • Références: src/components/sections/Hero.tsx:113, src/components/sections/Hero.tsx:128.
  • dist/ contient de nombreux assets >2 MB (jusqu’à 3.3 MB) dans dist/assets/da/openai/*.
• Impact:
  • Risque fort de LCP dégradé sur mobile/4G, donc baisse conversion et SEO (CWV).
• Action recommandée:
  • Convertir les hero assets en AVIF/WebP + variantes responsive.
  • Ne garder qu’une image prioritaire en eager (LCP candidate), les autres en lazy.
  • Migrer vers astro:assets (<Image />/<Picture />) pour optimisation automatique.

P1 — Canonical/SEO potentiellement faux en double-hébergement

• Observation:
  • SITE_URL fallback sur GitHub Pages si PUBLIC_SITE_URL absent.
  • Référence: src/lib/site.ts:3.
  • public/sitemap.xml et public/robots.txt pointent actuellement sur https://electron-rare.github.io/.
• Impact:
  • En version externe, risque de canonical/sitemap incohérents, duplication d’indexation et dilution SEO.
• Action recommandée:
  • Rendre PUBLIC_SITE_URL obligatoire en build externe.
  • Générer robots/sitemap par environnement (Pages vs domaine externe).

P1 — Qualité CI typecheck fragile (fichiers temporaires non exclus)

• Observation:
  • npm run typecheck échoue à cause de tmp/figma-capture.spec.ts et dépendances Playwright non installées.
  • Référence: tmp/figma-capture.spec.ts:1.
• Impact:
  • Dette qualité; risque d’échec CI future si typecheck devient gate bloquant.
• Action recommandée:
  • Exclure tmp/** du tsconfig de check ou déplacer ces scripts hors zone scannée.

P1 — Rigidité des images par défaut (format PNG partout)

• Observation:
  • Pipeline assets majoritairement PNG lourds, pas de déclinaison format moderne.
• Impact:
  • Surconsommation bande passante, Time to Interactive plus lent, coût perf récurrent.
• Action recommandée:
  • Standardiser une policy médias: AVIF/WebP + fallback, dimensions max par zone, compression quality budget.

P2 — Données structurées limitées

• Observation:
  • JSON-LD Person présent, mais pas de WebSite/Organization enrichi.
• Impact:
  • Moins de signal sémantique pour moteurs.
• Action recommandée:
  • Ajouter schémas complémentaires minimalistes (sans sur-spam).

P2 — Préflight Storybook avec warnings de chunks lourds

• Observation:
  • Build Storybook signale plusieurs chunks > 500 KB.
• Impact:
  • Faible impact prod (storybook est outil interne), mais affecte vitesse de review design.
• Action recommandée:
  • Découpage plus fin des stories lourdes si besoin équipe.

Forces actuelles (à préserver)

• Contrat tracking solide avec validation dédiée (tracking:check) ✅.
• CTA et parcours conversion lisibles, états focus et interactions présents ✅.
• Build et preflight global passent ✅.
• Structure sémantique globale propre (h1 unique, sections nommées, ancres clés stables) ✅.

Plan d’amélioration recommandé

Sprint A (48h) — Gains rapides ROI élevé

1. Optimiser hero assets (AVIF/WebP + responsive sizes).
2. Garder 1 seul visuel hero en eager (LCP), passer le reste en lazy.
3. Verrouiller PUBLIC_SITE_URL en externe pour canonical/sitemap.

Sprint B (1 semaine) — Fiabilité & SEO

1. Corriger typecheck en excluant tmp/** du scan.
2. Ajouter WebSite + Organization JSON-LD.
3. Ajouter un contrôle budget média dans CI (taille max image hero).

Sprint C (2 semaines) — Maturité continue

1. Mettre en place une mesure CWV réelle (CrUX/RUM si possible).
2. Définir KPI business: CTA CTR, conversion contact, scroll depth, outbound qualification.
3. Itérer A/B sur microcopy hero/CTA.

Montée en compétences (compétences à renforcer)

Priorité 1 — Performance web réelle

• Apprendre et appliquer LCP/INP/CLS orientés business.
• Exercice concret: passer le hero sous budget poids mobile.

Priorité 2 — SEO technique de déploiement multi-domaines

• Maîtriser canonical/sitemap/robots par environnement.
• Exercice concret: pipeline build multi-host sans duplication SEO.

Priorité 3 — Accessibilité opérationnelle

• Consolider WCAG 2.2 (focus, contrastes, navigation clavier, noms accessibles).
• Exercice concret: checklist A11y systématique avant release.

Sources web officielles utilisées

• Web Vitals (Google): https://web.dev/articles/vitals
• Optimiser le LCP (web.dev): https://web.dev/articles/optimize-lcp
• SEO Starter Guide (Google): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Lighthouse docs (Chrome): https://developer.chrome.com/docs/lighthouse
• WCAG 2.2 (W3C): https://www.w3.org/TR/WCAG22/
• Astro image optimization (astro:assets): https://docs.astro.build/en/guides/images/
• MDN responsive images (srcset/sizes): https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
• HubSpot Academy (digital marketing): https://academy.hubspot.com/courses/digital-marketing
• Ahrefs Academy: https://ahrefs.com/academy
• Google Skillshop: https://skillshop.withgoogle.com/