Enhancement of Performance and Stability in Salesforce Commerce Cloud

Introduction

In today's fast-paced digital marketplace, ensuring the performance and stability of e-commerce platforms is paramount. Website performance directly impacts customer behavior, sales conversions, and search engine rankings. Salesforce B2C Commerce (SFCC), a popular cloud-based e-commerce platform, provides robust tools and frameworks to optimize site performance and stability. This article explores comprehensive best practices for enhancing server-side, client-side, and integration performance in SFCC, ensuring a seamless and efficient user experience.

Why is performance critical for your site?

Numerous research studies have demonstrated a significant correlation between slow website performance and detrimental effects on customer shopping behavior. Specifically, a mere 100-millisecond increase in response time can result in a 1% decline in sales. Moreover, site performance is critical to Google's search result rankings. The Salesforce B2C Commerce platform is designed to allocate resources to handle customer traffic and meet clients' dynamic needs efficiently. However, custom applications must be implemented with optimal design principles to leverage the platform's capabilities fully. Suboptimal design can hinder performance and scalability. To maximize performance and stability, it is essential to follow best practices.

Server-Side Performance

To handle requests efficiently, server-side performance optimizes the interactions between the web, application, and database tiers. Key strategies include effective caching, efficient ISML templates, optimized scripts, controller management, and appropriate use of custom objects and attributes.

Caching Strategy

A robust caching strategy is critical to minimize the load on the application and database tiers. The Salesforce B2C Commerce (SFCC) platform scales effectively when the web tier handles most transaction requests through caching.

Consider a scenario where multiple users are trying to access the same page. The page should display the same to all users except for the pricing section, which varies based on customer type. In such cases, we need to work on personalizing the cache to avoid making unnecessary calls to the application and database tier. SFCC offers many out-of-the-box cache personalization solutions.

1.???? Using the Response object of Script API Script API is the recommended way of controlling cache as it eliminates all the complexities we previously used to have when controlling through <iscache> ISML tag. Example code looks like below, which directly sets cache time in the response object: response.setExpires(new Date().getTime() + durationInMinutes * 60 * 1000); We also have the option to leverage SFCC caching capabilities by configuring cache settings for personalized pages by using the “setVaryBy“ function in the Script API response object. This allows different cache versions for various customer groups, enhancing performance without compromising personalization. An example code for that looks like this below: response.setVaryBy("price_promotion"); Now that you know about the cache control we can implement using methods in the Script API response object, SFRA already implemented some middleware using this in a file at the path “scripts/middleware/cache.js” in the base SFRA cartridge. It is recommended that this middleware be used where possible for page caching.

2.???? Using <iscache> tag This <iscache> tag was historically used to control the entire response's cache. As the replacement script API is introduced, this is no longer recommended and is fully refactored from the latest SFRA base cartridges. Some of the significant drawbacks of using are:

1.???? The most critical issue is that the <iscache> tag is confusing. It's challenging to understand which template defines the caching behavior of the response because there can be multiple nesting with local includes, and each of those can have its own <iscache> tag. In such cases, the lowest defined cache time is applied. This makes managing cache challenging and requires some coding rules to follow, like configuring caching settings in the outermost templates to avoid conflicts.

2.???? A template might be used in multiple contexts that require multiple caching rules, contributing to increased complexity.

With these caching strategies, an active plan for regularly reviewing and optimizing cache settings using Salesforce B2C Commerce diagnostic tools, such as the Pipeline Profiler and Business Manager Analytics, is also needed. Analyze cache hit ratios and adjust caching durations to maximize efficiency.

Web System Tiers in B2C Commerce

Salesforce B2C Commerce has three architectural tiers: the Web, the Application, and the Database.

When caching is enabled, a request goes through the web to the application tier for the initial page request. The application tier creates the requested page and, if needed, makes API calls to the Database Tier. This page is then sent back from the application tier to the web tier, where the web client receives it. The web tier also stores a copy on the page to effectively serve it without involving the application and database tier, resulting in better performance.

In the best-case scenario, the Web Tier should handle most requests. This will ensure that the traffic is managed effectively in peak hours when the brands have the most traffic and order flow.

1.???? Web Tier The web tier is the most important among all architectural tiers. It stores page caches and returns copies of pages if requested pages are already cached. Ideally, you should design a system where most of the request transactions are handled on this tier. That can be achieved by following an effective caching strategy.

2.???? Application Tier The application tier is responsible for creating the requested page. If a page isn’t already available in the page cache or the existing cache has expired, this tier gets a hit to process and return the requested page. Also, there are some use cases in which we need to ensure dynamic data is always served, like customer loyalty data or customer baskets. In such cases, we leverage caching the configuration changes using Custom Caches, which helps avoid re-calculation across every request and thus renders the page faster.

3.???? Database Tier The Database Tier is the last in the architectural tiers. Suppose the application tier cannot process results, so multiple API calls to the Database tier are needed, which might include accessing values from a custom attribute or custom object. The downside of this access is that database access is expensive in terms of performance and should be avoided as much as possible for better performance.

