1. Context
• Client: Nina Carducci, portrait & event photographer (static showcase site hosted on GitHub Pages).
• Team: Artdantech, Nina Carducci (client).
• Deliverables: optimized code (HTML/CSS/JS, images), Schema.org markup (local SEO), Open Graph/Twitter Cards metadata, accessibility fixes, before/after reports (Lighthouse, WAVE), change notes.
• Starting point: existing site ninacarducci.github.io, initial Lighthouse mobile audit, client call/inputs, GitHub repo provided to clone.
2. Need
• Speed up loading (image optimization, critical resources, reduced JS/CSS) and improve visual stability (CLS).
• Improve technical SEO (semantics, meta tags, heading structure, links, canonical, sitemap/robots when relevant).
• Implement local SEO via Schema.org (address, phone, opening hours) and social metadata (Open Graph/Twitter).
• Strengthen accessibility (contrast, ARIA structure, keyboard navigation, alt text).
• Produce a clear report listing actions and impact with before/after metrics.
3. Client / Audience
• End users: local prospects searching for a photographer (mobile-first, social traffic).
• Client: Nina Carducci (needs visibility and lead generation via better SEO and a faster experience).
4. Goals
4.1 Functional
• Significantly reduced load time on mobile and desktop, without degrading design.
• Enhanced presence in Google results (valid structured data), correct social previews when sharing.
• Keyboard-navigable site, screen-reader friendly, with no major accessibility issues.
• Educational, actionable optimization report delivered to the client.
4.2 Technical
• Lighthouse ≥ 90% for Performance, SEO and Accessibility (mobile profile).
• Rich Results Test valid for Schema.org (LocalBusiness/Photographer).
• Zero blocking errors in WAVE; fixed contrast and heading hierarchy.
• Significantly reduced page weight and network requests (target: −50% homepage image weight).
5. Constraints / Challenges
• Static hosting (GitHub Pages): no server-side dynamic transformations (optimize at build time).
• Preserve existing content and visual identity while correcting semantics.
• Very heavy high-resolution images: need responsive images and modern formats (AVIF/WebP) with fallbacks.
• Avoid SEO regressions (preserve URLs, keep titles/meta consistent).
6. Process / Methodology
6.1 Analysis
• Initial audits: Lighthouse (mobile), GTmetrix/WebPageTest, WAVE, network inspection (DevTools).
• Map heavy assets (images, fonts), render-blocking resources (CSS/JS), and semantic/meta issues.
• Collect local business data (address/phone/hours) for Schema.org markup.
6.2 Breakdown into GitHub issues
• Performance: image optimization (compression, modern formats, srcset/sizes, lazy loading), minify CSS/JS/HTML, remove unused JS/CSS, preload/preconnect.
• Technical SEO: consistent H1/H2, unique meta title/description, canonical, semantic layout (header/main/nav/footer, figure/figcaption), internal linking.
• Local & social: JSON‑LD Schema.org (Photographer/LocalBusiness), Open Graph & Twitter Cards, favicons and manifest.
• Accessibility: meaningful alts, form labels, contrast, visible focus, tab order, ARIA roles, lang attribute.
• Reporting: BEFORE/AFTER screenshots, metric tables (LCP, TBT, CLS, requests, weight), detailed changelog.
6.3 Architecture & logic
• Structure: index.html, optional pages, optimized assets/img, minified CSS, lightweight deferred JS.
• Optimization pipeline: npm scripts (e.g., Squoosh/Sharp for images, html-minifier, cssnano, Terser), generate WebP/AVIF + JPG fallback, build srcset/sizes.
• Loading strategy: loading="lazy" for below-the-fold images, preload critical font/hero image when needed, defer/async JS.
• Fonts: modern format (woff2), font-display: swap, preconnect to CDN, subset if needed.
• SEO safety: canonical tag, robots.txt (allow), sitemap.xml (if relevant), consistent per-page metadata.
6.4 Technical choices (rationale)
• Image-first optimization: the biggest lever for a photography showcase site (LCP and overall weight).
• JSON‑LD preferred over microdata for simpler, more robust structured data integration.
• Modern formats (AVIF/WebP) with fallback to keep compatibility; object-fit: cover to preserve cropping.
• Minification + removal of unused resources (PurgeCSS if a framework is present; otherwise targeted cleanup).
6.5 Main flows
• Visitor landing: fast FCP, hero visible without layout shifts (CLS≈0), smooth interactions.
• Social sharing: correct preview (title/description + dedicated OG image), Twitter Summary Large Image.
• Local search: enriched snippets (address/hours) thanks to valid structured data.
6.6 Tests & quality
• Metrics: LCP, FCP, TBT/INP, CLS, total weight, request count—compared BEFORE/AFTER (mobile with simulated 4G).
• Accessibility: WAVE audit (0 errors), Lighthouse A11y ≥ 90, keyboard/screen-reader review, WCAG AA contrast.
• SEO: Lighthouse SEO ≥ 90, Rich Results Test OK, OG/Twitter validation (Facebook Sharing Debugger / Card Validator).
• Cross-device: test across key breakpoints and major browsers.
7. Analysis
• Image weight and formatting were the main performance bottleneck; combining compression, responsive images, lazy loading, and modern formats delivered the largest LCP gains.
• Semantic markup + JSON‑LD improve how search engines understand the content, while social metadata increases CTR through better previews.
• Strong accessibility improves UX and quality signals while aligning with best practices.
8. Technical decisions
• Tools: Lighthouse, PageSpeed Insights, GTmetrix, WebPageTest, WAVE.
• Optimization: Squoosh‑CLI/Sharp (images), cssnano/PurgeCSS, Terser, html‑minifier, Autoprefixer.
• SEO/A11y: Schema.org JSON‑LD, Open Graph/Twitter Cards, robots.txt/sitemap.xml (when useful), ARIA/roles, lang.
9. Resolution logic
• Initial audit → prioritize (images, render-blocking, semantics) → performance optimization → technical SEO → local + social → accessibility → final audits → report documentation.
10. Stack used
• Tech: HTML5, CSS3 (optional Sass), Vanilla JS.
• Tooling/build: Node.js + npm scripts, Git/GitHub Pages, DevTools.
• Validation: Rich Results Test, Facebook Debugger, Twitter Card Validator, Lighthouse, WAVE.
11. Final result
• Performance: Lighthouse mobile ≥ 90 (significantly reduced LCP), homepage weight −50% to −70% depending on images, fewer requests.
• SEO: score ≥ 90, valid structured data (LocalBusiness/Photographer), correct and attractive social previews.
• Accessibility: Lighthouse A11y ≥ 90, 0 WAVE errors, compliant keyboard navigation and contrast.
• Documentation: detailed before/after report listing each action, its rationale, and measured impact for the client.