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.
The most common mistakes we can avoid when we do optimization
Avoid using high scaled images.
Avoid Jpeg , Jpg format or low quality images.
Avoid layout shift on the web page.
Avoid too lengthy content on your home page.
Avoid too many sliders on home page & Product page.
Are you excited to achieve your shopify store score on Google Speed Insight above 90 and load time less than 2.5 seconds.
GIFs are a valuable asset for customers’ experience.
File types affect the size of your images. According to Shopify, the best image file type is PNG (30 kb – 100 kb), followed by JPEG (approximately 30 kb), and GIF (approximately 35 kb), so replace the GIFs with static images.
It looks like an excellent job of improving your business, but Gifs can take a large 10 MB or more.
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.
Reduce Apps Impact On Performance :
When you install any app, then it may have a significant performance impact on the stores.
Use Shopify API methods instead of using Apps.
Lots of shopify apps may load at the same time, it may affect the loading time. So find the apps which are lighter & usable for your store.
When you Uninstall any non-essential apps then there should be the unused app code in your theme files, so you should find that & remove it from the shopify store.
Apps should be removed properly. It should be a great start.
Few examples where apps can be replace by code are :
Product meta data
Choose a Lightweight Shopify Theme
It’s a good decision to start with shopify and when you select the shopify theme, then you should be aware of their ratings , services & features before the purchase.
Check their reviews. & live sites for scores where the Shopify theme has been used.
Theme should be super fast, well Optimized & light weight, instead of the one that is cluttered with fancy elements.
Their main goal is to help visitors navigate around your store and perform the action they came to do.
There are many themes available in shopify that are well optimized.
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 images are downloaded, So instead of loading all of the images at one time, It can be loaded when scroll on viewport. You can resolve this issue by using lazy loading.
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.
Remove Unnecessary HTTP Requests :
If we use heavy JS, CSS, and images, then it will increase the HTTP requests on your shopify store.
When a customer visits your store, the browser performs several requests for loading each file.
Combine & inline your CSS scripts.
We do apply all above stated points and all the above defined steps necessary for the optimization process, in our day to day Shopify Speed optimization services and this blog is created from our practical experience.
Shopify themes should be updated and worked on with speed in mind most of the developers are not taking this perspective when doing theme work.
If above stated points are taken care of then your site speed scores will be much higher and Web Vitals will probably be all in green.
Best luck for your site speed and conversion.
Choose your Shopify Optimization Plan
Choose your Shopify Optimization Plan
Prices (in USD)
Pass the Google Core Web Vitals – Real User Experience (Product Page)***
*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 can guarantee achievable score by alternate App usage or some custom shopify coding.
***May require design and functionality change.
If you are looking for expert Shopify Speed optimization and other services : you can always reach out to us!