Example Scenarios and Best Practices

It is recommended that the ratio be 100:10:1, where 100 is the number of transactions on the web tier, 10 is the number of transactions on the application tier, and 1 is the number of transactions on the database tier.

1.???? Inefficient processing A single web-tier request generates multiple application-tier requests, resulting in even more database requests. This isn’t good from a performance perspective.

2.???? Efficient Processing As most request transactions are handled on the web tier, only a few are sent to the application layer and even fewer to the database layer, making this web page more scalable.

Efficient ISML Templates

ISML templates are integral to Salesforce B2C Commerce's page rendering. Ensuring clean and efficient ISML templates can significantly enhance performance.

1.???? Template Cleanliness: Avoid using <isscript> tag in your ISML files, as Salesforce no longer recommends it. This will help keep your ISML templates clean and maintainable. Scripting logic should be written in controllers, or a helper script is required in the controller, and only result data should be exposed to the ISML templates for rendering. This will help reduce code redundancy and improve code re-usability.

2.???? Local and Remote Includes: Use local includes for reusable template sections and remote includes judiciously to avoid excessive server requests. Limit the number of remote includes and nesting levels to reduce server load.

3.???? Template Optimization: Utilize pagination for large search result sets and avoid iterating over large data sets in templates. Use Salesforce B2C Commerce's native features to efficiently handle product variants and other dynamic content.

Optimized Scripts

Scripts are essential for custom logic and interactions in Salesforce B2C Commerce. Optimizing these scripts ensures they perform well under load.

1.???? Session Storage: Minimize session storage and prefer using custom objects to reduce database access. For example, store cart contents or wish lists as JSON objects in session storage to avoid frequent database queries.

2.???? Resource Management: Ensure that all resources, such as iterators and HTTP connections, are properly closed after use to free up memory and other resources. Avoid using the dw.io classes for logging as they do not support concurrent writes.

3.???? Efficient API Usage: Use efficient API methods and avoid iterating over large objects. For instance, use the ProductSearchModel for product searches instead of iterating through all products.

Controller Management

The controller in Salesforce B2C Commerce handles the flow of data and logic for various site operations. Proper controller management is crucial for performance.

1.???? Minimize Customization: Limit customization in frequently called hooks, such as OnRequest and OnSession, to avoid adding complex logic or database calls that can degrade performance.

2.???? Modular Controllers: Instead of writing the whole logic in a controller, write helper scripts that divide different logic into modules that can be reused across multiple controllers. This will help make the code base more scalable and will help achieve better performance.

3.???? Independent Extends: Try not to replace base changes but make them work by writing independent logic that appends or prepends base logic.

4.???? Avoid Inefficient Practices: Avoid creating wish lists or empty baskets for every visitor, which can significantly impact performance. Use efficient methods for handling promotions and other dynamic content.

Custom Objects and Attributes

Custom objects and attributes extend the Salesforce B2C Commerce data model, providing flexibility and potential performance challenges.

1.???? System Objects: Prefer system objects over custom objects for better performance and easier maintenance. Use custom objects judiciously, considering object quotas and the need for efficient data retrieval.

2.???? Object Churn: Manage object churn by optimizing database access and leveraging Salesforce B2C Commerce's ORM (Object Relational Mapper) cache. Avoid excessive object creation and deletion in scripts and jobs.

3.???? Data Retention: Implement data retention policies to clean up old and unused custom objects. Set up regular jobs to delete obsolete data and manage storage effectively.

Client-Side Performance

Client-side performance focuses on optimizing the delivery and rendering of content on the user's browser. Key strategies include compressing resources, using unobtrusive JavaScript, lazy loading, CSS sprites, and leveraging content delivery networks (CDNs).

Compressing Resources

Reducing the size and number of page elements is crucial for improving load times and overall user experience.

1.???? Minification: To reduce the size of JavaScript, CSS, and ISML files, use YUI Compressor or CrunchMe to compress and concatenate them during the build process.

2.???? Concatenation: Concatenate multiple JavaScript and CSS files into single files to reduce the number of HTTP requests. This also improves gzip compression efficiency and reduces the size of the ISML response template.

3.???? Caching Static Resources: Leverage browser caching for static resources to minimize load times. Configure appropriate cache headers to ensure resources are cached effectively on the client side.

Unobtrusive JavaScript

Unobtrusive JavaScript separates HTML content from JavaScript behavior, enhancing maintainability and performance.

1.???? Separation of Concerns: Avoid inline JavaScript blocks to ensure a clear separation between HTML and JavaScript. This simplifies the HTML and JavaScript layers, making them easier to maintain and optimize.

2.???? Event Handling: Use the DOMContentLoaded event to execute JavaScript after fully loading the HTML. This prevents the browser from blocking page rendering while it processes JavaScript.

3.???? JSON Objects: Embed structured data in the DOM using JSON objects or HTML5 data attributes. This approach avoids potential issues with comments stripped by mobile proxies and improves data handling efficiency.

Lazy Loading

Lazy loading delays the loading of non-critical resources until they are needed, improving initial page load times.

