Discover the key to unparalleled speed in your Shopify store with App Deferral. Learn how to optimize performance by strategically deferring third-party app scripts, ensuring a seamless UX
Last updated
In the expansive world of Shopify, speed isn’t just a luxury—it’s an absolute necessity. Shopify’s new standard, the Dawn theme, proudly sets an impressive speed benchmark. Aligning with Shopify’s stringent standards can result in a speed score exceeding 90, promising a smooth and rapid user experience. Shopify’s development team has dedicatedly focused on enhancing web performance for modern eCommerce.
However, a significant challenge arises—the indispensable role of apps in your store. While a well-crafted theme may align with Shopify’s speed benchmarks, the introduction of apps injects JavaScript elements that can potentially slow down your store’s loading speed.
The Dawn theme, recognized as the new benchmark by Shopify, boasts an impressive speed standard. Following Shopify’s guidelines, your theme should ideally achieve a score above 90, ensuring a swift and responsive user experience. Other free themes on Shopify Theme Stores with the best speed scores adhere to the best current practices. These themes maintain a minimal approach, avoiding the incorporation of too many features. However, it’s essential to note that despite not using all 40 apps, running the JS codes of these apps affects the site’s speed.
The catch in this scenario lies in the symbiotic relationship between your store and apps. While a well-crafted theme aligns with Shopify’s speed benchmarks, the addition of apps introduces JavaScript elements that can potentially slow down your store’s loading speed enormously. Imagine a scenario where a poorly optimized theme is coupled with the installation of numerous apps – this can significantly drop your speed score, potentially below 30.
However, it’s essential to note that not all apps have a high Total Blocking Time (TBT). Some app developers prioritize speed optimization for their app widgets, but unfortunately, the majority do not.
In today’s landscape, the criteria for speed assessment have evolved, with a focus on metrics like Total Blocking Time (TBT). To maintain a good standing, TBT needs to be under 250ms. This is where the impact of app scripts becomes glaring. Imagine an array of installed apps, including live chat features widget, or a social button, each dragging in iframes that load additional content from external websites.
TBT now accounts for 30% of the total speed score, demanding a meticulous approach to script management. Previously, metrics like First Contentful Paint (FCP) and Largest Contentful Paint (LCP) took up a larger portion of the score.
Now with the update of Lighthouse 11 auditing, the criteria structure changes to: FCP (First Contentful Paint): 10 CLS (Cumulative Layout Shift): 25 TBT (Total Blocking Time): 30 LCP (Largest Contentful Paint): 25 SI (Speed Index): 10
As you can see, the TBT is a factor that weighs the most. Calculating TBT involves measuring the total time between First Contentful Paint (FCP) and Time to Interactive (TTI), representing the duration during which the user is unable to interact with the page due to blocking scripts.
TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses. The sum is calculated by adding the blocking portion of all long tasks between First Contentful Paint and Time to Interactive. Any task that executes for more than 50 ms is a long task. The amount of time after 50 ms is the blocking portion. For example, if Lighthouse detects a 70 ms-long task, the blocking portion would be 20 ms.
Total Blocking Time (TBT) has emerged as a critical metric, requiring meticulous attention. With the benchmark set at under 250ms for optimal performance, the challenge intensifies with the addition of apps, each contributing to the overall TBT. This becomes even more challenging on mobile devices, which have limited CPU power and rely on 4G networks.
In the quest for optimal speed, various tactics come into play:
Image Optimization: Ensuring your images are finely tuned for performance.
Page Stabilizer: A technique to reduce First Contentful Paint (FCP) and CLS.
Predictive Page Preloading: Anticipating the next page on mouse hover and proactively loading it.
Minification (JS and CSS): Shrinking file sizes for faster loading.
Critical CSS Extraction: Extracting critical CSS for prioritized loading.
Smart JavaScript Deferral: The focus of our discussion. It defers 3rd-party app scripts until the first interaction of the user with the page, helping mitigate TBT.
Why should you trust app deferral as a crucial strategy for speed optimization? Our smart JavaScript deferral takes a proactive approach by automatically delaying the loading of third-party apps. Users have the flexibility to customize the loading strategy for each script through our app configuration.
For instance, if a review widget is set to load at the bottom of the page and relies on JavaScript rendering, loading it before the main content might result in Total Blocking Time (TBT) issues. Our approach is to load such scripts after the initial content, preventing interference with HTML and CSS painting. As you may know, JS is single-threaded; if we feed the main thread with a lot of JS, we cannot work with the most visible things on the screen – CSS, loading assets like images – which affects the loading speed of the website negatively.
The following are file categories that we recommend you defer to, we recommend that you should be acutely aware of what these changes make.
Advertising Scripts: Google Adsense, Amazon Ads, TikTok
Social Network Buttons: Embedded follow and like buttons for social networks.
Live Chat Scripts: Zendesk, Customerly, Intercom, tawk.to, Olark, and similar live chat platforms.
Third-Party Scripts: Disqus Comments, Facebook Share, and others.
Scripts Unnecessary for Above-the-Fold Content Display.
By default, all other 3rd apps should render with low priority. Users can decide on which to omit, and which to include.
App deferral represents the evolution of script management, addressing the intricate challenge of
optimizing speed without compromising functionality.
The history of speed optimization techniques is a great journey, from the early web to PHP, WordPress, and Shopify. Techniques like image lazy loading started as tricks using JS to delay and later became official features in HTML. JS files were placed at the end of the body in HTML, and eventually, HTML implemented defer and async properties. Today, these are built-in functionalities proving that deferring app scripts on user interaction is not a trick but an evolved practice, similar to the development of image lazy loading and script defer, async attributes.
We also believe that parsing and scripting JS too early is not necessary, as JS is single-threaded. So, we need a way to make scripts load with a new event, not yet supported in HTML. Soon, just like image loading, JS defer, and async properties, new attributes like onload, onready, onInteract for the script tag may be added to HTML and the web.
Does this innovative solution exist beyond the Shopify realm? Indeed, in the world of WordPress, platforms like Perfmatters and WP Rocket offer similar functionalities, emphasizing the importance of deferring JavaScript.
Perfmatters: https://perfmatters.io/docs/delay-javascript/
WP Rocket: https://wp-rocket.me/
While app deferral proves to be an effective strategy today, the landscape of speed optimization is ever-evolving. As Lighthouse benchmarks shift, and new metrics emerge, continuous innovation remains the key. Just as lazy loading and image compression were once the pinnacle of speed optimization, new metrics like TBT and CLS now take precedence.
Predicting the future of speed optimization is a dynamic challenge. As benchmarks change and the web evolves, innovation becomes the cornerstone for maintaining optimal speed.
At Avada, we not only possess expertise in the field but also adapt to the changing standards of the web. Our commitment to continuous innovation ensures that we stay ahead of the curve, offering cutting-edge solutions for sustained and exceptional speed optimization. The intricate dance between themes, apps, and scripts finds harmony through our smart JavaScript deferral, paving the way for a faster and more efficient Shopify store.
Table of Contents
