Where to place JavaScript in an HTML file

Question

Say I have a fairly hefty JavaScript file  packed down to roughly 100kb or so  By file I mean it   s an external file that would be linked in via  lt script src       gt   not pasted into the HTML itself   Where   s the best place to put this in the HTML    lt html gt   lt head gt       lt  -- here  -- gt       lt link rel  stylesheet  href  stylez css  type  text css    gt       lt  -- here  -- gt   lt  head gt   lt body gt       lt  -- here  -- gt       lt p gt All the page content     lt  p gt       lt  -- or here  -- gt   lt  body gt   lt  html gt    Will there be any functional difference between each of the options

User · Answer

The best place for it is just before you need it and no sooner.

Also, depending on your users' physical location, using a service like Amazon's S3 service may help users download it from a server physically closer to them than your server.

Is your js script a commonly used lib like jQuery or prototype? If so, there are a number of companies, like Google and Yahoo, that have tools to provide these files for you on a distributed network.

User · Answer

The scripts should be included at the end of the body tag because this way the HTML will be parsed by the browser and displayed before the scripts are loaded

User · Answer

With 100k of Javascript  you should never put it inside the file  Use an external script Javascript file  There s no chance in hell you ll only ever use this amount of code in only one HTML page  Likely you re asking where you should load the Javascript file  for this you ve received satisfactory answers already   But I d like to point out that commonly  modern browsers accept gzipped Javascript files  Just gzip the x js file to x js gz  and point to that in the src attribute  It doesn t work on the local filesystem  you need a webserver for it to work  But the savings in transferred bytes can be enormous   I ve successfully tested it in Firefox 3  MSIE 7  Opera 9  and Google Chrome  It apparently doesn t work this way in Safari 3   For more info  see this blog post  and another very ancient page that nevertheless is useful because it points out that the webserver can detect whether a browser can accept gzipped Javascript  or not  If your server side can dynamically choose to send the gzipped or the plain text  you can make the page usable in all web browsers

User · Answer

As a rule of thumb  the best place to put  lt script gt  tags is the bottom of the page  just before  lt  body gt  tag  Something like this    lt html gt       lt head gt           lt title gt My awesome page lt  title gt            lt  -- CSS -- gt           lt link rel  stylesheet  type  text css  href       gt           lt link rel  stylesheet  type  text css  href       gt           lt link rel  stylesheet  type  text css  href       gt           lt link rel  stylesheet  type  text css  href       gt        lt  head gt       lt body gt           lt  -- Content content content -- gt            lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt           lt script type  text javascript  src       gt  lt  script gt           lt script type  text javascript  src       gt  lt  script gt           lt script type  text javascript  src       gt  lt  script gt       lt  body gt   lt  html gt    Why      The problem caused by scripts is that they block parallel downloads  The HTTP 1 1 specification suggests that browsers download no more than two components in parallel per hostname  If you serve your images from multiple hostnames  you can get more than two downloads to occur in parallel  While a script is downloading  however  the browser won t start any other downloads  even on different hostnames  More      CSS  A little bit off-topic  but    Put stylesheets at the top      While researching performance at Yahoo   we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster  This is because putting stylesheets in the HEAD allows the page to render progressively  More      Further reading  Yahoo have released a really cool guide that lists best practices to speed up a website  Definitely worth reading  https   developer yahoo com performance rules html

User · Answer

The Yahoo  Exceptional Performance team recommend placing scripts at the bottom of your page because of the way browsers download components   Of course Levi s comment  just before you need it and no sooner  is really the correct answer  i e   it depends

User · Answer

Like others have said  it should most likely go in an external file  I prefer to include such files at the end of the  lt head   gt   This method is more human friendly than machine friendly  but that way I always know where the JS is  It is just not as readable to include script files anywhere else  imho    I you really need to squeeze out every last ms then you probably should do what Yahoo says

User · Answer

Using cuzillion you can test the affect on page load of different placement of script tags using different methods  inline  external   HTML tags    document write    JS DOM element    iframe   and  XHR eval   See the help for an explanation of the differences  It can also test stylesheets  images and iframes

User · Answer

The Yahoo  Exceptional Performance team recommend placing scripts at the bottom of your page because of the way browsers download components   Of course Levi s comment  just before you need it and no sooner  is really the correct answer  i e   it depends