1.???? Images and Media: Implement lazy loading below the fold for images and other media content. This allows the user to interact with the content above the fold while additional resources load in the background.

2.???? JavaScript Modules: Load JavaScript modules on demand rather than simultaneously. Use code splitting and dynamic imports to reduce the initial load time.

3.???? Deferred Loading: Defer the loading of non-essential scripts until after the main content has loaded. Use the async and defer attributes for script tags to control script loading behavior.

CSS Sprites

CSS sprites combine multiple images into a single file, reducing the number of HTTP requests and improving load times.

1.???? Sprite Creation: Create a single sprite image that contains all the icons and buttons used on the site. Use CSS to display the appropriate section of the sprite for each element.

2.???? Positional Information: Use CSS classes to define the background position for each element using the sprite. This approach reduces the number of image requests and improves page load times.

3.???? Dynamic Styling: Use JavaScript to dynamically apply different styles to the same content or product views. This allows for efficient resource reuse and reduces the need for additional image requests.

Content Delivery Network (CDN)

A CDN provides a distributed server network that caches and delivers static content, improving load times and reducing server load.

1.???? Leverage CDN Caching: Configure static resources such as images, CSS, and JavaScript files to be served from a CDN. Set appropriate TTL values to ensure efficient caching and content delivery.

2.???? Avoid System Objects for Static Resources: Do not use system objects to deliver static resources, as this bypasses the CDN's optimized caching. Use JavaScript or CSS to load background images and other static content dynamically.

3.???? Monitor CDN Performance: Use tools like WebPagetest, Firebug, and Google PageSpeed to monitor and analyze CDN performance. Regularly review and optimize CDN settings to ensure optimal content delivery.

Integration Performance

Integration performance involves efficiently handling data transfers between Salesforce B2C Commerce and external systems. Key strategies include using asynchronous jobs, optimizing data processing, and managing database access.

Asynchronous Jobs

Asynchronous jobs allow for the efficient handling of large data transfers and batch operations without impacting site performance.

1.???? Job Scheduling: To balance system load, schedule large import and export jobs during non-peak hours. Stagger job start times to avoid simultaneous resource-intensive operations.

2.???? Staging Instance: Perform frequent catalog imports and search index builds on a staging instance, then replicate to production. This minimizes the impact on the production server and ensures smooth operation.

3.???? Delta Processing: Use the MERGE import mode for efficient data processing. Avoid the REPLACE mode as it deletes and recreates attributes, leading to inefficiencies. Optimize memory footprint by designing loop logic that handles large data sets efficiently.

Optimized Data Processing

Efficient data processing ensures that integrations do not overwhelm system resources.

1.???? Reduce Database Access: Minimize database access by querying objects once and writing records to multiple feeds during iteration. This approach saves time and reduces system load.

2.???? Explicit Transactions: Group-related operations in transactions improve performance. Transaction size limits must not be exceeded to maintain stability.

3.???? Recovery Strategies: Develop robust recovery strategies for jobs that handle failures

Analytics Tools for Performance Monitoring

Salesforce B2C Commerce (SFCC) offers multiple performance monitoring tools that can help pinpoint areas for improvement. Below are the tools available out-of-the-box in SFCC Business Manager.

Reports & Dashboard

Reports & Dashboard is an analytics option in Salesforce B2C Commerce Business Manager. It helps optimize server-side performance and improves the system's stability. In the “Technical“ tab, you can review the top contributors of the overall processing time with which you know the critical areas with the most significant potential for performance improvements. Similarly, you have other critical attributes like cache hit/miss ratio, which can help efficiently propose a cache policy by focusing on the most important pages.

Code Profiler

Another tool we have for gathering insights is the code profiler. It's available in Business Manager under the “Administration > Operations“ section. This tool also has similar benefits, as it allows highlighting the scripts that took the most time to process. It's beneficial in further investigating the cause of a high total elapsed time.

Pipeline Profiler

Another tool we have for gathering insights is the pipeline profiler. It's available in Business Manager under the “Administration > Operations“ section. This does the same thing as reporting and dashboards by pinpointing the controllers and templates that take the most hits and time to process.

Object Quota Dashboard

We also have a quota section in Salesforce B2C Commerce Business Manager under the “Administration > Operations“ section. It contains the limit across different areas of Salesforce development and helps point out bad code practices in the code base. There’s also an option to configure notification emails, which allows relevant persons to be notified over email when a quota is violated.

Some quotas are enforced, meaning the functionality will also be affected by violation, but some aren’t, and you will only receive notification of a breach. Quota logs are also generated in such cases, and those logs also have complete stack trace pins pointing to the code file causing the issue.

Conclusion

By following these best practices, businesses can significantly enhance the performance and stability of their Salesforce B2C Commerce-based e-commerce sites. Optimizing server-side processes, improving client-side efficiency, and managing integrations effectively are crucial to ensuring a seamless and responsive user experience. Implementing these strategies will help maintain high customer satisfaction, improve sales, and boost search engine rankings, ultimately contributing to the long-term success of the online business.

https://nestosh.com/