How can I optimize my Shopify Store speed for better performance?

Mr_RaviRaj
Shopify Partner
505 57 108

12 Tips & Tricks to Boost Shopify Store Speed.


We have all heard the story of “the rabbit and the turtle". Or heard from our grand parents that "slow and steady wins the race”.
However, when it comes to search engine optimization, fast store speed and Shopify site performance are key factors to succeed in the e-commerce world.

You have created an online store, but you are struggling to get sales. Don’t worry you are at the right place. You will get the complete solution for your business to get more effective sales.

That is the reality – Most of the users open the website to buy the products from their smartphone and they expect sites to load fast as soon as they click on a link or add to cart button. Slow loading web pages can lead to a high bounce rate, low user engagement, less traffic, and hence a negative impact on your sales.

“40% of people abandon a website that takes more than 3 seconds to load” – Neil Patel, Internet Marketing expert.”


Your website's performance directly impacts on conversion rate. If you’re looking to improve your Shopify store’s speed, performance matters in Google’s search algorithm.

A slow-loading website can reduce your conversions and profit ratio. In this case, your efforts to launch a Shopify store are totally wasted.

In today’s article, we will discuss some easy tips and tricks to optimize your Shopify Store speed.

Here are some ways to make your website speedy and meet the expectations of impatient online users.



What Is Speed Optimization?
Speed optimization is a technique which helps to load your website pages fastly on click. To reduce the customers' irritation we have to use it.

Why is Website Speed Optimization Important? 

Website speed optimization can lead to a boost in your Shopify Store sales , conversions and SEO because faster sites are more appealing to both users and search engines. Most users demand fast-loading websites. Website users expect a webpage to load fast & smooth.

 

Best Examples in Shopify Plus:

Rhone Apparel started using SFR in April 2020 and saw dramatic improvements over the previous month:

  • 15% increase in revenue
  • 17% increase in conversion rate
  • 12% decrease in average page load
  • 37.95% decrease in average server response time
  • 3% decrease in bounce rate

Almost 74% of users will not return to a website that takes longer than 4 or more seconds to load. It means you could lose thousands of dollars.

Warning: These steps need technical knowledge of HTML, CSS, and Javascript, Liquid etc.

Before starting optimizing the Shopify store make sure to download a Shopify theme backup

Admin > Themes > Actions > Duplicate Theme file

And Download theme , your backup theme will send it to your mail linked with your shopify store.


12 Tips to Boost your Shopify Store Speed:

If you are running a Shopify Store, the following tips can significantly help you to increase your Store’s loading speed.

1.Performance Analysis:

  • Google PageSpeed Insight

    PageSpeed Insights tool is developed by Google. It helps to generate PageSpeed score and PageSpeed suggestions for your pages to make your website faster. The tool reveals the important elements for desktop and mobile separately, like:
  • Optimize images
  • Minify CSS
  • Minify JavaScript
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Leverage browser caching and Reduce server response time
  • Avoid landing page redirects
  • Gzip compression

  • Pingdom

    Pingdom is a Website performance Checker and availability monitoring tool for your sites.With this comprehensive monitoring tool, you can ensure that your visitors have the best experience.

Pindom is developed by Solarwinds. Pingdom will test the speed of your website FREE of Cost and provide the best recommendation to make your website faster.

  • GTmetrix 


GTmetrix was developed by Carbon60 as a tool for customers to easily test the performance of their webpages.
GTmetrix is a Website performance Checker. It is a free tool, with this tool we get detailed reports about site performance. It creates scores for the pages and also provides recommendations to fix them.



2.Take Fast & Responsive Shopify Theme:
Make your store performance better with the fully responsive website:
1. Flex 

2.Dawn theme

3.Turbo

4.Broadcast

5. Empire

6. Impluse

Note:

If you are looking free theme then the Dawn theme is the best option for your store.

It doesn't mean that high-performing themes cannot be made slower or that they are the best options for your site. If speed optimization is one of your key concerns, these themes might be worth considering.

 

