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.
Also cumulative layout shift CLS has become an important factor of user experience and should be considered an integral part when Shopify speed optimization is done.
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 :
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.
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.
Choose your Shopify Optimization Plan
Choose your Shopify Optimization Plan
Prices (in USD)
Will Upgrade Your Theme
Google PSI Homepage Score * (For Desktop)
Google PSI Product Page Score ** (For Desktop)
Google PSI Homepage Score * (For Mobile)
Google PSI Product Page Score ** (For Mobile)
Page Load Time(Pingdom) *
< 2 sec
< 2 sec
Pass the Google Core Web Vitals
Remove JS code left out after uninstall app
Reduce render blockers
Remove unused apps
Analyse app and optimize/suggest for high load apps
* 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.
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.
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.
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