User · Answer

Like others have said  it should most likely go in an external file  I prefer to include such files at the end of the  lt head   gt   This method is more human friendly than machine friendly  but that way I always know where the JS is  It is just not as readable to include script files anywhere else  imho    I you really need to squeeze out every last ms then you probably should do what Yahoo says

User · Answer

With 100k of Javascript  you should never put it inside the file  Use an external script Javascript file  There s no chance in hell you ll only ever use this amount of code in only one HTML page  Likely you re asking where you should load the Javascript file  for this you ve received satisfactory answers already   But I d like to point out that commonly  modern browsers accept gzipped Javascript files  Just gzip the x js file to x js gz  and point to that in the src attribute  It doesn t work on the local filesystem  you need a webserver for it to work  But the savings in transferred bytes can be enormous   I ve successfully tested it in Firefox 3  MSIE 7  Opera 9  and Google Chrome  It apparently doesn t work this way in Safari 3   For more info  see this blog post  and another very ancient page that nevertheless is useful because it points out that the webserver can detect whether a browser can accept gzipped Javascript  or not  If your server side can dynamically choose to send the gzipped or the plain text  you can make the page usable in all web browsers

User · Answer

The Yahoo  Exceptional Performance team recommend placing scripts at the bottom of your page because of the way browsers download components   Of course Levi s comment  just before you need it and no sooner  is really the correct answer  i e   it depends

User · Answer

The best place for it is just before you need it and no sooner.

Also, depending on your users' physical location, using a service like Amazon's S3 service may help users download it from a server physically closer to them than your server.

Is your js script a commonly used lib like jQuery or prototype? If so, there are a number of companies, like Google and Yahoo, that have tools to provide these files for you on a distributed network.

User · Answer

The answer is depends how you are using the objects of javascript  As already pointed loading the javascript files at footer rather than header certainly improves the performance but care should be taken that the objects which are used are initialized later than they are loaded at footer  One more way is load the  js  files placed in folder which will be available to all the files

User · Answer

The Yahoo  Exceptional Performance team recommend placing scripts at the bottom of your page because of the way browsers download components   Of course Levi s comment  just before you need it and no sooner  is really the correct answer  i e   it depends

User · Answer

Putting the javascript at the top would seem neater  but functionally  its better to go after the HTML   That way  your javascript won t run and try to reference HTML elements before they are loaded   This sort of problem often only becomes apparent when you load the page over an actual internet connection  especially a slow one   You could also try to dynamically load the javascript by adding a header element from other javascript code  although that only makes sense if you aren t using all of the code all the time

User · Answer

As a rule of thumb  the best place to put  lt script gt  tags is the bottom of the page  just before  lt  body gt  tag  Something like this    lt html gt       lt head gt           lt title gt My awesome page lt  title gt            lt  -- CSS -- gt           lt link rel  stylesheet  type  text css  href       gt           lt link rel  stylesheet  type  text css  href       gt           lt link rel  stylesheet  type  text css  href       gt           lt link rel  stylesheet  type  text css  href       gt        lt  head gt       lt body gt           lt  -- Content content content -- gt            lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt           lt script type  text javascript  src       gt  lt  script gt           lt script type  text javascript  src       gt  lt  script gt           lt script type  text javascript  src       gt  lt  script gt       lt  body gt   lt  html gt    Why      The problem caused by scripts is that they block parallel downloads  The HTTP 1 1 specification suggests that browsers download no more than two components in parallel per hostname  If you serve your images from multiple hostnames  you can get more than two downloads to occur in parallel  While a script is downloading  however  the browser won t start any other downloads  even on different hostnames  More      CSS  A little bit off-topic  but    Put stylesheets at the top      While researching performance at Yahoo   we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster  This is because putting stylesheets in the HEAD allows the page to render progressively  More      Further reading  Yahoo have released a really cool guide that lists best practices to speed up a website  Definitely worth reading  https   developer yahoo com performance rules html

User · Answer

