In the current climate, a good user experience with good performance is paramount, since significantly more business is being conducted online. But as your business adds more images, data, customization, and business logic to your Commerce site, your site and its related communities may slow down. So, let’s take a look at how we measure and investigate site performance in a Commerce community at a high level.
In the built-in Chrome inspector, you can see a list of all of your community’s components and the time it takes to load each one. This tool allows you to see how long every component takes to load and will allow you to drill down into specific component details. Below is an example Commerce Storefront with the inspector open.
From here you can call out large images, expensive components, and errors that might lead to bad page load experiences.
As you can see, on this page the expensive components are the apex calls, which is to be expected as this is where the majority of the data is called on an out-of-the-box commerce site. This is typical of the Commerce experience, since a lot of product data needs to be loaded to display products and pricing in the storefront even with an out-of-the-box setup.
In addition, you can see a few errors are called out in CSS and UI Properties file, which might lead to some display issues in the browser.
You can even drill deeper and see which classes are associated with the slower components. In this case the product data fetch on the displayed T-65 X-Wing spotlight product is my most expensive call.
Depending on your community, different functionality may be the focus of your performance issues. On Commerce communities we often see performance slowdown when displaying large numbers of products on the homepage or in the cart, real-time calls on the product listing page, large numbers of product variants on a product detail page, or an overall large number of customizations and complex business logic across the storefront.
The best way to encourage good site performance is to design for it from the start of an implementation, but even after a community moves into production, we can still improve performance by managing image sizes and the number of items shown on a given page, and by modifying or disabling expensive customizations.
Looking to launch a B2B commerce community fast, or need to optimize your customers’ experience on your site? Avionos is here to help. Learn more here.
