Quick Shopify Speed Optimisation Checklist: 9 Easy Tips to Follow

One of the key considerations for Shopify store owners is site performance. Your website performance directly affects the traffic received on your website and impacts your website’s 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 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!

 
 

Table of Contents

 

Let’s dive in.

 
 
 

Why Does Shopify Page Speed Matter?

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 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 connected to conversions fast 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 parts about Shopify is that your store does come with some built-in features of speed optimization. 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, 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.

 

There are many different factors that 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 best practices that are used by our Shopify development team and what we consider the most powerful ways how to speed up the Shopify website.
 
 

1. Use a 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 peak user load it can handle. This ensures 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 & 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 (CTAs).

 

  • Pro-Tip 1. Don’t use videos or GIFs in the hero section. If you absolutely 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 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 info 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:

 

  1. It adds an extra step for the visitor.
  2. The user might click it accidentally which might result in a frustrating experience.
  3. It can be confused with the actual product page.
  4. And most important, 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.

 

For 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. In case 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 on all Shopify online shops.

 

Be noticed 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.

 

In order to steer clear of downloading new fonts to your customer’s computer, you might want to think about using system fonts (that already existed 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 & 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 to find exactly what they need and to 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 follow:

 

 

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.

 

Shopify platform has no limitation on uploading pictures. Moreover, it offers the following formats to upload 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/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 recommended image sizes. Better quality demands bigger dimensions and image size. 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 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.

 

For new images:

 

For existing images on a Shopify store (Shopify Apps):

 

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’ experience 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, 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 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 better hire an experienced Shopify developer who can assist in a professional way 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 really 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, as well as 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 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, and useful, especially if you are not tech-savvy and have no prior experience with coding.

 

To add more functionality to the Shopify website and improve 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 speed.

 

Asking these five questions about each resource can be helpful to make a decision on it:
[Of course, the answers to these questions will certainly vary based on your store and business model]
 

  1. How often do we actually use this feature?
  2. Is this a “must-have” or “nice to have”?
  3. Is there a lighter-weight option that we could use?
  4. Is the benefit we get from this worth a performance trade-off?
  5. Are there any metrics we can reference to see how often this feature is used by our users?

 

After answering these questions, we then 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 user experience for mobile users, e.g. : 

 

  1. FireAMP
  2. RocketAmp

 

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 absolutely worth the result – fast loading pages on mobile devices.
  • It is better to use a combination of CDN and AMP or other manual performance enhancement. 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.

 

  1. If your website has too many redirects and broken links, it can stifle website performance, slow page load times, and deteriorate the user experience.
  2. 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 them or eliminate them to stop creating unnecessary HTTP requests:

 

 
 

6.2. Avoid unnecessary redirects

 
In Shopify, you can use the built-in redirect function called ‘URL redirect‘ to apply 301 redirects on your website.

 
 
 

7. Migrate Tracking Codes To Google Tag Manager

 

Data collecting 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 own end or you send it 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, thus 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 speed score?

 

Actually, 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.

 

PageSpeed Insights tool generates PageSpeed score 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 in the above-the-fold web page content
  • Reduce server response time
  • Leverage browser caching
  • Eliminate/avoid landing page redirects
  • Gzip compression

 

 

[Speed optimisation 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 obtain 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 totally 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 an agency 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

 

  1. AVADA SEO Suite
  2. Page Speed Optimizer‑100% FREE
  3. Plug in Speed optimizer
  4. Hyperspeed ‑ Advanced Speed
  5. Page Speed Optimizer Pro ‑ SEO
  6. Page Speed Booster
  7. Fuzz
  8. Page Speed+SEO Image Optimizer
  9. Jumbo ‑ Page speed optimizer
  10. Rocket Page Speed
  11. Instant Pages ‑ Speed Plugin
  12. Instant Page Speeds AI Powered
  13. 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 free professional consultation from our team, please contact us!

 

If you’re looking to improve your Shopify store’s site performance or SEO, you can learn more about our Shopify speed optimisation services.

 

Want to learn more?

Let us prove our skills and provide you video review for your ecommerce site. Feel free to schedule meeting with our team.
Cities we operate in