How can I speed up my website's loading time?

[Hamzataj]

Hello, I hope you all are doing well can someone please guide me that I want to optimize my website to improve loading time https://hairenergyofficial.com/ is taking too much time to load. How can I improve this?

[oscprofessional]

@Hamzataj,

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. 

I have checked your store on GT matrix instead of page speed insight because it is not showing on GSI. Here is the score.

Low mobile score can kill your store traffic & may affect on sales.

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

I will give you free audit optimization report for you. Please let us know If you are interested.

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 !

[kazi]

Hello @Hamzataj  I have chcked your store in google page speed insight  https://pagespeed.web.dev/report?url=https%3A%2F%2Fhairenergyofficial.com%2F
Mobile: 11. Desktop: 19

You need to optimize the following issues

Properly size images
Defer offscreen images
Reduce unused JavaScript
Reduce initial server response time
Eliminate render-blocking resources
Reduce unused CSS

You can search in google for each issue and fix them one by one or hire any shopify developer to fix them for you.

[speedboostr]

I've run your store through Google Pagespeed insights (report here: https://pagespeed.web.dev/report?url=https%3A%2F%2Fhairenergyofficial.com%2F&form_factor=mobile)

It's scored a 13 on Mobile and Desktop failed to render.

Mobile:

Desktop: 

 
All of your core vitals are failing so SEO progress for a high ranking will be extremely hindered and it will be hard to get indexed by Google, as since the last year Google updated their algorithm to factor in Core vitals as a heavy weight in determining where a website is placed in importance to a keyword; which ultimately determines how close to the top 3 you will be ranked.

In short - Unless you have passes on all core vitals, you will always be put to the bottom of the pile when compared by the Google ranking algorithm against a website that does. Especially if the search originated from a mobile device.

Clearly there's loads of work to be done here, more then I could possibly fit into one response. The most important, low hanging fruit that I can help you with here is the usage of a youtube embed on your homepage.

Bad news is - the performance of this is terrible. But the good news is - the fix is incredibly easy! 

 

First thing to fix:

Simply remove your youtube code and do not ever use an embed. Make your own thumbnail grid via Shopify's CDN and you'll see performance quickly pick up!

To start first create a thumbnail with a play icon over it in photoshop or even just screenshot the youtube player image from your page. Save this as a jpg at around 70% quality and upload to your theme's asset directory (remember the filename!) and then edit your code as static html section in the theme customizer with something like the following - I used the first video as an example and called the file youtube_thumbnail.jpg 

<a href="https://youtu.be/yUgdzcRCXLs" target="_blank">
<img src="{{ 'youtube_thumbnail.jpg' | asset_url }}" alt="Yashma Gill unsure is it alopecia or what in her hair.. but she got cure, & its a magic !" />
</a>

This will then open youtube in a new browser window on desktop users and mobile users will be switched to the youtube app. It's native and feels great and also loads as fast as possible.

From Google diagnostics the embed is causing around 395kb just of javascript code to be loaded from Youtube and at present as your page is heavy in javascript, there's around 29 seconds of execution time that needs to be reduced right down.

I hope that helps you get started with speeding up your page! There are many other items that need to be optimized here, and we can definitely help you with all of this! Please send us a DM for more information about the services we can offer you.



 

[Ckuriosity]

I can improve your shpify store speed , google page insight 80. Let me know if you are interested.

[flareAI]

Hello @Hamzataj,

By following the below steps, you can significantly speed up your Shopify store:

1. You can run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.
2. Image compression is important and a necessity for faster loading of web pages. Make sure your images are of good quality and do not add too many images on a single page. You can try some tools like https://tinyjpg.com/.
3. Removing unused app code is a best practice that avoids running code for unused features and makes your theme code easier to read.
4. Use a theme which is optimized for performance means a theme which is responsive, fast, and takes minimal time to load the page.
If you choose a theme with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed. If your theme is loading slow, consider disabling the theme features you don't need.
5. Themes contain CSS, JS, HTML which can increase and affect your store speed. So disable theme features you don't use.
6. Loading extra data your customers aren't using can impact your store speed without adding value.
7. Using slideshow, which are high-quality images combined with transitions, takes time to load when the user clicks the link to the homepage. So instead you can use a single high-quality hero image.
8. Use a System font which is a font that is already installed on most computers. For example Segoe UI, Times New Roman. 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. This impacts the time that your store takes to load.
9. Replace GIFs with static images
10. To reduce the initial load time, you can use Lazyload technique
11. Remove third-party JS scripts and Shopify App which you are no longer using
You should disable app features you don't use, or you can remove the app if you don't need it. If you are removing an app make sure to remove the code that was added as part of the app install process.
12. Minimize HTTP requests. For example: Combine & inline your CSS scripts
13. Avoid unnecessary redirects and fix broken links
14. Use minified CSS and JS files
15. Don't add too many images on a page
Adding too many images on a page can be frustrating. It can significantly slow the load time of your website. Also, it can overwhelm visitors, which will ultimately result in a poor user experience, a high bounce rate, and a high probability of lower rankings in relative search results.

If your website takes longer than 3 seconds to load, 40% of your traffic will be lost. Apart from speeding up your store, for getting better conversions, make sure your store products are Found on Google. When your customers search on Google, your product can be found only if your page is indexed. Note that once a URL gets indexed, customers will start finding your store through organic searches, you will start getting order conversions for virtually zero cost. Making it sustainable business growth. flareAI helps to get your new products found on Google. flareAI works every day for you. Get sales from Google and 20+ world's largest free sales channels, Single click start!

Hope this was helpful.

Gina
Add flareAI Shopify App today!