@usaleem9876 ,
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/
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 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.
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.
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 !