MUI 5 speed issues - very slow - Meteor

[timothyarmes]

Hi,

I've just converted a fairly complex project from Material UI v4 to Mui v5. The initial conversion was fairly painless, about half a day, however removing all the makeStyles was painstaking work and I did it over a two week period.

Everything now works perfectly, however the site is now so much slower that it's practically unusable. For example, a route change that was maybe 0.5seconds before now takes about 5 seconds.

Is anyone else experiencing similar issues?
Can anyone suggest ways in which I can profile the rendering to see if there are now certain bottlenecks that I can improve?

[timothyarmes]

Generic "this is slow" issues tend to be a dumping ground for all sorts of performance related symptoms even if they have different underlying issues.

I appreciate that. I'm not asking you to fix something that you can't see, however if this is a generalised issue that people are having with v5 then by getting our heads together we may to able to find some common causes. For that, we need to know how we can help the team get to the bottom of it.

It may be something that is inherent to our styling engine, or React or the browser.

The performance of my app is 5-10x slower since moving to Mui 5. It's the only change in my code base, so I'm pretty sure I can rule out React and the browser, and it seems reasonable to suspect the new styling engine is most likely the involved somehow.

Off the top of my head I can think of any number of causes. Perhaps...

• the engine is just much, much slower (that would be tragic)
• there are a few container components that are now really slow, and I can get the performance back to normal by avoiding them.
• I need to avoid using the new sx prop
• my Mui set up is wrong

This is a general support request that's better asked in more general channels. As a rough pointer, I suggest getting
comfortable with profiling with React Developer Tools.

I am comfortable with these tools, but I can't find a way to profile just Mui to see where the bottle necks are.

For info, if I use dev tools to profile the v4 version of my app on a route change, I get this:

The same route change using v5:

[siriwatknp]

there are a few container components that are now really slow, and I can get the performance back to normal by avoiding them

Can you share what MUI components that you avoid?

[siriwatknp]

Please provide anything that you could, so that we can narrow down where to look for

• screen recording
• code snippet

[trudeaua21]

First off, I just wanted to say I really appreciate all the work from maintainers and contributors to Material UI - it's really been indispensable for me and my organization as of late!

I just wanted to add my experience to the mix here as a form of validation - I'm experiencing pretty much exactly the same drastic slowdown as described above when doing a v4 -> v5 migration, and, like @alebrahimi, I'm using Meteor.

@timothyarmes were you by any chance using Meteor on the project you experienced slowdown on? If so, that would make all 3 of the reported slowdowns in this thread Meteor-related, which would probably help quite a bit in nailing down the problem.

Regardless, if I have any time in the next week or so, I'll try to see if I can reproduce this slowdown on a fresh CodeSandbox or something - even smaller components for me have a pretty intense load time, so I'm hoping that I'll be able to reproduce the issue on a fresh project.

[alebrahimi]

Hi @trudeaua21 thanks for your response

this repo is a very simple Meteor app with MUI5

and this is another issue more related to Meteor

please share any information that can be helpful

best regards.

[timothyarmes]

@timothyarmes were you by any chance using Meteor on the project you experienced slowdown on? If so, that would make all 3 of the reported slowdowns in this thread Meteor-related, which would probably help quite a bit in nailing down the problem.

Yes I am.

I also realised that all my very page loads are slow due to lazy loading of modules (most of my routes are lazily loaded) - once I've visited a page and return the speed's fine. This yhen matches @alebrahimi 's experience since he sees it on the first load.
I initially considered SSR with emotion to be at cause, however this doesn't makes sense since there should be no SSR when fetching a new route from within the app.

The leads me to wonder if there's some sort of issue with Emotion then having to reconsolidate caches locally after a module is lazy loaded, but in that case you'd expect it with all frameworks, not just Meteor.

I'm at a loss, but I'm very happy to finally have some opportunity to discuss it with others, even if the ticket's closed.

[trudeaua21]

BTW @timothyarmes I'm haven't looked into it too far but one of the issues @alebrahimi linked seems to indicate that something likely related to this issue seems to be on their radar. See #29131 (comment)

[siriwatknp]

Thanks for the input, I will take a look and get back to you as soon as possible.

https://codesandbox.io/s/cranky-hellman-gfknp?file=/src/App.js is empty, can you check?

[siriwatknp]

screen recording that shows how it is lagging would help a lot.

[artstylee]

Thanks for the input, I will take a look and get back to you as soon as possible.

