Solved

How to Improve Shopify's Expanse Theme Speed Score?

VivifyCo
Visitor
2 0 2

I'm Joel from Vivify Co. we've opened an online retail store servicing a range of wellness, self care and feel good products. We are using Expanse Theme and found it has quite a nice range of block styles and designs to deck out the website. What we're looking to find is a means to better optimise our current speed score of 42.

 

We have looked at means of bulk reducing image file sizes and file types (PNG to JPG) but found little to no improvement. Hoping you can check on what other methods of optimisation that be done to improve our speed on the website. 

Our website is vivifyco.com.au

 

If anyone can assist we would be very grateful. Thanks so much!

Joel

Vivify Co. Your destination for curated fitness, health & wellness products.
Accepted Solution (1)

SideNode
Shopify Partner
159 38 41

This is an accepted solution.

hi @VivifyCo

Its SideNode! We will be happy to help you today.

You need to work on the following points :

  • Theme Upgrade if there is a scope and upgraded theme available
  • Reduce JS Payload.
  • Use Critical CSS.
  • Replace GIFs With Static Images
  • Reduce Large Image Sizes
  • Migrate Tracking Codes To Google Tag Manager
  • Compress Images
  • Limit Third-Party JavaScript & Shopify Apps
  • Preload Web Fonts. 
  • I suggest limiting it to one and using a standard web font.

 

Theme Upgrade :

Its benefits include improved loading speeds, which can help with both user experience and store conversion rates, and search engine optimization. 

 

Refer to this blog : 

https://iliashaddad.com/blog/shopify-speed-optimization-step-by-step-guide

 

After determining the Long Tasks and the code blocks and web page assets that are causing them, optimizing Total Blocking Time can be possible. To optimize the Code Blocks that busy the main thread longer than 50 MS, the methods below can be used.

  • Reduce the Request Count of the Third-Party Scripts
  • Reduce the Size of the Third-Party Scripts
  • Minimize the Browser’s Main Thread Work
  • Clean the Unused Javascript and CSS Codes
  • Compress the Javascript and CSS Files
  • Implement the Code Splitting for Javascript Assets

 

You can choose from several fonts for the text in your online store. To avoid downloading a new font to your customer's computer, you can use a system font.

 

How to avoid showing invisible text :

 

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers.

 

 

 