3.Reduce the Number of Apps Installed:
The largest number of apps downloaded into your Shopify store and added some extra JavaScript/CSS files makes your Store Speed low or it takes more time to load. The main problem is that, if you are not using an app, but its code is running in background and makes your Site Speed Slow.

So, that is why you should go to your store and check any apps that you are not using and remove them instanly. There could be some apps which you just tried out and forget to delete.

 

4.Compress the Images
Shopify allows you to add the following image formats:
         

 

  • PNG
  • GIF
  • JPEG or JPG

    Image compression is necessary for faster loading web pages. Make sure your images are an acceptable size when you are optimizing them, and don't place too many images on one page.
    If you perform image compression, you need to keep the image's quality in mind.

    You can use tinypng.com or tinyjpg.com for free to reduce the size of new images. You can see in the below image; I was able to save 80% and 256KB.

    ( Note: while using online tools it may affect your Image Quality. Compress it on your Risk.)

    Tools:

 

 

  • Tinypng
  • Compressor.io
  • Adobe 

 

5.Reduce Large Images Size
Use appropriate images size into your Shopify Store,if you are using unequal Size of images it might affect your Sales. So that be careful about that I have mention Some Specific Images sizes According to Shopify you can follow this.

All official Shopify image sizes

  • Shopify product image size: 2048 x 2048 px or 800 x 800px
  • Shopify collection image size: 2048 x 2048 px
  • Shopify slideshow image size: 1200 to 2000px width, 400 to 600px height
  • Shopify header image size: Height no more than 120 px
  • Shopify banner size: 1200 x 400 to 600 pixels
  • Shopify logo size: 450 x 250px

 

6.Replace GIF with Static Image

Many of Store owner uses the Gif files but they still can’t know they are losing their sales by this, So mostly you can avoid the uses of GIF file into your website.
Most of observation, GIFs can be extremely useful as they provide users with a more interactive experience. Once again, this can enhance the UX and branding of your site.

The GIF format is extremely large. Just one GIF can significantly increase the size of a page:

So that you have to use static images instead of GIF file.

 

7.Minify the CSS and JS Files
Minify your CSS and JS files with online Minifier tools like:

 

 

 

But you have to Minify line by line in Shopify because in css some lines of liquid may be used. Its little bit tricky process.

8.Reduce the HTTP Request:

Use HTTP Requests Checker tool by GiftOfSpeed to Check how many HTTPS requests your page has. You can reduce HTTP requests by doing the following:

  • Combine & inline your CSS scripts.
  • Combine all JavaScript’s.
  • Inline smaller JavaScript’s
  • Minimize the use of design & functional images.
  • CSS image sprites.
  • Limit the number of social buttons
  • Convert images to Base64 code.

Checkout this guide on How to make fewer HTTP requests.

9.Minimize Redirects and Broken Links
Too many redirects and broken links may cause the performance issue. What is the easiest way to minimize the number of redirects and broken links? Eliminate unnecessary redirects and fix broken links.

For redirect links

Performance and speed issues are caused by unnecessary redirects, and this slows down a website's load time. Shopify provides a built-in redirect function called "URL redirect" that allows you to perform 301 redirects.

 

 

Mr_RaviRaj_0-1654754199870.png

 

 

For Broken links

It is possible for broken links to increase your HTTP requests and affect the user experience on your site. You can use tools like Broken Link Checker and Xenu to find and fix broken links from your website.

10.Use a Hero Layout instead of using Sliders
Reduce the use of sliders to improve your Site Speed because it takes more time to load instead of a hero image.

11.Reduce video content
Always use the embedded Vimeo,Youtube etc videos to increase and maintain your Store Speed.

 

12.Use Speed Booster App
There are the following Speed booster free and paid apps:

 

Thanks for reading.

 

banned
Replies 3 (3)

speedboostr
Trailblazer
136 20 26

Some good general recommendations here.

 

