I went to look up my web site at a friend’s house recently, and I was horrified to find out how slowly my page was loading. When I got home, I decided to investigate the problem and found an interesting difference between Firefox and IE. In Firefox, my pages loaded quickly, but in IE it seemed that the entire page had to be rendered before the content was displayed.
After a bit of trial and error, I found the culprit: . sitesIRead.js was a very simple JavaScript command: document.write(‘Sites I read’);. All this does is display the phrase “Sites I read,” above the list of web pages I read in Bloglines. Now for the really geeky part: when my home page is displayed as XHTML, JavaScript is not necessarily interpreted. This means that the list of web pages is not displayed. Since I didn’t want the phrase, “Sites I read,” displayed unless the list was display, I decided to throw that phrase display into a JavaScript piece as well. (Either JavaScript works, or it doesn’t work; either the list of sites and my header display, or they don’t.)
This is already silly, and a goofy hack at that. No one is actually really using XHTML. I might as well do the entire site as HTML 4. But this is what I was doing, and I wanted to know why the page was taking so long to display.
As of this writing, the index page has over 20 images in-line. All of these images are loading from the same site as the JavaScript snippet above. It appears that Firefox will attempt to load the JavaScript page before loading the images. IE appears to load external linked objects in the order they are seen on the page. In addition, since one of the objects can change the size of the table, IE holds off rendering the entire page until the JavaScript is loaded.
So how did I fix the problem? Rather than calling a linked JavaScript page, I simply put the JavaScript inline. The JavaScript snippet now reads:
Long term solutions? Ditch XHTML and just rely on plain old HTML. It’s not clear what using XHTML has given me except for incompatibilities with older browsers. In addition, I should use a templating engine for these pages–it’s silly to republish every page from Blogger when I make a minor tweak.
nerd!