Shopify Speed Optimization Guide [Updated 2022]

Contact Us

Quickread

Do you want to achieve your shopify site score on GSI above 90 and load time less than 2.5 seconds.
  • Pass all web Vitals
  • Higher Conversion rates
  • Higher SEO ranking
  • Better user experience

Any online store’s success is largely determined by user experience and, speed is a very crucial factor for user experience.

Present span of concentration of a user is down from 12 seconds to 8 seconds which indirectly means if the average speed of a Shopify website page is higher than 3 seconds then conversion will be down.

Check our Shopify Speed Optimization Packages

Contact Us

How to audit Shopify site speed?

Google analytics: for average server response time and average page speed.
Google search console for web vitals
It’s not just checking a page on these tools. It’s about overall user experience across pages and during peak load that should be thought of.

How to Optimize Shopify Site Speed?

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

1. Improve Image Payload

1.1 Use WebP or advanced image format to reduce image weight by 30 to 40 percent.
1.4 Remove images not displayed
1.6 Redesign page
1.8 Use CSS where possible
1.9 Use SVG
1.10 Deliver from CDN :Shopify does that

2. Reduce Apps impact on performance

2.3 Use tags and code instead of third party apps.
2.4 Weigh the benefits of apps vs its impact on score and elimination.
2.5 Use Google Tag Manager for all tracking.
2.6 : Compare apps for payloads: some apps have a lot more features but a Shopify site might be using only some features. Due to additional features there can be additional JS or CSS payload so this should be audited and taken care of.
2.7 Shopify Store advanced features : with releases there are some additional advanced features which can help replace apps.
2.8 Keep your number of apps less than 10 if its going up evaluate each app and its impact on performance
Few examples where apps can be replace by code are :
  • Popup images
  • Image gallery
  • Faceted search
  • product meta data
2.9 Make sure that apps are hosted on a nearby location and are fast to respond.
2.10 Shopify Themes might come with additional apps so make sure to check this.
2.11 Check how good the module provider service.
You Might Be Interested In:
Shopify Speed Optimization Services

3. Choose a lightweight Shopify Theme

While all themes approved by shopify are expected to deliver a good score but themes if not approved by shopify but installed can be a reason for performance issues.
3.1 Check Shopify theme pages for JS payload.
3.2 Do they have critical CSS implemented?
3.3 Are there unwanted HTML CSS code that results in more DOM elements ?
3.4 How is the above fold implemented?
3.5 Do then have product responsive gallery
3.6 Are they upgrading the theme regularly or not?
3.7 Do they have a road map or ready theme for shopify 2 ?
3.8 Check their reviews
3.9 Check Shopify theme demo for scores.
3.10 Check live sites for scores where the Shopify theme has been used.
3.11  Some of the recommended Shopify themes are: Prestige
3.12 Check how much of XHR( Ajax ) is used

4. Health check your Shopify Store weekly and keep a record

As per our section  “tools” to be used for Audit
  • Google Analytics : If implemented it will keep history of average response time and average page load time
  • Google Search Console keeps data of 3 months for web vitals
  • Keep a good handy document with monthly/weekly updates of the score preferable via some tool or services.
  • Keep a note of JS payload, image payload, CSS and HTML stats for few pages as developers and apps on times results in additional payloads which will impact score.
  • Keep log of modules added removed and purpose of the module used.

5. Remove, Replace or move code on a high priority basis

5.1 Commented additional HTML
5.2 Extra DOM elements
5.3 Unused CSS
5.5 Unused JS from previous uninstalled apps
5.6 Communicate with app providers for CSS, JS and other payloads due to their apps
5.7 Use Google tag manager for tracking scripts. Google Tag Manager allows to easily add and remove tags from shopify store without touching the code.
5.8 Make sure that JS are not across all pages if they are needed for some specific page
5.9 Shopify Themes and page builders can result in lot many code lines so make sure that your JS is less then 16 KB( recommended but difficult to achieve)
5.10 Replaces 3rd party JS libraries like Jquery and other with Javascript code or a lightweight library. Core Javascript code is recommended.
5.11 Go for PWA