Couple notes / corrections to add (we're a professional Shopify optimization agency):

 

#1 Be aware that Google PageSpeed Insights is not geared well for ecommerce sites with 3rd party apps. We've seen clients obsess over this to the point of removing apps to get a higher score, not knowing that the score is not equal to speed (you can actually make your site faster and the score drops (case study here)). It can also lead to doing expensive projects that can clear warnings but don't give any actual speed gain (like separating CSS files from 1 master theme.css file into a different file for each template, just to satisfy the "unused CSS" warning. This will save a tiny amount of weight but with no real benefit).

 

- Shopify Analyzer is a free analysis tool we built for the community (based on 1500+ Shopify sites we've optimized, it removes irrelevant recommendations and focuses on Shopify sites). We recommend using that first, then doing app optimization (see App Optimization Guide for Shopify), since a lot of app optimization possibilities won't be recognized on tools, then you can dive into generic tools if you want to get additional ideas.

 

#3 When deleting apps, if that app inserted code into your theme you'll want to make sure you delete that too. On many sites we work on, we find old app code running (usually in theme.liquid). We recommend checking theme.liquid anyway to know what's loading on the site and see if there is any old code there.

 

#5 For large images, you want to make sure you're using responsive design and loading the correct image size per the device. For example, 2048px on collection pages is good for large monitors, but if the device accessing that page is only 400px, you're loading a huge file unnecessarily and slowing your speed for those users. Use the HTML attribute srcset to control image sizing per device.

 

#8 Combining JS and CSS files can actually make your site slower (case study here), and for themed sites it makes it a pain to work on, costing you more in future development work.

- We recommend not doing that, that's an outdated tactic used before multi threading was common.

 

#11 The best way to mitigate video's performance lag is to defer the load until the user is ready to play them. Then those heavy files don't contribute to initial page load. We have a guide to do that: How to Make Your Site Faster with Deferred Video Loading

 

#12 Apps can help a little but for full optimization you need a human to analyze code and app usage and implement a variety of techniques. For common optimization techniques you can see https://speedboostr.com/shopify-optimization.

 

 

Creator of Theme Scientist (A/B testing app and theme scheduler). Creator of Shopify Analyzer (1st performance analysis tool for Shopify, free for the community). Founder of Speed Boostr (Shopify optimization experts + app developers). More apps from our team: Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).

Stacy_Zhuk
Shopify Partner
445 21 63

Hi @Mr_RaviRaj,

 

Thank you for sharing these useful tips!
I would like to share my experience and recommend you take a look at AMP. You can enhance the mobile performance with AMP.

AMP allows you to speed up a Shopify website several times. The result is achieved due to some restrictions and layout rules for AMP pages. The main ones are:

- all AMP pages are cached on CDN servers around the world for quick access to them
- restrictions on the size of uploaded files, which leads to a decrease in the amount of transferred data
- limited use of JS, which reduces the number of server requests

 

Another important point about the AMP is that it’s just not always a viable option. This technology is not an option for online shops mainly using complex Javascript apps that change the way product pages run. Such pages are not compatible with AMP. Online stores operating in the print-on-demand niche should abandon this idea too, because usually to checkout in such stores, users have to upload a photo to personalize their chosen product. On AMP this feature is simply not available.
The story is the same with wholesale stores that require users to login before viewing the product catalogues. Such functionality is usually achieved in Shopify with the help of heavily customized third-party apps.

 

Each online store is unique and the decision on whether you should implement AMP on your store needs to be made based on a deep analysis of that particular store.

 

Here https://whidegroup.com/blog/shopify-performance-optimization/ you can get full information about how to improve a Shopify store speed.

Co-founder at Whidegroup, e-commerce development company from Ukraine
- 10+ years of experience with SMBs
- Deep expertise in custom development & optimization
E-mail: anastasia@whidegroup.com

AndBrouill
Tourist
11 0 1

I have a question- let's say I upload some images to use as hero's on the home page for a few weeks, then I replace them with new ones for a new campaign. The older images that are sitting in the content files on Shopify are not linked to anything in my store anymore, but are they still taking up space or reducing my store's page loading times by still sitting in Shopify's back end files?