Skip to content
This repository has been archived by the owner on Jan 23, 2024. It is now read-only.

(performance): Replaced CodeSandbox embed with Sandpack integration #154

Merged
merged 3 commits into from Dec 18, 2021

Conversation

nikolovlazar
Copy link
Contributor

@nikolovlazar nikolovlazar commented Dec 18, 2021

📝 Description

I've noticed in PageSpeed Insights that a big part of the network payload comes from the CodeSandbox embed on the homepage. I'm replacing the iframe with a Sandpack integration to avoid most of the payload.

⛳️ Current behavior (updates)

CleanShot 2021-12-18 at 11 00 10@2x

CleanShot 2021-12-18 at 11 05 00@2x

🚀 New behavior

All of the metrics have drastically been improved:

  • FCP: 0.6s -> 0.4s
  • Speed Index: 1.7s -> 0.6s ⭐️⭐️
  • LCP: 0.6s -> 0.5s
  • TTI: 9.8s -> 1.6s ⭐️⭐️⭐️
  • Total Blocking Time: 4.9s -> 0.3s ⭐️⭐️⭐️
  • Cumulative Layout Shift: 0.029 -> 0 ⭐️
  • Overall Score: 58 -> 86 ⭐️⭐️⭐️

CleanShot 2021-12-18 at 11 05 41@2x

💣 Is this a breaking change (Yes/No):

No

@vercel
Copy link

vercel bot commented Dec 18, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-docs/GRoKUZQH66wPSqxGZmkkaMr19jvs
✅ Preview: https://chakra-ui-docs-git-feature-replace-codesandbox-a8474b-chakra-ui.vercel.app

@nikolovlazar nikolovlazar merged commit d853e15 into main Dec 18, 2021
@nikolovlazar nikolovlazar deleted the feature/replace-codesandbox-with-sandpack branch December 18, 2021 10:58
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant