Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

In the <head>? #79

Closed
ryanve opened this issue Nov 23, 2011 · 7 comments
Closed

In the <head>? #79

ryanve opened this issue Nov 23, 2011 · 7 comments

Comments

@ryanve
Copy link

ryanve commented Nov 23, 2011

Is it better performance-wise to use Yepnope in the <head> or at the end of the page?

If you had a Yepnope call in each of those locations would it be better to combine them both into one call in the <head>?
@ralphholzmann
Copy link
Collaborator

It's better at the end of the page, right before the closing </body>.

@aFarkas
Copy link

aFarkas commented Nov 23, 2011

Head or bottom:
Actually, I really dislike this answer. Modern browsers can load JS without blocking other downloads, but they still block the visual rendering. If you are using yepnope or any other script loader neither downloading other resources nor rendering the page is blocked.

The only difference between putting in head and putting @bottom is, that if you are calling yepnope from head the scripts are loaded in front of other resources, which means your behavior is faster attached as content images and css images. If you put it @ bottom, first content images are loaded and then your scripts. What is best for you, really depends on what you are doing. If you have a lightbox, it is fine to put @bottom, if you are using tabs or accordions, it might be better to use from head. And if your site doesn't work without JS, you should really start your scripts as soon as possible. (There is also another technique to call scripts right after the header of website...).

combined or uncombined:
I think the answer above already gives you some hint for this. If both scripts are really small, you should combine them to minimize request, if they are not small (above 20kb) it is ok to not combine, because the download can be parallelized.

I also would suggest, that you simply try it and look into your network panel of Firefox and decide yourself, what is important, what is better in case of your site. (I really like AOL Pagetest for IE8 to look the network waterfall).

@SlexAxton
Copy link
Owner

Call yepnope from one place - at least after your css includes and after any of your most important external resources. Everything works, but testing, much like @aFarkas implies, is the only way to know for your site. End of the page before the body tag is the safest - not necessarily the fastest, which is why that's often the advice.

@ryanve
Copy link
Author

ryanve commented Nov 26, 2011

@aFarkas @SlexAxton Thx—that's super helpful!

@gregwebs
Copy link

gregwebs commented Feb 7, 2012

Is this a stupid idea: run the yepnope at the bottom of the head in a setTimeout 0. The idea is that the yepnope js execution would now not block the page load, and the browser can start loading scripts while it is waiting to load content images.

@gregwebs
Copy link

gregwebs commented Feb 7, 2012

Oh nevermind, that is probably basically how yepnope already works.

@SlexAxton
Copy link
Owner

It still has to parse all the code regardless, and yepnope is that heavy. I'd bet you'd see better performance without the setTimeout than with it, as all the important stuff executes asynchronously in the long run.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@gregwebs @SlexAxton @ralphholzmann @aFarkas @ryanve