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 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.
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.
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%.
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 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.
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 look at your options to get your Salesforce Commerce Cloud up to speed.
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
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.
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.
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 uses 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.
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 several 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 worsen load times—depending on the number of 3rd-party scripts and technologies introduced by the builder.
Overall, SFRA offers only minimal speed benefits. Mainly because 75% of page load time comes from 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.
You can implement various tactics when optimizing your Salesforce Commerce Cloud store for speed. 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 that 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.
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 front 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:
- 1Portable 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.
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.
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.
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.
There is a limit to the total speed benefit with standard speed optimization. Such efforts are often governed by diminishing returns, suggesting that at some point, the profit or benefit gained by optimization is smaller than the amount of money or energy invested.
Edgio 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, Edgio keeps your site 5 seconds ahead of the shopper at all times.
Layer0 (Edgio) 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 two blazingly-fast SFCC sites, Shoe Carnival or Kate Spade, on your phone to experience the speeds attainable on Layer0. We can do the same for you.
Our goal at Layer0 is to make the Web instant and simple. Websites on Layer0 see median page loads of 320ms (FCP), and double-digit organic traffic and conversion lift.
Layer0 (now Edgio) 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. Edgio 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 Layer0.
Shoe Carnival’s Salesforce Commerce Cloud store went from 6-second browsing transitions to 500 milliseconds on Layer0 (Edgio)
Layer0 makes 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 Layer0:
Speed
By running a faster store, you are offering your customers the best possible experience and increasing your chances of getting higher in the SERP. KateSpade.com and ShoeCarnival.com are just a few examples of Salesforce Commerce Cloud sites that load in sub-second speeds on Layer0. In fact, Shoe Carnival went down from 3.4-second first-page loads and 6-second browsing transitions to a site that loads in under 1 second. On Layer0, 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 Layer0, we aim to make the Web instant and simple—even though we’re supporting the headless trend, which is no simple task. Websites on Layer0 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 Layer0, 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.
With Google’s Page Experience Update going live in early 2021, slower websites will lose their ranking in favor of their faster competitors. Speed will continue to gain importance for users and search engines, offering traffic and conversion lifts.
The writing is on the wall: online retailers have 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 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! Layer0 lets you leapfrog the competition and go instant.
