Skip to content

perf: reduce homepage render blocking work#616

Open
xtakenotesx16 wants to merge 3 commits into
tailcallhq:developfrom
xtakenotesx16:perf/homepage-inline-hero-svg
Open

perf: reduce homepage render blocking work#616
xtakenotesx16 wants to merge 3 commits into
tailcallhq:developfrom
xtakenotesx16:perf/homepage-inline-hero-svg

Conversation

@xtakenotesx16
Copy link
Copy Markdown

@xtakenotesx16 xtakenotesx16 commented Jun 2, 2026

Summary

  • Render the large homepage hero SVG as an external static image instead of inlining it into the initial document.
  • Move Google Fonts out of the blocking CSS import path and preload the stylesheet with font-display=swap.
  • Mark the Robofy chatbot script as async/deferred.
  • Lazy-render below-the-fold homepage sections so / starts with much less DOM and less initial render work.

/claim #217

Verification

  • npm run build: passes
  • git diff --check: clean
  • Local Lighthouse before the optimization pass, mobile /: Performance 52, FCP 14.1s, Speed Index 14.1s, TBT 210ms, document transfer about 336 KB, DOM 3,609 elements.
  • Local Lighthouse after the optimization pass, mobile /: Performance 66, FCP 3.6s, Speed Index 3.6s, TBT 100ms, DOM 510 elements.
  • Local Lighthouse after the optimization pass, desktop /: Performance 87, Best Practices 100, FCP 0.7s, Speed Index 0.7s, TBT 0ms, DOM 473 elements.

Notes

  • npm run typecheck currently fails on existing unrelated generated GraphQL / GraphiQL fetcher / Algolia declaration errors outside this patch.
  • This keeps the patch scoped to the homepage critical path rather than broad Docusaurus/CSS rewrites.

@xtakenotesx16
Copy link
Copy Markdown
Author

xtakenotesx16 commented Jun 2, 2026

Updated with a deeper homepage pass.

Local mobile Lighthouse against the production build moved from:

  • document transfer: ~336 KB -> 40.5 KB
  • DOM size: 3,609 -> 506 elements
  • FCP: 14.1s -> 3.6s
  • Speed Index: 14.1s -> 3.6s
  • TBT: 210ms -> 120ms
  • Best Practices: 79 -> 100

Kept scope focused on /: externalized the hero SVG, lazy-rendered below-the-fold home sections, moved Google Fonts out of the blocking CSS import, and async/deferred the bot script. npm run build passes.

@xtakenotesx16
Copy link
Copy Markdown
Author

Follow-up pushed in d5726bd: lazy-rendered the homepage Configuration section as well, keeping the initial homepage DOM smaller while preserving the section when it approaches the viewport.

Verification after the follow-up:

  • npm run build: passes
  • git diff --check: clean
  • local Lighthouse desktop: Performance 87, Best Practices 100, FCP 0.7s, Speed Index 0.7s, TBT 0ms, DOM 473
  • local Lighthouse mobile: Performance 66, FCP 3.6s, Speed Index 3.6s, TBT 100ms, DOM 510

The PR remains focused on reducing initial homepage render work without broad Docusaurus/CSS rewrites.

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