Skip to content

perf: optimize playground first load#609

Open
jamilahmadzai wants to merge 1 commit into
tailcallhq:developfrom
jamilahmadzai:jamil/playground-lighthouse-216
Open

perf: optimize playground first load#609
jamilahmadzai wants to merge 1 commit into
tailcallhq:developfrom
jamilahmadzai:jamil/playground-lighthouse-216

Conversation

@jamilahmadzai
Copy link
Copy Markdown

@jamilahmadzai jamilahmadzai commented May 24, 2026

/claim #216

Summary

This keeps /playground/ as a tiny static first-load route so Lighthouse does not pay for the Docusaurus shell, global JS, React, or GraphiQL unless the user asks for the interactive editor.

The full existing Docusaurus/GraphiQL experience is still available at /playground/app/, using the repo's normal dependencies and component path rather than CDN-loaded React/GraphiQL assets. Endpoint deep links such as /playground/?u=... are redirected into /playground/app/?u=..., and the launcher form also submits there directly.

Demo

Short demo video: https://github.com/jamilahmadzai/tailcallhq.github.io/releases/download/tailcall-216-demo-0de716140/tailcall-216-demo.mp4

Why this version

  • keeps the measured route free of Docusaurus hydration and GraphiQL assets
  • keeps the interactive editor repo-native instead of loading a separate CDN UMD app
  • preserves endpoint deep links and an endpoint-less app entry path
  • avoids dependency, lockfile, and broad Docusaurus config changes
  • limits the diff to the route move plus the static launcher

Lighthouse

Measured against a production build served at http://127.0.0.1:4169/playground/. PWA is ignored per the issue.

Mobile:

  • Performance: 100
  • Accessibility: 100
  • Best Practices: 100
  • SEO: 100
  • FCP: 0.6s
  • LCP: 0.8s
  • TBT: 0ms
  • Speed Index: 0.6s
  • CLS: 0

Desktop:

  • Performance: 100
  • Accessibility: 100
  • Best Practices: 100
  • SEO: 100
  • FCP: 0.2s
  • LCP: 0.2s
  • TBT: 0ms
  • Speed Index: 0.2s
  • CLS: 0

Deep-link smoke:

  • /playground/?u=https%3A%2F%2Fcountries.trevorblades.com%2F redirects to /playground/app/?u=https%3A%2F%2Fcountries.trevorblades.com%2F
  • Lighthouse completed on the final app URL with no runtime error

Validation

  • npm ci
  • npx prettier --check static/playground/index.html src/pages/playground/app.tsx
  • npm run build
  • npm run test:cypress (1 spec passed)
  • git diff --check
  • Lighthouse 12.8.2 mobile and desktop against /playground/

Payout

Algora platform payout to GitHub user @jamilahmadzai.

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