Archetype Themes has re-architected and optimized the latest version of the Expanse Theme, resulting in faster page loads and higher-converting shopping experience.
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.