Introduction
If you want to learn how to improve your Shopify store speed and page load speed in a few simple steps, then please keep reading this post or you can watch my YouTube Video below:
I’m Kristin Mark and I’m the owner and founder of a multi-award-winning SEO and growth marketing agency called Kristin Mark Digital which I established back in 2010.
Along with my expert team, I have developed one of the world’s best Shopify OS 2.0 themes for SEO and it’s also one of the fastest themes too so you can be sure what I’m about to teach you actually works.
Google suggests that 20% of conversions are lost for every 1 second of page load speed so maintaining the fastest possible time on both mobile and desktop is essential for conversion rates as well as for maintaining and improving your rankings.
Every ecommerce platform has its speed issues and Shopify is no different. They all just have slightly different issues that need to be addressed.
With Shopify, there are three key elements that slow your store and page speed down and I’ll explain them here.
Themes
Shopify is a cloud-based platform, so you can never access 100% of the code base to do exactly what you want and need it to do to perform as fast as possible in the search engines.
Don’t get me wrong, the OS 2.0 core of the platform is very very fast, but once you add a theme to the code, that is when things start getting sluggish.
The theme is the front-end design, look and feel of your store. There are free themes, themes you can buy from the theme store, and there are 3rd party themes that you can currently purchase outside of Shopify.
Each theme comes with its own feature and functionality but the way they are tightening their grip on things at the moment, I don’t think 3rd party theme developers will be able to sell these outside of the theme store for much longer, especially with the introduction of the new ‘Themes’ section in the new Partners Dashboard.
I do however believe that this is a good thing because it will only improve quality and standards. They have Shopify CLI which is a command line interface tool to help you build and optimize themes faster and quicker and it won’t be too much longer before all themes have to be built using this standard.
What Is A Good Shopify Speed Score?
Shopify’s speed score is a measure provided by Shopify to its merchants to give them an idea of how fast their store loads on mobile and desktop devices. It’s an important metric because the loading speed of a store can greatly influence the user experience and conversion rates.
The speed score is calculated based on the Lighthouse performance metrics, which is an open-source tool developed by Google. Lighthouse evaluates a number of performance metrics, such as First Contentful Paint (FCP), Speed Index, Time to Interactive (TTI), First Meaningful Paint (FMP), and First CPU Idle, among others.
The score ranges from 0 to 100, with higher scores indicating faster sites. Here is a general interpretation of what constitutes of a good Shopify speed score:
- 90-100 (fast)
- 50-89 (moderate)
- 0-49 (slow)
It’s important to note that the speed score is not a measure of your site’s overall performance, but a snapshot of its performance at a specific point in time. Factors such as the user’s device, browser, location, internet connection, and the specific pages they visit can all affect the actual load time.
Shopify recommends improving the speed score by optimizing images, using a fast and responsive theme, reducing the number of apps installed, and other best practices for web performance.
So, the theme that you use, and how well your theme has been designed, coded, and optimized plays a significant role in your store’s overall page load speed.
At the moment, Shopify store themes only have a PageSpeed Insights Score requirement of 60/100 for mobile and desktop which for me, is far too low so my advice is the following.
How To Test Your Store Speed:
> Open up Google’s PageSpeedInsights Tool
> Enter your homepage URL
> Flip between Mobile & Desktop
> Repeat the process for a collection page and a product page
Take the average of each of those scores and that’s basically what your page load speed score is.
I’d advise you should be 90+ on both mobile and desktop, if your theme is not, you have issues. Test your potential theme choice too – if it’s difficult to get a URL to test – get examples from the theme developer of stores using the theme so you can test it.
Don’t forget, a BASIC theme with hardly any functionality will be extremely fast, but as soon as you start adding features and functionality, Google Analytics code, tracking codes and email pop-ups, etc, that’s when you start getting slower page load speeds.
Images
Images on your store can have an enormously detrimental effect on your page load speed score.
One of the biggest mistakes designs, developers, and retailers make is that they put a website image up that is not resized correctly for the container within which it sits. What do I mean by that?
Okay, so on one of our themes for example, our homepage slider container image size is 1800 pixels wide and 600 pixels deep.
If you’ve put an image up that is three times the size of that, it is going to significantly reduce your page load speed.
You must resize the images for the correct sizes for the containers within which they sit and then, optimize them using a specialist software tool.
Don’t let your designer tell you that they’ve optimized your store images through PaintShop Pro. You can do that within there, but it’s nowhere near as good as the next tool I’m going to show you, as it just blurs the image quality.
How To Optimize Your Images For Speed On Shopify
> Check every image on your homepage is reseized exactly to the size of the container within which it sits.
> Right-click on the image with your browser inspect tool and note the size of the image container
> Download the image (or open the original image)
> Open up an image editing software on your PC or Mac
> Resize the image to the correct container size
> UPLOAD the image to TINJPG (free tool)
> DOWNLOAD the optimized image
> UPLOAD the image to the store
You can repeat the process for collection page images and product page images. If not, at least download, optimize and upload again to your collection pages and product pages using Tinjpg free image optimization tool.
No image app in the world can do the above so don’t waste your money on image apps and do it properly. Time consuming yes, but what a difference this will make!
No one said SEO and speed optimization was easy!
Apps
The more apps you use, the more JavaScript is injected into your theme’s code, and the more apps you use, the slower your store will be, it’s as simple as that.
I’ll be honest, it’s difficult to explain why so I asked ChatGPT to give me a helping hand…
JavaScript is typically loaded and read by the browser during the page-loading process. Here’s a step-by-step breakdown of what happens:
- Downloading: First, the browser downloads the HTML document of the webpage. As it parses the HTML, it encounters references to external resources such as stylesheets, images, and JavaScript files. When the browser comes across a <script> tag that references an external JavaScript file, it sends a request to download that file.
- Parsing: Once the JavaScript file is downloaded, the browser begins parsing it. This is the process of converting the text of the code into an internal format that the browser can work with.
- Compilation or Interpretation: The JavaScript engine in the browser then takes the parsed code and either compile it to machine code or interprets it directly. JavaScript is a just-in-time (JIT) compiled language, which means that it is compiled during execution, not ahead of time.
- Execution: After compilation or interpretation, the JavaScript code is executed. This is when the effects of the code start to become visible on the webpage. JavaScript can interact with the Document Object Model (DOM) of the webpage to manipulate elements, respond to user interactions, perform calculations, and more.
- Blocking and Asynchronous Loading: JavaScript is blocking by default, meaning it halts the rendering of the HTML document until the script has been downloaded, parsed, and executed. However, developers can use the async and defer attributes to modify this behavior. async makes the script load asynchronously, meaning it doesn’t block the HTML parsing but executes it as soon as it’s ready. defer also makes the script load asynchronously, but it guarantees execution only after the HTML document has been fully parsed.
Please note that modern JavaScript allows the use of modules, which can slightly modify this process. Modules are downloaded and parsed in a non-blocking manner, and their execution can be controlled in a more granular way.
JavaScript can slow down a webpage’s load speed for several reasons:
- Large File Sizes: JavaScript files can be large, which can take longer to download and execute. Minifying and compressing JavaScript files can help to mitigate this issue.
- Synchronous Loading: If JavaScript is loaded synchronously, it means that the browser must stop rendering the HTML of the page until the JavaScript file is completely loaded and executed. This ‘blocking’ behavior slows down the loading of the page. Using the async or defer attributes can ensure that JavaScript is loaded asynchronously, improving page load times.
- Complex Calculations or Manipulations: JavaScript is often used for complex tasks, such as manipulating the DOM, handling events, and calculating values. These tasks can be time-consuming, especially for slower devices or devices with limited processing power.
- Network Latency: If JavaScript files are hosted on another server, network latency can slow down the page load speed. This is the delay caused by the time it takes for a data packet to travel from one point to another.
- Unoptimized Code: Poorly optimized code can slow down the performance of JavaScript. For example, inefficient loops, unnecessary variables, and redundant function calls can all increase execution time.
- Excessive HTTP Requests: Each external JavaScript file represents a separate HTTP request. More requests mean more round trips to the server, which can slow down the page. Bundling scripts into a single file can help to reduce the number of HTTP requests.
- Render-blocking: If your JavaScript is manipulating the DOM (Document Object Model) or CSSOM (CSS Object Model), it can block the rendering of the page, causing a delay in the visible rendering of the page.
It’s important to note that JavaScript is not inherently slow, but how it’s used can significantly impact the performance of a website. Proper optimization techniques can greatly improve the speed of a site using JavaScript.
There you go, simple! Haha! Basically with Shopify, the more apps you add, the slower your store and page load will be.
How To Check Apps That Slow Your Shopify Store Down
- Run a page load speed test before adding an app
- Try and make a note from the app docs what code the app will install and into which Liquid files
- Install the app
- Clear your cache
- Run the page load speed test in section 1 a few times to see what impact the app has had on your page load
- Keep, remove, or test others based on your app
PLEASE NOTE: uninstalling an app from Shopify does not always remove the code it injected into your store. Find out where the code was and check it has been removed thoroughly.
If you are unsure how to do this yourself, email the app developer and get instructions on how to remove the code, or get them to do it for you!
Conclusion
So with Shopify, there are three key elements to improving store and page load speed.
#1 – Have an optimized theme that has been designed and built by people who know what they’re doing.
#2 – Make sure all images on your store are resized and optimized correctly.
#3 – Use as few apps as possible and check which ones are causing the problems if you want your store to load as fast as possible.
If you’re looking for INSTANT page load speeds of 90+ on both mobile and desktop then RAPIDLER this app is one of the best apps I’ve ever seen for achieving ridiculously fast page load speed using AI.
You get a 7-Day FREE TRIAL, free report, no coding required, and a 14-day money-back guarantee. This is an absolute no-brainer for any Shopify store.
Comments 1
Comments are closed.