How can I improve my website's loading speed on mobile?

[dabashar]

Do you have any idea how i can speed up my website?  This is my first website and i'm using the theme Simple.

If you also have any suggestions too you're welcome.

https://www.dubuystore.com/

[oscprofessional]

Hi @dabashar ,

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 website faster through our online tool.

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

3rd Party App Code : 

• 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. 

• Note(once check ‘lazysizes Javascript library’ in assets repo. has available or not)

• 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. 
• te:

{% 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.

If you’re looking to improve your Shopify store’s site performance or SEO.

For more details please check the link below. We will give you free audit report.

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 !