Shopify speed optimization guide

March 16, 2021 | 05 min read

Shopify speed optimization guide

  • 1.Quickread
  • 2.How to audit Shopify site speed?
  • 3.How to Optimize Shopify Site Speed?
    • Optimize Images (Lightweight Images to load faster in a web browser)
    • Delete unused apps or Do not install apps directly on the live store
    • Choose a lightweight Shopify Theme
    • Always use tools every alternate week to check your website score
    • Remove unnecessary code on a high priority basis
    • Compressed images or Defer offscreen images
    • Web Pages need to be Minified
    • Reduce JavaScript execution time
    • Beware of excessive liquid loops
    • Decrease thumbnail image size
    • Weigh the benefits of installing another app
    • Compress and reduce images in size and number
    • JavaScript and CSS files Optimization
  • 4.Conclusion

Quickread

Do you want to achieve your site score is 90+ and load time less than 4 sec.

Any online store’s success is largely determined by its speed.

Site speed is one of the most important factors for Shopify store owners. The capacity of your website to convert users is directly influenced by its speed. The faster your site loads, the more visitors you’ll get. Furthermore, if you want to increase the SEO of your Shopify store, speed is a minor ranking element in Google’s algorithm.
As a result, ensuring that your Shopify site runs smoothly is critical to your store’s success. Accelerating your Shopify site can not only improve your users’ experience, but it can also improve your business profits.
Follow our article guidelines to speed up a Shopify site.

How to audit Shopify site speed?

Audit your site performance in below given tools. You just need to enter your website URL and proceed. These tools will give you the detailed report where your site needs improvement, some speed metrics will display in the report like present site performance score, load time, number of requests, page size. You can also see the opportunity report to improve your site speed.

Top Reads

Contact Us

How to Optimize Shopify Site Speed?

You can use the below given techniques to optimize your Shopify site.

1. Optimize Images (Lightweight Images to load faster in a web browser)

We recommend using optimized images, with optimized images you can save a huge amount of data which leads to a better speed of your store.
Generally store owners use high-resolution images to maintain good quality, but if we look into this from the perspective of optimization then this will not be allowed & unnecessary it will consume high resources from the server to load.
You can follow various steps to reduce image size.
By optimizing images you can save the image size and reduce load time.

2. Delete unused apps or Do not install apps directly on the live store

Number of apps are available in Shopify to fulfill any custom feature requirement. It doesn’t mean you should add any app to the websites. Although apps fulfills your requirement, these apps run the scripts on web pages which reduce website speed.
Our recommendation, if any app is not in use then uninstall that app immediately because the JS/CSS are running into the background and slow down your site performance.
Don’t install any app directly on the live site. First install it on the development site, once you are sure to go with that then install that app on the live site.

3. Choose a lightweight Shopify Theme

Your Shopify store’s speed is mostly determined by the theme. Before choosing theme you should make sure certain things like,
– Check the theme’s score using Google PageSpeed.
– If the theme is slow, look for another option or consult Google PageSpeed’s recommendations.
A lighter theme, on the other hand, will ensure that your site performs well in the future.

4. Always use tools every alternate week to check your website score

Regularly audit your site speed by using the below tools to know the present scores & performance of your site. If the site’s score is getting down then you can focus on site speed improvement. Use the given tools to audit your site scores.

5. Remove unnecessary code on a high priority basis

Audit your site code and remove unnecessary JS/CSS code from your site. Sometimes store owners use heavy themes for their store instead they can use lightweight themes. Here we suggest you use the theme as per your site requirement. For example, your site requirement is only for 50 features and you’re using 500 feature themes then unwanted js/CSS will be loaded on-site and it will slow down the site.

6. Compressed images or Defer offscreen images

This opportunity includes all offscreen or hidden pictures on your page, as well as the potential savings in kibibytes (KiB). To reduce Time to Interactive: consider lazy-loading these graphics after all vital resources have finished loading.
When a user opens the webpage, the entire page’s content is downloaded, if the site web page contains more images or content then it will take time to load.
So instead of loading all of the images at one time, images can be loaded when the user accesses a part of the page that requires it.
You can resolve this issue by using lazy loading. By using Lazy loading you can load on-screen images first, and on scrolling of pages, load remaining images so that you can reduce the site load and make it fast.
For Example, if your web page contains 100 or more images then instead of loading all the images at one time we can add images in lazy loading and load only required images on page scrolling.

7. Web Pages need to be Minified

When a user requests your site URL then browsers execute the code one by one. If a website contains more lines of code then it will take more time to read and execute. So we recommend minifying the code and reducing unwanted space, code, etc. so that you can save code execution time and the site loads faster to a user response.
Some online tools are available to minify JavaScript

8. Reduce JavaScript execution time

When your JavaScript takes a long time to execute, it affects the speed of your page in a number of ways:
  • Network Cost
  • Parse and compile cost
  • Execution Cost
  • Memory Cost
So reduce JavaScript execution time by parsing, compiling, and executing JavaScript files.By default, JavaScript executes on the main-thread and when this is happening, the browser cannot execute other tasks.

9. Beware of excessive liquid loops

Looping is used to display Pagination, Swatches, Collection Filtering. One of these situations is for loop iteration. When looking for a given condition, the system must loop (e.g., crawl or search through) all of the products in a collection (e.g. price, or a tag).
In Pagination, instead of keeping more products on a single page you can apply pagination and allow users to click on the next page to see more products. We recommend reviewing theme code and checking liquid for loops not running multiple times.

10. Decrease thumbnail image size

On the Product page, the main image is used for larger file size, if you used the same size image for the thumbnail then the user’s browser to scale it down for the thumbnail takes more time which impacts your page load time. Recommend to use small-size images for thumbnails.

11. Weigh the benefits of installing another app

While installing any other app on your site, read reviews of apps, check whether any complaints related to that app like it’s very slow, etc and then use it. If any features you can use by custom coding then don’t go with a third-party app, to avoid unnecessary scripts, styles.

12. Compress and reduce images in size and number

Between 50 to 70% overall weight of your web pages is made up of images. The more that number becomes, the higher the quality of your images. Lossless compression, on the other hand, allows you to reduce image size without sacrificing quality.
You can start by using TinyJPG or TinyPNG to decrease the size of new images you add.

13. JavaScript and CSS files Optimization

If you don’t want to uninstall the apps, you’ll have to optimise it’s css first. To do so, you must combine all of the stylesheets into a single file.The same principle applies to all JavaScript files.

Conclusion :

Applying above given optimizations steps to improve your Shopify site speed. If there any query to understand this blog or getting any challenges during applying these steps then Contact Us
Mar 16th, 2021|
This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy . By tapping on "I accept" you agree to the use of cookies.