Discover practical ways to fix any flaws & weaknesses in your website!
Get a free audit of your ecommerce store. Fix issues before they start costing you a fortune. 🛠️
Quick Shopify Speed Optimisation Checklist: 9 Easy Tips to Follow
One of the key considerations for Shopify store owners is site performance. Your website’s performance directly affects the traffic it receives and impacts its ability to convert users. Thus, Shopify speed optimization must be a huge part of your revenue growth strategy and conversion rate optimization journey. The faster your site is, the more users you are likely to convert.
The primary reasons why people prefer online shopping over conventional shopping are convenience and saving time.
Nearly 70% of consumers state that page speed influences their decisions to buy from an online retailer. [Hubspot]
Improving your load time by 0.1s can boost conversion rates by 8%. [Deloitte, Milliseconds Make Millions]
Additionally, site performance impacts all of your other digital marketing initiatives. Whether it’s paid, email, or social marketing, your website’s speed will impact users from all of these different channels.
In this article, we’ll dig into the details of Shopify’s speed optimization tactics to offer customers the best possible user experience. So, make your web pages speedy and keep up with the expectations of impatient online users!
eCommerce success depends on the speed of your website. The site’s speed gives the e-store visitors the first impression.
You may not even have a second chance if your site is downloading slowly. Slow page loading leads to the frustration of users, and they can leave your site, which will directly affect the volume of sales.
1. Increase Conversion
Lower bounce rates and increased conversions have been linked to faster conversions on websites. According to Google, a one-second increase in site speed can boost mobile conversions by up to 27%.
2.Build Customer Loyalty
According to Skilled, 79% of customers are less inclined to repurchase from an online business if they are “dissatisfied” with the site’s speed.
3. Improve Google Search Ranking
Google, the most prominent search engine, uses site speed as a ranking component for search results. Faster sites will rank higher on Google, making new clients find them easier.
A Shopify website could feature the most tantalizing or useful products; your site may be well-designed, functional, highly intuitive, and aesthetically pleasing. But if the page does not load fast enough, users will leave it earlier than they will notice all the advantages of your products or the great functionality of your website.
Naturally, optimizing a Shopify site for high page load speed is a major priority.
What Site Speed Optimizations Does Shopify Already Have?
One of the nice things about Shopify is that your store does come with some built-in speed optimization features. In general, Shopify sites are pretty fast compared to other solutions. This is great news for Shopify store owners, as the platform is generally faster than platforms such as Magento.
You may discover such useful instruments as:
Leverage Browser Caching: Shopify should already cache your site’s internal resources by default. Caching allows some of your content, such as images, JavaScript, and CSS, to be stored locally within users’ browsers. This means they will not have to re-download the content when viewing the same resource twice. This can speed up your store, as users will be able to see some of your site’s content much faster than they were previously. Note that if you’re seeing third-party resources get flagged for caching issues, there is nothing you can do to directly adjust the caching.
Utilize a CDN: Shopify utilizes the Fastly CDN. A CDN (Content Delivery Network) allows some of your site’s content to be stored on servers across the world. This reduces the physical distance between your users and your site’s content. Reducing the physical distance helps improve your site performance. The Shopify CDN essentially informs the CDN that your assets—JS, images, and CSS—have been edited whenever you make a change to them.As a standard practice, CDN allows merchants to use Shopify Plus to power their website’s backend on autopilot.
Many different factors may affect the timing of your website loading, and in this Shopify speed optimization tutorial, we will reveal the most common issues. Let’s move on!
How To Optimize Shopify Site Speed
By following these steps, you can significantly speed up a Shopify site:
I will highlight the best practices that are used by our Shopify development team and what we consider the most powerful ways to speed up the Shopify website.
1. Use fast and reliable Shopify hosting
Hosting services and infrastructure can make or break the performance of an e-commerce site. This is primarily true on high-traffic and high-transaction days.
Some factors to remember when deciding on hosting platform requirements include:
Memory, as well as bandwidth limits, will determine if the platform will have the ability to scale per demand. Especially during seasonal promotions and flash sales.
The amount of projected traffic as well as the peak user load it can handle ensure that the platform will not crash when there is a sudden uptick in visitors.
Appropriate security ensures that your visitors’ and users’ data is secure at all times.
2. Choose A Lightweight, Fast and Responsive Shopify Theme
Themes act as a store’s face. Selecting a Shopify theme is the most critical decision for a Shopify seller. The theme acts as a storefront for online shops.
Hence, choose a theme that aligns with your brand’s idea, voice, products, and potential audiences. In addition, look for themes that are fast and take minimal time to load the page.
Selecting the themes with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed. As every extra element will add load to your web page, it will take time to load the page.
Conversely, choosing a lightweight, and thus fast, Shopify theme can immediately set your site up for strong performance moving forward.
Pro-Tip 1. Before finalizing the theme, run the theme preview page through Google PageSpeed Insight and see the suggestions to make that page faster.
Pro-Tip 2. Once you have chosen a theme, remember to keep it up to date.
To give you an idea of some of the better-performing themes resulting in higher conversion rates for websites:
2.1. Switch to Hero Layout & Kill Sliders and Carousels
Many sites use sliders to display multiple product images on their homepage. From a design perspective, it makes sense. But high-quality images combined with transitions take time to load and it can increase the website load by manifolds. Additionally, sliders are useless (only 1% of site visitors click on sliders), do not work correctly on mobile, and can hurt your SEO.
When creating a responsive web platform, you’d better not run sliders on your web and switch to a single high-quality hero image that captures the essence of the site and a clear call-to-action (CTA).
Pro-Tip 1:Don’t use videos or GIFs in the hero section. If you need to use a video, you can embed one you uploaded to YouTube; it’s lighter.
Carousels and sliders are the main contributors to poor usability and also load many large and HD images. Replacing the carousel with a single, optimized image paired with a clear CTA will be better for your site’s performance as well as that of your users.
If you want to elaborate on product features, use compelling product descriptions that paint vivid pictures and also improve SEO. If you can represent some information easily with text, there’s no need to dedicate entire sliders or carousels to them.
2.2. Avoid excessive pop-up quick-view windows
The point of improving the speed of your store’s performance is to give visitors the information they are looking for as soon as possible. That’s where a quick pop-up window is helpful—displaying product details directly from an internal page rather than having them click through the page manually.
However, the challenge here is:
It adds an extra step for the visitor.
The user might click it accidentally, which might result in a frustrating experience.
It can be confused with the actual product page.
And most importantly, excessive pop-ups can significantly impact your page load time
This article has everything you need to know about eCommerce popups.
2.3. Avoid excessive liquid loops
Liquid Loops are Shopify-specific and have proven to be extremely useful. However, particular functions have added benefits but also have some tradeoffs.
Loop iteration is one such example that can affect merchants. It occurs when the system has to crawl through the whole store to look for any specific condition. This can be conditions like price, tags, etc. If you have an extensive product catalog, like most large merchants, this loop can take a long time and affect the response time of your store.
2.4. Choose Proper Fonts
Shopify’s font library contains a collection of fonts such as system fonts, Google fonts, and licensed fonts from Monotype. All of these fonts are freely available to use in all Shopify online shops.
Be aware that if you use fonts that do not exist on your customer’s computer, it would be irritating that your customer needs to download new fonts to have the text displayed.
To steer clear of downloading new fonts to your customer’s computer, you might want to think about using system fonts (that already exist on most computers).
When you choose a system font family, you can choose from a variety of typefaces to render text:
Mono fonts: Menlo, Consolas, Monaco, Liberation Mono, or Lucida Console.
Sans-serif fonts: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neue.
Serif fonts: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, or Source Serif Pro.
3. Compress and Lazy Load Images and Videos
Product image strategy is a base for better conversion and shopper attraction. All pictures need to be in their places to help the customer find exactly what they need and make a purchase.
However, a large volume of unoptimized images and videos is frequently the most popular reason for website slowness. There are 4 solutions that you might want to consider to speed up the Shopify site, as follows:
3.1. Compress and Merge Images
eCommerce businesses have a propensity to use large numbers of images since, in retail, images are a necessity to highlight products. While this may allow visitors to view the products better, each image contributes to the website’s loading time.
The Shopify platform has no limitations on uploading pictures. Moreover, it offers the following formats for uploading the images:
JPG or JPEG
Progressive JPEG
PNG
GIF
The result of using a large number of images on the page can be a very heavy page weight that takes users longer to download than a less image-intensive page. As well, unoptimized images can make your site’s page even heavier.
Resizing or compressing large image assets can be one of the best ways to speed up a Shopify site. The smaller file size will allow browsers to load your website content faster.
Pro Tip 1: Use the recommended image sizes. Better quality demands bigger dimensions and image sizes. In order not to lose the page load speed, it is better to upload images of the exact dimensions required for the page. For example, if the home page banner dimensions need to be 1500×500 pixels, you need to resize the image to the required dimensions.
Pro Tip 2: Multiple image optimization Shopify platform recommends using 2048×2048 pixels so that image quality is not distorted when someone zooms in. But if the user uploads multiple images of that resolution, you may find that your store becomes much slower. In that case, 800 x 800 images are recommended.
Image Compression Tools
There are many plugins available that can help you compress image files without decreasing quality.
While performing image compression, you have to keep in mind the quality of the image.
Once all your images are optimized, the loading time of the page will reduce drastically.
3.2. Replace GIFs with Static Images
GIFs can be seen as a valuable asset for customers’ experiences since they provide a more interactive experience for users.
However, be aware that these files are particularly large; a GIF image possesses multiple frames.These files significantly add to page weight; therefore, website experts highly recommend switching them to static images where possible.
3.3. Apply Lazy Loading
Lazy-loading works on the principle of demand and supply. The browser only loads the content that the visitor will first see, i.e., above-the-fold content. The content below the fold will not be displayed until the visitor scrolls down.
Images will not load at once and will not be displayed until the visitor scrolls down. Therefore, the loading of the specific fonts starts only when they are needed.
Since many Shopify sites use lots of images, looking into lazy loading makes sense in a large number of instances. This can speed up your Shopify website as all of your site’s images won’t load at once, only as a user scrolls down the page.
If you’re interested in implementing lazy loading, Shopify has helpful documentation around this here.
Another solution to improve Shopify site speed that merchants need to take into account is video. Deferred Video Loading is a performance technique that allows your site to load faster by deferring the loading of video resources until they are needed.
To implement this tool, you should hire an experienced Shopify developer who can assist professionally with Shopify page speed optimization.
4. Optimize HTML, JS, CSS, Font Rendering, and Third-party Scripts
The idea here is to ensure your code is as lightweight as it can be. Some experts recommend your JavaScript file size should be less than 16kb, but that’s difficult to achieve. It also involves removing unused and unnecessary code, deleting code comments, fixing formatting, and using shorter function names.
4.1. Minify resources: HTML, CSS, and JavaScript
During the loading process, every website loads multiple files with CSS, HTML, and JavaScript. Most of them include extra spaces, comments, and crunch variable names. Naturally, this leads to extra loading time. Compacting the HTML code together with inlining JavaScript and CSS can save data and optimize your site’s speed.
If you locate the JS and CSS files (with extensions ending in .scss.liquid or .sccs) in your Assets folder, you can edit the code. But it’s better to use an app and get it done in seconds.
If you want to use a specific app just for JS, CSS, and Liquid minification, opt for:
4.2. Eliminate render-blocking JavaScript and CSS resources
When visitors land on your site, their browser will start to read your code from the top down. It encounters JavaScript and CSS files and pauses the loading process until the file is processed. These resources are also called render-blocking. There is a way to change the load priority by making certain CSS and JavaScript resources wait to load until the visible part of your page has already loaded.
4.3. Remove Unused Third-party Scripts and Residual Codes from Old Apps
It cannot be denied that apps are handy, especially if you are not tech-savvy and have no prior experience with coding.
To add more functionality to the Shopify website and improve the user experience, additional Shopify apps are widely used.
But third-party resources [have a lot of JS and CSS files that run in the background] may negatively affect your website performance by adding load to your website. Even if you are not using these apps, they still leave a lot of residual code.
So, that is why you should go through your store and check all of the third-party resources used. Then, there are two simple steps you can follow:
Uninstall any unused apps or plug-ins. Another helpful trick to increase your page speed is to remove the app you believe increases the loading time. Run your website without it and note down how quickly your page loads. Find an alternative for the removed app, install it, and load your page again to check the difference in loading time.
If you are deleting an app, think about removing any legacy code they may leave behind once deleted. Some apps assist you in this procedure by enclosing their code in {% comment %} tags that include the app name. Always remember to keep a backup.
Note: Admin-only apps like the Shopify Local Delivery app don’t impact your store’s speed.
Asking these five questions about each resource can help make a decision:
[Of course, the answers to these questions will certainly vary based on your store and business model.]
How often do we use this feature?
Is this a “must-have” or “nice to have”?
Is there a lighter-weight option that we could use?
Is the benefit we get from this worth a performance trade-off?
Are there any metrics we can reference to see how often this feature is used by our users?
After answering these questions, we recommend working with your development team to figure out which elements can be safely removed.
Pro Tip 1: Select new apps carefully, and every time before adding any extra script, you need to analyze its size.
Here are some third-party codes we’ve found Shopify stores utilizing that tend to have larger impacts on performance:
[If you know you’re utilizing one of them, it’s good to be aware that it might be having an impact on the performance of your Shopify store.]
So, use apps that provide multiple functionalities, so you can use fewer of them. If you’re not using a feature, disable it. If you’re not using an app or it isn’t vital, uninstall it and delete the residual code.
4. 5. Integrate AMP into Your Website
Improving website performance on mobile devices has a great impact not only on your search engine rankings and engagement metrics but also on the success of your business. It is important to make sure your website is mobile-friendly and loads with lightning-fast speed.
With AMP (Mobile Accelerated Pages) technology, users can access your website quickly on mobile devices.
AMP was created by Google to speed up the mobile web. It is an open standard framework designed to make your site fast, high-performing, and responsive across all mobile devices.
Shopify AMP Apps
On the Shopify store, there are many apps available to help you generate AMP pages for your site quickly and efficiently to escalate the user experience for mobile users, e.g.,
Or else, you could consider creating the Shopify API to develop these AMP pages.
Recommendations:
AMP cannot be implemented natively in Shopify. Users have to use an app such as Shop Sheriff, FireAMP, or RocketAmp Apps.
Be warned, implementing AMP does require a little work, but it is worth the result: fast-loading pages on mobile devices.
It is better to use a combination of CDN and AMP or other manual performance enhancements. Both tools will be a good combination if you aim to reach international audiences.
6. Minimize Redirects and Broken Links
The performance issue may occur due to too many redirects and broken links.
6.1. Fix Broken links
Users will certainly be put off by this message. Hence, don’t be the brand that irritates users and drives them away.
If your website has too many redirects and broken links, it can stifle website performance, slow page load times, and deteriorate the user experience.
It also affects your SEO, which impedes websites’ ranking and visibility on search engine result pages [When a user lands on a page that isn’t available, he pushes the back button on his browser, which increases the bounce rate of the website.]
Tip 1: Don’t delete products, as it will create broken links and empty pages. Opt for archiving, and if you do delete, make sure you create a 301 redirect.
To avoid making needless HTTP queries, use free online tools to detect broken links on your website and then fix or eliminate them to stop creating unnecessary HTTP requests.
In Shopify, you can use the built-in redirect function called ‘URL redirect‘ to apply 301 redirects to your website.
7. Migrate Tracking Codes To Google Tag Manager
Data collection from your site is necessary to get more insight into your clients’ behavior, but it can lead your website to slow down.
Typically, you add separate tracking codes for Google Analytics, AdWords conversions, goals, remarketing tags, etc., on your end or you send them to the developer; this process will take time and eventually slow down the overall site performance.
With the help of Google Tag Manager, all your tracking tags are stored in one place, and you can easily add and remove tags from your website without ever having to touch the code. Moreover, all of the code in Google Tag Manager loads asynchronously, so the code loaded through Google Tag Manager will not block the rendering of your site’s content.
You can use Google Tag Manager with your Shopify store. Head over to the guide for further information on how to use Google Tag Manager with your Shopify store.
Consider moving tracking pixels such as Google Analytics, Hotjar, Facebook, and other third-party codes to Google Tag Manager.
8. Run Regular Web Page Performance Checks
What’s your website’s speed score?
There are a few ways to analyze your site using different tools; obviously, following the suggestions that are given will often improve your site.
Using Google’s site speed testing tool, Google PageSpeed Insights to analyze your website’s performance might be the best Shopify speed optimization service that helps you find the aspects slowing down your site.
Optimizing for Core Web Vitals significantly improves your page load speed, as it includes some of the same steps as optimizing for a faster Shopify store.
This article has everything you need to know about Google Core Web Vitals and how to improve LCP, FID, and CLS scores.
The PageSpeed Insights tool generates PageSpeed scores and suggestions for your pages to make your website faster. The tool reveals the following critical elements separately for mobile and desktop websites, such as
Minimize CSS
Minify JavaScript
Optimize images
Remove render-blocking CSS and JS from the above-fold web page content
Reduce server response time
Leverage browser caching
Eliminate/avoid landing page redirects
Gzip compression
[Speed optimization done for one of our clients]
Page Speed and Performance Testing Tools
There are different tools that analyze your page speed performance and give recommendations on how to make a website faster.
Regular maintenance of the Shopify store is required and critical to getting the most out of your eCommerce business.
That’s why, make regular performance audits, so you don’t start losing revenue due to slow speeds that snuck up on you.
Use Google’s PageSpeed Insights once a week to see what’s moved from green to yellow or red. Take the recommendations and implement the fix. Or you can hire an agency to run ongoing speed maintenance on your Shopify store.
9. Consider Professional Help
You can speed up your store yourself or with your in-house team. It can get technical, though, requiring some dev skills, but you have apps to help.
Apps can bulk-optimize and compress images, implement redirects, minify CSS and JS, etc. And all you have to do sometimes is click on a single button.
Or you can hire either a freelance specialist off Upwork, Fiverr, Freelancer.com, PeoplePerHour, etc., or contract with one of Shopify’s ecommerce agencies for ongoing maintenance.
Consider the financial gain of the speed improvements and decide if hiring an agency provides a reasonable ROI. Otherwise, handle it in-house or get a freelancer that matches your budget.
Additional Resources
Here is a list of apps that can be used to improve performance on Shopify sites:
Speed Optimization Apps for Shopify
AVADA SEO Suite
Page Speed Optimizer is 100% FREE
Plug in Speed optimizer
Hyperspeed Advanced Speed
Page Speed Optimizer Pro SEO
Page Speed Booster
Fuzz
Page Speed+SEO Image Optimizer
Jumbo Page Speed Optimizer
Rocket Page Speed
Instant Pages Speed Plugin
Instant Page Speeds AI Powered
PageSpeed Monitor
Conclusion
A fast-loading website is essential to welcome massive traffic to the website. In the case of eCommerce stores, speed and page loading time play a pivotal role in the success and growth of businesses.
Remember, users do not want to sit around and wait for a catalog or cart to load. They have multiple other sites to choose from, and they will exercise their right to choose if they encounter a slow website.
Hence, speed optimization should be a key part of your Shopify conversion rate optimization strategy.
If a slow Shopify site is a concern, then the points discussed in this article need to be implemented immediately. Once the optimization is complete, the site needs to be tested to ensure that it is as fast as expected.
We hope that this list of 12 powerful tips highlighted above will help you achieve high-speed performance
* * *
If you are currently using Shopify or other eCommerce platforms and may come across speed issues, our team will help you to analyze and optimize your website performance metrics, contact us! To get a free professional consultation from our team, please contact us!
