Skip to content

perf: Reduce TBT/CLS + improve a11y via layout fixes, chunked render, passive listeners, alt text#5915

Open
7se7en72025 wants to merge 1 commit intosugarlabs:masterfrom
7se7en72025:perf/lighthouse-optimize-tbt-cls-a11y
Open

perf: Reduce TBT/CLS + improve a11y via layout fixes, chunked render, passive listeners, alt text#5915
7se7en72025 wants to merge 1 commit intosugarlabs:masterfrom
7se7en72025:perf/lighthouse-optimize-tbt-cls-a11y

Conversation

@7se7en72025
Copy link
Contributor

Summary

Targets Lighthouse: reduces Total Blocking Time (TBT) and Cumulative Layout Shift (CLS) while improving img-alt accessibility.

Changes

  1. Batch DOM reads before writes in _makeButton, _initializePalettes, and init() so layout measurements happen before mutations, eliminating forced synchronous layouts.
  2. Break blocks.loadNewBlocks() into chunks of 20 blocks via setTimeout(0) and _processOneBlock() to yield between batches and shrink Long Tasks.
  3. Mark touchstart/touchmove/wheel listeners as { passive: true } wherever preventDefault() is not called, letting the browser avoid blocking scroll.
  4. Populate alt text for dynamically created <img> buttons using the button label (stripping shortcut hints) so they pass Lighthouse’s img-alt rule.

Testing

  • Manual smoke: main screen loads, palettes initialize, and blocks render without errors.
  • Accessibility audit: toolbar <img> elements pass img-alt.

@github-actions
Copy link
Contributor

✅ All Jest tests passed! This PR is ready to merge.

- core: batch DOM reads/writes in activity.js and turtles.js to eliminate layout thrashing (FastDOM pattern).
- blocks: chunk block initialization via setTimeout to reduce Total Blocking Time (TBT).
- events: apply `passive: true` to touch and wheel listeners to unblock the compositor thread.
- aiwidget: implement DocumentFragment for batched DOM insertion, AudioContext singleton, and WeakMap index caching.
- a11y: auto-generate descriptive `alt` tags for dynamic toolbar images.
@github-actions
Copy link
Contributor

✅ All Jest tests passed! This PR is ready to merge.

@7se7en72025 7se7en72025 force-pushed the perf/lighthouse-optimize-tbt-cls-a11y branch from f2970be to 9fad62f Compare February 26, 2026 08:42
@7se7en72025
Copy link
Contributor Author

Hi! @walterbender
This PR enhances Lighthouse scores by batching DOM reads to avoid layout thrashing, chunking the block render loop to ensure Long Tasks are short, adding passive flags to non-preventing touch/wheel listeners, and providing alt text for dynamically added toolbar images. The target metrics are TBT/CLS for Performance and img-alt for Accessibility. All changes are backwards compatible and use the existing Prettier config
happy to tweak anything you see.

@github-actions
Copy link
Contributor

✅ All Jest tests passed! This PR is ready to merge.

Copy link
Contributor

@kartikktripathi kartikktripathi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants