Defer parsing JavaScript to reduce blocking of page rendering

JavaScript
1

I did an online analyze of a web site performance (not word press) and didn’t show well in regard to ‘Defer parsing JavaScript to reduce blocking of page rendering’.
So, I researched it and added this to the web site script code (with the complete url’s):

<script type="text/javascript">
function parseJSAtOnload() {
var links = ["https://.....com/js/jquery-ui.min.js", "https://.....com/js/jquery-3.min.js",
 "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js",
 "https://......com/js/lib/sweetalert2/dist/sweetalert2.js",
 "https://.....com/default/js/bootstrap.min.js",
 "https://.....com/js/Fingerprintjs2/fingerprint2.js",
 "https://.....com/themes/js/bootstrap-select.min.js",
  "https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"],
headElement = document.getElementsByTagName("head")[0],
linkElement, i;
for (i = 0; i < links.length; i++) {
linkElement = document.createElement("script");
linkElement.src = links[i];
headElement.appendChild(linkElement);
}
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>
</body>

but, after re-analyze, still same low score.
Any ideas you can share in regard to what is not correct here, is appreciated.

2

Are you adding to head? If so that’s issue one. If you Have to, add async or defer to your script tag.

3

Thanks fort your reply.
No not added to head, it’s just above the </body> tag.
How do you mean to add ‘defer’ to script tag?

4 
<script src=yoursource" defer></script>

I don’t think you should need that loop function. Async would work the same way.

5

This looks like a lot of over engineering. You just need to put your script tags before the body, not in the head. No reason to do all of this.

<body>
  <!-- your page content -->
  <!-- your page content -->
  <!-- your page content -->
  <script src="jquery.js"></script>
  <script src="yourscript1.js"></script>
  <script src="2yourscript.js"></script>
</body>

Then you can take advantage of flags like async for non-essentials to further optimize it.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

AFAIK, the defer tag is for things that are included in the head, but I could be wrong. I’ve never used it. However, it would replace most of the over engineered code you’ve written, but I think just adding it before the closing body tag would be enough.

6

Agreed. That code actually threw me for a loop, pun intended. But you are correct with defer, but seeing how that was written I figured… meh couldn’t hurt.
That’s why I originally asked where it was loaded in, by that I meant before the loop implementation, miscommunication there.

7

Thanks for the replies, however I’m not understanding the solution.
I researched and added this code from a tutorial named “Defer parsing JavaScript to reduce blocking of page rendering”, above the tag as instructed, I didn’t write the code, as I’m not skilled in js, I just added in the .js files that the web site analysis listed as needed to be deferred, to raise site performance.

So, when you refer to “that loop function”, I’m not clear on what you are describing. Or “no reason to do all this”, with that example, I’m not getting what is being provided there.

Any additional clarification is appreciated.

8

The function you included that dynamically inserts all your JS files instead of inserting them manually like this:

<body>
  <!-- your page content -->
  <!-- your page content -->
  <!-- your page content -->
  <script src="https://.....com/js/jquery-ui.min.js", "https://.....com/js/jquery-3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
  <script src="https://......com/js/lib/sweetalert2/dist/sweetalert2.js"></script>
  <script src="https://.....com/default/js/bootstrap.min.js"></script>
  <script src="https://.....com/js/Fingerprintjs2/fingerprint2.js"></script>
  <script src="https://.....com/themes/js/bootstrap-select.min.js"></script>
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</body>
9

Thanks again for your reply. However, I’m not clear on the solution to my issue.
The tutorial titled:
“How to Defer Parsing of JavaScript Properly” states:

"Code to Defer Multiple JavaScripts in One-go
Insert this code in HTML file just before the tag.
If you want to defer multiple scripts in one go. You can use the same script with little modification.
In the following code replace defer1.js, defer3.js, and defer3.js, etc. with the link of scripts that you want to defer.

 < script type="text/javascript">
function parseJSAtOnload() {
var links = ["defer1.js", "defer2.js", "defer3.js"],
headElement = document.getElementsByTagName("head")[0],
linkElement, i;
for (i = 0; i < links.length; i++) {
linkElement = document.createElement("script");
linkElement.src = links[i];
headElement.appendChild(linkElement);
}
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script >

Any ideas you can share in regard to what I have done incorrectly (see my original posting), is appreciated.

10

The best solution is sometimes the simplest. What mawburn says is the only approach I’ve used for years.

1 Like
11

Thanks for your reply, and that approach is to simply move the js to the bottom?

12

yep.

13

Thanks for the replies.
I have moved the site analyzed listed files to the bottom, yet still still same low score.
I’d like to try the Defer Parsing of JavaScript Properly, if anyone can make a suggestion on that.

14

Is this site live or are you testing via local host. What testing suite are you using. If this is live can you provide a url?

15

Not if scripts are embedded directly on pages.

16

What testing suites do you use?

17

If your talking 3rd party, yeah they are a PITA and the bane of my existence, bu the examples shown should easily be able to be moved, that’s why I wanted to see the site itself.

For a quick sanity check, Lighthouse and web page test. For on going continual testing we have catchpoint set up at work.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.