Commerce LWR Storefront Performance Best Practices

Great performance is critical to the success of your LWR Commerce storefront, as fast loading sites can have 3 to 5 times higher conversion rates than slower sites.

Follow these recommended best practices to optimize your storefront's overall performance.

Also, if you are currently using an Aura storefront, we recommend that you migrate to an LWR storefront for optimal performance.

Effective performance measurement is key to understanding and improving your storefront’s performance. Take measurements before and after each change to see its impact, analyze the results, and iterate accordingly.

Use industry-standard performance tools and metrics. Get familiar with Core Web Vitals, which captures different facets of user-perceived performance, affecting how Google ranks your storefront pages.

To collect synthetic performance data, we recommend using these tools against a representative mobile device on a 4G connection:

  • Google Lighthouse is an open-source, automated tool that evaluates the quality of web pages based on various criteria, including performance, accessibility, SEO, and progressive web app (PWA) best practices. It generates comprehensive reports highlighting improvement areas.

  • WebPageTest is a web performance tool providing diagnostics about how a page performs under a variety of conditions. WebPageTest is a freemium product with a generous free tier plan (300 runs per month). It's an advanced tool enabling developers to run deep-dive performance analysis.

  • Salesforce Page Optimizer is a browser plugin that helps analyze and debug the performance of lightning applications.

After your storefront is deployed to production, continue to measure your site performance using Real User Monitoring (RUM). Consider using a third-party RUM tool for detailed measurements. Google Chrome automatically and anonymously collects performance data for all sites. If your site receives enough traffic in production, you can use CrUX dashboard to track your site's performance.

Your choice of CDN and caching strategy greatly impacts your storefront performance.

Use Cloudflare for any new site. If you're currently using Akamai, we strongly encourage you to migrate to Cloudflare.

Your sites can take advantage of Cloudflare's advanced settings:

By caching resources at the CDN level, you can significantly reduce load times for end users. CDNs store copies of static content closer to users, minimizing latency and speeding up access to data.

When you cache resources at the CDN level, data is served directly to the consumer from the CDN using HTTP/3 protocols. This approach increases server scalability by preventing requests from reaching the origin server.

All Salesforce resources are CDN cacheable, with Lightning Component caching now on by default. Apex controller responses are also eligible for CDN caching via an annotation in the code. For more information, see the section about Apex Controllers.

Ensure resources from third-party origins have appropriate cache headers, whether they’re static (like .js files) or dynamic (like API results).

LWR components are flexible and offer a wide range of choices. To use components in a way that optimizes performance, follow these best practices.

Before creating a custom component, check if a suitable out-of-the-box (OOTB) component is available and can meet your needs with CSS overrides. Built-in components available in the Experience Builder pallete are optimized for both client-side and server-side rendering and typically include the latest performance enhancements.

For existing sites, check your Experience Builder pages to ensure they don’t reference any component marked as "deprecated."

Binding components to data can be done in various ways. However, to avoid unnecessary server requests and keep the data consistent on the page, prefer these APIs, listed in priority order.

Many pages and components use assigned data providers, which retrieve data in an optimized manner. We recommend that, where possible, your components use data from these providers using LWR expressions. Data providers are essential for accessing server-side data during server-side rendering (SSR).

If data providers aren't available or sufficient, use client-side storefront APIs provided by the Commerce Runtime. These APIs are optimized with proper caching at both the CDN and browser levels.

Client-side storefront APIs are extensible and support custom fields. For example, if you add a custom field to the Product2 object, the custom field's value is included in the payload when accessing products.

To minimize unnecessary API calls, don't invoke Connect APIs directly through fetch() or XmlHttpRequest. Instead, exercise the underlying Connect APIs via the client-side storefront APIs.

Note: Data providers, the preferred way to access data, are built on top of the client-side storefront APIs and benefit from their optimizations and support for custom fields.

Here is an example accessing the ApplicationContext:

