1. Contexte
• Client: Nina Carducci, photographe portraits & événementiel (site vitrine hébergé sur GitHub Pages).
• Équipe: Artdantech, Nina Carducci (cliente).
• Livrables: code optimisé (HTML/CSS/JS, images), balisage Schema.org (référencement local), métadonnées Open Graph/Twitter Cards, corrections d’accessibilité, rapports avant/après (Lighthouse, Wave), notes de modifications.
• Point de départ: site existant ninacarducci.github.io, audit initial Lighthouse mobile, audio/échanges client, repo GitHub fourni à cloner.
2. Besoin
• Accélérer le chargement (optimisation images, ressources critiques, réduction JS/CSS) et améliorer la stabilité visuelle (CLS).
• Optimiser le SEO technique (sémantique, métas, structure des titres, liens, canonical, sitemap/robots si pertinent).
• Mettre en place le référencement local via Schema.org (adresse, téléphone, horaires) et les métas sociales (Open Graph/Twitter).
• Renforcer l’accessibilité (contrastes, structure ARIA, navigation clavier, textes alternatifs).
• Produire un rapport clair listant actions et impacts avec comparatifs chiffrés avant/après.
3. Client
• Utilisateurs finaux: prospects locaux cherchant une photographe (mobile prioritaire, réseaux sociaux).
• Cliente: Nina Carducci (besoin de visibilité, génération de leads via meilleur référencement et expérience rapide).
4. Objectifs
4.1 Fonctionnels
• Temps de chargement significativement réduit sur mobile et desktop, sans dégrader le design.
• Présence enrichie dans les résultats Google (données structurées valides), aperçus sociaux corrects au partage.
• Site navigable au clavier, compréhensible par lecteurs d’écran, sans erreurs majeures d’accessibilité.
• Rapport d’optimisation pédagogique et actionnable remis à la cliente.
4.2 Techniques
• Lighthouse ≥ 90% sur Performances, SEO, Accessibilité (profil mobile).
• Rich Results Test valide pour le Schema.org (LocalBusiness/Photographer).
• Zéro erreur bloquante dans Wave; contrastes et hiérarchie de titres corrigés.
• Poids des pages et requêtes réseau sensiblement réduits (objectif: −50% poids images page d’accueil).
5. Contraintes / défis
• Hébergement statique (GitHub Pages): pas de serveur pour transformations dynamiques (optimisation en build).
• Conserver l’esthétique et la structure des contenus existants tout en corrigeant la sémantique.
• Images haute résolution très lourdes: nécessité de responsive images et formats modernes (AVIF/WebP) avec fallback.
• Éviter les régressions SEO (préserver URLs, titres, métas cohérents).
6. Processus / méthodologie
6.1 Analyse
• Audits initiaux: Lighthouse (mobile), GTmetrix/WebPageTest, Wave, inspection réseau (DevTools).
• Cartographie des ressources lourdes (images, polices), blocages de rendu (CSS/JS), et problèmes de sémantique/métas.
• Collecte des données locales fournies (adresse, téléphone, horaires) pour le balisage Schema.org.
6.2 Découpage en issues (GitHub)
• Perf: optimisation images (compression, formats modernes, srcset/sizes, lazy-loading), minification CSS/JS/HTML, suppression JS/CSS inutiles, preload/preconnect.
• SEO technique: titres H1/H2 cohérents, meta title/description uniques, canonical, balisage sémantique (header/main/nav/footer, figure/figcaption), liens internes.
• Local & social: JSON‑LD Schema.org (Photographer/LocalBusiness), Open Graph & Twitter Cards, favicons et manifest.
• Accessibilité: alt pertinents, labels form, contrastes, focus visibles, ordre de tabulation, rôles ARIA, lang.
• Rapports: captures AVANT/APRÈS, tableaux de mesures (LCP, TBT, CLS, requêtes, poids), changelog détaillé.
6.3 Architecture et logique
• Structure: index.html, pages éventuelles, assets/img optimisés, css minifié, js léger et différé.
• Pipeline d’optimisation: npm scripts (ex. Squoosh/Sharp pour images, html-minifier, cssnano, Terser), génération WebP/AVIF + fallbacks JPG, création srcset/sizes.
• Chargement: lazy-loading="lazy" sur images hors écran, preload de la police critique/hero image si nécessaire, defer/async JS.
• Polices: format moderne (woff2), font-display: swap, preconnect au CDN, sous‑ensemble si besoin.
• Sécurité SEO: canonical, robots.txt (autoriser), sitemap.xml (si pertinent), cohérence des métas par page.
6.4 Choix techniques (justification)
• Focus images: principal levier de gain (LCP/TBT) sur site vitrine photographique.
• JSON‑LD préféré aux microdonnées pour simplicité et robustesse du balisage.
• Formats modernes (AVIF/WebP) avec fallback pour compatibilité; object-fit/cover pour conserver le cadrage.
• Minification et suppression de ressources non utilisées (PurgeCSS si framework, sinon nettoyage ciblé).
6.5 Flux principaux
• Arrivée visiteur: First Contentful Paint rapide, hero visible sans jank (CLS≈0), interactions fluides.
• Partage social: aperçu correct (titre, description, image OG dédiée), Twitter Card Summary Large Image.
• Recherche locale: affichage d’extraits enrichis (adresse/horaires) via données structurées valides.
6.6 Tests et qualité
• Mesures: LCP, FCP, TBT/INP, CLS, poids total, nombre de requêtes, comparés AVANT/APRÈS (mobile 4G simulée).
• Accessibilité: audit Wave (0 erreur), Lighthouse A11y ≥ 90, revue clavier/lecteur d’écran, contrastes OK (WCAG AA).
• SEO: Lighthouse SEO ≥ 90, Rich Results Test OK, validation métas OG/Twitter (Facebook Sharing Debugger / Card Validator).
• Cross‑device: tests sur tailles d’écran clés et navigateurs principaux.
7. Analyse
• Le poids et le formatage des images sont le principal facteur limitant les perfs; leur optimisation combinée au lazy‑loading et aux formats modernes apporte les gains majeurs (LCP).
• Le balisage sémantique et JSON‑LD renforce la compréhension du contenu par les moteurs, tandis que les métas sociales améliorent le CTR via des aperçus soignés.
• Une accessibilité solide améliore l’UX et les signaux qualité (et la conformité aux bonnes pratiques).
8. Choix techniques
• Outils: Lighthouse, PageSpeed Insights, GTmetrix, WebPageTest, Wave.
• Optimisation: Squoosh‑CLI/Sharp (images), cssnano/PurgeCSS, Terser, html‑minifier, Autoprefixer.
• SEO/A11y: JSON‑LD Schema.org, Open Graph/Twitter Cards, robots.txt/sitemap.xml (si utile), ARIA/roles, lang.
9. Logique de résolution
• Audit initial → priorisation (images, render‑blocking, sémantique) → optimisation perfs → SEO technique → local + social → accessibilité → audits finaux → documentation du rapport.
10. Stack utilisée
• Tech: HTML5, CSS3 (option Sass), JS Vanilla.
• Build/outillage: Node.js + npm scripts, Git/GitHub Pages, DevTools.
• Validation: Rich Results Test, Facebook Debugger, Twitter Card Validator, Lighthouse, Wave.
11. Résultat final
• Performances: Lighthouse mobile ≥ 90 (LCP réduit significativement), poids page d’accueil −50% à −70% selon images, requêtes réduites.
• SEO: score ≥ 90, données structurées valides (LocalBusiness/Photographer), aperçus sociaux corrects et attrayants.
• Accessibilité: Lighthouse A11y ≥ 90, 0 erreur Wave, navigation clavier et contrastes conformes.
• Documentation: rapport avant/après détaillant chaque action, ses justifications et l’impact mesuré pour la cliente.