IMPROVE PAGE LOAD PERFORMANCE WITH SALESFORCE COMMERCE CLOUD COMPOSABLE STOREFRONT

Are you an online retailer looking to significantly improve the quality of your storefront experience?

With the launch of Salesforce Commerce Cloud (SFCC) in headless mode and the release of its PWA-based storefront frontend (Composable Storefront), you now have a huge opportunity to make that happen.

Moving to a PWA-based storefront powered by headless commerce APIs can accelerate your page load speed and boost your SEO performance (the subject of an upcoming blog post). It can even help improve your Accessibility score.

In this post I’m going to examine the impact of page load performance and walk through the suite of performance analysis tools that Google provides for measurement. Then I’ll look at how the Composable Storefront Headless Salesforce Accelerator improves those performance scores, even over highly optimized SFRA storefronts.

Why page load performance matters

This is definitively the era of mobile-first interaction. At Amplience we deliver billions of content requests every day from our load-balanced CDNs. The majority (60%+) are to mobile devices, which have become the default for a whole generation of smartphone users.

With mobile apps like Facebook, Youtube, Twitter and TikTok has come the expectation of instantaneous load speed, which has set the bar high for commerce experiences too. Access to fast internet connections is still spotty, however, and even on a 5G connection some sites take an age to load.

For commerce experiences on mobiles, page load is anything but instantaneous. Sometimes it can take up to 20 seconds. And the time to interactivity – i.e. the time it takes before you can scroll and select a next action – can be up to 5 seconds.

This is frustrating. And frustration leads to users bouncing out of the storefront to do something else. Google estimate that for every one second of extra page load time over two seconds, there is a 7% hit on conversion. For many retailers this is a huge hit to performance, losing them $billions in sales.

To help brands better understand the relative performance of their sites, Google recently revamped its analysis tools. For analysing performance there are two options:

1.     Lighthouse

2.     Core Web Vitals

Let’s look at each of those in a little more detail.

Lighthouse

The synthetic Lighthouse scores, which test Performance (as well as SEO, Accessibility and Best Practice support) against a range of measures by simulating an older smartphone (a Moto G4) on a slow 4G network connection. Lighthouse performance scores are useful to determine what performance will be like on a poor quality connection.

Google estimates around 9% of user experiences will be roughly analogous to the synthetic Lighthouse Performance test, so they are a useful way to understand baseline performance.

You can get a Lighthouse score for your site here: https://web.dev/measure/.

And you’ll get a summary report that looks like this:

Core Web Vitals

Introduced in mid-2021, Core Web Vitals scores site performance using real user interaction data aggregated by Google over a 28-day collection period. So it’s a good indicator of what real-world performance is like for most users.

The tests are same as the Lighthouse performance tests but give you a more realistic indication of how your storefront is performing out in the wild.

Google uses Core Web Vitals scores as an input to determine your organic search ranking. So not only are you optimising the customer experience in your storefront – you’re also improving SEO. And that alone can be worth the effort in terms of increased organic (i.e. free) traffic.

You can run the tests here: https://pagespeed.web.dev/. And you’ll get an assessment that looks like this:

Note that the report provides an overview of all the scores and whether the site has passed or failed. In this case the site has failed because it hasn’t met the minimum thresholds for speed that Google require.

Core Web Vitals scores you on the following:

• Largest Contentful Paint (LCP): Measures when the largest content element is fully visible on the screen. LCPs of 2.5 seconds or less are considered good loading experiences

• First Input Delay (FID): Measures the time from when a user first interacts with a page (click or taps) to the time when the browser is able to respond to that interaction. FIDs of 100 milliseconds or less are considered good interactive experience

• Cumulative Layout Shift (CLS): Measures how often users experience unexpected layout shifts. CLSs of .1 or less are considered very visually stable experiences

