Unleash Your Shopify’s Speed Potential: A Comprehensive Optimization Guide [Update May 2024]

Shopify store performance optimization is crucial for enhancing user experience, boosting conversions, and improving search engine rankings. 

You will learn the following from this guide :

A) Shopfiy Speed Optimization tricks and technique

B) Understanding Core Web Vitals and Google Search Console report related to Core Web Vitals

1. Theme Selection

Choosing a light weight theme is crucial for your store speed and web vitals

Two Options to select a theme:

i) Shopify Themes : Shopify has 8 different themes to select from.

If you are looking for a fast theme then we recommend

• Dawn
• Craft

ii) Commercial or free theme built by other vendors :

Some commercial themes have lot many capabilities to handle different sections and features.

Due to this features there are additional JS and CSS that will get loaded and impact shopify speed.Also there wil be additional condition liquid code that will get executed.

To check a commercial theme you shall check how much JS and CSS it additionally loads.Also check demo for its FCP,LCP and other core web vital points.

2. Reduce the Number of Apps

Due to limitations  of shopify a store will need App’s to display additional features.

Shopify apps add Liquid code, JS and CSS for  functionality to your store, which can impact performance.

Also if an app uses proxy then it will further impact site speed.

Also we have observed that in lots of stores unused apps still exist and they result in additional css and JS.

So due care and thought should be given before an app is added.

We also recommend to audit your website once in 3 months to identify if an uninstalled app had left some JS, CSS in the code.

If you have an unused app, you can find the opportunity “Reduce the impact of third-party code” in the tool “Page Speed Insights”. The opportunity identifies scripts that are used and unused, including scripts for apps.

Recommend that if some features can be achieved by custom liquid coding then apps shall be avoided.

• Remove unused app
• Remove JS,CSS left overs after apps were uninstalled
• Check app does not impact speed and if possible is built for speed.
• Review and Update apps

Read this Blog and Find- How to Remove an app in shopify

3. Image Optimization

I. Apply Best practices for Banner images

II. Make sure Responsive images are delivered

III. Making sure that product images( all product images ) delivered by shopify are webP images

IV. Upload optimized product images to shopify

V. Proper Liquid code implementation to effectively use Shopify image delivery process.

VI. Lazy loading

VII. Images uploaded that were not at all needed.

IX. Refer Uploading images : Shopify Help

Read this Blog and Find- Responsive and Proper sized images

To optimize images for size on your Shopify store, consider the following techniques:

• Compress Images: check size in KB and take a decision : https://cdn.shopify.com/. has some content for this

Compress images using tools or plugins that reduce file size without significant loss of quality.

Check How shopify optimizes and delivers images based on browser support.

There are two ways to compress images –

• Lossless compression
• Lossy compression

Lossless compression can be used to compress images without affecting quality. Compressing each image can be a tedious task. Using applications on the Shopify market or websites like tinypng.com can be useful.

• Implementing Lazy Loading :

Under following conditions Lazy loading shall be applied :

•  Image is below the fold
•  Image is not part of LCP

4. Reducing the HTTP Requests and total payload

A web page has following types of request:

• Html
• JS
• CSS
• Images and Media
• Fonts

Resulting in more then 150 request

As an optimisation approach we shall target for each type and technically handle to reduce each type of request in number and size both.

Some of the techniques are :

• Implement image sprites
• Lazy load images
• Responsive images
• Redesign page to eliminate non productive images
• Review apps for number of request and paypload impact
• Theme and design to be mobile-friendly
• Only install the apps you need
• Any apps not from shopify should have a proper expire header
• Use of GTM for Tracking
• JS and CSS files are used across pages to improve browser cache usage and reduce average payload

Use Tools to identify these issues :

• Google page insight
• GT Metrix

5. Minimizing Redirects and Broken Links

Your Shopify Store will perform poorly if you have redirects and broken links.

Avoid unnecessary redirects as they increase the load time of your store, instead use 301 redirects provided by Shopify.

HTTP requests increase as a result of broken links.

Minimizing redirects and broken links on your Shopify store is crucial for both user experience and SEO:

• Implement 301 Redirects:
• Audit and Fix Broken Links
• Avoid Chains of Redirects
• Regularly Check for Redirect Loops

How to check :

Click on inspect >> Network then check for status.

Check for 4XX code and resolve those.

6. Migrate Tracking, Unleash Speed with Google Tag Manager

Using Google tag manager, you can optimize the speed of your Shopify store. You add lines of code to your theme.liquid file when you install apps or use marketing or e-commerce tools.

Google Tag Manager does is load specific code for specific pages. For example, if you are using a marketing tool that gives you a line of code, you want that code to run for a specific product like colorful mugs.

Benefits of GTM

• Reduced Load Time: Say goodbye to waiting! Your store loads faster, keeping visitors engaged and conversions flowing.
• Improved User Experience: Smooth browsing leads to happy customers, boosting brand loyalty and sales.
• Enhanced Site Management: Easily add, remove, and update tracking codes without touching your theme code directly.
• Centralized Control: Gain a clear overview of all your tracking efforts in one place

7. Liquid Code Implementation

While coding in liquid we shall follow some optimisation guidelines

Use of Ajax for sections that can be delivered later.

Use Liquid and Html instead of JS if content not dependent on user interaction, as recalculate layout will increase execution time.

Avoid loops

Apply filters for product collection rather then filter use liquid code logic

How to build section using section design effectively

8. App selection for speed

check App providers previosu apps and reviews.

Check App providers years of experience

Is app built for shopify

How many JS is getting added

Is app using app functions

Is app using embed blocks

Is app using web assembly or is the output dependent on a third party server

9. Perform a Comprehensive Site Audit using Tools

Tools like :

1. Google page insight
2. GT Metrix
3. Web Page Test 

References :

Lazy Loading – Shopify Blogs

Image Upload – Shopify Blogs

Performance best practices for Shopify themes – Shopify Themes

Understand Shopify CDN – Shopify CDN

Remove Shopify apps – Oscprofessionals Blogs

Shopify Speed Optimisation : Oscprofessionals

Conclusion

By implementing these expert-recommended strategies, you can unlock the true potential of your Shopify store’s speed, delivering a seamless and captivating experience for your customers. Remember, a fast store is a successful store, propelling your brand to new heights and securing a top spot in the ever-competitive eCommerce landscape.

Ready to outrun the competition? Contact our team of Shopify speed optimization experts today and unlock the true potential of your store!