[docs-infra] Improve page transition speed #38394
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
oliviertassinari
added
scope: docs-infra
Netlify deploy previewhttps://deploy-preview-38394--material-ui.netlify.app/ Bundle size report |
oliviertassinari
requested review from
alexfauquette
and removed request for
siriwatknp
alexfauquette
approved these changes
Aug 11, 2023
|
@alexfauquette awesome |
danilo-leal
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The problem
Open https://mui.com/joy-ui/react-button/ and try to navigate to the Button Group page
560ms. Note that the Material UI Button -> ButtonGroup page transition also feels really bad, it's only 100-150ms faster: 430ms. According to https://web.dev/vitals/ great is at <100ms. I think where it's killing us comes next.
https://search.google.com/search-console/core-web-vitals/summary?resource_id=sc-domain%3Amui.com&device=2#inp-table
It's x4 better. Same on https://ui.shadcn.com/docs/components/button, it's at about 130ms. So as a developer, my first impression is: "No, I'm not using Material UI, it's not fast enough".
It is to be noted that it's a regression, something significant broke it: v5.0.6 feels so much better https://v5-0-6.mui.com/components/button-group/
Two ideas of what might have broken it: maybe it's live demo related, maybe it's theme provider related.
The patch
This PR is not a fix, we should find the root cause of the regression and fix it. I think it's one of the highest ROI tasks we have today. I was triggered by browsing https://www.radix-ui.com/themes/docs/overview/getting-started and feeling this big difference. That's why I'm allocating a bit of time to it to shape the problem and some leads of solution. This PR illustrate how a stable layout between page is beyond performance, and is also a nicer UX.
Preview: https://deploy-preview-38394--material-ui.netlify.app/joy-ui/react-button/
We are doing about x2 better.
@alexfauquette From this exploration, I think https://www.notion.so/mui-org/Migrate-all-pages-to-Page-getLayout-212d920a9ab245f08ac3a2aea874f1bc is actually not really so much of the root problem, but more of a side win. I reorganized the Notion tasks to use parent & children tasks.