perf(home): reach mobile Lighthouse 100

[MehmetST3]

/claim #217

Summary

This PR targets issue #217: make the homepage / reach Lighthouse mobile Performance 100. PWA was ignored as requested in the issue.

What changed:

• Self-hosted Space Grotesk and Space Mono instead of blocking on Google Fonts.
• Optimized the hero/map asset path, including a mobile WebP hero image and explicit dimensions/loading hints.
• Moved non-critical homepage sections behind lazy loading.
• Split the heavy configuration code block out of the initial homepage bundle.
• Added a homepage-scoped performance plugin that inlines critical CSS and defers non-critical CSS/runtime work for /.
• Deferred third-party/non-critical work: Robofy, Scarf, cookie consent, and the intro video load.
• Improved the mobile cookie banner so it does not dominate the viewport/drawer.
• Added small accessibility fixes around footer/social/dropdown/benefit links.

Lighthouse evidence

Final validation was run against the production build served locally:

npm run build
npm run serve -- --host 127.0.0.1 --port 3317
lighthouse http://127.0.0.1:3317/ --only-categories=performance --emulated-form-factor=mobile --chrome-flags=--headless=new --output=json

Three repeated mobile Lighthouse runs after the final Vimeo/link fix:

lh-post-vimeo-1.json: Performance 100, FCP 772ms, LCP 1655ms, TBT 0ms, CLS 0
lh-post-vimeo-2.json: Performance 100, FCP 779ms, LCP 1654ms, TBT 0ms, CLS 0
lh-post-vimeo-3.json: Performance 100, FCP 775ms, LCP 1656ms, TBT 0ms, CLS 0

Screenshot from the Lighthouse final-screenshot artifact:

Vimeo behavior

While validating the previous inline-video path, I checked the Vimeo player endpoint with production-style headers. It returned HTTP 401 even with Origin: https://tailcall.run and Referer: https://tailcall.run/.

Because the inline player.vimeo.com URL can return 401 even with production origin/referrer headers, this PR does not keep an inline Vimeo iframe path. The intro video CTA now opens the public Vimeo page in a new tab:

https://vimeo.com/1011521201/d3576926f4

That keeps the CTA working and avoids adding the iframe/player cost to the critical homepage path.

Typecheck note

npm run typecheck currently fails on clean upstream develop before this PR's changes. I verified it in a separate clean worktree from origin/develop.

Clean origin/develop failures include:

publish-externals/src/utils/hashnode.ts(11,8): Cannot find module '../../generated/graphql'
publish-externals/src/utils/hashnode.ts(90,37): Parameter 'edge' implicitly has an 'any' type
src/components/playground/Playground.tsx(57,20): GraphiQL FetcherParams type mismatch
src/theme/SearchBar/index.tsx: @docsearch/react / facetFilters type errors
src/theme/SearchPage/index.tsx(196,45): Algolia SearchClient type mismatch

The feature branch shows the same pre-existing typecheck class of failures. I am not marking typecheck as passed.

Verification

• npm run build: passed
• git diff --check: passed, with Windows LF -> CRLF warnings only
• Mobile Lighthouse /: 100/100 in 3 repeated runs
• Intro video CTA: no inline player.vimeo.com path; opens public Vimeo URL instead

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR focuses on improving homepage performance and accessibility by deferring non-critical resources, optimizing media loading, and refining interactive UI elements.

Changes:

• Deferred loading of below-the-fold homepage sections and tracking pixel initialization.
• Introduced critical CSS inlining + deferred asset loading via a custom Docusaurus post-build plugin.
• Improved accessibility/UX across navbar dropdowns, cookie consent modal, footer links, and media elements.

Reviewed changes

Copilot reviewed 20 out of 24 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/theme/NavbarItem/DropdownNavbarItem/index.tsx	Adjusts dropdown trigger focus behavior when no navigation target exists.
src/pages/index.tsx	Defers tracking pixel loading until after window load/idle time in production.
src/css/custom.css	Self-hosted font faces, layout utilities for hero/deferred sections, and image format updates.
src/constants/index.tsx	Switches static asset imports to string URLs; minor copy edits.
src/components/shared/GlobalLayout.tsx	Delays cookie consent modal opening and adds cleanup.
src/components/shared/Footer.tsx	Adds accessible labels to icon-only social links.
src/components/shared/CookieConsentModal/styles.module.css	Improves mobile layout + close button styling for cookie modal.
src/components/shared/CookieConsentModal/CookieConsentModal.tsx	Replaces clickable spans with buttons; improves close control semantics.
src/components/home/index.tsx	Converts several sections to lazily loaded modules.
src/components/home/TrustedByMarquee.tsx	Adds lazy loading/async decoding to partner logos.
src/components/home/LazyHomeSection.tsx	New IntersectionObserver-based lazy section loader with layout reservation.
src/components/home/IntroductionVideo/style.css	Adds accessible “facade” styles for external video link.
src/components/home/IntroductionVideo/index.tsx	Replaces embedded iframe with an external Vimeo link facade.
src/components/home/ConfigurationCode.tsx	Extracts configuration code UI into a separate component for lazy loading.
src/components/home/Configuration.tsx	Defers code sample rendering; updates docs link styling.
src/components/home/ChooseTailcall.tsx	Adds lazy loading/async decoding to images.
src/components/home/BenefitsCard.tsx	Adds aria-label and lazy loading to card imagery.
src/components/home/Banner.tsx	Optimizes hero image delivery via <picture> and fetch priority.
plugins/homepage-performance-plugin.ts	New postBuild optimizer that inlines critical CSS and defers core JS/CSS.
docusaurus.config.ts	Preloads self-hosted font and defers chatbot script loading; registers plugin.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[MehmetST3]

Addressed all automated review feedback in 22e4918:

• Render no-target dropdown triggers as semantic buttons.
• Schedule the Scarf pixel immediately if the load event already fired.
• Remove the standalone TabItem usage from the lazy configuration code block.
• Add a visible focus-visible style for the cookie modal close button.
• Make the homepage performance plugin HTML rewrites tolerate attribute ordering/extra attrs/quote style.

Verified again with npm run build after the follow-up commit.