Home > Technical & Creative Skills > Programming, Servers & Scripts

Defer parsing of Javascript - Is it possible to do with Google (10)

06-18-2020 11:11 PM #1 nitrousoxide (Member)
Defer parsing of Javascript - Possible with Google Hosted .js library?

Hi Guys,

Currently trying to speed up a lander by deferring parsing of Javascript.

So far its working really well with self-hosted .js files, I've seen speed increases up to ~ 0.2 seconds.

However whenever I defer parsing of Google Hosted .js libraries using the below code, the page doesn't work / script doesn't fire properly:

Code:

 <script type="text/javascript">function parseJSAtOnload() {
var element = document.createElement("script");
element.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", parseJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", parseJSAtOnload);
else window.onload = parseJSAtOnload;
</script>

Any suggestions?

06-19-2020 02:31 AM #2 jeremie (Moderator)

This is a really bad script. Doing so, your lander must parse javascript first, realize that it has to load the library, load it, parse it, execute the code. Meanwhile, the user can not interact with the page.

This script might have been useful 5-10 years ago. Now, you should use the normal script markup to call this library at the top of your page, with the "defer" parameter, which does what this script is doing in a standard way. All other scripts needing this library must also be loaded using defer
https://www.w3schools.com/tags/att_script_defer.asp

By doing do, the browser immediately know it has to load the jquery library, but it does not block the page rendering. You will therefore not have the warning message from Google, and your page should be ready a bit faster.

Please note that this google message is not necessarily bad.

06-19-2020 02:35 AM #3 jeremie (Moderator)

The best option remains to code the lander without using jquery, which add lits of javascript to load, while it can easily be replaced by vanilla javascript lost of the time.

http://youmightnotneedjquery.com/

06-19-2020 08:06 AM #4 diplomat (Member)

Put your javascript into footer not header.

06-19-2020 11:41 PM #5 nitrousoxide (Member)

Originally Posted by jeremie

This script might have been useful 5-10 years ago. Now, you should use the normal script markup to call this library at the top of your page, with the "defer" parameter, which does what this script is doing in. standard way. All other scripts needing this library must also be loaded using defer
https://www.w3schools.com/tags/att_script_defer.asp

Thanks - I've swapped in your updated code

Put your javascript into footer not header.

That's currently what I'm doing. But GT Metrix still scores deferring of .js poorly without actual could to defer it

06-20-2020 02:12 AM #6 jeremie (Moderator)

Originally Posted by diplomat

Put your javascript into footer not header.

This is not going to work in the present case, and is actually worse as it postpones even more the loading of the JQuery library.

06-20-2020 03:52 AM #7 jaybot (Veteran Member)

I can't see any of this making a large difference over just using:

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

in your header.

Most modern browsers will be smart enough to handle it the best way to load the script and page in the fastest way possible.

You also may want to try cdnjs as it sometimes beats google's speeds.

06-28-2020 11:02 AM #8 diplomat (Member)

Originally Posted by jeremie

This is not going to work in the present case, and is actually worse as it postpones even more the loading of the JQuery library.

This is exactly why you put it to footer. So the whole page can be processed and then jQuery is loaded. In most cases, it works perfectly. Large Javascript libs can cause crazy slow rendering which means the visitor will see a blank page for a very long time.

There's no need to hack this functionality into your code. The <script> tag comes with a "defer" attribute:

https://www.w3schools.com/tags/att_script_defer.asp

There's also async that is worth checking out:

https://www.w3schools.com/tags/att_script_async.asp

06-28-2020 01:55 PM #9 jeremie (Moderator)

@diplomat, I am not sure what your post brings to the debate. You are basically repeating in your reply what i said in my first post: load directly the jquery with the defer parameter is the best option with actual browsers.

Using this script in the footer is NOT good. It certainly does not block the render initially, but the user experiences is not only about seing a page, it is about USING it.

By putting this script in the footer, the browser will only detect it has to load a jquery library after it has finished rendering and parsing the javascript. Then it will have to load it, parse it and re-render (possibly some parts) before the user can interact with the page. This results in a page broken for 0.5-2s extra depending of the user connection. As far as i am concerned, i don't think that is acceptable.

06-28-2020 09:35 PM #10 diplomat (Member)

Originally Posted by jeremie

I'm not debating anything here. I provided links to the OP to see how he can load Javascript files.

Also, I would choose fast rendering 99.9% of the time when using jQuery on my landing pages (or better I wouldn't use jQuery at all - as you said yourself). If I have to put it to head then I'd load it from my own domain because you never know when CDN links are not working properly or take some time to load (I have more than enough cases with such issue). I would do that because capturing the user's attention is extremely important and if your page loads/renders slowly (especially with pops) user will just close the page/window. If you are so worried about the user's download speed why not put everything into the head so the user doesn't have to download anything because everything is already there and every request wastes tons of time.

Home > Technical & Creative Skills > Programming, Servers & Scripts