perf(marketing): Lighthouse pass on the home page — fonts, One Tap, hero CLS, a11y by 2witstudios · Pull Request #2536 · 2witstudios/PageSpace

2witstudios · 2026-09-05T20:31:15Z

Summary

Lighthouse baseline on pagespace.ai (2026-09-05): mobile perf 72 / LCP 4.4s / CLS 0.20 / a11y 92, desktop perf 97 / best practices 96. Five targeted fixes, each verified in a real browser, no design changes except one flagged below.

Drop the unused Newsreader italic face — 147 KB of the ~280 KB of display-font bytes mobile waited on before LCP; nothing on the site sets an italic serif.
Inject Google One Tap on idle, not on mount — the 98 KB GSI script was ~75% unused and competed with the hero. Verified: DOMContentLoaded ~300ms, GSI request ~700ms. No preconnect (One Tap already skips mobile).
Reserve the scaled hero window's box in CSS — the whole mobile CLS was one event: ScaledAppWindow shrinking the hero 547px → 274px on hydration and pulling the quote band into view. aspect-ratio: 760 / 547 below 820px makes the server HTML the final height. Probed at 360/412/600/760px: single height throughout, CLS 0.
Mock markup — header cell for the checkbox column, orphan <li> wrapped in a <ul> (same marker and indent).
Logo alt + carousel contrast — alt="" next to visible link text; inactive carousel slides aria-hidden and opacity 0.5 → 0.9, the lowest value at which muted 12px text inside a dimmed slide meets 4.5:1 (axe blends slide opacity into text colour; every remaining contrast failure was one of these). Lighthouse a11y on dev: 92 → 100.

Judgment call to review: the 0.9 slide opacity makes inactive-slide dimming subtler than the 0.5 design. Revert that one line and accept the contrast finding if the emphasis matters more.

Not done here: re-measuring production (tracked as the last task on the epic; runs after deploy).

Epic on the dev board: Marketing Home Lighthouse Epic (page ppd3rtz7h0ndq9oto5ni1f1l).

Test plan

CI green (typecheck/lint not run locally — 21 pu agents active)
After deploy: mobile Lighthouse on pagespace.ai shows CLS ≈ 0 and LCP well under 4.4s
Carousel dimming acceptable at 0.9 (or revert to 0.5)

🤖 Generated with Claude Code

https://claude.ai/code/session_01JLFzFg8rqENHEar5TRuC7w

Summary by CodeRabbit

Accessibility
- Improved screen reader support by hiding inactive carousel slides.
- Marked decorative logo images appropriately to avoid duplicate announcements.
- Added an accessible label to the task table’s completion column.
- Improved list semantics and styling in documentation content.
Performance
- Deferred Google sign-in script loading until the browser is idle.
Visual Improvements
- Improved readability of inactive carousel text.
- Reduced layout shifting while the landing page hero content loads.

Nothing on the site sets an italic serif; the italic file was 147 KB of the ~280 KB of display-font bytes mobile visitors waited on before LCP. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JLFzFg8rqENHEar5TRuC7w

The 98 KB GSI script was ~75% unused on marketing pages and competed with the hero for bandwidth. Wait for requestIdleCallback (4s ceiling), or a short post-load timeout where it is unsupported. No preconnect: One Tap already skips mobile, so a hint there would open an unused connection. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JLFzFg8rqENHEar5TRuC7w

…orphan list items The task-list mock's checkbox column had an empty <th>, and the document mock rendered an <li> outside any list. Header gets visually hidden text; the list gets a <ul> that keeps the same disc marker and indent. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JLFzFg8rqENHEar5TRuC7w

…mobile CLS Below 820px ScaledAppWindow lays the hero window out at 760px and scales it down, but only after hydration. Server HTML shipped the unscaled 547px-tall window, so on a throttled phone the hero shrank ~270px about 3s in and pulled the quote band into view (mobile CLS 0.20, the only shift on the page). Reserve the scaled box with aspect-ratio 760/547 so the first paint is already the final height; the effect now only adds the transform. Probed at 360/412/600/760px: one outer height throughout, CLS 0. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JLFzFg8rqENHEar5TRuC7w

