How to improve frontend performance with commercetools

Table of Contents

How to improve frontend performance: Invaluable tips to boost site speed, SEO ranking and Core Web Vitals

Kore Nordmann
Kore Nordmann
VP Engineering, commercetools
Published 23 November 2023
Estimated reading time minutes

Utilizing a modern frontend-as-a-service like commercetools Frontend is a powerful step toward enhancing the performance of your digital storefront. At the same time, there are numerous strategies your team can employ to boost user experience metrics, such as Lighthouse and CRUX scores, as well as Time to First Byte (TTFB). Discover how to optimize speed and performance for your digital storefront here.

How to improve frontend performance with commercetools

How commercetools Frontend boosts site speed and performance

When developing your eCommerce site, it’s key to measure performance through metrics that you can constantly monitor and improve upon. After all, fast-loading and high-performance eCommerce websites are pivotal in delivering outstanding user experiences and increasing conversion rates, as well as reducing bounce and abandonment rates. 

To achieve this, an ongoing effort and a performance-first approach are a must, so your digital storefronts remain competitive in a dynamic landscape where browsers evolve, SEO guidelines change, devices become faster and, most importantly, customer demands rise over time. 

When choosing commercetools Frontend, you’re already equipped with a solid foundation for site speed and performance. This includes:

  • Using Netlify for hosting and delivering the frontend layer, which enables fast page loads and lower latency by transmitting requests through its global edge network. 
  • Ensuring native app-like experiences with progressive web apps (PWAs), which are optimized for speed and high performance. 
  • Utilizing server-side rendering (SSR) to deliver frontend projects, which enables faster loading times, including for users with poor network coverage or outdated devices. In addition, SSR helps boost SEO as it can index, crawl and render content before the client processes the JavaScript. 
  • Offering built-in SEO tools (available in the Frontend Studio), which include editable fields to improve accessibility, redirects to avoid broken links or hide outdated pages and sitemap generation that allows search engines to crawl the website.

Beyond what commercetools Frontend offers and how good it is for your business, there are many ways you can maximize speed and performance beyond the product’s scope. 

An overview of frontend metrics
Key performance drivers go beyond commercetools Frontend infrastructure. Your code and data model structure play a major role in achieving top marks across the most important frontend metrics.

Here, let’s check out the key frontend metrics to keep tabs on, and explore tips and best practices to increase performance KPIs across the board. 

Measuring performance: What KPIs and scores to keep tabs on?

The primary key performance indicators (KPIs) to track your frontend performance revolve around the Core Web Vitals. These vital metrics represent specific web performance criteria that Google employs to assess a website’s user experience. They consist of Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS)

Derived from these initial three metrics, you can calculate both the Lighthouse score and the CRUX score. These scores, defined and periodically updated by Google, are considered the key indicators reflecting the perceived performance of a website by its users. In essence, these scores can be described as:

Lighthouse score: Assesses the performance of web pages and provides a score based on several factors, including the Core Web Vitals, such as load times, interactivity and visual stability. It provides information on SEO and accessibility issues, as well as offers insights on how developers can optimize their websites. 

Lighthouse provides a performance score on a scale of 0 to 100, with a higher score indicating better performance. An “ideal” Lighthouse score would typically be close to 100. 

CRUX score: A dataset provided by Google that contains real-world performance data from users’ experiences on various websites, the CRUX score includes information on the loading and interactivity of web pages. Google uses the CRUX score to assess the Core Web Vitals and other performance metrics for websites, which can influence search rankings and overall user experience.

The “ideal” CRUX score would depend on your specific website and its target audience. It’s essential to monitor CRUX data and aim to provide a positive user experience based on actual user data. Ideally, you want to see low values for negative metrics like FID and LCP, and high values for positive metrics like CLS.

In addition to the Core Web Vitals, Time to First Byte (TTFB) is also a crucial metric to have in your monitoring arsenal. 

Without further ado, let’s take a deeper look at each of these four KPIs.

Largest Contentful Paint (LCP)

