hsiegeln 183a92123c perf(homepage): serve product screenshots as resized WebP to lift Lighthouse perf above 0.95 ...

The homepage Lighthouse perf score dropped to 0.94 in CI (threshold 0.95)
because Hero and ThreeAmWalkthrough each load a 1920×945 PNG screenshot
straight out of public/product/ — together ~1.2 MiB and the LCP element.
Other pages have no product imagery and pass with 1.0.

Adds a sharp-based generator (scripts/optimize-product-images.mjs, run via
`npm run optimize:images`) that emits 1280w and 1920w WebP variants beside
each source PNG. Lightbox.astro now wraps the trigger in a <picture> with
a WebP <source srcset> auto-derived from the PNG path (PNG kept as
fallback for the ~2% of clients without WebP), exposes a fetchpriority
prop, and points the dialog modal at the 1920w WebP. The Hero passes
fetchpriority="high" on the LCP image; index.astro injects a matching
<link rel="preload" as="image" imagesrcset> via a new BaseLayout head
slot so the WebP is discovered before the body parses.

Effect on the LCP image: 551 KiB PNG → 46 KiB WebP at 1280w (-92%).
Local Lighthouse perf: 0.95 → 1.00 across 3 runs on /index.html;
pricing/imprint stay 1.00; privacy unchanged at 0.98 (pre-existing CLS).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-04-25 20:20:29 +02:00

924 B

Raw Blame History

View Raw