CODEWITHSUNDEEP
javascriptwordpressasynchronousdeferred-loading
George Eco
George Eco

Reputation: 462

Async loading of some generated Javascript

I work for a small company that isn't flexible in making changes on using a heavy themed webpage on Wordpress for their own reasons. They are also using a load of plugins, and it takes more than 10 seconds to load. So, I thought I should give it a try and check the generated homepage source code, after I ran the analysis that tells me that js is just a disaster. The theme they had chosen was Unero, because it works with woocommerce I suppose. The website is a small e-shop along with a blog, nothing too fancy really, we use yoast SEO too, but that might be irrelevant. I realized that there is a load of js scripts running here and there. I read that you can set everything run with async set true.

A also read that this can cause things to break between scripts, due to undefined variables and other problems I suppose. Please note that I am kinda new to js technologies and I might not know what I really should be asking, or searching for. I do my best to explain what I need to happen though.

  1. Is there a way you can override ( or overload, what is the term here?)some js on footer, after being defined on their positon (in HEAD and in BODY),setting it to async mode, by using a snippet on footer? Will this actually work?
  2. I do not want to involve any plugin general solutions, because I am afraid they will break stuff as mentioned above. Correct me if I am wrong and please suggest me something. Except if the solution IS to make a custom plugin, where I will have full control I guess.
  3. I am open on ANY suggestions, as long as it won't break the site.

I am asking here and not on Wordpress Developement or any other Stack Exchange forum, because I am looking for a solution done by hand, along with an explaination why it will work. I am a code by hand guy really, and I am not afraid to dive deeper on something, if things are gonna be done right.

Upvotes: 0

Views: 130

Answers (1)

Bergur
Bergur

Reputation: 4057

Is there a way you can override ( or overload, what is the term here?)some js on footer, after being defined on their positon (in HEAD and in BODY),setting it to async mode, by using a snippet on footer? Will this actually work?

Answer: Yes, its possible but that could also happen with sync code. If plugin A is doing something like $('title').text('Title from A') and then the next plugin does $('title').text('Title from B')then its gonna get overridden, doesn't matter if its sync or async.

I do not want to involve any plugin general solutions, because I am afraid they will break stuff as mentioned above. Correct me if I am wrong and please suggest me something.

Answer: I am not sure what you want to do. What is your goal with this site? Do you want to untangle the mess of the plugins? That can be difficult since you have little control over the plugins and their mechanismm.

I am open on ANY suggestions, as long as it won't break the site.

Answer: One way would be to disable them one by one to see cause and effect and try to clean out that way. Another solution would to switch to more simple solution like Shopify and the third to creaate a custom solution that you have more control over.

Its quite an open question, so its kinda of hard to give a concrete answer or solution to your problem.

Upvotes: 1

Related Questions