Challenges in Identifying the Root Causes of Site Speed Slowness

[SKTEDS]

Hi all,

I've been reading through the discussions here in the Shopify community regarding page speed issues and noticed that many sellers are facing similar challenges. It's reassuring to know that help is available within this community.

Over the past few months, I've been working diligently to improve the speed of my website. With the assistance of a freelancer, we were able to achieve significant improvements, boosting the speed from about 15-20 to an impressive 85-90 for both mobile and desktop users.

However, about a month after that, I encountered an unexpected setback with the search app I use on the website (Boost AI Search & Filter app by Boost Commerce). The app stopped delivering accurate search results, prompting me to reach out to the freelancer for assistance. Although we managed to resolve the issue with the search app, I noticed a drastic drop in speed back to 15-20.

Despite the freelancer's efforts in the last 2 months to identify the root cause, we've been unable to pinpoint the issue. There's a suspicion that the search app may be contributing to the slowdown.

below is a link from Google PageSpeed Insights showing the results for today, March 19th. I'm hopeful that someone in the community can take a closer look and provide insights on how to address this issue.

Looking forward to your responses.

Website link https://www.thetedstore.com/

https://pagespeed.web.dev/analysis/https-www-thetedstore-com/msvp2uocbs?form_factor=desktop

[kazi]

Hello @SKTEDS  after checking google page report found some issues

> Largest Contentful Paint element 20,310 ms  - Which causing delay, remove lazyload

> Eliminate render-blocking resources Potential savings of 2,450 ms - Optimize  CSS/JS files before the view port screen to load faster

> Reduce unused CSS 

> Defer offscreen images - Lazyload images under view port

> Preload Largest Contentful Paint image - Preload the First image

> Minify CSS 

> Minify JavaScript 

> Serve images in next-gen formats  - Convert to Webp format

Hope this will help to improve store overall speed and scores...

[SKTEDS]

Hi Kazi

Thank you for taking the time and answering my questions, 

my only problem is that i don't speak code language....... i am a store owner and hired a developer to create the site, this was almost 10 years ago, and he is no longer here to help me,

those issues you mentioned is related to an app i installed? if so, can you please advise which one?  

is there any easy solution for me? or i will need to spend a lot of money for a DEV to review all problems? 

your help is very appreciated! 

[kazi]

Hello @SKTEDS  App will not fix them, since you are not developer its better hire someone to do it for you.

[tim]

No way you had 85-90 with this theme and the carousel done like this.

It's a massive source of LCP and CLS.

The order of loading your assets is off IMHO.

Your preloads are at the bottom of the HTML.

You load lazysizes at the bottom of your HTML.

You load functions.min.js , which is your theme main JS at the bottom of HTML, with "defer".

Your CLS and LCP depend on owl carousel but you load this at the bottom of your HTML, deferred. 

(Also, themes own libraries.min.js includes a copy of owl and then another copy is loaded from cdnjs.cloudflare.com.)

Slideshow animation should be delayed to avoid loading second, third, etc. big images, but slideshow and CSS should be setup to load first slide as soon as possible.

There is a whole bunch of stuff like Google reviews (400kb of JS) which loads early but should not, google review widget (not visible before visitor scrolls -- should be loaded on scroll) or, say chat button -- no need to load and run huge 800kb js file immediately (ideally, use a facade for this one). 

Yes, Google reviews and chat button are loaded with "defer", but the problem here is that they are located above your main theme JS file in HTML file and are therefore loaded before that one because it also has "defer". This delays load of first slide image.

[SKTEDS]

Hi Tim

Thank you for taking your time to review my questions, 

My only problem is that I am not a developer and have almost no idea about coding, I've hired a developer to create the site 10 years ago, but he is no longer available for me to fix the issue, so i will need to find the solution myself.

but from what you write i understand that you dont think that the search app i use have a main impact here, you believe that the issue somes from the google review, and also the chat button.

is this correct? would you recommend me to remove those apps? did you know better apps for chat and google reviews?

looking forward for you help

[tim]

Well, when your site was created 10 years ago the approaches and requirements were different. Web has changed significantly since then. 

Speed was not as important factor as it is now and when themes were designed it simply was not a priority. Browsers have evolved  and some of the techniques which were necessary are no longer needed so JS code can be smaller, no need for some libraries, etc.

Some decisions which were made 10 years ago and were Ok then are not good anymore.

The way Pagespeed rating is calculated has also changed accordingly.

Basically, what I am saying is that ideally, if you really care about page speed the most reasonable solution would be to migrate to modern theme. They are designed with Pagespeed in mind, while with your current theme you would not be able to get high ratings anyway.

Plus, you will get new configuration possibilities -- whole Shopify 2.0 stuff, including better collection filtering and search (possibly eliminating the need for Boost app?).

Now, using app like Boost will always affect your PageSpeed score.
Consider that if you use native collections code and filtering Shopify will render your page code and send it to browser for display and that's it -- you see your product grid immediately. 

When using App it is necessary to then load app code, make connection to App server and only then render your product grid. 

The app is reasonably optimised, so this may be not that huge a delay, but these extra steps must be performed anyway.

I am also not saying that Google reviews and Shopify Inbox are bad apps -- I am saying that they are loaded earlier than necessary and therefore delay your first slide showing (which is significant for PageSpeed).

What I am recommending is to:

0) Start thinking about migration to a new theme;

1) Reorder your scripts loading and improve HTML structure to load first assets first;

2) Consider replacing slideshow with static banner -- this will be a cheap solution to a whole lot of problems;

3) Probably delay loading of some apps like Google Reviews and Shopify Inbox -- Consider using App Optimization;

4) (later) Start preparing for migration.

1)-3) should not be expensive (and you can try #2 and compare pagespeed results yourself ). This is not a complete optimisation, just some easy fixes.

[SKTEDS]

Thank you so much Tim!! 

Would it have been feasible for me to handle steps 1-3 independently, or should I seek assistance from a developer? My proficiency in coding and HTML is rather limited.

about migrate to a new Theme what are the good Themes offered by shopify?

[tim]

Yes, i guess 1) & 3) would require a dev. 2) you can do yourself. And lots of comparisons.

As for the theme recommendation -- I believe any theme from the theme store would be reasonable, just select a bunch you like the most, try them in your store, see which one suits you best.

[SKTEDS]

Thank you!!