LCP measures how quickly the largest content element, such as an image, a video or a block of text, becomes visible on the user’s screen. This metric is a key factor in determining the perceived loading speed of a web page. Items that have a negative impact on LCP include big banner images and CSS, which block fast rendering. 

Developers should optimize the HTML (together with the pre-loaded CSS) to render the most significant content of the page. Remember that large file sizes of images or videos will negatively impact the LCP. If you must use large file sizes on the site, ensure that the initially server-side rendered HTML defines a background color or a small blurred background image (use data:// URLs) as a placeholder.

Additional best practices include: 

  • Enhance collaboration between developers and business users to prevent big imagery from being the most significant content element above the fold.
  • If large imagery is a requirement, find placeholders that are fast to load and render.
How commercetools Frontend helps improve LCP 
  • Since all structure, content and server-side rendered content is available immediately on the first load provided by commercetools Frontend, you’re set to get an excellent LCP metric. 
  • In addition, commercetools Frontend provides all information on page structure and page data, which is passed to Netlify to perform the server-side rendering of the page. The resulting HTML is handed over to the browser.

First Input Delay (FID)

FID (formerly known as Time to Interactive or TTI) assesses how long it takes a web page to become fully interactive for the user. Essentially, it’s the time between the start of the page load and when the page is ready to respond to user interactions such as clicks, scrolling and input. To be considered fully interactive, a web page should meet two conditions: One, all web page content, including images and scripts, has been loaded. And two, the web page responds to user input within 50 milliseconds.

A lower FID indicates better interactivity. Items that adversely affect FID include big JavaScripts, large HTML elements or when external scripts are blocked (usually imported through Google Tag Manager).  

We recommend following best practices when coding your frontend: 

  • Avoid using large libraries to minimize JavaScript bundle size.
  • Keep third-party scripts (especially those that block rendering) to a minimum, as commercetools Frontend (or any frontend-as-a-service solution) has no control over the performance and speed of externally embedded scripts. 
How commercetools Frontend helps improve FID 
  • Minimizing the number of HTTP requests: All data in the initial request is provided through data sources, which minimizes the number of HTTP requests. 
  • Reducing the size of resources such as images and scripts: Implementing code splitting to load only the necessary code for each page is implemented by default, reducing the size of the initial bundle and improving load times. In addition, commercetools Frontend provides tooling for optimizations. 
  • Prioritizing critical resources to load first: Critical resources are prioritized using preload and prefetch techniques. 
  • Implementing lazy loading for non-critical resources: Lazy loading for images is implemented by default.
  • Minimizing the use of third-party scripts and plugins: No third-party scripts by default and a single DNS origin for all resources. 
  • Using a content delivery network (CDN) to serve resources from servers closer to the user: A global CDN (Netlify) is used for frontend delivery.

Cumulative Layout Shift (CLS)

CLS evaluates the visual stability of a web page by measuring how much the layout or content of a web page shifts unexpectedly while it’s still loading. This can happen when images, iframes or other resources on the page load at a slower rate than the rest of the content, causing the elements on the page to move unexpectedly. For example, page rendering updates can move buttons at the moment the user already tries to click on the button. These layout updates can happen due to the following reasons: 

  • Images without fixed dimensions or aspect ratio.
  • Loading fonts that update the text rendering.
  • Loading data asynchronously from the browser and updating page components.

A low CLS score indicates a more stable and user-friendly experience.

How commercetools Frontend helps improve CLS 
  • Through data sources, commercetools Frontend allows loading all data during the initial request, so in-place data updates aren’t needed. User-specific data like the current cart or account are an exception, though these updates shouldn’t cause any re-wrapping of content.
  • It may be a challenge not to resize components based on font or image loading, since not all images have all dimensions known upfront. Images from the commercetools Frontend studio will always come with full dimension specifications and Cloudinary enables resizing those images for specific dimensions or aspect ratios. All usual HTML/CSS techniques can be used to solve these issues since commercetools Frontend does not impose any limits in this regard.
  • Using these best practices, a CLS of 0 can be reached on all pages.

Time To First Byte (TTFB)

TTFB measures the amount of time it takes for a web page to receive the first byte of data from the server. A slow TTFB can lead to a slower overall page load time, which can result in a higher bounce rate and lower search engine rankings. Therefore, it is essential to optimize the TTFB to ensure a fast and reliable website, which can be achieved in the following ways:  

  • Reduce dependent API calls by identifying the URL concept: This is trivial for static pages, but for dynamic pages, the dynamic page router is asked to identify the page concept, which might require calls to APIs. To ensure you can reduce dependent API calls, use a URL structure where it is possible to identify the page concept directly from the URL without requiring backend queries for this purpose. 
  • Replace slow API calls by loading all data from data sources: All data sources are queried in parallel, so the overall response time depends on the slowest data source. For maximum performance, the data sources should not issue sequential queries. Instead, if multiple queries are required, run them in parallel and achieve the desired impact. 
  • Minimize the size of the DOM tree: Based on page structure and data, the HTML is generated and sent to the users’ browser, the larger the HTML (DOM tree) is. It means it takes longer for the user to see the page. To minimize the size of the DOM tree, it helps to simplify the page without complex HTML to implement certain features. For example, custom <select> elements often use a lot of HTML and styling to achieve accessibility and work on all devices, while the default HTML element does not.

How commercetools Frontend helps improve TTFB  
  • Enabling HTTP/2 as it allows for faster data transfer and reduces the number of requests needed to load a page.
  • Implementing Gzip compression reduces the size of data sent from the server to the user, resulting in faster load times.
  • Avoiding the use of too many components in Frontend Studio. 

Backend optimizations for frontend performance

Running optimizations for your commerce backend can also positively impact your frontend’s speed and performance. For instance, using cached credentials can reduce the number of token requests to your commerce backend, which helps improve website metrics. 

In addition, enhancing API performance in the backend is crucial. The API Hub, our API orchestration layer connecting commercetools Composable Commerce and Frontend, allows you to eliminate slow and dependent API calls to achieve this goal by parallelizing queries (and therefore, no sequential/dependent queries) and reducing the size of transferred data. 

Because all data sources are already fetched in parallel, distributing requests across multiple data sources might be a feasible mental model for developers. By structuring data in backend systems, data can be fetched efficiently and faster from a single source. 

Note that the API Hub and its infrastructure add slightly to the overall response time, but it mainly depends on the issued API calls and the API performance. This has to be monitored and optimized over time. 

Another strategy you can take is to use GraphQL. As an open-source data query language and runtime for APIs (Application Programming Interfaces), GraphQL allows you to request exactly the data you need from a server or API, rather than relying on the server to determine the structure and content of the response. It provides a more efficient and flexible way to interact with APIs compared to traditional REST (Representational State Transfer) APIs. 

When it comes to impacting frontend performance, GraphQL helps by enabling efficient data retrieval, which eliminates over-fetching or under-fetching of data, as only the required data is fetched. In addition, using GraphQL reduces the number of API calls as you can consolidate these requests into a single query. That means you can reduce the number of network requests and API calls, which leads to faster load times. 

Improve your frontend speed and performance with commercetools

There are many ways you can improve the speed and performance of your digital storefronts, and commercetools Composable Commerce and Frontend are ready to help you in this journey. For instance, companies such as CHRONEXT, a luxury watch platform, accelerated site speed performance by 300% and enhanced SEO rankings by 40%, which led to a 10% increase in conversion rate. 

Are you exploring options to improve your frontend speed and performance? Get in touch with our experts to learn how commercetools Frontend can help you achieve your goals. 

Kore Nordmann
Kore Nordmann
VP Engineering, commercetools

Kore Nordmann has founded companies like Qafoo, Tideways and Frontastic, acting as a CEO and CTO. Since merging Frontastic into commercetools, he has been working on scaling products as the Vice President Engineering for Integrated Offerings. His passion is empathically building sustainable software.

Related Blog Posts