Skip to content

Improve: shrink the two raster icons and batch the demo layout reads - #32

Merged
SandObserver merged 2 commits into
mainfrom
perf/icon-webp-and-batched-layout-reads
Sep 6, 2026
Merged

SandObserver merged 2 commits into
mainfrom
perf/icon-webp-and-batched-layout-reads

Conversation

@SandObserver

Copy link
Copy Markdown
Owner

Summary

  • Replace public/icons/tdarr.png (24.9 KB) and public/icons/speedtest-tracker.png (10.5 KB) with 64px WebP at 3.0 KB and 2.4 KB. Both render at 11 CSS px in the folder minis, so 64px covers DPR 3.
  • Batch the .wcell and .np reads before the --ws and --nps writes in fitDemoWidgets, and throttle the resize and change handlers through requestAnimationFrame. The previous read/write interleaving forced a synchronous layout on each write.
  • Add /_astro/* and /fonts/* to public/_headers with max-age=31536000, immutable; they were falling through to the four hour default despite _astro filenames being content hashed.
  • Add webp to the two binary exclusions in scripts/check-dist.mjs so the hygiene and secret scans do not read WebP bytes as UTF-8.

Testing
All green: npm run build and npm run check both pass. Verified in Chrome against astro preview: both icons load at 64x64 with transparency intact and no broken images, and at a 393px viewport --sc, --ws and --nps resolve to identical values before and after the reflow change.

Checklist

  • npm run build and npm run check both pass.
  • Product UI is shown by running or capturing it, never recreated in CSS.
  • Any new preview or screenshot carries no private hostnames or real data.
  • Visual changes verified in both colour schemes and both docs themes.
  • Links to the app repo still resolve.

Preload /img/wallpaper.jpg so the mockup background is requested from the
document head instead of after the stylesheet parses.

Raise .license and .foot-links span to rgba(255,255,255,.5) and darken the
version badge to #0072b5, bringing all three above the 4.5 contrast minimum.
Replace tdarr.png and speedtest-tracker.png with 64px WebP, matching the
11px they render at. The pair drops from 35.4 KB to 5.3 KB.

Read .wcell and .np before writing --ws and --nps in fitDemoWidgets, and
throttle the resize handler with requestAnimationFrame, so the interleaved
reads no longer force a layout pass each.

Serve /_astro/* and /fonts/* with a one year immutable cache instead of the
four hour default.

Exclude .webp from the check-dist text scans alongside the other binaries.
@SandObserver SandObserver added the enhancement New feature or request label Sep 6, 2026
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying stackyard-docs with  Cloudflare Pages  Cloudflare Pages

Latest commit: 9c3b7eb
Status: ✅  Deploy successful!
Preview URL: https://75576e35.stackyard-docs.pages.dev
Branch Preview URL: https://perf-icon-webp-and-batched-l.stackyard-docs.pages.dev

View logs

@SandObserver
SandObserver merged commit 7c36784 into main Sep 6, 2026
2 checks passed
@SandObserver
SandObserver deleted the perf/icon-webp-and-batched-layout-reads branch September 6, 2026 00:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant