ansaurus

Question

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

Answer 1

+5 A:

One thing that can have a big effect is moving <script> tags to the bottom of the page if they are not essential to the content.

For instance, I would move the google analytics <script> tag to be the last thing before the </body> tag on every page. Script tags are "blocking content", so the browser will not continue with a page render until the script has been downloaded and executed. Your main javascript and JQuery files probably can't be moved as easily depending on how you're using them, but analytics for sure can be at the bottom.

Check out the YSlow best practices for more optimization techniques.

zombat 2010-03-30 21:06:52

Asynchronous script tags like the Google Analytics asynchronous tracking snippet do not block content like normal scripts do. Please see:http://www.stevesouders.com/blog/2010/03/03/p3pc-google-analytics/

Brian 2010-04-01 14:16:41

Interesting. That's a relatively recent change to the GA code. I wasn't aware of it, thanks for the link. Most sites are probably still using the old non-asynchronous script from the sounds of it.

zombat 2010-04-01 16:34:34

Most sites do, and your comment definitely applies to the non-asynchronous GA snippet. I just wanted to point out that this question was asking about async GA.

Brian 2010-04-01 20:27:34

Answer 2

+3 A:

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.

molf 2010-03-30 21:07:34

The execution order for asynchronous scripts is not necessarily the order in which they appear on the page. It's also not necessarily advisable to put asynchronous scripts at the bottom. On many pages, putting async scripts near the top can lower the total page load time without blocking content due to increased parallelism.

Brian 2010-04-01 14:43:22

Answer 3

A:

Also consider the fact that browsers will halt javascript execution when an error occurs.

Because of this, it is very important that your javascript work on all browsers else you risk your Analytics code not executing and capturing stats...

I usually place my Google Analytics above my own code so it runs first, and if in the rare event that my code breaks or causes JS errors, I am still able to get tracking information.

my order would be:

<head>
<meta> content encoding
<title>
<link> favicon
<style> external/third-party stylesheet
<style> site stylesheet
</head>
<body>
...
<script> google analytics
<script> jQuery
<script> jQuery plugins
<script> site javascript
</body>

farinspace 2010-03-31 02:33:45

Browsers only stop script execution for the script tag where the error occurs. They will continue to execute code in other scripts. Having a broken script above the GA script will not stop tracking beacons from being sent.

Brian 2010-04-01 14:39:27

Answer 4

+1 A:

by the way, try to antispam your email address...

ie:

<SCRIPT TYPE="text/javascript">
document.write('<A HREF=' + '"mai' + 'lto:' + 'example@' + 'example' + '.fr' + '?' + 'sub' + 'ject=music'+'example'+'text">' + 'example' +'@' + 'example' +'.' + 'fr' + '</A><BR>')
</SCRIPT>

It works for me...

The HCD 2010-03-31 11:00:30

Yeah, I'll try to think of something (preferrably something more accessible) for that.

Tchalvak 2010-05-11 15:53:44

Answer 5

A:

If you are using Wordpress then you can easily use this plugin: http://wordpress.org/extend/plugins/performance-optimization-order-styles-and-javascript/ and take advantage of it.

Satya Prakash 2010-08-17 11:42:21

ansaurus

tags:

views:

answers:

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

related questions