mui / mui/material-ui

[docs-infra] Fix page change speed regression

Open
#41,117 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

performance priority: important scope: docs-infra type: regression
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:

SCR-20240215-uewa

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:

Screenshot 2023-08-09 at 13 36 33

https://search.google.com/search-console/core-web-vitals/summary?resource_id=sc-domain%3Amui.com&device=2#inp-table

The goal

Compare the experience to https://www.radix-ui.com/primitives/docs/components/alert-dialog to move to the Accordion page:

SCR-20240215-uget

It's x2-3 better.

Same on https://ui.shadcn.com/docs/components/button, it's at about 65ms.

SCR-20240215-uhtw

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:

SCR-20240215-uhux

Part of the solutions

Context

This issue is meant to be closed with insights gathered after the research task

Search keywords: docs-infra, page load

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.