Sitecore headless uses a decoupled architecture that separates the front-end presentation layer from the back-end content management system, providing a number of advantages over traditional non-headless/MVC approaches:
- One of the primary benefits of Sitecore headless is the flexibility it provides for front-end developers to use their preferred technologies, such as React or Vue.js, to build dynamic, engaging websites that deliver a superior user experience. By separating the presentation layer from the content management system, Sitecore headless enables front-end developers to work independently of the back-end system, reducing complexity and improving agility.
- Another advantage of Sitecore headless is its ability to deliver content to multiple channels, including web, mobile, and other digital touchpoints. With a decoupled architecture, content can be delivered through APIs to any channel, ensuring consistent brand messaging and a seamless user experience across all devices.
- Sitecore headless also provides better scalability and performance compared to non-headless/MVC architectures. By separating the presentation layer from the content management system, Sitecore headless allows for faster load times, reduced server load, and improved site performance, even with high volumes of traffic. However, not all Sitecore headless websites archive this potential. The reason is there are other factors that affect performance, which we will look into in this post. But first, let’s talk a bit about measuring performance.
About monitoring website’s performance
Monitoring and optimizing your website’s performance is essential to ensure that your website is performing at its best. There is a myriad of tools that analyze website performance and identify areas for improvement. A few examples are Google PageSpeed Insights and GTmetrix. Most of such tools utilize Google Lighthouse, which is a free, open-source tool that audits pages for performance, accessibility, SEO, and more.
A bit of detail that’s important to know when it comes to using these tools, is that although PageSpeed Insights uses Lighthouse in the background, they are not exactly the same. Lighthouse only uses lab data to measure the performance, reflecting how hypothetical users may experience your site. In contrast, PageSpeed Insights uses both lab and field data, reflecting how real users experienced your website.
Another thing to keep in mind is that you might find that your scores are different each time you test. This is normal because network conditions, browser extensions that modify network requests, and ads displayed on the specific page affect your score each time you conduct the test.
As for metrics and benchmarks, consider looking into the following: the Largest Contentful Paint (LCP), which measures the time it takes for the main content of a webpage to load. Aim for an LCP of under 2.5 seconds for a good user experience. Next, evaluate the First Input Delay (FID), which quantifies the responsiveness of a website by measuring the time between a user's interaction (e.g., clicking a button) and the browser's response. Ideally, the FID should be less than 100 milliseconds. Lastly, assess the Cumulative Layout Shift (CLS), which quantifies the visual stability of a page by measuring unexpected layout shifts. Aim for a CLS score below 0.1 to ensure minimal content shifting.
How to optimize the performance of headless Sitecore apps
Let’s get into how to address some of the most common factors that might be dragging down the performance of your Sitecore headless website. Note that not all of these will be applicable for every website, which I will call out:
- Optimize your images Images are an essential part of any website, but they can also be a major performance bottleneck if not optimized properly. Things to consider here are:
- Use the proper image format - Image formats like WebP and AVIF often provide better compression than PNG or JPEG, which means that your images will load faster and consume less data
- Resize to the appropriate dimension
- You can also consider lazy loading techniques to improve the perceived performance of your website
- Remove unused scripts
- Implement lazy loading
- Implement caching
- A note about code splitting
Websites tend to accumulate unnecessary scripts over time, either through testing, plugin integrations, or legacy code. These unused scripts can impact page load times and overall website performance. By auditing and identifying these unused scripts, it is possible to reduce the number of HTTP requests, decrease the payload size, and improve the website's loading speed.
It’s worth mentioning that Lighthouse will probably show a poor score related to unused scripts for applications built on React. Due to the nature of React applications, scripts are compiled and merged into a single file - a bundle. This bundle is loaded as a single file. Unfortunately, Google Lighthouse flags the script as unused, even though they are being by the React framework. In addition, the use of Google Tag Manager (GTM) can have a significant impact on this score metric, especially if GTM is used to load multiple external scripts, if you plan to use GTM on your site, it is strongly recommended to review the tags and scripts regularly to remove unnecessary or unneeded ones to minimize the impact on your performance scores.
Lazy loading defers loading of non-critical resources, such as images or videos, until they are about to come into the viewport. By doing so, you can significantly reduce the initial page load time and improve the overall user experience. With lazy loading, only the visible content is loaded initially, and as users scroll down the page, additional resources are loaded dynamically. This approach not only speeds up the initial page rendering but also conserves bandwidth and reduces server load. By implementing lazy loading in your Sitecore headless website, you can strike a balance between delivering engaging content and maintaining optimal performance, resulting in faster load times and happier users.
Caching is a technique that can significantly improve the speed of your website by storing frequently accessed data in memory or on disk. Sitecore headless provides several caching options, including in-memory caching and distributed caching. Implementing caching for your Sitecore headless website can greatly reduce the time it takes to load pages and improve the overall performance of your website.
Code Splitting is a term for breaking up the application’s compiled code into multiple chunks. Normally, the entire headless application is loaded when a page is requested. Code splitting ensures that only the components in use are loaded instead.
There are multiple ways that code splitting can be set up, but many of them can’t work with Sitecore JSS on React. Workarounds exist, but many introduce cumulative layout shift (CLS) which offsets the benefits of code splitting and in some cases even result in lower scores than with unsplit code. The case is different with Next.js which automatically splits the code of the application into smaller chunks, improving the performance and loading times of the application.
Optimizing the speed and performance of a Sitecore headless website requires careful attention to detail and a commitment to ongoing monitoring and improvement. By following the tips outlined above, you can ensure that your website is fast, responsive, and provides an exceptional user experience for your visitors.
