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>
- Hero restructured from stacked to 2-col grid on lg+ (copy left, product
screenshot right). Replaces the abstract RouteDiagram with the actual
exchange-detail view — the product doing the thing the copy promises.
- Kicker broken out of the shared uppercase-mono pattern: italic pill with
a soft amber fill/border, scaled up to 14px. The humor now wears a
different costume from the other section kickers.
- Hero brand mark scaled to 64px and given a slow 7s sway (reduced-motion
guarded) — living atmosphere, not ambient animation.
- H1 min-height raised to 2.5em to absorb the 2-line wrap of line 1 at
mobile sizes without layout shift on rotation.
- Amber radial glow behind the product shot + subtle bevel + frame ring.
- Footer placeholder 3-wavy-lines SVG replaced with real camel logo
(spec gap from earlier refresh — header got swapped, footer didn't).
- Screenshot assets imported under public/product/.
