Speed

How to Get the Fastest Salesforce Commerce Cloud Site Out There

Here are possible ways to get Salesforce Commerce Cloud (SFCC for short) up to speed and run a fast, highly performant website that ranks high in Google’s search results. Instead of spending the precious dollars trying to shave a single second off the load times, you can deliver an instant-loading website with half the effort. 

Google’s Page Experience Update coming in 2021 is bound to rewrite the SEO rulebook once again, increasing the importance of website speed for visibility. Because the newly weighted Google algorithm will rank pages more on the overall user experience, slow eCommerce stores will rank even lower than before. 

This change may seriously impact the SERP position of many major retailers running their stores on Salesforce Commerce Cloud—as well as those using other breeds of eCommerce platforms. But the change could also be seen as a potential blessing in disguise, a much needed prod for operators to go the extra mile and look beyond the standard optimization tactics including image optimization, lazy loading, CDN, tag managers, or implementing AMP. 

In this post, we’ll take a look at the possible ways to get Salesforce Commerce Cloud (SFCC for short) up to speed and run a fast, highly performant website that ranks high in Google’s search results. Or how, instead of spending the precious dollars trying to shave a single second off the load times, you can deliver an instant-loading website with half the effort. 

Table of Contents

The golden rule of commerce: sell experiences, not products

Google’s upcoming ranking update is not just a giant’s whim to shake the eCommerce landscape. It perfectly aligns with the current trends in eCommerce, and rightly gives more credit to highly performant, speedy websites. Stores aren’t only competing on price and quality of service, but increasingly more on the overall experience. 

It’s no secret that Salesforce Commerce Cloud, just like many other eCommerce platforms out there, was designed in a way that mainly focuses on core business functionalities: displaying product information along with pricing and giving operators a functional backend to manage their stock. Website speed optimization is left to the platforms' customers, system integrators, designers and developers. 

Is speed just a Salesforce Commerce Cloud issue?

Certainly not. Speed issues permeate all the popular SaaS eCommerce platforms, including Magento, Shopify Plus, Oracle Commerce Cloud, BigCommerce and SAP Commerce Cloud (Hybris). We’ve written about optimizing these platforms for speed in other posts on our blog.

In April 2020, we performed a study in which we looked at the Google Lighthouse scores of the leading 500 US internet retailers (IR500) to see which eCommerce platform consistently delivers the fastest sites. Unfortunately, the conclusion was that most IR500 websites run surprisingly slow, regardless of their eCommerce platform. In fact, our data found that in-house systems outperform the leading eCommerce platforms by 61%. 

Go here to read the full article.

The average Lighthouse scores for websites on the leading eCommerce platforms: Salesforce Commerce Cloud, Magento, Shopify, SAP Commerce Cloud (Hybris), and Oracle Commerce Cloud was a mere 18.7 (median 15)

Averaging at 18.5, Salesforce Commerce Cloud had comparable scores to Magento. The median scores were 17 and 13.5 for SFCC and Magento, respectively. In contrast, the average performance score for websites using in-house / homegrown eCommerce systems was 15% higher than the IR500, and averaged at 30.1. Perhaps this is one of the reasons that nearly one-fifth of the IR500 websites use an in-house eCommerce solution.

Optimizing Salesforce Commerce Cloud for speed

Salesforce Commerce Cloud is a highly scalable, cloud-based software-as-a-service eCommerce platform. Salesforce regularly adds new features and functionalities, some of which are purported to help shave the precious seconds off your page loads. In fact, the new beta offering of the Commerce Cloud API seems promising, but is too early to judge.

Let’s have a look at what options you have to get your Salesforce Commerce Cloud up to speed.

1. Image Optimization

Image optimization is a standard tactic for many eCommerce websites. Given how image-heavy today’s enterprise eCommerce sites are, even tiny savings on images—when implemented across large websites—can cumulatively add up to significant sitewide gains.

Such optimization tactics can involve:

  • Implementing a CDN to serve the assets from closer Points of Presence (PoPs)
  • Losslessly compressing images on upload
  • Lazy loading images that appear far below the fold, especially on the longer product category listing pages

2. Dynamic Imaging service (DIS)

The Dynamic Imaging Service (DIS) streamlines serving images to the Salesforce storefront. It  eliminates the need for the retailer to upload differently-sized versions of each image.

DIS takes a single high-resolution image and dynamically transforms and serves them to the storefront. The DIS transformation parameters give you control over an image’s size, crop, overlay, format, background color, and quality settings. 

DIS eliminates the requirement to have your merchandising or creative images batch processed ahead of time to make them web friendly. Using a single image, DIS serves the correct sizes for each image application including your product page, category page, recommended products section, search results, and more.

Can Dynamic Imaging Service solve speed issues?

Short answer: No. At least not on its own.

Many operators assume DIS can make the site faster, but the documentation around DIS doesn’t directly mention speed as a benefit. The benefits of DIS are installation-dependent, but may not necessarily lead to speed improvement as the images are processed in real time.

