Skip to content 2.0

Micro-frontends, JavaScript and runtime performance

Author: Natalia Venditto

Date First Published: Wed Jan 04 2023

Preserving runtime performance in micro-frontends

Although many of the practices described across the site are considered to be best practices for any web application’s frontend, regardless if it qualifies as micro-frontend or decoupled frontend or not, it is important to understand that optimizing runtime performance may be especially challenging in this context and that the recommendations in this user-experience sections are to be considered.

Performance recommendations

Use next generation frameworks

Next generation frameworks are built with both performance and DX in mind; they equip developers with out of the box tools and mechanisms to optimize your decoupled frontends. Learn more!

Stick to web platform APIs and standards

Avoid 3rd party dependencies, when possible. Ship less JavaScript by leveraging APIs available in the browser and implementing progressive enhancement. Learn more!

Lazy load everything below the fold

Async or defer load using dynamic imports, HTML loading attributes or any suitable technique. Learn more!

Optimize your code

Tree-shake, bundle, minimize, compress and eliminate dead code. Learn more!

Define a performance budget

Enforce and respect the definition. It should not change or grow with your app size. Learn more!

Move all possible compute and composition to the cloud

I was recently asked more about this statement in social media…”Why would we want to move computing to the cloud when we relatively have a lot of computing power in the browser, for free?”

The answer is in the question. We have a lot of computing power in the browser, for free. But it’s not free. It’s free for the browser, but not for the user.

When we design frontend applications that may need to perform heavy computations, we need to understand there is no reliable way to know any of these things:

  • What is the device’s actual capacity
  • What is the browser’s actual capacity
  • What is the connection speed
  • And for those transactional computations that may be requestion more data, and needing a response to continue, what the latency will be

We may be able to reasonably get that information at runtime, but given 3 users A, B, and C, we can expect that the actual capacity is different for each one of them.

This is why practicing progressive enhancement, is a good way to ensure a good user experience for each one of them.