Introduction
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.
- 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.
- Cumulative layout shifting (CLS) has become an important factor of user experience and should be considered an integral part when Shopify speed optimization is done.
How to Audit Shopify Site Speed?
- → Google analytics is used 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?
We will share the best practical advice when you first work on your website. When you are doing Shopify speed optimization, then you must take the backup of your theme.
Refer these techniques to optimize your Shopify store..
Pointers of Shopify speed optimization
How to Migrate Tracking Codes To Google Tag Manager :
- Google Tag Manager allows you to easily add or remove tags from your store without touching the code.
- It is a free tracking tool and management platform that allows the user to add marketing tags, or snippets of code, to your website to track and collect marketing data.
- It is a very useful tool, especially when used with Google Analytics.
There are 2 ways of implementing Google Tag Manager in shopify stores.
Option 1. Implement Google Tag Manager via shopify Google Analytics Settings.
Option 2. Implement Google Tag Manager in Theme Files.
How to Improve Image Payload :
- Use PNG or advanced image format, so that shopify converts png to webP format.
- WebP is a new format that is supported by browsers which requires less space for media storage.
- Deliver responsive images : using picture tag.
- Use Apps for image optimization.
- Remove hidden images.
- Use Lazy loading Method
- Redesign the page if necessary
- Reduce third party images
- Use CSS instead of images.
- Use SVG
Replace GIFs With Static Images :
- 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 :
- Popup images
- Image gallery
- Faceted search
- 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.
- → Prestige Theme
- → Flex
- → Turbo
- → Shoptimized
- → Boostertheme
- → Shella
- → Fastor
- → Debutify
Choose The Right Font :
- The experience of your customers will be quick and easy. That’s why the potential customers will not face any trouble navigation your store.
- There is no doubt that readability is the most important factor. It doesn’t matter if you’re looking at the font for a header, a button, or the body of a blog post.
- If a customer is not able to read the text on the website, they will not want to buy the product or use the service.
- I want to suggest limiting the fonts to one. Use a standard web font.
- Shopify’s font library contains a collection of fonts such as system, Google fonts, and licensed fonts from Monotype. You can use all fonts freely available to use on all Shopify online shops.
Advance Technique to Improve Optimization.
Optimize Cumulative Layout Shifting :
- Cumulative Layout Shift measures the movement of visible elements within the viewport.
- To solve the CLS issue, you have to arrange the layout. Avoid large layout shifts.
- The Image element should have explicit width and height. Also for video elements so that the correct spacing is used for images/video.
For example :
<
img src="
puppy.
jpg" width="640"
height="360"
alt="Puppy with balloons"
/>
- Webfonts that are Invisible Should be Prevented.
- You should avoid adding content above existing content, except in response to a user interaction.
For More details you can check this link :
Read this Blog and Find- Cumulative Layout Shifting
Optimize Total Blocking Time :
- Any improvements to JavaScript execution ( generally, optimizations that improve TTI ) will likely reduce your TBT.
- You can use the async & defer method. Remove unwanted javascript code or unused app JS code.
- Replace the large javascript libraries with smaller alternatives.
- Reducing JavaScript payloads with code splitting, removing unused app code, or efficiently loading third-party JavaScript should improve your TBT score.
<
!-- Defer Attribute --
>
<
head
>
<
script src="
Magento_Theme::
js/lazyload
.js"
defer/
>
<
/head
>
<
!-- Async Attribute --
>
<
head
>
<
script src="
Magento_Theme::
js/lazyload
.js"
async/
>
<
/head
>
- Reduce the impact of third-party code & Reduce JavaScript execution time.
- Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this.
Optimize Largest Contentful Paint :
To Improve the Largest Contentful Paint work on these following points :
- Deliver your images in lighter formats.
- Eliminate render-blocking resources
- Optimize web Fonts.
Optimize First Contentful Paint :
To Improve the FCP work on these following points :
- Reduce your DOM size.
- Serve images in next-gen formats.
- Avoid lazy load images above the fold.
- Host your fonts locally.
- Avoid multiple page redirects.
- Don’t use bulky elements above the fold.
- Ensure text remains visible during web fonts load.
- Optimize store images.
Remove, Replace or Move Code on a High Priority Basis :
- Remove commented additional HTML.
- Eliminate render-blocking resources.
- Unused CSS
- CSS above fold to go to critical CSS.
- Unused JS from previous uninstalled apps.
- Check with app providers for CSS, JS and other payloads due to their apps.
- Make sure that JS are not across all pages if they are needed for some specific page then add js condition wise.
- Shopify Themes and page builders can result in lot many code lines so make sure that your JS is less than 16 KB( recommended but difficult to achieve).
- Replaces 3rd party JS libraries like Jquery and others with Javascript code or a lightweight library. Core Javascript code is recommended.
- Go for PWA
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 a few pages as developers and apps on times results in additional payloads which will impact score.
- Keep a log of modules added removed and the purpose of the module used.
Simplify Your Homepage Design
- Use design to improve user experience.
- Add more valuable & important content.
- Add testimonials, reviews, and logos.
- Make your store mobile responsive.
- Include trust indicators on the homepage.
- Homepage content should be strategically decided.
- Add ‘Call to action banner’ ‘New arrivals’, ‘Top selling products, Most popular collection, announcement bar.
Minify Webpage
- 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.
- Use inline JavaScript code for smaller snippets.
- Load less priority JavaScript on page load or page scroll.
- Convert images to Base64 code.
- Limit the number of social buttons.
For more information please visit
https://www.oscprofessionals.com/blog/how-to-make-fewer-http-requests-to-speed-up-your-site/
JavaScript and CSS Performance Optimization :
- Some apps will come with CSS and JS.
- As an expert you need to identify how some of the CSS or JS of an app can be removed.
- Always beware of excessive liquid loops.
List of Opportunities or Audit Tool :
List down all opportunities and link them to a specific blog as for those opportunities.
Conclusion :
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
Basic Optimization
Plan
$110
(One time fee)
$249 (USD)
Desktop Performance Score 80+
Improved Mobile Performance Score
Upto 3 secs load time
Advanced Core
Web Vitals
$349
(One time fee)
$449 (USD)
Basic Optimization Plan +
Pass core web Vitals*
Upto 2 secs load time
*May require design and functionality changes
#Blog Pages are not part of Optimization Scope
Contact Form
- 1. Overview
- 2. How to audit Shopify store speed?
- 3. How to Optimize Shopify Store Speed?
- 4. Pointers of Shopify speed optimization
- How to Migration of Tracking Codes To Google Tag Manager
- Improve Image Payload
- Replace GIFs With Static Images
- Decrease Thumbnail Image Size
- Reduce Apps impact on performance
- Choose a lightweight Shopify Theme
- Choose the right font.
- Advance technique to improve Optimization.
- Remove, Replace or move code on a high priority basis
- Health check your Shopify Store weekly and keep a record
- Simplify your homepage design
- Minify webpage
- Remove unnecessary HTTP requests
- JavaScript and CSS performance optimization
- List of opportunities or Audit tool
- 5. Final Thoughts

I find this blog very relevant and it is a very informative blog about business branding services.