3. Storefront Reference Architecture (SFRA) framework template

Salesforce Commerce Cloud comes with a few framework templates out of the box.

  • Storefront Reference Architecture (SFRA)
  • Mobile First Reference Architecture (MFRA)
  • SiteGenesis (Salesforce’s legacy reference architecture)

Storefront Reference Architecture is the most recent Salesforce framework template. It’s designed for cutting-edge, mobile-first design and aims to provide retailers with an architecture reference when building stores on SFCC. It incorporates pre-built integrations with Salesforce Commerce Cloud API, data objects, and 3rd-party technologies via the Commerce Cloud LINK Technology Partner Program. It makes use of pre-built widgets/integrations with data objects, APIs, and 3rd-party elements. It is an evolution of the old Demandware Site Genesis (1.0 and 2.0) programs.

Storefront Reference Architecture is targeted as a tool to alleviate site development needs for frontend changes (i.e. the primary business case), and not targeted as a tool to improve page load speeds. This is because the integrations still introduce 3rd-party technologies and scripts to the page, which inherently slow the page down.

Can Salesforce’s Storefront Reference Architecture solve speed issues?

Short answer: Not really. It wasn’t designed to.

With an adaptive design approach Salesforce Reference Architecture can help improve perceived mobile loads and server-side load times. SFRA also contains a number of pre-connected integrations with the SFCC backend, which means that they should, in theory, perform better than custom built-in integrations.

But SFRA alone will not make your store much faster! It allows easier site development and lowers the total cost of ownership. In some cases, however, it may actually worsen load times—depending on the number of 3rd-party scripts and technologies introduced from the builder.

Overall, SFRA offers only minimal speed benefit. Mainly due to the fact that 75% of page load time comes from the various 3rd-party JavaScript, images and HTML. And in most cases there is simply no way around it. Additional time loss can be attributed to design, image size, and the location of the images, none of which is sped up in any way by SFRA. 

4. Other optimization techniques

When optimizing your Salesforce Commerce Cloud store for speed you can implement various tactics. You can use a lightweight theme, optimize your images, reduce the number of tags (or use a tag manager) and remove the render-blocking JavaScript code, to name a few. The one thing that all of these speed optimization techniques have in common is that they are focused on optimizing the delivery of content that was tapped on and requested. Here are a few examples of popular tactics that try to optimize things that happen after the tap:

  • Lazy loading
  • Uninstalling unnecessary Salesforce Commerce Cloud apps
  • Removing broken links
  • Removing the ‘dead weight’ pages
  • Enhancing mobile performance with AMP

But this is only half the battle. To escape the endless cycle of speed optimization you need to go instant. Making your website instant (or sub-second) requires a combination of technologies which work before the customer clicks on anything. This means anticipating users’ taps rather than reacting to them.

Whether your store runs on Salesforce Commerce Cloud or any other eCommerce platform or backend system, delivering the fastest experience out there requires implementing advanced speed-focused web technologies. And for that you must first go headless and build a portable frontend.

With CDN-as-JavaScript, Moovweb XDN puts data into the browser 5 seconds before it’s needed.

5. Going headless on SFCC

Many speed-oriented web technologies require separating the backend from the frontend, i.e. making the store’s frontend portable, or subscribing to a headless eCommerce architecture. Doing so makes it easier to implement speed-oriented improvements to the frontend and backend independently. And it also means that you can deliver the fastest website on the backend of your choice.

Going headless with your Salesforce Commerce Cloud store is necessary to build a fast, Progressive Web App (PWA) frontend. To do this, you need solid API coverage that would allow you to connect it to the SFCC backend. Then, you can start implementing a range of cutting-edge technologies which will make your website blazingly-fast, including:

  • Portable frontend for speedy browsing transitions
  • Server-side rendering (SSR) and AMP support for lightning-fast first loads.
  • Predictive prefetching
  • A state of the art CDN with edge computing to optimize cache hit rates for dynamic content at the edge and remain 5 seconds ahead of the shopper

Let’s investigate how suited Salesforce Commerce Cloud is for implementing these technologies and supporting sub-second eCommerce websites. 

Salesforce APIs

The Open Commerce API (OCAPI) is a RESTful API used by Salesforce Commerce Cloud which consists of three component APIs:

  • Shop API — Provides access to Commerce Cloud digital storefront functionality
  • Data API — Provides access to digital application configuration and integration functionality on a per object basis
  • Meta API — Provides access to a formal description of the resources and documents available in the Open Commerce API.

See API usage for general information about using the Open Commerce API.

It’s important to note that SFCC has a new CCAPI layer in beta in addition to the OCAPI API.

The beta offering seems promising, but it is too early to judge the extent in which it will support speedy headless storefronts. 

Server-side rendering (SSR) and AMP

Salesforce Commerce Cloud does not support AMP or SSR out of the box. Also, Pipeline implementations can be harder to support on a headless architecture. 

PWA tooling

Salesforce Commerce Cloud does not offer any PWA tooling out of the box.

