Load jquery.min in footer

JavaScript
1

hi all

google insight pagespeed is showing error

Eliminate render-blocking Javascript and css in above-the-fold content

Your page has 7 blocking scripts and  10 css resources. This causes delay in rendering your page.

google suggests to defer or asynchronously load blocking resources

So i decided to move all the js/jquery files in the footer.

But i am not able to move “jquery.min” file to footer.

<script src="includes/jquery-1.11.2.min.js"></script>

If i move it to footer then all dependent resources like menus, sliders etc stop working.

Even i kept “jquery.min” file on top of all other jquery files in the footer, like

jquery.min.js
slider.js
menus.js
otherjquery.js

then also all dependent resources like menus, sliders etc stop working.

If i keep this “jquery.min” file in the head then everything works fine.

But google want me to move “jquery.min” file to footer ??

How can i move it to footer ??

If it cant be moved to footer then whats the other alternative ??

vineet

1 Like
2

Actually, it should be the other way round, if at all. :-/ Where exactly did you put your scripts? They should be right before the closing </body> tag. Do you have a live example? Or maybe there are some hints in the console (such as “failed to load resource” or “$ is not defined”)?

3

hi m3g4p0p

yes i can see “$ is not defined” in the console 10-12 times

mostly errors on the line where it is written

$(document).ready(function() {

all jquery files have been added before closing tag

what should i do ??

vineet

4

This means that jQuery isn’t loaded yet when it’s needed. Can you show us a live example or the markup?

BTW you don’t need $(document).ready() when all scripts are at the bottom of the page anyway. :-)

5

hi m3g4p0p

dont know why its not getting loaded in footer ??

but gets loaded in fine from same location

its not possible to post a live link.

But i will try to post some code, as its a lengthy page i will have to cut paste the code

vineet

6

One more thing i would like to ask

whether adding “async” or “defer” attributes make it work if all scripts are written inside

document.ready function

$(document).ready(function() {

vineet

7

It must not be in a footer. You’ll have to put it right before the closing </body> tag.

This would certainly help to find the error. It doesn’t matter if it’s long, as code content will get a scroll bar at a certain length (just be sure to actually mark it as code here!).

“async” + $(document).ready() would defeat the whole purpose of asynchronously loading the script; and “defer” is not needed if you put the scripts at the end of the body as explained above. Also, browser support could be an issue.

8

External script called in the <head> loads in before the page renders.

Moving the call before the </body> does let the page render sooner.

But if subsequent code that relies on that library being available runs before it loads in you’ll have problems.

I guess it would be possible to wrap those functions with some kind of timer that checks for “if jQuery” but IMHO it would be easier to put the library in the <head> and ignore what “Google says” unless you’ve noticed a significant problem caused by it.

9

But why would that happen without loading it asynchronously? Er, @vinpkl do you maybe have inline JS somewhere in your markup?

I think the most efficient way would be to concatenate your scripts beforehand, or even better, bundle it with Browserify. This way you’ll only have one single HTTP request for your JS, and module dependencies are handled automatically so that nothing can go wrong there.

1 Like
10

Have you tried leaving that one call in the head but applying async so that it is no longer a render-blocking call?

11

hi felgall

yes i tried inserting jquery in the head with async and its working fine now.
no error displayed.

Secondly i would like to ask is :

On what internet speed does google tests the website speed ??

I mean google test the website speed on 2mbps, 5mbps,10mbps etc ??
whats google connection speed while testing websites ??

vineet

12

I just can’t imagine it’s a good idea to asynchronously load a script other scripts are relying on. You’ll have no control whatsoever whether jQuery is loaded and evaluated in time or not… it may work for you now, but you just can’t be sure. For example, this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Async Test</title>
        <script
            type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"
            async>
        </script>
    </head>
    <body>
        <div>Loading...</div>
        <script type="text/javascript">
            $('div').html('Hello world!');
        </script>
    </body>
</html>

will likely fail (it does on my machine/connection).

Anyway, if the your scripts are working in the head but not at the bottom of the body (having them in the same order, of course), the only reason why it might fail I can think of is inline-scripting. We’d really need to see your markup.

13

hi m3g4p0p

you were right. it doesnt works everytime. fails sometimes.

i have modified your example code snippet to show how my code is setup and why it doesnt work when i put or load “jquery.min” at the bottom or before end of .

Even though all my code is covered with
$document.ready function but still it doesnt work ?? dont know why ??

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Async Test</title>
    </head>
    <body>
        <div>Loading...</div>
        <script type="text/javascript">
        $(document).ready(function () {
            $('div').html('Hello world!');
            });
        </script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
    </body>
</html>

My code is setup like above.

can you tell me what should i do to make it work and keep the jquery near closing ??

also when i see in console it says

$ is not defined

thanks
vineet

14

Aha! :-) You’re loading jQuery after you’re attempting to use it. Normally (i.e. w/o async), scripts are getting loaded and evaluated strictly one after the other; by the time you’re calling $ the browser doesn’t know anything of jQuery yet, hence the error. Just reverse the scripts and you’ll be fine. (I’m still not sure why it worked when they were all in the head, though…)

15

But it is a requirement for any scripts attached in the head as otherwise they block the loading of the page - that’s the main reason why almost all scripts need to go just before the </body> tag

16

hi m3g4p0p

how do you setup your code ??

do you keep all the jquery scripts in the ??

if there is requirement to keep scripts near closing tag then how do you make your code work if its called near opening opening tag ??

vineet

17

hi m3g4p0p

Is there any function by which i can detect if jquery has been loaded or not

so that i can replace it with document.ready function

vineet

18

In a very small (private) project I might just load them separately before the </body> tag in appropriate order. But as your applications grows, you might want to structure the components of your code in separate files, such as one for each model, view etc. This approach quickly becomes hard to maintain as you’d have to keep your <script> tags in sync, as well as inefficient as it would mean a lot of server requests.

Instead, it’s common practice to concatenate (and while at it, minify) all your components beforehand and load them all at once in one single <script> tag. If you have a lot of dependencies (such as a controller requiring a certain model to work on), it might make even more sense to design your components as modules, require() them where needed and bundle your code with a tool such as Browserify. This would look like e.g.

var $ = require('jquery');

$( //... jQuery operations

Browserify will then take care that everything is there when it’s needed, and again you’ll only have a single file to load.

If all my code is right before then closing </body> tag, there won’t be any code near the opening tag. ;-)

Yes, like

if (typeof window.jQuery === 'function') { // ...

or just

if (window.jQuery) { // ...

But this is usually not necessary if your code is getting loaded properly. You might do such a check if you’re writing, say, a library that is meant to be included in others’ projects.

I don’t really see the relation here… but as I mentioned earlier in this thread, you rarely need to check this anyway. Just load jQuery before your other code at the end of the body and you’re fine. :-)

19

You don’t need document.ready - with the scripts just before the </body> tag the document is already ready before the scripts start to run.

Also using jQuery from one of the common depositories (as you are doing) 99% of the time it will already be downloaded before your visitor even selects to visit your page.

20

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