[docs-infra] Fix page change speed regression
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
The problem
The page transition speed between pages is about x3-x4 too slow.
Open https://mui.com/material-ui/react-button/ and navigate to the Button Group page. It takes about 200ms to perform the transition:
According to https://web.dev/articles/inp, this is very borderline for my high-end MacBook Pro. Google Search will use a new performance ranking metric, which we don't do well:
The goal
Compare the experience to https://www.radix-ui.com/primitives/docs/components/alert-dialog to move to the Accordion page:
It's x2-3 better.
Same on https://ui.shadcn.com/docs/components/button, it's at about 65ms.
So as a developer, my first impression is: Material UI docs feels slow, then surely MUI System is not performant, I'm not using it, I want me end-users to have a great UX. To be fair, we can't really compare Material UI docs page to others, we have a lot more content on the page.
It is to be noted that it seems a regression, https://v4.mui.com/components/button-group/ is faster:
Part of the solutions
- Layout. We don't use layouts like the comparison I raised about. https://github.com/mui/material-ui/pull/38394 showcases the benefits of using a layout using the Next.js Pages Router. It helps a good amount. Same in https://github.com/mui/material-ui/pull/38050#discussion_r1268280912, https://github.com/mui/material-ui/pull/36732.
- Emotion. It's slow, we spend a lot of time doing style computations
- ?
Context
This issue is meant to be closed with insights gathered after the research task
Search keywords: docs-infra, page load
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by profiling navigation from the Material UI Button page to Button Group and compare it with the Radix and shadcn examples. Review the layout discussions in PRs #38394, #38050, and #36732, then follow the linked research task. Done means identifying the regression's causes and documenting actionable insights or fixes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- documentation, frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100