Skip to content
Adobe Commerce Storefront
Essentials

Performance Best Practices

When you change how scripts and styles load on the Adobe Commerce boilerplate, you follow the same performance model as other Edge Delivery storefronts. The sections below map eager, lazy, and delayed loading—and ideas such as LCP and fonts—to concrete files and load order in your project.

Start with Keeping it 100 on AEM.live The canonical guide covers eager, lazy, and delayed loading, Largest Contentful Paint (LCP), fonts, and mistakes such as overusing preload and early hints. Read it before you edit head.html or split CSS.

How to use this page

Section titled “How to use this page”
  1. Read Keeping it 100 to understand the eager, lazy, and delayed phases and LCP limits.
  2. Use the sections below to map each phase to files in the Commerce boilerplate.
  3. After you change loading behavior, run Lighthouse audits and review Performance and monitoring on the launch checklist.

Performance in the Commerce boilerplate

Section titled “Performance in the Commerce boilerplate”

Delayed phase

Section titled “Delayed phase”

Keeping it 100 describes a delayed phase for third-party tags, marketing tooling, extended analytics, consent, chat, and similar scripts. Load them through delayed.js so they do not compete with LCP or the rest of the experience.

In the Commerce boilerplate, implement that path in `scripts/delayed.js` . Keep it off the eager path. For Adobe Experience Platform and related patterns, see Adobe Experience Platform analytics.

Eager vs lazy styles

Section titled “Eager vs lazy styles”

Keeping it 100 treats styles in two phases so LCP stays predictable.

The eager phase is for everything the real LCP element needs right away: markup, CSS, and JavaScript for that first paint. Stay within the network and payload limits the guide describes.

The lazy phase is for styles (and related assets) that do not need to block the first paint of the LCP element. You load them after LCP so they do not extend the critical path. For how the storefront splits global versus deferred CSS—including patterns such as lazy-styles.css—read Branding and styles.

File layout for eager and lazy CSS

Section titled “File layout for eager and lazy CSS”

In the Commerce boilerplate, eager, site-wide tokens and styles usually live in `styles/styles.css` . Deferred (lazy) CSS belongs in the patterns described in Branding and styles—for example lazy-styles.css—not bundled into the eager file. Align head.html and load order with Keeping it 100 instead of inventing a parallel rule set. Keeping it 100 also explains why preloading web fonts is usually counterproductive. Rely on the Commerce boilerplate’s font fallbacks unless you have a measured reason to change that.