With 100k of Javascript  you should never put it inside the file  Use an external script Javascript file  There s no chance in hell you ll only ever use this amount of code in only one HTML page  Likely you re asking where you should load the Javascript file  for this you ve received satisfactory answers already   But I d like to point out that commonly  modern browsers accept gzipped Javascript files  Just gzip the x js file to x js gz  and point to that in the src attribute  It doesn t work on the local filesystem  you need a webserver for it to work  But the savings in transferred bytes can be enormous   I ve successfully tested it in Firefox 3  MSIE 7  Opera 9  and Google Chrome  It apparently doesn t work this way in Safari 3   For more info  see this blog post  and another very ancient page that nevertheless is useful because it points out that the webserver can detect whether a browser can accept gzipped Javascript  or not  If your server side can dynamically choose to send the gzipped or the plain text  you can make the page usable in all web browsers

User · Answer

The answer is depends how you are using the objects of javascript  As already pointed loading the javascript files at footer rather than header certainly improves the performance but care should be taken that the objects which are used are initialized later than they are loaded at footer  One more way is load the  js  files placed in folder which will be available to all the files

User · Answer

The answer is depends how you are using the objects of javascript  As already pointed loading the javascript files at footer rather than header certainly improves the performance but care should be taken that the objects which are used are initialized later than they are loaded at footer  One more way is load the  js  files placed in folder which will be available to all the files

User · Answer

Using cuzillion you can test the affect on page load of different placement of script tags using different methods  inline  external   HTML tags    document write    JS DOM element    iframe   and  XHR eval   See the help for an explanation of the differences  It can also test stylesheets  images and iframes

User · Answer

The answer is depends how you are using the objects of javascript  As already pointed loading the javascript files at footer rather than header certainly improves the performance but care should be taken that the objects which are used are initialized later than they are loaded at footer  One more way is load the  js  files placed in folder which will be available to all the files

User · Answer

With 100k of Javascript  you should never put it inside the file  Use an external script Javascript file  There s no chance in hell you ll only ever use this amount of code in only one HTML page  Likely you re asking where you should load the Javascript file  for this you ve received satisfactory answers already   But I d like to point out that commonly  modern browsers accept gzipped Javascript files  Just gzip the x js file to x js gz  and point to that in the src attribute  It doesn t work on the local filesystem  you need a webserver for it to work  But the savings in transferred bytes can be enormous   I ve successfully tested it in Firefox 3  MSIE 7  Opera 9  and Google Chrome  It apparently doesn t work this way in Safari 3   For more info  see this blog post  and another very ancient page that nevertheless is useful because it points out that the webserver can detect whether a browser can accept gzipped Javascript  or not  If your server side can dynamically choose to send the gzipped or the plain text  you can make the page usable in all web browsers

User · Answer

Putting the javascript at the top would seem neater  but functionally  its better to go after the HTML   That way  your javascript won t run and try to reference HTML elements before they are loaded   This sort of problem often only becomes apparent when you load the page over an actual internet connection  especially a slow one   You could also try to dynamically load the javascript by adding a header element from other javascript code  although that only makes sense if you aren t using all of the code all the time

User · Answer

Your javascript links can got either in the head or at the end of the body tag  it is true that performance improves by putting the link at the end of your body tag  but unless performance is an issue  placing them in the head is nicer for people to read and you know where the links are located and can reference them easier

User · Answer

I would say that it depends of fact what do you planed to achieve with Javascript code    if you planned to insert external your JS script s   then the best place is in head of the page  if you planed to use pages on   smartphones  then bottom of page  just before  tag  but  if you planned to make combination HTML and JS  dynamically created and    populated HTML table  for example  then you must put it where you    need it there

User · Answer

The best place for it is just before you need it and no sooner.

Also, depending on your users' physical location, using a service like Amazon's S3 service may help users download it from a server physically closer to them than your server.

Is your js script a commonly used lib like jQuery or prototype? If so, there are a number of companies, like Google and Yahoo, that have tools to provide these files for you on a distributed network.

User · Answer

Using cuzillion you can test the affect on page load of different placement of script tags using different methods  inline  external   HTML tags    document write    JS DOM element    iframe   and  XHR eval   See the help for an explanation of the differences  It can also test stylesheets  images and iframes

User · Answer