https://codesandbox.io/s/cranky-hellman-gfknp?file=/src/App.js is empty, can you check?

check again please, for me it works
it has only one component with password input

[artstylee]

screen recording that shows how it is lagging would help a lot.
https://youtu.be/lClmZzJNAQ0

video!

[artstylee]

update
it seems the issue in the @mui/icons-material
when you remove all the icons it works great

[siriwatknp]

Can you provide the repository? I am not familiar with Meteor.

[alebrahimi]

this is a repo with a very basic meteor app with mui5 here

[siriwatknp]

I tried but I am not sure I experienced the performance hit. Where should I look for? Can you record the flow so that I am on the same page and I can reproduce it on my machine, please?

[alebrahimi]

In the repo readme there are steps to run the app in local machine, and here a screenshots for the Profiler showing the problem, the app contain three pages page1 and 2 with out any mui components, but page3 have a Typography and 7 mui Buttons, the issue happens only when page3 first loaded.

[artstylee]

I tried but I am not sure I experienced the performance hit. Where should I look for? Can you record the flow so that I am on the same page and I can reproduce it on my machine, please?

hi. did you check my video? #29268 (reply in thread)

[dennisat]

Hey guys. I can confirm that switching from MUI4 to MUI5 has a huge performance impact!

I switched an entire app from MUI4 to MUI5, and I upgraded only the UI and didn't add any new features or refactoring.

And I think the reason is simple.

• With MUI4 the stylesheets on the DOM are just 104 for this application.
• With MUI5, the stylesheets have become the insane amount of 2761 for the same application.

You can check this document.querySelectorAll('head > style').length.

But that's not all.

During the application's lifetime, new stylesheets are added in the DOM for some reason, something that is not happening with MUI4.
And the worst is that are not removed!!!

For instance, I have a big form with about 15 input fields.
This form supports View/Edit mode toggling the read-only property for all fields.
Surprisingly I noticed that on each toggle, 102 new stylesheets are added on the dom.

Note that only the Form component is re-rendered, not the entire application (double checked).

Versions

    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@mui/styles": "^5.1.1"
    "@mui/icons-material": "^5.0.5",
    "@mui/lab": "^5.0.0-alpha.53",
    "@mui/material": "^5.0.6",

These are my findings. Any help or workaround is highly appreciated.

[yanickrochon]

The performance is quite terrible, and we have had users complaining more than usual since we migrated from v4 to v5. Things work well in our app made from creeate-react-app, by a small tool written in Meteor suffers significantly from this, with performance slowing down x6 to x10 ! Users running Safari thought that the app crashed, but they had to wait about 6 seconds for the initial payload to be initialized.

As I investigated, I noticed significant delay each and every time a component would load. Seriously, 4 seconds to load an empty form is not acceptable!

[yanickrochon]

I am trying to see if the problem isn't related to @emotion/* packages, but even after removing them in my package.json and adding @mui/styled-engine-sc styled-components, as described in the installation guide, MUI still adds a bunch of @emotion/* packages. Seriously?

[artstylee]

try to remove all the @mui/icons-material will you face the same issues ?

[yanickrochon]

I use mdi-react for my icons.

[mnajdova]

MUI still adds a bunch of @emotion/* packages. Seriously?

What packages are you talking about? Note that styled-components has a dependency on some @emotion packages. See the dependencies tab on https://www.npmjs.com/package/styled-components

[timothyarmes]

Well, I'm glad I'm not the only one experiencing this drastic slow down :) Personally I'm now maintaining the production branch based on MUI 4 and a future branch based on MUI 5 in the hope that we get a solution, but there's no way I can use MUI 5 in production.

Even with quite a few people investigating we don't appear to have found root cause, which is a bit worrying. It looks like Meteor is a common factor, but I can't imagine why that would have any affect whatsoever. I'm just using Meteor as the build engine, on the client there's a standard React instantiation that has nothing to do with Meteor at all really. I have no idea where to start looking.

[siriwatknp]

@timothyarmes @yanickrochon @dennisat If you have a performance issue with meteor, I believe that the meteor team is fixing the issue. Here is their PR: meteor/meteor#11788

[siriwatknp]

From what I have read so far, the issue is likely because of benjamn/reify#277. @quintstoffers brought up an interesting point here.

@mui-org/core I decided to lock this discussion and related issue about meteor performance. Will keep everyone posted about the meteor fix once it is merged.