Good website performance—especially for commerce—can be the difference between a completed purchase and an abandoned cart. Google has standardized the concept of Lighthouse scores, which measure how well a web page performs from both a real-user and search engine perspective.
Simply put, the higher the score, the better—and 100 is the best possible score.
The following results represent real performance metrics from a production website built using Sitecore AI and Sitecore OrderCloud.
Baseline Architecture: A Performance-First Sitecore Stack
While I would love to personally take all the credit for achieving these scores, the reality is that everything begins with a solid, performance-conscious foundation.
The setup
- Sitecore AI
- Next.js with App Router and Server Components
- Edge rendering where it actually provides performance benefits
- Sitecore OrderCloud as an API-first commerce engine
Core principle
Everything that blocks first contentful paint is guilty until proven innocent.
High-level flow
- Static or edge-rendered application shell
- Fast, cacheable content delivery
- Deferred personalization
- Asynchronous commerce enrichment
Simply choosing these technologies and following the best practices recommended by these platforms will get you most of the way there. Once that foundation is in place, additional techniques can be applied to fine-tune performance even further.
Next.js Layouts
A major factor in improving performance is leveraging the largely out-of-the-box layout engine provided by Next.js.
Without going too deep into implementation details, anything placed within a layout is shared, cached, and not re-rendered during page navigation. This alone can reduce page load times by at least 20%, since elements such as the header and footer can live inside the layout rather than re-rendering on every page.
Layouts are also nestable. A root layout can contain multiple child layouts beneath it. The website described here relies heavily on this capability, with the codebase containing five separate layout files.
Content Streaming
With React Server Components and the Next.js App Router, pages no longer need to be delivered as a single blocking response. Instead, the server can stream HTML to the browser in chunks, allowing the page to render progressively.
This means:
- Critical content renders immediately
- Slower data dependencies load in parallel
- The browser can begin painting earlier, even before the page is fully complete
In a commerce storefront, this approach allows pricing and inventory data to load after the core page structure is already visible. Traditionally, product listing pages would block rendering until all data had loaded, meaning users would see nothing until the full response was ready.
By combining content streaming with the layout engine, we can render the header, footer, and content structure almost instantly while displaying a non-invasive skeleton UI as commerce data streams in.
Caching
Caching in Next.js is one of the most powerful and controllable ways to improve Lighthouse scores. Unlike traditional CMS setups, Next.js provides fine-grained control over what is cached, where it is cached, and for how long.
Built-in support includes:
- Static rendering
- Incremental revalidation
- Request-level and fetch-level caching
- Edge and CDN caching
Building on the previous sections, the layout and static content can render instantly while dynamic data streams in. However, not all of that data needs to be fetched every time.
For example, product pricing and inventory may need to be fetched on every request, while product names and descriptions might only change every few days.
Using Next.js caching and tagging mechanisms, stable data can be cached for a custom duration while frequently changing data remains dynamic. Tags also allow precise control over when cached data is revalidated.
Once everything is configured, loading the page essentially means waiting only for pricing and inventory data. Even while that data loads, the user can already interact with the page.
Hopefully, you can now see how this technology stack and these techniques make achieving the elusive 100 Lighthouse score possible.
Want your storefront to achieve these 100 Lighthouse scores? Reach out to experts like my colleagues and me at XCentium.