astro-website/openspec/changes/lighthouse-remediation/tasks.md

1. Baseline And Repro

• 1.1 Run Lighthouse from a clean Chrome profile (no extensions) for both Mobile and Desktop and save reports (JSON)
• 1.2 Record current failing audits and their affected selectors/URLs (from the Lighthouse "details" tables)

2. Accessibility Contrast

• 2.1 Adjust global CSS tokens/styles so .muted card metadata meets 4.5:1 contrast on cards
• 2.2 Adjust pill/chip background + text colors to meet 4.5:1 contrast (e.g., .pill and source variants)
• 2.3 Re-run Lighthouse accessibility category and confirm color-contrast passes

3. SEO Hygiene (robots + crawlable links)

• 3.1 Update site/public/robots.txt to use an absolute sitemap URL (e.g., Sitemap: https://santhoshj.com/sitemap-index.xml)
• 3.2 Fix non-crawlable anchors in the media modal by ensuring anchors always have href in initial HTML or switching to buttons until navigable
• 3.3 Re-run Lighthouse SEO category and confirm robots-txt and crawlable-anchors pass

4. CSP / Best Practices

• 4.1 Identify the exact CSP-related DevTools Issue message (Chrome DevTools → Issues) and capture the text
• 4.2 Implement a CSP baseline at the reverse proxy/origin that allows required resources (self + Umami + image/frame origins) and avoids permissive wildcards
• 4.3 Reduce inline scripts that force unsafe-inline (move registration / modal scripts to external files or use nonce/hash approach)
• 4.4 Re-run Lighthouse Best Practices and confirm inspector-issues passes

5. Performance: Fonts, CSS/JS, And Images

• 5.1 Remove render-blocking third-party font stylesheet by self-hosting Manrope and loading via @font-face
• 5.2 Ensure production CSS is minified (move global CSS into the build pipeline or add a build minification step)
• 5.3 Reduce unused CSS on the homepage (prune unused selectors or split critical vs non-critical styles)
• 5.4 Reduce unused JS on the homepage (remove unnecessary scripts; ensure analytics is async/defer; avoid extra inline code)
• 5.5 Improve thumbnail image delivery (use responsive srcset / resized sources where feasible; avoid oversized podcast covers)
• 5.6 Improve cache lifetimes for first-party static assets (fingerprint + immutable cache for build assets; revalidate non-fingerprinted)
• 5.7 Re-run Lighthouse Performance (mobile + desktop) and confirm 100 score

6. Verification

• 6.1 Run npm run build and ensure build succeeds
• 6.2 Smoke test site locally (npm run preview) including modal, analytics script load, and service worker registration
• 6.3 Deploy and confirm production Lighthouse scores are 100/100/100/100