Expanse 5.0 Web Performance Case Study

Archetype Themes has re-architected and optimized the latest version of the Expanse Theme, resulting in faster page loads and higher-converting shopping experience.

Shipping less JavaScript with Islands Architecture

The Expanse Theme utilizes Islands Architecture, a revolutionary approach to component-based development that Astro has popularized. This approach helps to manage the loading of JavaScript for interactive page elements based on different loading conditions. Consequently, it reduces the amount of JavaScript that is downloaded, parsed, and executed during the initial page load, resulting in improved Total Blocking Time (TBT).

Prior to implementing this new Islands Architecture approach, the Expanse Theme used to download and execute a single bundle of JavaScript during the initial page load. This resulted in a TBT of 1.6s (Chrome on an Emulated Motorola G 4 tested from Virginia, US, on a 9 Mbps 4G connection with 170ms of latency.), which could cause a delay in the page loading and negatively impact the user experience of shopping in online stores. 

However, after implementing the Islands Architecture approach, the Expanse Theme now only downloads the code that is necessary for the initial page load. Consequently, the TBT has been reduced to 705ms, which is a 56% improvement.

Prioritizing the loading of the LCP Image

The newest version of the Expanse Theme utilizes Shopify's recently introduced Liquid section properties. These properties help identify the sections within the theme that may contain critical elements for the Largest Contentful Paint (LCP). By leveraging this identification, the theme preloads these elements using resource hints to optimize their loading process.

Before the update, the images on the Expanse Theme were lazy-loaded by default, leading to long load times. As a result, the Largest Contentful Paint (LCP) was as high as 3.3 seconds.

We have changed our approach in the newest version of the Expanse Theme. Now, we utilize the section's index to identify potential LCP elements, load the images eagerly, and preload them using resource hints. This allows the images to be loaded as soon as possible, thus improving the website's performance. This change has significantly improved the LCP, which has now been reduced by 1.63 seconds, a 49% improvement from before Liquid section properties were available.

Lighthouse Performance Comparison

We conducted Lighthouse audits to measure the impact of our optimizations on the Expanse Theme. Audits were conducted before and after making changes, resulting in significant improvements. The initial performance score was 78, rising to 93 after applying optimizations.

Conclusion

In conclusion, the optimization of the Expanse Theme has led to significant improvements in page speed performance. By conditionally loading JavaScript with Islands Architecture and prioritizing the loading of the LCP Image, we've managed to considerably reduce the Total Blocking Time and the Largest Contentful Paint. These changes have resulted in a faster, more efficient, and user-friendly shopping experience, ultimately enhancing customer satisfaction. We will continue to strive for further improvements and innovations to deliver the best possible ecommerce experience.