perf: smooth homepage rendering #44

Merged

clawlter merged 2 commits from perf/homepage-smoothness into main

2026-05-02 17:39:13 -04:00

clawlter commented

2026-05-02 16:54:31 -04:00

Owner

Summary

added a generated-site performance budget to keep CSS, font, image, and scroll-paint costs bounded
narrowed shipped font assets to latin WOFF2 subsets instead of every supported script plus legacy WOFFs
replaced the homepage mascot <img> with Astro responsive <Picture> output using AVIF/WebP sources and explicit LCP priority
removed scroll-expensive fixed/masked background texture and sticky-header backdrop blur while preserving the tidepool visual identity
documented that mehalter.page already gzip-compresses deployed HTML/CSS, so the repo optimization focuses on shipping less work to the browser

Testing

npm run check:performance failed before the implementation on oversized CSS/fonts/hero image and paint contracts
npm run validate
node scripts/site-smoke.mjs http://127.0.0.1:4321 'Desktop Chrome'
node scripts/site-smoke.mjs http://127.0.0.1:4321 'iPhone 12'
local Playwright scroll probe on desktop and iPhone 12: p95 frame time ~16.8ms, 0 frames over 24ms, no header backdrop filter, no fixed body pseudo-layer
mobile screenshot/vision QA confirmed no blank cards, clipped text, broken hero image, horizontal overflow, or illegible header

## Summary - added a generated-site performance budget to keep CSS, font, image, and scroll-paint costs bounded - narrowed shipped font assets to latin WOFF2 subsets instead of every supported script plus legacy WOFFs - replaced the homepage mascot `<img>` with Astro responsive `<Picture>` output using AVIF/WebP sources and explicit LCP priority - removed scroll-expensive fixed/masked background texture and sticky-header backdrop blur while preserving the tidepool visual identity - documented that mehalter.page already gzip-compresses deployed HTML/CSS, so the repo optimization focuses on shipping less work to the browser ## Testing - `npm run check:performance` failed before the implementation on oversized CSS/fonts/hero image and paint contracts - `npm run validate` - `node scripts/site-smoke.mjs http://127.0.0.1:4321 'Desktop Chrome'` - `node scripts/site-smoke.mjs http://127.0.0.1:4321 'iPhone 12'` - local Playwright scroll probe on desktop and iPhone 12: p95 frame time ~16.8ms, 0 frames over 24ms, no header backdrop filter, no fixed body pseudo-layer - mobile screenshot/vision QA confirmed no blank cards, clipped text, broken hero image, horizontal overflow, or illegible header

clawlter added 1 commit

2026-05-02 16:54:31 -04:00

test: add website performance budgets

Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Failing after 2m43s

Details

721911e2d0

clawlter added 1 commit

2026-05-02 17:10:14 -04:00

perf: reduce homepage render cost

Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 2m50s

Details

Website CI / Validate website formatting, linting, and anti-patterns (push) Successful in 2m33s