Good website performance, especially when it comes to commerce, can be the difference between a sale and an abandoned cart. Google has standardized the concept of Lighthouse scores, which measure how well a web page performs from a real-user and search-engine perspective.

Simply put, the higher the score, the better, and 100 is the best.

These are real numbers from a production website using Sitecore AI and Sitecore OrderCloud. 

Baseline Architecture: Performance-First Sitecore Stack

As much as I would like to personally take all the credit to achieve these scores we first must start with a sold performance conscious foundation.

The setup

• Sitecore AI
• Next.js with App Router and Server Components
• Edge rendering where it actually helps
• Sitecore OrderCloud as an API-first commerce engine

Core principle

Everything that blocks first contentful paint is guilty until proven innocent.

High-level flow

1. Static / edge-rendered shell
2. Fast, cacheable content delivery
3. Deferred personalization
4. Async commerce enrichment

Simply choosing these technologies and building your storefront using the best practices outlined by these platforms will get you the majority of the way, but once that is done there are a few tips and tricks we can leverage to fine tune the edges.

Next.js Layouts

A huge factor to improving performance is leveraging the mostly OOB layout engine from Next.js. 

Without going into detail, anything we put into the layout is shared, cached, and not re-rendered on page navigation. This already reduces page load by at least 20% because the header and footer can easily be added to the layout.

Layouts are also nestable. We can have a root layout and an infinite number of child layouts under that. The website heavily relies on using this feature and the codebase contains 5 separate layout files.

Content Streaming

With React Server Components and the Next.js App Router, pages no longer have 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 paints earlier, even if the page isn’t fully complete

In a commerce storefront website we can use this to defer the loading of pricing and inventory data. Traditionally for something like a product listing page, the entire page would be blocked and not show anything until the entirety of the data is loaded.

Combining content streaming with out layout engine allows us to load the Header, Footer, and content mark up almost instantly and show a non-invasive skeleton while the commerce data streams in.

Caching:

Caching in Next.js is one of the most powerful and most controllable ways to improve Lighthouse scores. Unlike traditional CMS setups, Next.js gives you fine-grained control over what is cached, where it’s cached, and for how long.

With built-in support for:

• Static rendering
• Incremental revalidation
• Request-level and fetch-level caching
• Edge and CDN caching

Building on our last two sections, we have the layout and static content instantly rendering and the dynamic data streaming in. However, not all of that data needs to be re-fetched every time. Lets assume that product price and product inventory cannot be cached and needs to be fetched every time, but product name and details only change every few days.

We can configure the cache to save this data only and for custom amount of time. Using tags, we also have full control over the revalidation of this cache as well. 

Once this is all set up, when I load this page, I am basically only waiting for the price and inventory data to load, and even while that data is loading, I am not blocked from interacting with the page.

I hope you are beginning to see the picture as to how this tech stack and techniques allowed us to achieve the elusive 100 lighthouse score.

Want your storefront to have these 100 lighthouse scores? Reach out to experts like my colleagues and I at XCentium.