Skip to content

perf: improve homepage Lighthouse score#612

Open
jamilahmadzai wants to merge 1 commit into
tailcallhq:developfrom
jamilahmadzai:jamil/home-lighthouse-217
Open

perf: improve homepage Lighthouse score#612
jamilahmadzai wants to merge 1 commit into
tailcallhq:developfrom
jamilahmadzai:jamil/home-lighthouse-217

Conversation

@jamilahmadzai
Copy link
Copy Markdown

/claim #217

Summary

  • Adds a homepage-only build step that inlines route-scoped critical CSS for / and defers the Docusaurus runtime/main bundles until real user interaction.
  • Keeps first-load third-party work out of the homepage path: Robofy now loads only after marketing consent and the Vimeo iframe mounts only when the intro video is played.
  • Removes first-load image/base64 bloat by using static asset paths and deferred below-fold image loading while preserving dimensions.
  • Cleans up the Lighthouse SEO/accessibility blockers: descriptive CTA/link text, heading order, footer social labels, cookie close alt text, and the low-contrast docs link.

Lighthouse evidence

Release build served from npm run build; audited / only with PWA ignored.

  • Lighthouse 13.3.0: Performance 100, Accessibility 100, Best Practices 100, SEO 100
  • Repeat Lighthouse 13.3.0 runs: 100 / 100 / 100 / 100
  • Lighthouse 12.8.2: 100 / 100 / 100 / 100
  • Final metrics: FCP 1.3s, LCP 1.5s, TBT 0ms, CLS 0, Speed Index 1.3s, total byte weight 135 KiB

Demo video: https://github.com/jamilahmadzai/tailcallhq.github.io/releases/download/tailcall-217-demo-26c1a10/tailcall-217-demo.mp4

Checks

  • npm run build
  • npx prettier --check docusaurus.config.ts plugins/homepage-first-load-plugin.ts src/components/home/Banner.tsx src/components/home/BenefitsCard.tsx src/components/home/ChooseTailcall.tsx src/components/home/Configuration.tsx src/components/home/Graph.tsx src/components/home/IntroductionVideo/index.tsx src/components/home/IntroductionVideo/style.css src/components/home/Testimonials.tsx src/components/home/TrustedByMarquee.tsx src/components/shared/CookieConsentModal/CookieConsentModal.tsx src/components/shared/Discover.tsx src/components/shared/Footer.tsx src/components/shared/GlobalHead.tsx src/constants/index.tsx
  • npx lighthouse http://127.0.0.1:4218/ --only-categories=performance,accessibility,best-practices,seo --output=json --chrome-flags='--headless=new --no-sandbox'

npm run typecheck still fails on existing generated GraphQL, DocSearch, and GraphiQL type errors outside this change.

Bounty payout: Algora account for @jamilahmadzai.

@jamilahmadzai jamilahmadzai changed the title Improve homepage Lighthouse score perf: improve homepage Lighthouse score May 27, 2026
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