Repository navigation
perf(www): the landing gets its own root layout and scroll-mounted islands - #44
Merged
Merged
Conversation
…lands Two root layouts. app/(site) keeps the fumadocs shell for docs, blog, compare, brand and the API routes: provider, global stylesheet, search. app/(home) is now a root layout of its own with a next-themes provider, Tailwind's preflight and a mirror of the design tokens (landing-base.css), and nothing else. The landing used two utilities from the global sheet and paid for all of it, ~95 KB of CSS before compression plus the search bundle, on every visit. Same theme storage key, so the toggle on either side is seen by the other. The showcases that carry no copy (the dashboard scene, the beam diagram, the particle wordmark) mount when the reader scrolls within a screen of them, through a dynamic import that nothing preloads. Each reserves its measured height first, so nothing moves. Every section with text stays server-rendered and hydrates as before. Mobile Lighthouse (software GL, simulated slow 4G): 88 -> 91-92, LCP 3.9 s -> 3.2-3.5 s, CLS 0. Desktop stays 100. Metadata files at app/ (sitemap, robots, icons, share images) apply to both layouts unchanged.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Two root layouts.
app/(site)/now holds the shared fumadocs shell (provider,global.css, search) and every route that needs it: docs, blog, compare, brand,api/search,og,llms*.app/(home)/is a root layout of its own:<html>/<body>, anext-themesprovider with the same settings and storage key as fumadocs', Tailwind's preflight, andlanding-base.css, which mirrors the design tokens fromglobal.css. The landing used two utilities from the global sheet and paid for all of it on every visit.Islands. The showcases with no copy (dashboard scene, beam diagram, footer particle wordmark) mount when the reader scrolls within 600 px, through a dynamic import in a client wrapper, so their JS is not downloaded or hydrated up front. Each island reserves its measured height per breakpoint (
.island--*inhome.css). Everything with text (hero, steps, feature cards, components, pillars, comparison table, bento, FAQ) stays server-rendered and hydrates exactly as before.Measured (local production build, software GL as PageSpeed runs it)
Checked
api/search, docs OG images),/docs308, 404 page renders.opengraph-image, icons, canonical, site verification.tscclean.Note
The remaining mobile gap to 100 is the simulated slow-4G bandwidth model against ~500 KB of landing JS (React, motion, the hero editor, three.js after load) and three preloaded fonts. Next step if wanted: audit
motionusage in FeatureCards and the hero editor's highlighter.