[thelist] Page Contruction, HTTP Connections and Page Load Time (semi long)

Tom Dell'Aringa pixelmech at yahoo.com
Mon Nov 21 13:20:33 CST 2005


I'll be brief as possible but I want to get down to the truth of this matter. In a nutshell:

Statement: A browser holds open one and only one connection while loading the contents of the
HEAD element. It cannot use multiple connections until these items have fully loaded. Thus, the
more you have in the HEAD, the worse performance you can expect.

I want to find out about the real validity of this statement. It is summarized from statements
made in an Ajax tutorial "Ajax What Is It Good For?"[1]. An excerpt follows explaining his
position:

Excerpt:
============================
 Your heaviest load times are going to be either the JavaScript itself or CSS files in the head
section. This is due to the fact that when JavaScript or CSS is being parsed by a browser it
typically just uses one connection to do so where as other elements in the body section load
through multiple connections. In short all attention is focused on parsing the JavaScript and the
other elements have to wait until the JavaScript is parsed to render.

That is why doing this sort of thing in Web pages is notoriously poor:

<script src="blah1.js" type="text/javascript">
</script>
<script src="blah2.js" type="text/javascript">
</script>
<script src="blah3.js" type="text/javascript">
</script> 

 Each of those script tags will use one connection and considerably delay the loading of a page.
Same thing goes for CSS and also links tags. You should take a long hard think about that when
developing web pages.
==============================

Having said that, his 'solution' is:

==============================
 To circumvent this we can be clever and push JavaScript files through the xmlhttprequest object
and consequently have them load asynchronously. We aren't going to get around using at least one
script tag, but if the originating script is kept minimal then our load times are going to be
reduced significantly.

In other words load only what is essential to get the web page of to a start and then load the
rest of the JavaScript components dynamically or on demand. The same would apply to CSS styles,
use minimal styles to provide backward compatibility and push the rest of the css through the
xmlhttprequest object. 
==============================

It sounds like it makes sense, I just don't know enough about HTTP to know whether it's true or
not, or half true, or whatever. It he is correct, it seems as though this would be a good
technique to improve performance. It also makes me wonder about the way some software uses LINK
tags, specifically WordPress - take a look at the HEAD tag of my own site[2] - tons of LINK tags
to archives. I have noticed that there does often seem to be a delay in my page load.

So, is there any data other than this guy's statements to back this up? If this is true, why
hasn't the "web development world" been more cognizent of this issue?

Cheers

Tom

[1] http://dhtmlnirvana.com/ajax/ajax_tutorial/#
[2] http://www.pixelmech.com/


http://www.pixelmech.com/
"I was in a convenience store reading a magazine and the clerk came up to me and said "This is not a library". so I said, "All right, I will talk louder then!"



More information about the thelist mailing list