6. List of opportunities or Audit tool topics

List down all opportunities and link them to a specific blog as for those opportunities.

7.Minify webpage

7.3 Minify HTML
7.4 Compress ( done by Shopify we do not have control if the content is coming from Shopify site )
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.

Contact Form

    • Yes, I consent to this site to collect my data.

    Choose your Shopify Optimization Plan

    Choose your Shopify Optimization Plan Basic Platinum
    Prices (in USD) $120 $500
    Will Upgrade Your Theme
    Google PSI Homepage Score * (For Desktop) 60-70 Above 85
    Google PSI Product Page Score ** (For Desktop) 65-75 Above 90
    Google PSI Homepage Score * (For Mobile) 40-50 Above 65
    Google PSI Product Page Score ** (For Mobile) 40-50 Above 70
    Page Load Time(Pingdom) * < 2 sec < 2 sec
    Pass the Google Core Web Vitals Improvement
    Lazy loading
    Image optimization
    Remove JS code left out after uninstall app
    Reduce render blockers
    Remove unused apps
    Analyse app and optimize/suggest for high load apps
    Reduce JS payload
    Reports
    Guaranteed Result
    Free SEO Audit
    6 month support
    Optimize My Site Optimize My Site
    * Few Shopify apps are known to reduce score and increase load time due to higher JS payload. In case during our optimization we find such apps we will inform about the app and communicate with app providers and get it resolved or recommend an alternative app as a solution.
    **Higher JS payload due to apps result in lower google page speed insights( PSI ) score specially for mobile. Hence while we guarantee score improvement we cannot guarantee achievable score unless our suggestions are accepted.
    **In the Platinum package we look into much higher details to achieve extraordinary results.

    8. Shopify store 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 code then it will take more time to download 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.
    Shopify System if used properly will help you achieve this.

    9. Reduce JavaScript execution time

    JavaScript execution is the most critical aspect of Shopify Store site speed.
    JavaScript is needed for certain features that can’t be achieved by CSS or HTML.
    But some features can be implemented by CSS or JS in that case we recommend using CSS which in turn will mean reduced JS execution time.
    Using the chrome performance tool we shall identify long tasks and see how we can eliminate those tasks ( proper coding, replacing library, or change in design).
    Also, we shall examine unwanted JS code and eliminate those. This all needs expert skills.

    10. 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.
    Shopify System also put a constraint on max number of products( 50 ) that can be on one page.

    11. 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.

    12. Weigh the Benefits of Installing Another App

    While installing any app on your Shopify site, read reviews of apps, check whether any complaints related to that app like it’s very slow, etc and then use it.
    Ask your developer to check the JS and CSS payload its coming up with.
    If any features you can use by custom coding then don’t go with a third-party app, to avoid unnecessary scripts, styles.
    example : Popups, Layered Navigation, or some tag-based collection display.
    We have few ready solutions for such scenarios.

    13. Compress and reduce images in size and number

    Between 50 to 70% overall weight of your web pages is made up of images. Images are important for conversion and they should look good and of high quality.
    Still there is scope to understand extra payload due to improper size, format or image optimization done.
    Lossless compression 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.
    One should look at the number of images on a page and do a redesign if speed targets are not being achieved.

    14. JavaScript and CSS files Optimization

    Apps will come with CSS and JS.
    If its not possible to remove and app but if you feel some of the features are not of use.
    As an expert you need to identify how some of the CSS or JS of an app can be removed.
    Applying some condition on liquid files we can eliminate some parts getting loaded to specific pages.

    Conclusion :

    We do apply all the above optimization concepts in our day to day Shopify Speed optimization services and this blog is created from our practical experience.
    Shopify themes are built with speed in mind
    If above stated points are taken care of your site speed scores will be much higher and Web Vitals will be all in green
    Best luck for your site speed and conversion
    Looking for expert Shopify Speed optimization and other services : Get in Touch