After updating all of my Podcast Episodes, I am getting TREMENDOUS lag. I can't even edit my site in Elementor anymore. Please troubleshoot. I've included a screenshot that shows the jQuery that is lagging the site.
I set all of the Podcast Episode's stream_link, podcast title, podcast duration, and podcast season and episode numbers.
Afterwards, I went to edit the page in Elementor and it was extremely laggy. Since I use Firefox Dev ed. it notified me that a script was making the page unresponsive and gave me a few selections: "Stop Script, Wait, or Debug." I chose "Debug" and that is what it showed me. However, today when viewing the page in a Private window it keeps referring to the 'trackListItemResize' function.
I've added a video along with a screenshot of the flame chart. I believe it is due to the ForEach loop.
My theory is that it doesn't happen on local sources but more on external audio sources. It does not happen on the test site because all of the podcasts are local mp3s (see attachment).
My client's website is using external audio sources (see attachment).
Again, this is just a theory as I haven't tested yet, but hopefully it helps you.
what Im thinking is the issue you have is because you have way too much big assets loading on that page..I mean, you have 53mb to download only for this page, and it does not include any audio file!
I agree with you about the assets and their sizes as this has not been optimized yet and all caching/optimization plugins have been disabled for troubleshooting this issue.
I never had an issue until I set the Podcast Episodes information via their fields.
I agree, but it is the resize event that is causing the lag.
The Firefox Debug Script suggests that along with the flame chart.
Maybe adding a condition to check to see if Elementor is open to not trigger the resize of the widget or to possibly have that as an option? Have you gone into the backend and looked for yourself on my environment?
The homepage. When you open it in Elementor and resize Elementor or the browser you will see the lag that I'm referring to. When I look at it with Firefox it is showing the 'trackListItemResize' function being called.
Im not really familiar with the plugin you are using, but it seems that the lag is gone when you choose other skin type. So my guest is that there is an issue with your skin or loop rather than one of our js files
In your template loop, make sure to use Elementor Button instead of the full player to create that small audio player button. see screenshot: https://d.pr/i/mRwBa2
Awesome Chris! Happy we could help you out! Btw. If you have a moment, I would very much appreciate if you could quickly rate our theme 5 Stars, just to help me spread the word. It's my little reward to offer great support to you
Out of curiosity, is there documentation somewhere for the theme?
For example, I'm wanting to control the icon toggle when the mp3 is playing on the button but don't know how to do it. On the widget itself, it set a class, but on the button it is not setting a class.
I dont think there is a method to control the Elementor Button to toggle. Since its a native Elementor Button widget with their own icons, the only way I think would be that you develop a javascript code to switch the icon manually in the DOM. thats not something easy to acheive tho. Im sorry
Hello,
After updating all of my Podcast Episodes, I am getting TREMENDOUS lag. I can't even edit my site in Elementor anymore. Please troubleshoot. I've included a screenshot that shows the jQuery that is lagging the site.
UPDATE: Here is a better resolution photo of the code.
Hi,
I dont quiet understand.
What do you mean by "After updating all my podcast episodes" ? What have you updated exactly so it suddenly became slow?
And why do you affirm its the JS function setAudio that make the site lag?
Also, please elaborate on how I can reproduce your issue on my end so we make sure we focus on the same issue
Thanks,
Max from the Sonaar.io Crew
Hi Max,
I set all of the Podcast Episode's stream_link, podcast title, podcast duration, and podcast season and episode numbers.
Afterwards, I went to edit the page in Elementor and it was extremely laggy. Since I use Firefox Dev ed. it notified me that a script was making the page unresponsive and gave me a few selections: "Stop Script, Wait, or Debug." I chose "Debug" and that is what it showed me. However, today when viewing the page in a Private window it keeps referring to the 'trackListItemResize' function.
I've added a video along with a screenshot of the flame chart. I believe it is due to the ForEach loop.
Flame chart screenshot: https://i.imgur.com/8UNOX9U.png
My theory is that it doesn't happen on local sources but more on external audio sources. It does not happen on the test site because all of the podcasts are local mp3s (see attachment).
My client's website is using external audio sources (see attachment).
Again, this is just a theory as I haven't tested yet, but hopefully it helps you.
Hi,
what Im thinking is the issue you have is because you have way too much big assets loading on that page..I mean, you have 53mb to download only for this page, and it does not include any audio file!
see inspector: https://d.pr/i/xctxeP
i recommend you reduce by like 70% your image size at least.
Thanks,
Max from the Sonaar.io Crew
Max,
I agree with you about the assets and their sizes as this has not been optimized yet and all caching/optimization plugins have been disabled for troubleshooting this issue.
I never had an issue until I set the Podcast Episodes information via their fields.
But no js function called until you click play audio.. So it the issue can't be this.
Make sure to optimize your images, that what I would do first before anything else.
Thanks,
Max from the Sonaar.io Crew
I agree, but it is the resize event that is causing the lag.
The Firefox Debug Script suggests that along with the flame chart.
Maybe adding a condition to check to see if Elementor is open to not trigger the resize of the widget or to possibly have that as an option? Have you gone into the backend and looked for yourself on my environment?
Please let me know, thanks!
Could you point me to the resize event script function to make sure we're on the same page please
Thanks,
Max from the Sonaar.io Crew
Yes sir.
The homepage. When you open it in Elementor and resize Elementor or the browser you will see the lag that I'm referring to. When I look at it with Firefox it is showing the 'trackListItemResize' function being called.
Im not really familiar with the plugin you are using, but it seems that the lag is gone when you choose other skin type.
So my guest is that there is an issue with your skin or loop rather than one of our js files
https://d.pr/i/YhqNuv
Thanks,
Max from the Sonaar.io Crew
Ok Ive found the issue.
In your template loop, make sure to use Elementor Button instead of the full player to create that small audio player button. see screenshot: https://d.pr/i/mRwBa2
Thanks,
Max from the Sonaar.io Crew
Max, you are awesome!
That fixed it. Thank you so much for taking the time to help look into this issue!
A++ customer service!
Awesome Chris! Happy we could help you out! Btw. If you have a moment, I would very much appreciate if you could quickly rate our theme 5 Stars, just to help me spread the word. It's my little reward to offer great support to you
Simply click here https://www.trustpilot.com/evaluate/sonaar.io, hit 5 stars and you're done.
Thank you so much! I appreciate !!
Thanks,
Max from the Sonaar.io Crew
Absolutely, Max!
Out of curiosity, is there documentation somewhere for the theme?
For example, I'm wanting to control the icon toggle when the mp3 is playing on the button but don't know how to do it. On the widget itself, it set a class, but on the button it is not setting a class.
Thanks in advance!
Hi Chris,
The ressources we have is the public tickets here, or knowledge base here: https://sonaar.ticksy.com/articles/
I dont think there is a method to control the Elementor Button to toggle. Since its a native Elementor Button widget with their own icons, the only way I think would be that you develop a javascript code to switch the icon manually in the DOM. thats not something easy to acheive tho. Im sorry
Thanks,
Max from the Sonaar.io Crew
That’s fine. I just didn’t know if there was a hook for it or class to look for to toggle the button.