Improve Lighthouse performance of website

[PascalSenn]

No description provided.

[Copilot]

Pull request overview

This pull request implements comprehensive Lighthouse performance and accessibility improvements for the ChilliCream website. The changes focus on optimizing images, improving accessibility through better focus states and ARIA attributes, enhancing font loading, and adding security headers.

Changes:

• Implements a Gatsby-like image optimization system with WebP/AVIF conversion, responsive srcsets, lazy loading, and blur-up placeholders
• Adds accessibility improvements including focus states, ARIA labels, and keyboard navigation support
• Optimizes font loading by migrating from external stylesheet to Next.js font optimization
• Replaces YouTube iframes with react-lite-youtube-embed for better performance
• Updates button colors for improved contrast ratios
• Adds security headers including CSP, HSTS, and frame protection
• Converts multiple semantic heading elements (h1-h6) to divs

Reviewed changes

Copilot reviewed 42 out of 43 changed files in this pull request and generated 20 comments.

Show a summary per file

File	Description
website/src/style/shared-style.ts	Updates primary button colors for better contrast and changes font reference to CSS variable
website/src/style/global-style.tsx	Adds comprehensive focus state styling for accessibility
website/src/components/widgets/*.tsx	Converts heading elements to divs and adds accessibility improvements
website/src/components/mdx/*.tsx	Adds optimized image component, fixes React key warnings, and integrates LiteYouTubeEmbed
website/src/components/layout/site/*.tsx	Adds ARIA labels and improves navigation accessibility
website/src/components/images/startpage/*.tsx	Adds width/height attributes and lazy loading to images
website/src/components/articles/*.tsx	Converts heading elements to divs and improves image loading
website/src/components/misc/*.tsx	Adds optimized image component and improves accessibility
website/lib/mdx.ts	Adds rehype plugins for unwrapping block components and optimizing images
website/lib/image-optimization.ts	Implements comprehensive image optimization system with caching
website/app/layout.tsx	Migrates from external Google Fonts stylesheet to Next.js font optimization
website/package.json	Adds dependencies for image optimization and YouTube embed
website/public/_headers	Adds security headers for production deployment
website/public/robots.txt	Removes duplicate sitemap entry
website/.gitignore	Excludes optimized image output directory
.github/workflows/*.yml	Adds image optimization step to CI/CD pipelines
.mcp.json	Adds MCP server configuration for Playwright and Lighthouse
website/lighthouse-audit.sh	Adds Lighthouse audit script for testing

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Fusion Gateway Performance Results

Simple Composite Query

	Req/s	Err%
Constant (50 VUs)	2919.70	0.00%
Ramping (0-500-0 VUs)	3338.13	0.00%

Response Times & Query

	Min	Med	Avg	P90	P95	Max
Constant	0.75ms	14.91ms	16.90ms	31.14ms	36.80ms	172.95ms
Ramping	0.70ms	65.38ms	66.79ms	123.69ms	139.57ms	262.78ms

query TestQuery {
  topProducts(first: 5) {
    inStock
    name
    price
    shippingEstimate
    upc
    weight
    reviews {
      id
      body
      author {
        id
        username
        name
      }
    }
  }
}

---

Deep Recursion Query

	Req/s	Err%
Constant (50 VUs)	750.58	0.00%
Ramping (0-500-0 VUs)	829.91	0.00%

Response Times & Query

	Min	Med	Avg	P90	P95	Max
Constant	8.65ms	61.91ms	65.08ms	80.65ms	89.02ms	335.87ms
Ramping	1.82ms	251.43ms	259.03ms	513.41ms	546.05ms	674.19ms

query TestQuery {
  users {
    id
    username
    name
    reviews {
      id
      body
      product {
        inStock
        name
        price
        shippingEstimate
        upc
        weight
        reviews {
          id
          body
          author {
            id
            username
            name
            reviews {
              id
              body
              product {
                inStock
                name
                price
                shippingEstimate
                upc
                weight
              }
            }
          }
        }
      }
    }
  }
  topProducts(first: 5) {
    inStock
    name
    price
    shippingEstimate
    upc
    weight
    reviews {
      id
      body
      author {
        id
        username
        name
        reviews {
          id
          body
          product {
            inStock
            name
            price
            shippingEstimate
            upc
            weight
          }
        }
      }
    }
  }
}

---

Variable Batching Throughput

	Req/s	Err%
Constant (50 VUs)	23448.45	0.00%
Ramping (0-500-0 VUs)	18399.81	0.00%

Response Times & Query

	Min	Med	Avg	P90	P95	Max
Constant	0.10ms	1.71ms	2.08ms	3.98ms	4.87ms	46.42ms
Ramping	0.10ms	9.50ms	11.50ms	23.61ms	28.44ms	100.24ms

query TestQuery($upc: ID!, $price: Long!, $weight: Long!) {
  productByUpc(upc: $upc) {
    inStock
    shippingEstimate(weight: $weight, price: $price)
  }
}

Variables (5 sets batched per request)

[
  { "upc": "1", "price": 899, "weight": 100 },
  { "upc": "2", "price": 1299, "weight": 1000 },
  { "upc": "3", "price": 15, "weight": 20 },
  { "upc": "4", "price": 499, "weight": 100 },
  { "upc": "5", "price": 1299, "weight": 1000 }
]

---

Run 22204711971 • Commit 564064d • Fri, 20 Feb 2026 00:04:36 GMT

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 0.00%. Comparing base (8cb0e53) to head (c8ff188).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@     Coverage Diff      @@
##   main   #9126   +/-   ##
============================
============================

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.