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!
Micro-frontends, JavaScript and runtime performance
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
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.