Repository navigation
perf: run the scene in a worker, paint the hero on the first frame, polish SEO and UX - #17
Merged
Merged
Conversation
Lighthouse on mobile scored 41: the hero was held at opacity 0 until the intro finished, and three.js loaded, compiled and rendered on the main thread, which the intro waited on. LCP 7.3 s, TBT 7.5 s. The scene now runs in a Web Worker on an OffscreenCanvas wherever the browser allows it. scene.ts touches no DOM any more: everything it needs from the page comes through a SceneHost, so the same module runs in the worker (scene-worker.ts) or on the page for browsers without OffscreenCanvas WebGL (older Safari). scene-client.ts picks the path, sends the beat with one frame in flight at a time, and pins the callouts on the page from what the scene reports. The main thread is left with the scroll spring and a few style writes: TBT is 0 ms on both presets. The hero no longer waits for anything. It is painted, legible, on the first frame and settles into place with a transform-only animation; a fade would keep Chrome from counting the text as the LCP at all. The intro (the ruler drawing itself up to the head, the readout counting from 000 001) becomes the scene's loading state, drawn in the stage beside the copy, and gives way to the scene when it is ready. Its elements are placed by transforms, so the intro no longer shifts layout. Also: no prefetch script (every link leaves the site), the third font preloaded (the install command is in the hero), the story's CSS height matched to the timeline, and the scene skipped entirely while it is covered. Mobile 41 → 100 (LCP 0.9 s, TBT 0 ms, CLS 0); desktop 92 → 100. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Search engines get JSON-LD for the framework (SoftwareSourceCode), the organisation and the site, an og:locale, a link to the sitemap with a lastmod, and a noindex on the 404 page. public/_headers gives the hashed build output a year of immutable cache and sets the usual safety headers. On the page: a nav landmark, link targets padded to a finger's size without moving the type, a slightly larger mode toggle, a 2px focus ring, a live region that announces the copied install command, and a heading for the facts section so the outline no longer jumps from h1 to h3. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This was referenced Oct 30, 2026
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
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.
Summary
Lighthouse 100 on mobile and desktop, with accessibility and SEO at 100.
scene.tstouches no DOM; it talks to wherever it runs through aSceneHost.scene-worker.tsrenders,scene-client.tspicks the path (worker, or the page for browsers without OffscreenCanvas WebGL) and pins the callouts from what the scene reports. The main thread keeps only the scroll spring and a handful of style writes.SoftwareSourceCode,Organization,WebSite),og:locale, sitemap link andlastmod,noindexon the 404 page,public/_headerswith immutable caching for/_astro/*and safety headers.Lighthouse (
pnpm build && pnpm preview, Lighthouse 13)Best practices reads 96 locally only because the Cloudflare beacon cannot load offline.
Verification
pnpm checkandpnpm buildpass.OffscreenCanvasremoved), light and dark modes, the intro on a first visit at desktop and phone widths, the whole story (callouts, readout, rebuild counter) and the closing section.