The Tommy John Shopify site is failing all 3 of the core site speed performance metrics on both mobile devices and desktop.
The most important metric to note is Largest Contentful Paint (LCP). LCP time measures how long it takes the largest images and content to load. It’s the most common way that a website’s page load time is measured.
Tommy John registered an LCP time of 3.8 seconds on mobile devices and 3.9 seconds on desktop. Its recommended that ecommerce sites have an LCP of 2-3 seconds on mobile and 1-3 seconds on desktop.
Research by Shopify has found the following stats:
40% of online shoppers will leave a site that takes longer than 3 seconds to load.
Improving page load time (i.e. LCP) by 1 seconds will increase mobile conversion rates by up to 27%.
There are several technical issues hurting the site’s mobile performance. Most notably:
Excess unoptimized & unused Javascript/HTML/CSS code in the site that is slowing down the website’s load time
Large graphic images that would benefit from lazy loading and pre-loading optimizations.
Optimizing the site’s codebase and removing unused/excess Javascript code would not only improve page load time, but would have a positive impact on conversion rates, SEO, paid marketing, and overall customer experience.
To learn more about our site speed optimization work, visit the section titled Next Steps.
Mobile Page Speed Audit
Overview
The Tommy John Shopify site is failing all 3 of the site speed performance metrics: First Contentful Paint, Largest Contentful Paint, and Cumulative Layout Shift.
The most important metric to pay attention to is Largest Contentful Paint (LCP).
The mobile site registered and LCP time of 3.8 seconds. It’s recommended that ecommerce sites have an LCP of 2-3 seconds on mobile.
Research from Shopify shows that 40% of website visitors will leave a site that takes longer than 3 seconds to load.
Not only is LCP the most common way a website’s load time is measured, but poor LCP time will have negative effects on conversion rates and bounce rates (which will hurt organic ranking and paid marketing performance).
There are several technical issues hurting the site’s mobile performance. Most notably:
Excess unoptimized & unused Javascript/HTML/CSS code in the site that is slowing down the website’s load time
Large graphic images that would benefit from lazy loading and pre-loading optimizations.
Results
First Contentful Paint: 2.2 seconds
Explanation: First Contentful Paint (FCP) measures how long it takes for content to start appearing on a website. This is typically an empty box or plain text. It’s the first pixels rendered in for the site.
Optimal time for ecommerce sites is < 1.8 seconds.
Largest Contentful Paint: 3.8 seconds
Explanation: Largest Contentful Paint (LCP) measures how long it takes for a website to display its biggest single content element. It's one of the most common ways to measure page load time.
Optimal time for ecommerce sites is < 2.5 seconds.
Cumulative Layout Shift: 1.99
Explanation: Cumulative Layout Shift is a measure of how “stable” your website it after it first renders. A website that has content shift down as more object load will have a higher score. Cumulative Layout Shift is one of the core ranking factors for Google.
Optime score for ecommerce sites is < 0.1.
Optimization
Accord to the PageSpeed results, there are 4 technical issues slowing down the website:
Reduce Javascript execution time / Removed unused Javascript, HTML, CSS
In short, this means that there is a substantial amount Javascript, HTML, and CSS code that is slowing down the site. There are four ways that Javascript code can accumulate on your site: when you connect a new Shopify app, when you use certain themes, when you use third-party scripts such as Facebook Pixel or Google Analytics, and if you have custom code on your site. The biggest culprit is Shopify apps. Each app “injects” a bit of code into your site. Even if the app is deleted, the code it injects stays behind. Over time, this code will slow down your site’s load time.
Minimize main-thread work
Main thread overload happens when too many tasks, like heavy JavaScript execution, complex CSS code, and third-party scripts, are processed simultaneously. This slows down the site’s load time. The best way to fix this is to delete unused Javascript, compress essential Javascript code, and remove unnecessary third party scripts.
Optimize Largest Contentful Paint (LCP)
The LCP takes up a considerable amount of main thread resources when loading. As a result, it needs to be optimized through image compression, preloading important page elements, and eliminating unused CSS and Javascript files.
Reduce the impact of third-party code
Third-party scripts, such as ads, analytics, and social media widgets, can slow down your site. Delaying the firing of analytics, or deferring them from using the main thread, can improve performance.
Desktop Page Speed Audit
Overview
Although the Tommy John site has better performance on desktop devices compared to mobile devices, it’s still failing all 3 of the core site speed performance metrics.
Largest Contentful Paint (LCP) is still the most important metric to note here. The website registered an LCP of 3.9 seconds seconds on desktop. It’s recommended that ecommerce sites have an LCP of 1-3 seconds on desktop.
The same technical issues that are slowing the site down on mobile devices are negatively effecting the site’s load time on desktop.
Results
First Contentful Paint: 1.9 seconds
Explanation: First Contentful Paint (FCP) measures how long it takes for content to start appearing on a website. This is typically an empty box or plain text. It’s the first pixels rendered in for the site.
Optimal time for ecommerce sites is < 1.8 seconds.
Largest Contentful Paint: 3.9 seconds
Explanation: Largest Contentful Paint (LCP) measures how long it takes for a website to display its biggest single content element. It's one of the most common ways to measure page load time.
Optimal time for ecommerce sites is < 2.5 seconds.
Cumulative Layout Shift: 0.1.18
Explanation: Cumulative Layout Shift is a measure of how “stable” your website it after it first renders. A website that has content shift down as more object load will have a higher score. Cumulative Layout Shift is one of the core ranking factors for Google.
Optime score for ecommerce sites is < 0.1.
Optimization
Accord to the PageSpeed results, there are 4 technical issues slowing down the website:
Reduce Javascript execution time
In short, this means that there is a substantial amount Javascript, HTML, and CSS code that is slowing down the site. There are four ways that Javascript code can accumulate on your site: when you connect a new Shopify app, when you use certain themes, when you use third-party scripts such as Facebook Pixel or Google Analytics, and if you have custom code on your site. The biggest culprit is Shopify apps. Each app “injects” a bit of code into your site. Even if the app is deleted, the code it injects stays behind. Over time, this code will slow down your site’s load time.
Minimize main-thread work
Main thread overload happens when too many tasks, like heavy JavaScript execution, complex CSS code, and third-party scripts, are processed simultaneously. This slows down the site’s load time. The best way to fix this is to delete unused Javascript, compress essential Javascript code, and remove unnecessary third party scripts.
Optimize Largest Contentful Paint (LCP)
The LCP takes up a considerable amount of main thread resources when loading. As a result, it needs to be optimized through image compression, preloading important page elements, and eliminating unused CSS and Javascript files.
Reduce the impact of third-party code
Third-party scripts, such as ads, analytics, and social media widgets, can slow down your site. Delaying the firing of analytics, or deferring them from using the main thread, can improve performance.
It’s common for the same technical issues to affect the site on mobile and on the web. The issues are extenuated on mobile due to the lower processing power.
Next Steps
Anyone selling products on the internet should think about their website’s speed. It plays a major part in how effectively a website can turn visitors into paying customers.
found that a 0.1 second improvement in website speed can increase overall conversion rates by 8.4%.
Other sources have found interesting links between fast site speed and better SEO, lower cost acquisition costs when using paid ads, and an increase in repeat purchases.
Let’s make it real with an example. Let’s say an ecommerce site get’s 100,000 visitors per month and has a 3% conversion rate.
If that site is optimized for speed, and see a 20% increase in conversion rates, it would go from 3000 sales/month to 3600 sales/month. At an AOV of $30, that’s an addition $20,000 per month in sales for every 100,000 visitors.