Remove unused CSS and unused JS:

 

  • Check the assets folder of the theme and remove unused CSS and JS file
  • Check and remove unused apps
  • If your store has not installed any app you can comment {{ content_for_header }} code in the theme.liquid (not recommended if you don't have knowledge about the liquid)



By fixing these issues, your website speed score can definitely improve.

If helpful, please Like and Accept this Solution to help others
SHOPIFY APP DEVELOPMENT | BOOK FREE SHOPIFY CONSULTATION

View solution in original post

Replies 6 (6)

SideNode
Shopify Partner
159 38 41

This is an accepted solution.

hi @VivifyCo

Its SideNode! We will be happy to help you today.

You need to work on the following points :

  • Theme Upgrade if there is a scope and upgraded theme available
  • Reduce JS Payload.
  • Use Critical CSS.
  • Replace GIFs With Static Images
  • Reduce Large Image Sizes
  • Migrate Tracking Codes To Google Tag Manager
  • Compress Images
  • Limit Third-Party JavaScript & Shopify Apps
  • Preload Web Fonts. 
  • I suggest limiting it to one and using a standard web font.

 

Theme Upgrade :

Its benefits include improved loading speeds, which can help with both user experience and store conversion rates, and search engine optimization. 

 

Refer to this blog : 

https://iliashaddad.com/blog/shopify-speed-optimization-step-by-step-guide

 

After determining the Long Tasks and the code blocks and web page assets that are causing them, optimizing Total Blocking Time can be possible. To optimize the Code Blocks that busy the main thread longer than 50 MS, the methods below can be used.

  • Reduce the Request Count of the Third-Party Scripts
  • Reduce the Size of the Third-Party Scripts
  • Minimize the Browser’s Main Thread Work
  • Clean the Unused Javascript and CSS Codes
  • Compress the Javascript and CSS Files
  • Implement the Code Splitting for Javascript Assets

 

You can choose from several fonts for the text in your online store. To avoid downloading a new font to your customer's computer, you can use a system font.

 

How to avoid showing invisible text :

 

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers.

 

 

 

Remove unused CSS and unused JS:

 

  • Check the assets folder of the theme and remove unused CSS and JS file
  • Check and remove unused apps
  • If your store has not installed any app you can comment {{ content_for_header }} code in the theme.liquid (not recommended if you don't have knowledge about the liquid)



By fixing these issues, your website speed score can definitely improve.

If helpful, please Like and Accept this Solution to help others
SHOPIFY APP DEVELOPMENT | BOOK FREE SHOPIFY CONSULTATION

flareAI
Shopify Partner
2405 223 534

Hello @VivifyCo,


Greetings from flareAI app helping Shopify merchants get $7Million+ in sales from Google Search, on autopilot! I am Gina, and I am here to help.


Here are several steps you can take to optimize your Shopify website.


* Select a Shopify theme that is optimized for speed and responsiveness. A fast-loading website is crucial for retaining visitors and improving search engine rankings.


* Properly size images. Serve images that are appropriately-sized to save cellular data and improve load time. Use tools like TinyPNG before uploading images to your Shopify store. Also, leverage Shopify's built-in image optimization features.


* Reduce the number of external scripts, stylesheets, and fonts that your site loads. Each request can impact page load times, so consolidate and minimize them when possible.


* Use a Content Delivery Network (CDN). A CDN distributes your website's content across multiple servers around the world, delivering it from the server closest to the user. This can significantly improve loading times.


* Configure your server or use Shopify's settings to enable browser caching. This stores certain elements of your website on a visitor's device, allowing faster load times for returning visitors.


* Third-party code can significantly impact load performance. Limit the number of redundant third-party providers and try to load third-party code after your page has primarily finished loading.


* Prioritize mobile users by ensuring a mobile-responsive theme for seamless browsing, minimize redirects to prevent loading delays, reserving them for essential SEO or URL updates, and enhance load times by implementing lazy loading for images and media, loading content as users scroll.


* Optimize your homepage with prominent product showcases, clear navigation, and minimal clutter, ensure easy navigation through well-defined categories and a search bar, streamline the checkout process to reduce abandonment with guest options and concise forms, and enhance customer decision-making and reduce returns by providing detailed product info and high-quality images.


* Implement structured data (Schema markup) to help search engines understand your content better, potentially leading to enhanced search result appearances.


* Write compelling and descriptive meta titles and descriptions for each page to improve click-through rates in search engine results.


* Utilize tools like Google PageSpeed Insights or GTmetrix to pinpoint areas for faster page loading, consistently analyze Shopify analytics to uncover bottlenecks and optimize user experience, and conduct A/B tests on various website elements for audience-specific enhancements.


* Enhance website security with SSL certificates for secure connections and improved SEO rankings, optimize on-page SEO by incorporating keywords, unique content, and quality backlinks, and maintain website and plugin updates for compatibility, security, and peak performance.


* Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.


* Avoid an excessive DOM size. A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows.


Don't hesitate to ask if you need any further clarification. If you find the answer helpful give it a Like and ✓ Mark it as an Accepted Solution.


Gina

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing

oscprofessional
Shopify Partner
15751 2357 3060

Hello @VivifyCo 

 

I have checked your site in the Google Page insights tool. There is a low score on your website. It needs to be improved, especially on mobile devices.

image.png

 

Below are some factors that might impact the speed of your online store, and how you can address them.

  • Pass core web vitals (important)
  • Reduce JS Payload.
  • Use Critical CSS.
  • Reduce Large Image Sizes
  • Migrate Tracking Codes To Google Tag Manager
  • Compress Images
  • Limit Third-Party JavaScript & Shopify Apps
  • Preload Web Fonts. 
  • Use a standard web font.
  • You need to work on properly sized images (it is important to carry score)

You can improve your website speed score by fixing these issues.

 

If there is anything that needs to be clarified or included, please let us know.  We will surely help you. 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

SAN_MSWEB
Shopify Expert
872 110 115

Hi @VivifyCo 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

For the Shopify Speed Issues on your store, you need to Speed optimization.

Few Tips to Speed Up Shopify Site-
1. Use compressed images
2. Optimize use of Shopify apps
3. Implement AMP
4. Consider Professional Help
5. Use a single Hero Image
6. Minify Js/Css files



Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

SEOKart
Trailblazer
168 4 23

Hello VivifyCo,

 

First of all, I must tell you that you’ve got an amazing website.

 

Well, I agree with you that a slow-loading website can be very concerning, as it impacts the user experience of the website, and also hampers its ranking on SERP.

 

So, here are some ways that you can consider to improve the ranking of your website:

 

  1. Remove the unused or unnecessary JavaScript and CSS
  2. Implement AMP (Accelerated Mobile Pages), which is an open-source HTML framework that allows Google to store the cached versions of these pages in the server and reduce the loading time of the website on mobile devices
  3. Minify JavaScript by using GZIP textual compression
  4. Implement lazy loading for advertisements
  5. Enable browser caching for the website
  6. Compress font file size

Hope it helps!

 

Leesha

SEOKart

https://apps.shopify.com/seokart
SEOKart
Trailblazer
168 4 23

You can also consider using SEOKart app to constantly track and compare the page speed of your website!

https://apps.shopify.com/seokart