astro-website/openspec/changes/archive/2026-02-10-lighthouse-fixes/tasks.md

1. Baseline And Repro

• 1.1 Add a repeatable Lighthouse run command (local) that outputs reports for mobile/desktop x light/dark/high-contrast
• 1.2 Document the Lighthouse run environment requirements (clean profile / no extensions) and scoring rule (single vs median)
• 1.3 Capture current failing audits in a checked-in note (from the provided JSON reports) to validate fixes one-by-one

2. SEO Correctness

• 2.1 Update site/public/robots.txt to reference the sitemap with an absolute URL to /sitemap-index.xml
• 2.2 Verify site/astro.config.mjs has site set correctly in production via PUBLIC_SITE_URL and that sitemap output is present after build
• 2.3 Add/verify JSON-LD structured data on the all pages (valid JSON, recognized schema type)

3. Crawlable Anchors (Media Modal)

• 3.1 Update site/src/components/MediaModal.astro so no modal anchors are rendered without href in the initial HTML
• 3.2 Ensure modal CTAs that navigate are always <a href="..."> and actions that do not navigate are <button>
• 3.3 Re-run Lighthouse SEO audit to confirm crawlable-anchors passes

4. CSS Processing And Render Blocking

• 4.1 Move site/public/styles/global.css into the Astro/Vite build pipeline (so production output is minified and cache-busted)
• 4.2 Update site/src/layouts/BaseLayout.astro to load the built CSS output and remove any no-longer-needed manual cache-busting for CSS
• 4.3 Adjust site/public/sw.js shell precache list to match the new CSS delivery strategy
• 4.4 Confirm Lighthouse no longer reports unminified-css and materially reduces unused-css-rules for the primary pages

5. Fonts

• 5.1 Replace render-blocking Google Fonts with a self-hosted font strategy (woff2 + font-display)
• 5.2 Preload only the critical font files/weights needed for above-the-fold rendering
• 5.3 Re-run Lighthouse to confirm improved render-blocking findings and LCP trend

6. Images

• 6.1 Add explicit width/height for card thumbnail images (and any other frequently used images missing dimensions)
• 6.2 Ensure above-the-fold imagery on gated pages is deterministic and does not rely on third-party delivery for a perfect Lighthouse gate
• 6.3 Re-run Lighthouse to validate reduced CLS and improved image-related savings audits

7. Service Worker / Cache Robustness

• 7.1 Verify critical asset cache-busting is effective across deploys (SW + global CSS) and does not pin stale styles
• 7.2 Confirm nginx cache headers are correct for /sw.js (no-store) and any critical CSS entrypoint

8. Security Headers (Best Practices)

• 8.1 Add baseline security headers in deploy/nginx.conf (CSP, nosniff, frame-ancestors / X-Frame-Options, referrer-policy, permissions-policy)
• 8.2 Choose a CSP tier (moderate vs hash-based) and ensure the site functions with no CSP console violations in the normal path
• 8.3 Re-run Lighthouse Best Practices to confirm CSP-related inspector issues are resolved

9. CI Quality Gate

• 9.1 Add a CI job that runs the Lighthouse command and uploads reports as artifacts
• 9.2 Make CI fail if any configured URL/variant scores below 100 in any category