Best practices to follow for Page Speed Optimizations while building Headless Shopify eCommerce store using React/Next.js
Headless commerce solves the scalability and flexibility problems by separating the frontend of a Shopify storefront from its backend. It provides eCommerce businesses the liberty they need to build a custom eCommerce storefront tailored to their needs. However, with this freedom comes other responsibilities, including security and speed optimization.
Headless Shopify storefronts rely heavily on APIs to pull data into the frontend. While this architecture makes the storefront dynamic and scalable, the massive number of APIs it needs to connect can hurt site performance and load time.
Page speed is fast becoming the primary metric to measure the usability of websites and their SEO ranking. Slow sites have a direct link to higher bounce rates and low conversion rates. For eCommerce, page speed can result in a surge in conversions or a significant purge in customers. Therefore, it is crucial to prioritize lightning-fast load time for headless Shopify storefronts to boost usability and increase conversions.
While frontend frameworks like React or Next.js and CMSs used for headless storefronts leverage several techniques to minimize file size and help websites load faster, additional efforts are required to optimize site speed further. This article will teach you various techniques to improve the performance of your headless Shopify storefront and increase conversion and search engine credibility.
Continuous Site Audit and Performance Testing
An essential first step to optimizing the performance of a headless Shopify storefront is to understand what happens when the website loads. By carrying out site audits and testing, a user can easily gain insight into such data.
Agile software development promotes iterative testing of applications throughout the development phase, through the use of the continuous testing concept. Users can understand the impact of each code block on performance and spot opportunities to speed up their code by regularly testing the performance of their headless storefront during the development phase.
Lighthouse is an open-source tool that can be used for testing and auditing website performance. It performs a site audit and generates a report that shows the page's performance metrics. Lighthouse is accessible via the Chrome DevTools on Chrome browsers and as a Chrome and Firefox Lighthouse extension
Users can also install the NPM package for use in their coding environment.
Google PageSpeed Insights is another free tool that enables an eCommerce business owner to analyze their headless Shopify storefront website. It provides a report and a list of opportunities to improve page speed. It also gives a score that compares web page's speed performance to other websites on the internet.
Auditing and testing site performance during the development phase is an highly recommended first step as it enables users to understand performance problems and tackle them before the customers encounter them.
Avoid Big Data Sets
When retrieving content from a third-party API, only a select-few data from the API is often needed. Likewise, every eCommerce website implements a search feature that allows customers to search through the storefront for only products specific to their query. For this reason, it is imperative users apply a filter to only query the information needed from the API. How fast this filter and query is evaluated significantly affects the speed of the webpage that displays it to the customers.
For a store with a few products or an API that returns only a small amount of data, the time-to-completion of the filtering and sorting process can be nearly negligible—but can be significant otherwise.
For example, we have a store with products that have images, descriptions, and reviews. Each product is 50 KB. If the store has only a few products, say 50, we can easily retrieve all 50 products(amounting to just 2.5MB), sort them based on the selected preferences, and display them to the customer.
It is estimated that 5 MB takes 1 second to download on a typical 3G network. Therefore, the whole data will be downloaded in about 500 milliseconds and the site can load in less than 1 second—which is the recommended load time.
However, if the same storefront has 10,000 such products, we will need to retrieve 500mb of data in each request before it is filtered and displayed on the webpage. This is will take about 50 which is not a sustainable technique. It will make the storefront slow and ultimately repel customers.
A better and recommended solution for headless Shopify storefronts is to avoid big data sets. Many headless CMS provide a technical limit for the number of datasets you can store per project to optimize speed when querying the data. Contentful allows only 25,000 data sets (or 50,000 records or custom) per project. GraphCMS has the same limitation. This limitation allows for faster filtering and, therefore, quicker load time.
Defer or Async Load 3rd-party Scripts
Before a browser displays a web page, it goes through the process of parsing the HTML, then rendering it to the screen. Third-party integrations and APIs create scripts to achieve their desired functionality. Such scripts called parser/render blocking scripts can get in the way of the page rendering and lead to slow loading of a website.
Fortunately, there's an easy fix through the async and defer HTML attributes. The async and defer attributes load JavaScript asynchronously without disrupting DOM construction.
Async: Async attribute tells the browser to download the script asynchronously and execute it as soon as it is downloaded. That is, if the script gets downloaded before the DOM is entirely constructed, it may interrupt the process. Also, if multiple scripts on a webpage have the sync attribute, any of the scripts can get executed as soon as it is downloaded, regardless of the order they appear in the HTML file.
<script async src="/js/jquery.min.js"></script>
Defer: defer notifies the browser to download a script asynchronously, but only execute it when the HTML parsing is completed. Contrary to async, defer scripts are executed in the same order as they appear in the HTML document.
<script defer src="myscript.js"></script>
As a best practice, use async if it is necessary to run the script during the parsing process and defer for less critical scripts. It is also recommended that you test out the website after using the async and defer attributes to ensure that it still provides the intended experience.
Establish Early Connections To Required Origins
The process for a browser to establish a connection and request resources from a server involves four steps:
- Domain name lookup
- Resolving it to an IP address
- Setting up a connection to the identified IP address
- Encrypting the connection
This process can take as little as milliseconds to complete. However, when requesting many resources from different APIs, as in headless Shopify, the process gets prolonged and delays site load.
Establishing an early connection with the server when loading third-party scripts is an easy way to fix this problem. The rel attribute of the HTML <link/> tag provides two values that help to achieve this: preconnect and dns-prefetch.
Prefetch: the rel = dns-prefetch attribute of a link tag helps the browser to perform DNS resolution beforehand. DNS resolution alone takes between 20-120 ms.
<link rel="dns-prefetch" href="http://example.com">
Preconnect: adding rel = preconnect to a link tag informs the browser that the page wants to establish an early connection with a third-party domain. This can speed up load time by up to 400ms because the browser only needs to fetch the resources when requested. All the hassle of resolving the domain and connecting to the server is removed.
<link rel="preconnect" href="http://example.com">
If a page needs to connect to many third-party domains, it is unadvisable to use preconnect for all of them. Use preconnect only for the most critical connections and dns-prefetch for every other.
preconnect and prefecth are both resource hints. As such, they are not mandatory instructions, and the browser gets to decide when is the right time to execute them.
Because of browser support, it is advisable to use preconnect and prefecth in different link tags.
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
Not in a single link tag like below:
<link rel="preconnect dns-prefetch" href="http://example.com">
Only preconnect to critical domains you will use soon because the browser closes any connection that isn't used within 10 seconds. Unnecessary reconnecting can delay other essential resources, so limit the number of preconnected domains.
Conclusion
A few milliseconds difference in site performance can make or break an ecommerce business. That is why it is important to actively work towards ensuring that your headless Shopify storefront is well optimized for speed and usability. By implementing the solutions to the major performance bottlenecks of headless Shopify technologies as outlined in this article, you can properly analyze and improve the speed of your headless Shopify storefront and, ultimately, boost conversion.
How can AKOS help?
At AKOS, we pride ourselves on building accessible, secure, and scalable Headless Shopify Plus storefronts. Our experience in having tested and integrated multiple external Headless CMSs with Shopify helps us lead the charge of building Headless Shopify Plus stores with knowledge and experience. We’re happy to schedule a consultation and figure out the best Headless CMS for your Shopify Plus store, just say Hello!