Magento 2 frontend with Knockout.js and modern JavaScript: how to make cart and checkout ultra-fast

How the Magento 2 frontend works

The Luma theme (and themes derived from it) uses RequireJS to load modules, Knockout.js for dynamic components (minicart, checkout, messages) and customer-data sections to personalise cached pages. It's powerful, but every extension can add more modules and components to that chain.

Where time is lost

• Dozens of RequireJS modules loaded on every page, even where they aren't used.
• Extension mixins altering checkout components in cascade.
• Customer-data sections invalidated on every request, forcing reloads.
• Knockout templates with heavy bindings and too many observables.
• jQuery UI and old widgets loaded for a single visual detail.

What I do, in order

• Map the page's dependency tree and cut what doesn't need to be there.
• Review checkout mixins and components, removing duplication.
• Tune sections.xml to invalidate only what's needed.
• Rewrite critical parts in modern JavaScript (ES6+), with no extra libraries.
• Defer whatever isn't essential to the first interaction.
• Measure INP and checkout load time before and after.

Why not start from scratch

Rewriting the whole frontend is expensive, slow and risky for the flow that matters most. In most stores, a surgical refactor of the current theme (Luma or a custom theme) delivers much of the gain in a fraction of the time.

Experience from living it

I have worked on Magento frontends since the Magento 1 days and have been an Adobe Certified Expert — Adobe Commerce Front End Developer since December 2019. Knockout.js, RequireJS and LESS have been part of my daily work for years.