Shopify Speed Optimization
Guide – Updated 2023

Contact Us

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.

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.
google-page-speed-shopify

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 :

audit-shopify-site-speed

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 :

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.
optimization-img

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

tools-to-check-score
  • 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

divide

Basic Optimization
Plan

$110
(One time fee)
$249 (USD)
Desktop Performance Score 80+
Improved Mobile Performance Score
Upto 3 secs load time
Enquire Now

Advanced Core
Web Vitals

$349
(One time fee)
$449 (USD)
Basic Optimization Plan +
Pass core web Vitals*
Upto 2 secs load time
Enquire Now

*May require design and functionality changes
#Blog Pages are not part of Optimization Scope

Contact Form

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

    shopify Web vital

    If you are looking for expert Shopify Speed optimization and other services : you can always reach out to us!

    Get in Touch

    One Comment

    1. LogoCent January 25, 2023 at 9:30 am - Reply

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

    Leave A Comment