Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to order <script> tags vs. <style> tags in HTML markup for best results

I'm building up my site over at http://royronalds.com, and I'm trying to figure out what order of elements in the <head> makes most sense. Just to take from what I currently have, I have:

  • <head>
  • <style> external stylesheet
  • <meta>
  • <title>
  • <link> to favicon
  • <script> for jQuery
  • <script> main javascript for site
  • <script> google analytics, asynchronous script.
  • </head>

Are there reasons to order these differently so that load times and other issues happen more smoothly, and if so, what would the ideal order be?

like image 347
Kzqai Avatar asked Mar 30 '10 21:03

Kzqai


1 Answers

Modern browsers wait with any sort of rendering until the entire <head> section is retrieved (including the files linked within it). The order therefore doesn't matter for performance. For Javascript, the order of the files is the order of execution. For stylesheets, the order determines precedence (the rule that was defined last has precedence if all other things are equal).

If you want to optimise client performance, it is strongly advisable to move your Javascript includes to the very end of the <body> element, instead of putting them in the <head> at all. There are more considerations, Yahoo's list of optimisations is well worth your time to read through. Google has some good advice as well.

like image 116
molf Avatar answered Sep 27 '22 22:09

molf