But you have two options to build a progressive web app on SFCC

  • Building a PWA from scratch directly on SiteGenesis or Storefront Reference Architecture (SFRA)
  • Building it on a Front-end as a Service that integrates with Commerce Cloud

Modern PWA portable frontends offer app-like speeds. Exploring the website is faster—this is especially evident in online stores. A native-like feel will make a PWA on SFCC feel faster than the competition. 

How the Moovweb XDN can help

There is a limit to the total speed benefit with standard speed optimization. Such efforts are often governed by the rule of diminishing returns, which suggests that at some point the level of profit or benefit gained by optimization is smaller than the amount of money or energy invested in it.

Moovweb XDN reverts the concept of speed optimization, and does all of the heavy lifting for you before shoppers’ tap. By using advanced predictive prefetching and a modern CDN with edge caching you can stream cached JSON data from the edge to the browser based on what you expect the customer to do next instead of scrambling to optimize page renders after the tap. This way, the XDN keeps your site 5 seconds ahead of the shopper at all times.  

Moovweb XDN is the only platform to guarantee sub-second loads for large-scale database-driven websites, such as eCommerce and Travel sites with millions of pages. And you don’t have to take our word for it: we’ve helped dozens of complex stores—with dozens of tags, real-time inventory, and dynamic pricing—and helped them all get sub-second. Take a minute to browse through Shoe Carnival or Tie Bar on your phone to experience the speeds attainable on the XDN. We can do the same for you. 

See more examples of blazingly-fast websites here.

Schedule 1-on-1 Demo

Schedule a consultative conversation now to learn how the Moovweb XDN can help you achieve sub-second page loads.

Click here!

Our goal at Moovweb is to make the Web instant and simple. Websites on the XDN see median page loads of 320ms (FCP), and double digit organic traffic and conversion lifts.

What is Moovweb XDN?

The XDN is an all-in-one solution to develop, deploy, preview, experiment on, monitor and run  your headless frontend. It includes an application-aware CDN-as-JavaScript with full stack preview environments, built-in server-side rendering, advanced prefetching and complete control over caching and traffic routing. The XDN makes sure you squeeze every millisecond out of every optimization effort. In fact, we guarantee sub-500ms median page loads for large, dynamic websites running on the XDN.

Shoe Carnival’s Salesforce Commerce Cloud store went from 6-second browsing transitions to 500 milliseconds on Moovweb XDN

For a full run-down of what headless eCommerce is and why it is fundamental to instant page loads, watch this webinar.

The Moovweb XDN makes the process of having a speedy, headless SFCC store super simple, from development and deployment to easy rollbacks. You can do it for any modern headless frontend: Next, Nuxt, React, Angular SAP/Spartacus, React Storefront, Vue Storefront—we support all of them.

To recap, here are some of the benefits of running your Salesforce Commerce Cloud store on the XDN:

Speed

By running a faster store you are offering your customers the best possible experience, and increasing your chances to get higher in the SERP. ShoeCarnival.com was able to go down from 3.4-second first-page loads and 6-second browsing transitions to a site that loads in under 1 second. On the XDN, first loads are now 70.5% faster, with a 1 second median load time. Subsequent page loads are cut by an astonishing 92%, down to just 500ms.   

Simplicity

At Moovweb, our goal is to make the Web instant and simple—even though we’re supporting the headless trend, which is no simple task. Websites on the XDN see a 20% increase in developer velocity and enterprise agility, simply from putting the code in the center of their workflow with our serverless JavaScript platform. With the XDN, you write routing rules like you write your frontend- it is a full-stack JavaScript everywhere platform. 

Collaboration

Every time you write new code, a pre-production environment is automatically generated. Your QA people and business stakeholders can test it and provide feedback before the code is even merged in.

Schedule 1-on-1 Demo

Schedule a consultative conversation now to learn how the Moovweb XDN can help you achieve sub-second page loads.

Click here!

Summary

With Google’s Page Experience Update going live in early 2021, slower websites will start lose their rankinging in favor to their faster competitors. Speed will continue to gain importance for both users and search engines, offering traffic and conversion lifts in tow.

The writing is on the wall: online retailers are left with no excuses for offering sub-standard website performance. It’s high time to take action. This is an opportunity for eCommerce underdogs to catch up with, or better yet, beat their larger competitors. And the easiest way to do so is to make your website sub-second. 

Optimizing your Salesforce Commerce Cloud store can take a lot of time and effort, and the results may not be guaranteed. But we’ve got you covered! Moovweb XDN lets you leapfrog the competition and go instant. 

If you have a portable frontend running on Salesforce Commerce Cloud, the Moovweb XDN technology guarantees sub-500ms median page speeds. We still guarantee this speed improvement even if you run the basic version of the Salesforce Commerce Cloud (or any other eCommerce platform). 

Site speed is more important now than ever. It is time to take action.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Newsletter
Get great insight from our expert team.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By signing up you agree to our Terms & Conditions

Don't wait another second. Go instant.

Get started in seconds