What it Takes to be a Salesforce Commerce Cloud Expert – Best Practices Every Developer Needs to Know
10+ years of heads-down development in the most demanding, fast-paced e-Commerce retail environments has given me a unique perspective on what it takes to be a Salesforce Commerce Cloud expert. 
While certifications and training courses are great and highly informative – I carry two (2) SFCC Certifications (Technical Architect/Integration Designer and Certified Developer) – there’s simply nothing like learning from real-world experience.
In this post I’ll be discussing several key best-practices I’ve learned from my trial by fire. I guarantee if you take to heed and follow these lessons, you’ll not only take your SFCC client experience to the next level but your career as well. Let’s get started with the most important lesson, performance; a fast site is a profitable site.
The 411 on Salesforce Commerce Performance
Website performance is a measure of how fast your website pages are displayed. Shoppers these days expect fast, consistent and seamless experiences. In 2009 consumers expressed they would abandon a potential purchase if a given site did not load in 3-seconds or less. Can you imagine the expectation today in 2020?
Optimizing the performance of your website also significantly impacts on customer loyalty, SEO performance and many other critical tenants of your e-Commerce presence. Simply put, performance is everything.
Let’s take a look at what are the best practices – Front End, Memory Management, High Visibility Page Optimization, Scheduled Jobs, etc. – that you need to consider as an SFCC developer for improving website performance.
Front-end Performance
The first step towards a performant site is ensuring your front-end renders and responds immediately for your customers. This of course is challenging as most of the page load time is consumed by browser processing, meaning there’s not a lot directly in your control; however, what you can control makes all the difference if managed properly.
The most important items to focus on to ensure the highest levels of site performance in your front-end are:
- CSS Sprites: Spriting combines multiple images into a single image and then uses CSS to call a specific piece of the image at a specific time and location. Therefore, it reduces the number of HTTP server calls to render a page and saves bandwidth accordingly.
- Minification: It makes your storefront web page smaller and easier to load by minifying the JavaScript and CSS code, eliminating white space and unnecessary characters and shrinking variable names.
- Combined CSS: Reduces the number of CSS files used (Optimal to have one CSS file), resulting in fewer HTTP server calls and faster page load times.
- Control page weight: Total page weight should not exceed 1.5MB.
- Make Fewer and Smaller HTTP Requests which can be achieved by considering the following points:
- Reduce the Size and Number of Cookies.
- Reduce the Number of Images.
- Consider hidden requests carefully such as @import in css file.
- Using GET vs. POST Requests: GET requests can be cached but POST is never cached and are therefore slower than other requests.
- Avoid using iFrames since it blocks the browser onload event and each Iframe is a separate HTTP request.
- Move CSS to the top of your pages and JavaScript to the bottom of your pages.
- Put Flash files before JavaScript but after the rest of the page; Flash files can trigger reload operations.
- Make sure all data delivered to the HTTP client is gzipped, with the exclusion of images and data for some older browsers.
- Minimize Image Size.
- Use a Content Delivery Network
Memory Management
You’ll no doubt encounter incredibly large sets of data even when dealing with a single customer. With personalization on an exponential rise, e-Commerce retailers and their technology partners are interested in collecting and consuming as much information as possible for each customer.
In other words, as an SFCC developer, you’ll need to efficiently manage your application to ensure it works well with this tremendous and ever-increasing volume of data. In particular, focusing on the following tenants of memory management will ensure your SFCC application is not only performant today, but with tomorrows data volume as well:
- Design loop logic so that memory consumption doesn’t increase with result set size.
- Keep only currently processed objects in memory, and do not retain references to that object (so that the object can be freed from memory). Specifically, don’t perform sorting or other types of collections in memory.
- Stream data to file regularly (do not build large structures in memory).
- Read feeds record by record (do not read an entire file into memory).
- Don’t put Iterators with more than 100k objects into the Pipeline Dictionary. The current Pipeline Dictionary implementation caches objects in memory while iterating over them, which can cause the system to run out of memory. Instead, use the Script pipelet, query the objects with the B2C Commerce Script API and iterate over them within the same script.
- If you need to create multiple feeds, query the objects once and write records to all feeds as you iterate over the results. This will save time because the objects only need to be created in memory only once.
- The system is designed to deal with transactions with up to 1,000 modified business objects. A storefront pipeline shouldn’t even come close to this number.
Ensuring Popular Content is The Best Performer
Making a bad first impression can be the difference between attracting a new customer or losing a potential sale. In the past retailers would solely focus on their homepage load time. Consumer behavior has changed. Today, Category Pages and Product Detail Pages are now more visited than the homepage.
As such it’s prudent to ensure any views with high volume or were traffic (e.g. email campaigns) is directly funneled to are the most important part of any e-Commerce website because they give the first impression. Here’s how you can readily optimize these views:
- Find out what your first pages are.
- Make your first pages the fastest loading.
- Include CSS and JavaScript inline on first pages. However, it is best practice to make CSS files external rather than inline. This lets you reuse CSS more effectively.
- Reduce graphics and JavaScript on first pages.
- Make sure the most visited pages are cacheable and well performing. Basically, these are category page/search result pages, product detail pages and home pages.
- Don’t trigger live calls to external systems on frequently visited pages; A B2C Commerce application server thread waiting for a response from an external system can’t serve other requests. Many threads waiting for responses can make the entire cluster unresponsive, for any pages.
Jobs and Schedulers
SFCC Jobs are extremely power. They allow automation of routine, time-consuming tasks or long-running processes, for example importing and exporting data, replicating data or code and building a search index.
Ensuring your Jobs and associated Schedulers are configured correctly can turn a 2-hour job into a 5-minutes. Make sure to consider the following points while creating your jobs:
- Always use standard imports instead of customizations; the standard imports take a feed in the B2C Commerce format as input. Therefore, Create the feed in an external system and use the “Simple Feed Integration” component for the download/import handshake.
- Keep application server utilization by jobs to minimum. Calculate the job load factor: total number of seconds of job execution time on an instance (Staging or Production) on a day divided by 86,400 (number of seconds in a day). In conclusion, keep the job load factor below 0.20.
- Pay attention to recovery in solution design. A job might end abnormally, for example, server restart or application server failure. Design the job so that it recovers automatically, for example, it recognizes what files have not yet been imported during subsequent execution.
- You cannot create jobs with controllers; Jobs can only be created using pipelines and scripts.
There’s External Help Available
Fortunately, with the growth of SFCC over the past decade, Salesforce has developed many built-in Business Manager tools to audit your sites performance. Many of which not only will indicate potential issues, but offer solutions as well.
- Pipeline Profiler: Use the pipeline profiler to tune the performance of scripts and pipelines during development and testing. You must trigger the pipeline in the storefront for the Pipeline Profiler.
Pipeline shouldn’t take more than three seconds to execute when it includes non-cached components and no more than 250 milliseconds when it includes cached components. Salesforce B2C Commerce also recommends that you use the pipeline profiler on production to find performance bottlenecks, but only for about fifteen minutes - Code Profiler: For instance, The Code Profiler provides insights into run-time performance.
- Technical Reports: For instance, the Technical Reports dashboard gives you insights about your site’s server-side technical operations data, including pipelines and controllers.
Quota Consideration
Salesforce B2C Commerce includes constraints and limits to ensure the efficiency and stability of solutions built on the platform. These limits concern memory usage, resource consumption, API calls, and the number of business objects.
Moreover, Quotas serve to monitor resource usage in custom code. Resources include memory, application server threads, and database table sizes.
You can view quota status and limits in the Administration module. This information readily allows identification of issues with code, giving you the opportunity to address them before they cause significant, customer-facing problems. You can also view Quota violations in the Quota log files.
Developers also have the ability to configure the SFCC Business Manager send out a daily summary of all quotas that are in violation.
It’s important to note a quota can be viewed as two disparate types; either enforced or not enforced. If an enforced quota is exceeded, an exception is thrown preventing the current operation from completing.
Do not catch quota exceptions using custom code. If a quota isn’t enforced, B2C Commerce doesn’t act when the limit is exceeded.
It is very important you understand that when Quota is exceeded then that means your custom code is using supported capabilities inefficiently and you need to adjust your implementation to leverage a more efficient solution.
Once you’re confident your SFCC performance profile is optimized, you can now focus on optimizing your content.
On to Content
Not only does content drive your customer experience, customer loyalty and differentiate you from a crowded market, content educates search engines about your website. Moreover, you should always keep in mind how your website is portrayed to search engines and the message accurately communicates your brand, purpose and differentiators.
Content can be introduced to an SFCC website through either content asset or content slot.
Content Slots
A content slot is a preconfigured place on the storefront where a merchant can show one of the following:
- Products
- Categories
- Content Assets
- Static HTML
- Product Recommendations
- Einstein Algorithm
Content Assets
Content assets provide customers non-product related information such as customer support pages, special sales, size charts, flash graphic, product carousel, product search result set, marketing graphic and gardening tips.
Which One is Right for Me – Content Slot or Content Asset?
It always comes to my mind on when to use content asset versus content slot, you can consider below to answer this question:
While the content slot feature is awesome, it adds complexity. Be careful what you configure as a content slot versus a content asset. Design static or infrequently changing content as a content asset; for example, a logo in the header or links in the footer. They change infrequently and don’t need to be scheduled, targeted, or tested.
Insider Tip: Don’t use more than six (6) content slots on a given page. As the number of content slots increases, page performance decreases.
It is also very important to consider encoding all displayed content within an ISML page, this helps preventing malicious attacks through content manipulation.
If a script expression such as ${pdict.ProductSearchResult.searchPhrase} is used in an ISML template, where the content type is set via the following:
<iscontent type=”text/html” charset=”UTF-8″ compact=”true”>
The script result is automatically HTML encoded. Moreover, if content type is not set then use <isprint value=”{}”/> to ensure the resulting HTML is encoded.
Power Level 9,000?
As a token of my appreciation for you reaching the end of this post, I want to share with you my personal tips and tricks to ensuring your SFCC Development work transforms to the next level.
Follow this advice to improve your SFCC deliveries and ensure you’re recognized as the rock-star you are:
- Always test cross-browser and cross-machine. Otherwise, you might miss important performance problems.
- Always use a load test to measure the server performance. In conclusion, simple pages are easy to maintain and are less error-prone.
- Always use the same controller that renders the form to also handle the actions from the form.
- Obey standards or what works today might be broken tomorrow.
- Make sure your code is maintainable. While consolidating code and removing comments can make pages faster to load, it makes them more difficult to maintain.
- Focus on initial page rendering and then add external content via AJAX.
- Add progress bars to keep the customer informed and give an instant response to interaction.
- As a performance best practice, only import modules when you need them, not at the top of a module.
- Use lower case for ISML tags.
- Place caching statements at the beginning of a template.
- Include an initial comment that describes the purpose, the requirements and the effect of a template from both a business point of view and a technical perspective.
- Add includes that affect the whole page to the top of the template.
Do not do this!
Conversely, if you value your career and reputation as an SFCC developer, make sure you don’t do the following:
- Live calls to external systems should not be triggered on frequently visited pages like homepage, category/search result pages and product pages.
- Products with incomplete attribution or marked offline should not be included in when feeding B2C Commerce; don’t implement sanity/plausibility jobs on B2C Commerce.
- Don’t over-optimize. Moreover, keep XHTML and CSS meaningful and maintainable.
- Don’t cache pages that show buyer or session information.
- Avoid using iFrames as it is B2C commerce best practice to avoid using them.
- Do not use B2C commerce for video streaming. However, you can use LINK partner technology for video hosting.
Do not do this with Search APIs!
- Don’t post-process product/content search results, search results can be large sets. Instead, all search criteria must go into the query for efficient execution. Don’t post-process with custom code.
- Don’t iterate over variants of a master on a search result page (or any page where multiple masters appear), this can significantly increase the number of touched business objects. Instead, use native Salesforce B2C Commerce features to deal with variant availability, to determine available variation values or to determine price ranges.
- Don’t attempt to narrow the results by variation using scripts to process search results. For example, if color is a slicing attribute, show all iPods in all colors, don’t attempt to iterate over the results to pull out only pink iPods via scripts.
- Do Break search results into pages before processing/appearing in the storefront (pipelet Paging, class PagingModel). Instead, limit the maximum page size, for example, a maximum of 120 products per page, even/especially if the “View All” functionality is provided.
Do not do this with jobs!
- Don’t execute any long running operations in a storefront pipeline (for example, import/export). Instead, use “jobs” for all long running tasks. The web tier closes browser connections after 5 minutes. The pipeline might still be running at this time.
- Don’t start many jobs at the same time. Instead, disperse job start times to balance the job load.
Do not do this with Objects!
- Avoid concurrent changes to the same object, storefront pipelines should only read shared data (for example, catalogs and prices) and read/write customer specific data (for example, customer profiles, shopping carts or orders). This avoids making concurrent changes.
- Avoid concurrent changes to the same object, use the locking framework to ensure exclusive access. For example, specify named resources for job schedules.
Do not do this with HTTP status codes!
- Avoid 301(permanent) and 302(temporarily) Redirects.
- Avoid 404 Errors and 404 Pages. 404 errors impacts performance because the missing item can’t be cached and therefore tries to retrieve it each time the request is made. 404 pages also impact the selling potential of a site as such include the following in 404 pages: Graceful message explaining potential reasons of why this page cannot be found, featured products, sitemap and search box.
Do not do this with controllers!
- Controllers should not call each others.
- Controller should not import packages.
- Pipelets should not be called from Controllers.
- Pipelines that don’t end with an interaction continue nodes should not be called from controllers.
- Pipelines and controllers should not be mixed in a single cartridge.