To pass Core Web Vitals, all the above numbers need to hit the recommended target (i.e. less than 2.5 seconds for LCP) for 75% of all users who visit your page, segmented across mobile and desktop devices (source: https://www.layer0.co/post/how-to-measure-my-sites-core-web-vitals).

Check out this blog post for more information on the differences between Lighthouse scores and Core Web Vitals.

How the Composable Storefront Headless Salesforce Accelerator Helps

Now we know how to measure performance, let’s turn our attention back to Composable Storefront and Headless SFCC. What difference does it make to performance and why?

64Labs – the specialist frontend agency we partnered with to deliver the Headless Salesforce solution – has created what it calls a Speederboard (SpdrBrd) to rank performance across a wide range of commerce sites using the Core Web Vitals scores I mentioned earlier.

I took the below screenshot of the top 10 Salesforce sites and it makes for interesting reading:

The ranking of the top 10 sites against all ranked sites on the SpdrBrd appear on the left-hand side. To the right are the Core Web Vital scores and whether the site passes or fails.

Only two of the SFCC sites make the top 10 rankings overall (and congrats to Zabars for being the fastest). And only the top three SFCC sites pass the Core Web Vitals tests, although in general these are all relatively high-performing sites.

Now let’s look at the performance of the 64Labs implementation of Composable Storefront.

To enable comparison and demo the capability to customers, 64Labs has used the Composable Storefront Headless Salesforce Accelerator to create a demo storefront: a fully functioning headless SFCC storefront with products sourced from the SFCC catalogue, content and media from Amplience and search and product listers driven by Algolia.

To do the analysis we are going to use Lighthouse scores (as the 64Labs demo isn’t a live site with real user data for Google to score). We’re going to compare its page load performance for the homepage against the Salesforce SFRA reference Northern Trail Outfitters storefront.

You can see the results below:

As you can see, the overall performance of the Composable Storefront vs. the SFRA reference storefront is 260% better (yes, you read that right). It also has perfect scores for Accessibility and SEO, so it works for all users and drives better organic search performance.

The performance uplift here is the result of a combination of factors.

PWA’s use modern JavaScript frameworks like React, which consume data in a mobile-friendly format called JSON and generate the page experience in HTML (i.e. hydrate the JSON) on the fly.

This enables the PWA storefront to only load the data it needs to refresh the screen, resulting in smaller and more efficient requests. Websites like SFRA use a web server to deliver whole page chunks of HTML at a time (i.e. the content that makes up the page comes pre-rendered with all of its markup), so the requests are larger and take longer to download and the whole experience is less efficient.

Here the homepage is being constructed by the PWA from calls to Amplience Dynamic Content and its super fast (<35ms) content delivery APIs, and image media is delivered using only the pixels required to render optimally in the mobile screen using Amplience Dynamic Media’s super-fast transcoding APIs and load-balanced CDNs.

But what about more dynamic pages that rely on API calls to other systems like search? Are they also faster?

Let’s take a look at a the two most common pages…

1. Category Pages (PLP):

Here you can see the improved performance result is still there, but it’s even bigger on category pages (i.e. using Product Lister Page (PLP) template) where search APIs calls are also used:

The big performance uplift here is due to a combination of factors. Firstly, the content elements benefit from Amplience’s fast Content Delivery APIs, as before, and this time the product grid is driven using Algolia’s superfast search APIs.

2. Product Details Page (PDP)

Once again the results are impressive for the PDP:

Here, where there’s more product media involved, the Amplience Dynamic Media APIs come to the fore. And because we’re using Salesforce in ‘headless’ mode, we can also pull the product data directly from the Salesforce APIs, which is more efficient.

This combination of ‘headless’ technologies drives the dramatic improvements seen in the Lighthouse score comparison above, which along with the Dynamic Content APIs and more efficient Composable Storefront framework account for the performance improvements.

What about a real-world example?

Now let’s compare the 64Labs demo storefront against one of the best performing SFCC SFRA sites (Johnny Seeds) – again using Lighthouse:

Again, there is a significant uplift in performance. This time I’ve revealed more of the Lighthouse Performance scores. So even though Johnny Seeds is a fast SFRA site, there is still a significant performance uplift with Composable Storefront.

And given that many mobile users still suffer from poor quality connectivity, even small improvements to page load performance give a significant uplift to conversion.

Conclusion

Google’s Lighthouse and Core Web Vitals tools provide a consistent and objective reference to analyse storefront performance. And better results translate into better real-world performance on the metrics that count: conversion and organic search performance.

The Composable Storefront Headless Salesforce Accelerator provides SFCC customers with the ability to unlock the power of headless, accelerate storefront performance and drive more sales. And as more brands implement new storefronts using the 64Labs Composable Storefront Accelerator I’d expect to see more SFCC customers moving up the SpdrBrd.

Want to know more about this solution, what it can do and how to make the most of it?

Register for our free webinar now.