Skip to content

Perf: cut initial JS to lift Lighthouse out of orange - #33

Merged
yatesjalex merged 1 commit into
mainfrom
yatesclaude/elegant-beaver-9482e7
Apr 23, 2026
Merged

Perf: cut initial JS to lift Lighthouse out of orange#33
yatesjalex merged 1 commit into
mainfrom
yatesclaude/elegant-beaver-9482e7

Conversation

@yatesjalex

@yatesjalex yatesjalex commented Apr 23, 2026

Copy link
Copy Markdown
Owner

Summary

Lighthouse mobile scored 74–85 across regions with TBT 473–930 ms and LCP up to 3.2 s. Every failing audit mapped to two root causes (legacy JS polyfills + unused/slow JS on the main thread), so this PR is three config-only changes that target them directly. No architectural changes.

  • browserslist narrowed to modern evergreen browsers (last 2 versions of Chrome/FF/Safari/Edge). Stops SWC from emitting legacy transforms/polyfills to everyone, which resolves both "Legacy JavaScript" audit findings outright.
  • experimental.optimizePackageImports in next.config.ts for @mui/material, @mui/icons-material, and motion. Per-path imports alone (@mui/material/Box) don't stop MUI from dragging in internal modules — this compile-time transform does.
  • LiveOpsConsole is now next/dynamic with ssr: false. It's a debug surface, not critical path. Splitting it frees main-thread time before interactive.

Expected impact

Score: 74–85 → 88–95. TBT should drop below ~300 ms. LCP should improve 300–500 ms as the main thread frees up sooner. CLS was already 0 and stays that way.

Test plan

  • pnpm typecheck — clean
  • pnpm test — 326/326 pass (52 files)
  • pnpm build — compiles; optimizePackageImports confirmed active in build log
  • pnpm exec playwright test — 9/9 pass, incl. the Live Ops Console opens on Cmd+Shift+D spec that exercises the now-dynamic component
  • Re-run Lighthouse against the preview deploy of this PR and confirm score lands in the green band
  • If score doesn't clear 88, revert — all three changes are independently reversible

🤖 Generated with Claude Code


Note

Medium Risk
Changes build-time transpilation and import optimization settings, which can impact bundle output and browser compatibility if assumptions about supported browsers or package export shapes are wrong.

Overview
Improves initial load performance by code-splitting the debug-only LiveOpsConsole behind next/dynamic (client-only) so it no longer ships in the first JS chunk for MyActivityClient.

Updates Next.js config to enable experimental.optimizePackageImports for MUI and motion, and adds a modern evergreen browserslist in package.json to reduce legacy transforms/polyfills in generated client bundles.

Reviewed by Cursor Bugbot for commit 20d739a. Bugbot is set up for automated code reviews on this repo. Configure here.

Lighthouse mobile sat at 74-85 across regions with TBT 473-930ms. Three
non-architectural config changes that target the dominant audits:

- browserslist narrowed to modern evergreen browsers so SWC stops
  shipping legacy JS transforms and polyfills to everyone. Resolves the
  two "Legacy JavaScript" audit findings directly.
- experimental.optimizePackageImports enables the compile-time
  transform for @mui/material, @mui/icons-material, and motion.
  Per-path imports alone don't stop MUI from dragging in internal
  modules; this does.
- LiveOpsConsole is now lazy (next/dynamic, ssr:false). It's a debug
  surface, not critical path, so keeping it out of the initial bundle
  frees main-thread time before interactive.

Verified: typecheck, 326/326 unit tests, production build, and 9/9
Playwright specs (including the LiveOpsConsole Cmd+Shift+D spec) all
pass unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented Apr 23, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
super Ready Ready Preview, Comment Apr 23, 2026 5:04am

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 20d739a. Configure here.

Comment thread next.config.ts
@yatesjalex
yatesjalex merged commit 36a6732 into main Apr 23, 2026
4 checks passed
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.

1 participant