Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[icons][docs] Virtualize icons svg #43939

Merged
merged 16 commits into from
Oct 3, 2024
Merged

[icons][docs] Virtualize icons svg #43939

merged 16 commits into from
Oct 3, 2024

Conversation

Janpot
Copy link
Member

@Janpot Janpot commented Sep 29, 2024

After seeing #43911, I realized I still had this experiment on a local branch.

This virtualizes the icons in a different way than #41330. It renders a placeholder for the svg when not in the viewport, it retains all other markup for SEO. This not only cuts rendering time of the list by two thirds, it also looks like it could drastically reduce page size.

  • Before:

    Screenshot 2024-09-30 at 09 46 17

https://deploy-preview-43937--material-ui.netlify.app/material-ui/material-icons/

  • After:

    Screenshot 2024-10-01 at 11 37 07

https://deploy-preview-43939--material-ui.netlify.app/material-ui/material-icons/

The first 50 icons are always rendered as they are likely visible in the viewport on page load.

Help with #41126

@Janpot Janpot added docs Improvements or additions to the documentation performance labels Sep 29, 2024
@mui-bot
Copy link

mui-bot commented Sep 29, 2024

Netlify deploy preview

https://deploy-preview-43939--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 67b256a

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The UX is different when the CPU is overloaded, it's feels better to have the icon label readable, so this PR feels better IMHO.

@oliviertassinari oliviertassinari added the package: icons Specific to @mui/icons label Sep 29, 2024
@Janpot Janpot marked this pull request as ready for review September 30, 2024 07:52
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a clear performance win: https://www.webpagetest.org/video/compare.php?tests=240930_AiDcPC_94H,240930_BiDc37_94N.

The FCP is 2.5s faster:

SCR-20240930-rgxq

TTI isn't much different though.

// Virtualize the icons to reduce page size and React rendering time.
// Only render the icons after they become visible in the viewport.
React.useEffect(() => {
const margin = 200;
Copy link
Member

@oliviertassinari oliviertassinari Sep 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

margin to hoist?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kept it here to prevent it from being used for anything other than virtualization. Separation of concerns.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 30, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 1, 2024
@DiegoAndai
Copy link
Member

It looks good. My only question is, why not use react-virtuoso, which we already have installed in the docs?

@Janpot
Copy link
Member Author

Janpot commented Oct 3, 2024

why not use react-virtuoso

We're not virtualizing in the same way here. As in, we're not rendering only a subset of the items and reserve empty space for the items that we don't render. Instead we render every item, only for the ones that are in the viewport, we render more content.

@Janpot Janpot merged commit 0106a70 into mui:master Oct 3, 2024
22 checks passed
@Janpot Janpot deleted the icons-opt branch October 3, 2024 18:16
@oliviertassinari
Copy link
Member

Great, this is a clear step forward. We can check in 30 days how this helped with the core metrics #41126 (comment).

Overall, our core web vitals are improving https://search.google.com/search-console/core-web-vitals?resource_id=sc-domain%3Amui.com, that's a good trend:
SCR-20241006-bqsa

We took a serious hit with https://web.dev/blog/inp-cwv-march-12.

@oliviertassinari oliviertassinari changed the title [docs] Virtualize icons svg [icons][docs] Virtualize icons svg Oct 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation package: icons Specific to @mui/icons performance
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants