How can I improve my site speed beyond 29?

[Cbrownz]

I believe I have gone through the process of compressing images, limiting apps and using a 2.0 theme. My sites loads in 3 seconds as gtmetix outlines. 

Any resources or help would be greatly appreciated! 

https://cardboardcathomes.com/

[oscprofessional · Accepted solution]

@Cbrownz .

Hope you are doing well. 

Welcome to the Shopify Community.

I have gone through your store. It really looks nice. You have choosen the best-known e-commerce solution Shopify platform currently on the market.

Optimizing your Shopify store is time-consuming. Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize the themes, file sizes can increase and affect your store speed.

Google PageSpeed Insights is a free tool to help you find and fix issues slowing down your web application. Get your PageSpeed score and use PageSpeed suggestions to make your web site faster through our online tool.

I have checked your site in the page insight chrome tool. your website score is very low.

• You should remove the unused app code. It will be beneficial to your store. and makes your theme code easier to read.
• 3rd party apps & codes which take time to load and their size . They decrease the speed.
• Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.
• If you're removing an app, then consider removing code that was added as part of the app install process. Some apps help you with this process by wrapping their code in {% comment %} tags that mention the app name.
• Removing unused app code is a best practice that avoids running code for unused features, and makes your theme code easier to read.

You can refer this article :

https://www.oscprofessionals.com/blog/shopify-speed-optimization-reduce-impact-of-third-party-code/

Defer offscreen images :

One of the most common recommendations I found is “Defer offscreen images”. This is an indication that all of the site’s image assets are loading at once.

So you can use lazy load for these images.

• To defer loading of offscreen images in your Shopify site, you will have to modify your Theme (theme.liquid file) to leverage the lazySizes library. Here's how:
• Download the lazysizes Javascript library from here and upload it to your theme's /assets folder. 

• Add the following lines to your theme.liquid just before the </head> tag:

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

• Change the image tags in your theme by adding class "lazyload" to the image tags and changing the src attribute to data-src attribute:

{% for img in product.images %}

 {% assign img_url = img | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

 <img class="lazyload" 

 src="{{ img | img_url: '300x' }}"

 data-src="{{ img_url }}"

 data-widths="[720, 1080]"

 data-aspectratio="{{ img.aspect_ratio }}"

 data-sizes="auto">

{% endfor %}

We’ve had the best success for our clients by working with our developers to implement the lazysizes, because it's quite complicated for non technical people.

You need to work on 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 would suggest limiting 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 this blog : 

https://www.oscprofessionals.com/shopify/improve-your-shopify-stores-speed-performance-score-by-upgr...

How to Optimize Total Blocking Time :

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 assets folder of the theme and remove unused CSS and JS file
• Check and remove unused apps
• If your store has not install any app you can comment {{ content_for_header }} code in theme.liquid (not recommended if you don't have a knowledge about the liquid)

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

For more details please check the link below. 

https://www.oscprofessionals.com/blog/shopify-speed-optimization-guide/

If anything is missed out or unclear then don't hesitate to ask.  We will surely help you. 

Have a nice day !

[AvadaCommerce]

Hi @Cbrownz,

When it comes to site speed, please note that there are several factors impacting your online store speed, some of which you can control, others you cannot.

Factors you can't control

• Your customer's device, network, and location

• Shopify infrastructure

• Content delivery network (CDN)

• Local browser cache

• Server-side page cache

• The assets inside the content_for_header Liquid tag

Factors you can control

• Unnecessary Apps

When you add apps to change the functionality or appearance of your online store, they add code into the theme so they can run. Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.

• Themes

Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize themes, file sizes can increase and affect your store speed.

• Complex or inefficient Liquid code

You can edit almost all of the Liquid that is used to render your store. There are efficient and inefficient ways of writing Liquid code. Doing complex operations repeatedly can increase your Liquid render time, which impacts your overall store speed.

• Images and videos

High-resolution images usually require large files and therefore slow down page loading times.

• Fonts

If you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed.

I suggest you try AVADA SEO Suite which has great features that can help you with improving site speed such as Image Optimization, Speed Up, Lazy Loading, and Minification (removes unnecessary information from the source code). 

You can also refer to this Shopify post about Improving Speed.

I hope my answer can help you achieve your goals.