I would say that it depends of fact what do you planed to achieve with Javascript code    if you planned to insert external your JS script s   then the best place is in head of the page  if you planed to use pages on   smartphones  then bottom of page  just before  tag  but  if you planned to make combination HTML and JS  dynamically created and    populated HTML table  for example  then you must put it where you    need it there

User · Answer

Like others have said  it should most likely go in an external file  I prefer to include such files at the end of the  lt head   gt   This method is more human friendly than machine friendly  but that way I always know where the JS is  It is just not as readable to include script files anywhere else  imho    I you really need to squeeze out every last ms then you probably should do what Yahoo says

User · Answer

The scripts should be included at the end of the body tag because this way the HTML will be parsed by the browser and displayed before the scripts are loaded

User · Answer

Putting the javascript at the top would seem neater  but functionally  its better to go after the HTML   That way  your javascript won t run and try to reference HTML elements before they are loaded   This sort of problem often only becomes apparent when you load the page over an actual internet connection  especially a slow one   You could also try to dynamically load the javascript by adding a header element from other javascript code  although that only makes sense if you aren t using all of the code all the time

User · Answer

Putting the javascript at the top would seem neater  but functionally  its better to go after the HTML   That way  your javascript won t run and try to reference HTML elements before they are loaded   This sort of problem often only becomes apparent when you load the page over an actual internet connection  especially a slow one   You could also try to dynamically load the javascript by adding a header element from other javascript code  although that only makes sense if you aren t using all of the code all the time

User · Answer

The answer to the question depends  There are 2 scenarios in this situation and you ll need to make a choice based on your appropriate scenario   Scenario 1 - Critical script   Must needed script  In case the script you are using is important to load the website  it is recommended to be placed at the top of your HTML document i e   lt head gt   Some examples include - application code  bootstrap  fonts  etc   Scenario 2 - Less important   analytics scripts  There are also scripts used which do not affect the website s view  Such scripts are recommended to be loaded after all the important segments are loaded  And the answer to that will be bottom of the document i e  bottom of your  lt body gt  before the closing tag  Some examples include - Google analytics  hotjar  etc   Bonus - async   defer  You can also tell the browsers that the script loading can be done simultaneously with others and can be loaded based on the browser s choice using a defer   async argument in the script code   eg   lt script async src  script js  gt  lt  script gt

User · Answer

Your javascript links can got either in the head or at the end of the body tag  it is true that performance improves by putting the link at the end of your body tag  but unless performance is an issue  placing them in the head is nicer for people to read and you know where the links are located and can reference them easier

User · Answer

The answer to the question depends  There are 2 scenarios in this situation and you ll need to make a choice based on your appropriate scenario   Scenario 1 - Critical script   Must needed script  In case the script you are using is important to load the website  it is recommended to be placed at the top of your HTML document i e   lt head gt   Some examples include - application code  bootstrap  fonts  etc   Scenario 2 - Less important   analytics scripts  There are also scripts used which do not affect the website s view  Such scripts are recommended to be loaded after all the important segments are loaded  And the answer to that will be bottom of the document i e  bottom of your  lt body gt  before the closing tag  Some examples include - Google analytics  hotjar  etc   Bonus - async   defer  You can also tell the browsers that the script loading can be done simultaneously with others and can be loaded based on the browser s choice using a defer   async argument in the script code   eg   lt script async src  script js  gt  lt  script gt

User · Answer

Like others have said  it should most likely go in an external file  I prefer to include such files at the end of the  lt head   gt   This method is more human friendly than machine friendly  but that way I always know where the JS is  It is just not as readable to include script files anywhere else  imho    I you really need to squeeze out every last ms then you probably should do what Yahoo says

User · Answer

The best place for it is just before you need it and no sooner.

Also, depending on your users' physical location, using a service like Amazon's S3 service may help users download it from a server physically closer to them than your server.

Is your js script a commonly used lib like jQuery or prototype? If so, there are a number of companies, like Google and Yahoo, that have tools to provide these files for you on a distributed network.

User · Answer

Using cuzillion you can test the affect on page load of different placement of script tags using different methods  inline  external   HTML tags    document write    JS DOM element    iframe   and  XHR eval   See the help for an explanation of the differences  It can also test stylesheets  images and iframes

[javascript] Where to place JavaScript in an HTML file?

Examples related to javascript

Examples related to html

Examples related to optimization