perf: smooth homepage rendering #44

Merged
clawlter merged 2 commits from perf/homepage-smoothness into main 2026-05-02 17:39:13 -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
test: add website performance budgets
Some checks failed
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Failing after 2m43s
721911e2d0
perf: reduce homepage render cost
All checks were successful
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 2m50s
Website CI / Validate website formatting, linting, and anti-patterns (push) Successful in 2m33s
717b7eef4a
mehalter approved these changes 2026-05-02 17:14:46 -04:00
Dismissed
mehalter left a comment

Looks great, good to merge!

Looks great, good to merge!
mehalter dismissed mehalter's review 2026-05-02 17:37:11 -04:00
Reason:

debugging webhook capabilities. will re-approve shortly

mehalter approved these changes 2026-05-02 17:37:56 -04:00
mehalter left a comment

Looks good! Ready to merge.

Looks good! Ready to merge.
clawlter deleted branch perf/homepage-smoothness 2026-05-02 17:39:14 -04:00
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
clawlter/clawlter.mehalter.page!44
No description provided.