If data providers and Commerce Client APIs aren’t available or sufficient, create custom Experience APIs (Backend For Frontend - BFF) using Apex controllers. Optimize these APIs for the pages where they’re used and minimize the number of APEX calls. It's also very important to make the API result cacheable when appropriate.

  • Tailor and optimize your custom APIs for the pages where they’re used.
  • Make less than three Apex calls. Aggregate (batch) the data into a single call when they’re related.
  • Make the API result cacheable for both the CDN and the browser by annotating the Apex method with @AuraEnabled(cacheable=true,scope='global').
  • If CDN cacheable isn’t appropriate (for example, the call executes in the user context), enable browser caching by annotating the Apex method with @AuraEnabled(cacheable=true).
  • Prefer using Platform Cache over accessing the database directly. Platform Cache is faster than querying the database and scales better when you follow Platform Cache best practices.
  • Minimize the number of SOQL requests. Batch all SOQL requests if possible.

Some Salesforce APIs are designed to support B2B and transactional applications and should be avoided in D2C contexts:

  • UI APIs: These are designed for transactional applications and their results aren’t cached, leading to SOQL requests on the server.
  • Access to permissions: Salesforce provides a convenient way to check permissions with perm lookup, through @salesforce/userPermission. See @saleforce/userPermission and @salesforce/customPermission. Avoid checking permissions on the client. If necessary, consolidate them in a single Apex call and don't block page rendering based on permissions.

  • Avoid the n+1 query problem, where requests are sequentially dependent on each other. This problem often occurs when a list component retrieves a list of records and each list item component subsequently fetches additional data for each record. Instead, strive to parallelize execution and aggregate data retrieval as high as possible in your custom component tree.

  • Avoid redundant data retrieval. Use one service call to get the necessary data and avoid having multiple service calls returning the same data. This is often seen in custom Apex controllers and is a bad practice.

Effective image and resource optimization can significantly enhance the performance of your site.

A common mistake is downloading and rendering oversized images, such as a 2-MB image displayed as a vignette. Make the actual size of the image, in bytes, correspond to the surface area it occupies on the screen.

The Commerce platform provides the capability to dynamically resize images based on how they’re displayed on the screen and to return them in an optimized file format (like WebP and AVIF). To take advantage of this capability, make sure that:

  • You use the Cloudflare CDN.
  • The image is displayed using an out-of-the-box (OOTB) component (preferred) or, for custom components, the image is displayed using experience/picture URLs. These components use the browser's responsive image capability to query images via an image optimization service.
  • If you can't use these components, you can programmatically compose the proper URL with resizing capabilities using utilities built for experience/picture (for example, createImageDataMap).

We recommend uploading your images to Salesforce CMS to optimize their delivery. If you must host your own images, ensure proper CDN and browser caching is achieved with cache-control headers.

Every resource -- image, Javascript, CSS, web font, AP Apex call -- takes time to download and hurts the overall page performance. For optimal site performance:

  • Remove references to unused resources.
  • Minimize how many resources are loaded and reduce the size of each resource.

Optimizing network performance is crucial for ensuring fast load times and a smooth user experience. Follow these best practices to minimize latency and improve the efficiency of your network requests.

Reducing the number of origins from which assets are loaded can significantly improve your site's performance. Follow these guidelines to streamline asset hosting and reduce latency.

  • Host all assets with Salesforce (preferred).
  • If that's not possible, host them on a single origin that supports CDN and browser caching with proper cache-control headers.
  • If the assets hosted on a third-party origin are critical for the page load, adding a <link rel=“preconnect”> (mdn) to the <head> markup speeds up the initial HTTP connection time.

Including third-party scripts and IFrames can introduce performance bottlenecks and security risks. It's crucial to limit their use and optimize their loading to ensure your site remains fast and secure.

  • Third-party scripts and IFrames can introduce performance bottlenecks and security risks. Only include third-party content that’s essential for the functionality of your site.
  • Defer loading of non-essential third-party scripts until after the main content has loaded. This can be achieved using the async attribute on script tags.
  • Regularly audit your third-party scripts and IFrames to ensure they’re still necessary and aren’t introducing unnecessary delays or vulnerabilities.
  • Consider using alternatives to IFrames, such as embedding content directly into the page, to avoid the additional overhead and potential security issues they can cause.

By adhering to these best practices, you can optimize the network performance of your site, ensuring faster load times and a better user experience.

Performance can be impacted by sub-optimal configurations across data and settings. We recommend reviewing you data and removing duplicate or inactive data, such as inactive or unused promotions.

We also recommend that you review configuration tradeoffs and enable settings that improve performance. For more information, see these topics.