@kbuzz ,
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.
- 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:
{% 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 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.
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 !
