Performance Best Practices
There are a number of best practices you can follow to improve Spartacus performance, which will also improve your Google Lighthouse score. By following these best practices, you can also improve the results of your Google Core Web Vitals report, which focuses on loading speed, interactivity, and the visual stability of your website.
The keys for achieving a “Grade A” performance report are the following:
- The page loads as fast as possible, which includes loading the following as quickly as possible:
- resources, such as CSS and JS scripts
- assets, such as fonts, images, and media
- synchronous and asynchronous data, such as XHR requests
- Users can interact with the page as quickly as possible
- Visible elements on the page move as little as possible while the page is loading
Table of Contents
The following best practices are highly recommended for improving the performance of your storefront application:
- Minimize the number of synchronous and asynchronous HTTP requests as much as possible.
- Use HTTP compression whenever possible to improve transfer speed and to optimize bandwidth.
- When loading third party scripts, use
deferso that the browser’s main thread does not get blocked.
- Verify that the size of your assets is appropriate for the size of the user’s screen. For example, you do not want to display big images on a viewport that requires small images.
- When making calls to APIs, such as OCC, try requesting only the data that you need. OCC responses with
fields=FULLcontain a lot of data that you might not need. The bigger the response, the longer it takes to retrieve it and process it. The same practice applies to APIs that support pagination.
You can improve the performance of your storefront application with the following caching best practices:
- Maintain a second level (L2) cache for all of the site assets, and also for the HTTP requests that can be cached, such as OCC calls for anonymous users that do not change very often.
- Ensure you have an appropriate browser cache policy for all of the assets of the page. Browser caching saves a lot of bandwidth and improves page load time (both initial and subsequent) when it is properly set and tuned.
The following recommendations can improve the performance of your Spartacus storefront app significantly:
- Take advantage of the SSR transfer state mechanism to avoid duplicated XHR calls. For more information, see SSR Transfer State.
You can improve the SEO of your storefront with the following best practices:
- Enable server-side rendering to ensure that all of your pages are properly indexed.
- Have a valid and consistent
robots.txtfile to allow robots to crawl your website.
- Ensure your meta attributes and tags are appropriately set across your pages.
There are a few components and elements in Spartacus that are not yet fully compliant with accessibility. Where necessary, you can override these components and elements, which allows you to add missing
aria attributes. It also allows you to rename elements to improve accessibility scoring.
Spartacus is a Progressive Web Application out of the box. As a result, you can use the service worker to cache resources that do not change often, which will speed up subsequent page loads. You can also enable your storefront app to work offline.
For more information, see Progressive Web Application Support.