…lift their opacity to 0.9 - Nav and footer logos sit beside visible "PageSpace" text, so alt="" stops the name being announced twice. - Inactive page-type slides are previews: aria-hidden so readers get one slide, and opacity raised from 0.5 to 0.9, the lowest value at which muted 12px text inside a dimmed slide still meets 4.5:1 (axe blends the slide's opacity into the text colour; every remaining contrast failure was one of these). Lighthouse a11y on dev: 92 -> 100. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JLFzFg8rqENHEar5TRuC7w

coderabbitai · 2026-09-05T20:32:46Z

Warning

Review limit reached

Next included review available in 48 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 17b5f77d-599a-488c-89b8-a3db9a28d181

📥 Commits

Reviewing files that changed from the base of the PR and between 7c2e4f2 and c1327bd.

📒 Files selected for processing (1)

apps/marketing/src/components/GoogleOneTap.tsx

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 31781174-68a3-4d46-af05-0e88e6f6f8a7

📥 Commits

Reviewing files that changed from the base of the PR and between 1c1f0ce and 7c2e4f2.

📒 Files selected for processing (7)

apps/marketing/src/app/layout.tsx
apps/marketing/src/components/GoogleOneTap.tsx
apps/marketing/src/components/SiteFooter.tsx
apps/marketing/src/components/SiteNavbar.tsx
apps/marketing/src/components/sections/PageTypeCarouselSection.tsx
apps/marketing/src/components/sections/landing/landing.css
apps/marketing/src/components/sections/landing/mocks.tsx

💤 Files with no reviewable changes (1)

apps/marketing/src/app/layout.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

Walkthrough

The marketing app defers Google One Tap loading, updates image and carousel accessibility semantics, improves mock content labels, adjusts landing-page styles and responsive layout, and removes explicit Newsreader style variants.

Changes

Marketing application updates

Layer / File(s)	Summary
Deferred Google One Tap loading `apps/marketing/src/components/GoogleOneTap.tsx`	The GSI script loads during browser idle time or after a fallback timeout. Cleanup cancels scheduled callbacks and the One Tap prompt.
Marketing accessibility semantics `apps/marketing/src/components/SiteFooter.tsx`, `apps/marketing/src/components/SiteNavbar.tsx`, `apps/marketing/src/components/sections/PageTypeCarouselSection.tsx`, `apps/marketing/src/components/sections/landing/mocks.tsx`	Logo images are decorative, inactive carousel slides are hidden from assistive technology, and mock content includes list and table header semantics.
Landing page presentation `apps/marketing/src/app/layout.tsx`, `apps/marketing/src/components/sections/landing/landing.css`	The Newsreader configuration no longer requests explicit styles. Landing-page opacity, document lists, and responsive app-window sizing are updated.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 7c2e4

This updates marketing-page loading, accessibility semantics, and responsive presentation without an identified current-head regression. The change is ready to merge.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 6 functions across 5 files. (1 skipped: 1…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main changes: marketing performance improvements, deferred Google One Tap loading, hero CLS reduction, font optimization, and accessibility fixes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 6 functions across 5 files. (1 skipped: 1 unsupported.)

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch marketing/lighthouse-home

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

`"requestIdleCallback" in window` narrows window to never in the else branch under lib.dom, failing typecheck and the Next build in CI. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JLFzFg8rqENHEar5TRuC7w

2witstudios and others added 5 commits September 5, 2026 15:19

2witstudios mentioned this pull request Sep 5, 2026

feat(marketing): space-themed hero backdrop (preloaded AVIF, light copy) #2538

Merged

4 tasks

2witstudios merged commit 3db8aff into master Sep 6, 2026
4 checks passed

Navigation Menu

perf(marketing): Lighthouse pass on the home page — fonts, One Tap, hero CLS, a11y - #2536

perf(marketing): Lighthouse pass on the home page — fonts, One Tap, hero CLS, a11y#2536
2witstudios merged 6 commits into
masterfrom
marketing/lighthouse-home

2witstudios commented Sep 5, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 5, 2026 •

edited

Loading

Review limit reached

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

2witstudios commented Sep 5, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

2witstudios commented Sep 5, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 5, 2026 •

edited

Loading