mirror of
https://github.com/nexu-io/open-design.git
synced 2026-10-27 09:51:12 +01:00
lefarcenandGitHub
1fd50197dd
The `/html-anything/` landing page was loading 11 screenshots directly
from `raw.githubusercontent.com/nexu-io/html-anything/main/docs/…` —
that's 6.5 MB of raw PNGs per first visit, no AVIF/WebP transcoding,
and a separate cross-origin TLS handshake the rest of the site doesn't
pay. The TODO comment at line 70 of the page has been calling this out
since the page landed.
This PR routes those images through the same pipeline as `hero.png`:
- Source PNGs upload to `static.open-design.ai/landing/assets/html-anything/`
on the existing `open-design-static` R2 bucket. Upload package lives
at `~/Downloads/r2-html-anything-orig/` (README + upload.sh ready);
merge AFTER running that script.
- Page uses `imageAsset('html-anything/<name>.png', { width, quality })`
so CF Image Resizing emits `format=auto` AVIF/WebP variants — same
contract every other landing image already uses.
- Banner is the LCP element; gets `srcset` across 768/1280/1920/2400
(mirroring `heroImageSrcset`) plus its existing `fetchpriority="high"`.
- 10 below-the-fold screenshots become `<LazyImg>` so they pick up the
precise IntersectionObserver (rootMargin 300px) instead of Chrome's
native lazy load that over-prefetches up to 3000px.
Expected on first visit (mobile, AVIF-capable browser):
banner: ~150 KB AVIF (was 2.05 MB PNG)
10 screenshots ~80-120 KB each (was 500-900 KB PNG each)
total ~1.2-1.5 MB (was 6.5 MB)
LCP estimated -800ms to -1.5s