Looking for Guidance on Improving the Performance of Ember.js Applications

1

Hello Everyone :hugs:,

I’m having some performance problems with the mid-sized web application I’m working on, which was developed using Ember.js. Specifically, I’m having trouble with load times and responsiveness.

I’m looking to the community for tips and best practices on how to make my application as effective as possible.

Here are some details of my configuration:

  • Version of Ember.js: 3.28
  • Data handling: using a JSON API backend with Ember Data.
  • Components: A significant amount of Glimmer and traditional components are used.
  • Routes: Some routes load a substantial amount of data and have intricate layered structures.

Adding on popular extensions like as Ember Table, Ember Power Select, and Ember Concurrency.

Performance Problems Seen:

Initial Load Time: The application takes a while to load at first. It appears to be connected to the substantial JavaScript loading amount. :innocent:

Rendering Performance: There is a noticeable lag in rendering when rendering some routes that include large datasets or complex component trees. :innocent:

Data Fetching: Occasionally, API queries appear to take longer than anticipated, which results in content rendering delays. :innocent:

Actions To Date:

Lazy Loading: An attempt was made to apply lazy loading for a few routes, which somewhat assisted but did not resolve the problem. :innocent:

Code Splitting: To make the original JavaScript bundle smaller, code splitting was put into practice. :innocent:

Performance Monitoring: To find bottlenecks, we used Chrome DevTools and Ember Inspector, but we still need more information. :innocent:

Any advice, resources, or methods that could make my Ember.js application run more smoothly would be immensely appreciated.

I’m specifically seeking guidance on:

  • The best methods for enhancing the rendering of components. :thinking:
  • obtaining and handling huge datasets with efficiency. :thinking:
  • Add-ons or tools that support performance optimisation and monitoring. :thinking:
  • Any pertinent life lessons learned or case studies from your own work. :thinking:

I also check this: https://discuss.emberjs.com/t/ways-to-improve-boot-speed- but not getting exact clarification.

Thank you :pray: in advance.

2

@Lavason please do not add spam links to your topics anymore, if you continue to do so you will be banned

3

was that a spam link? or just bad copy/paste?

4

spam link right after the “real” link (intentionally tricky and well disguised), i’ve edited it out twice now, so I edited it out and then it was put back in.

was thinking about just pulling the plug on the post/user but this is an interesting topic for posterity so could be nice to keep it around

5

@Lavason I think the crucial thing for you is to use Embroider. Otherwise, it’s going to be very hard. First, it will give you options to make the app slimmer and open you to better tooling.

I gave a talk about it in 2022 at EmberFest. It’s on YouTube: https://youtu.be/--e5CyQlopo?si=EtqUhdfU4_lnj6xp

But you wrote:

Actions To Date:

Code Splitting: To make the original JavaScript bundle smaller, code splitting was put into practice. :innocent:

Does it mean that you already use Embroider? If so, still look at the talk because it mentions some tools and examples where we were shipping more than we should. And it was tools that highlighted it.

IMO, the performance effort has to be done continuously and monitored. At least through Lighthouse and a tool like size-limit for your common bundle. Otherwise, it will get worse over time.

For the rendering part, I wish I could give some solid advice with evidence but I haven’t written anything about it yet. In general, most of the performance issues gravitate around the amount of DOM elements to render, the number of event handlers, using JS where CSS could help, etc.

In the past, I optimized a huge calendar (much more complex than Google Calendar), a tree-like structure that had to re-render, data-heavy parts that started warming before users got to them, and a bunch of others that would fall into “virtualize the list” category.

But it does differ case by case. What’s your case?

When it comes to:

I’m specifically seeking guidance on:

  • […]
  • obtaining and handling huge datasets with efficiency. :thinking:

I would say pagination is the way to go. As well as not using model() hook, and leaning more into partial rendering, skeletons, background loading etc. There’s much we can do on FE to be more performant with data loading, and tricking users’ perception but ultimately, the server has to play its part as well. And that of course, can be an issue here as well :wink:

Let me know if you want to know more about something so we can go into details.