Bike Movers - How do they move a couch??? Courtesy of richardmasoner via Flickr
Anyone who has become impatient with a microwave certainly isn’t going to wait forever for a web page to load. Especially now that most people are either using DSL or Broadband. On the flip side websites have gained more overhead with increased user functionality with the advent of Web 2.0 and beyond. So the gains in user download speed from faster Internet providers have been tempered. Couple that with Google’s new algorithm Caffeine now counting site download speed as a major factor. Website back end work is even more important to SEO than ever. One of the ways to reduce overhead and give the appearance of speed is to move your scripts to the bottom of the page.
Seems easy enough??? I finally figured this one out after being totally confused by a script that works in the header breaking the entire website in the footer. Arrrrrrggh! Then I read Yahoo’s Developer Best Practices page again. This time I had a light bulb come on 🙂
Put Scripts at the Bottom
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.
In some situations it’s not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page’s content, it can’t be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn’t support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
http://developer.yahoo.com/performance/rules.html
Read the bold text. Both of the scripts I was trying to move used the document.write command. Since I am not a fan of any work around that Firefox has not adopted (Yet IE has… suspicious). I have been victimized like many other web developers by IE 6 which absolutely refused to adhere to any standard. Honestly, the secret to making a menu dropdown in IE 6 was not just using the Holly Hack for the SuckerFish CSS method. There was a point the only way you could get IE to display a dropdown menu correctly was to …. Declare the DocType. Yes, the DocType! Any would work.
Anyhoo, my point is that if moving your JavaScript to the footer is breaking the entire page look to other methods to speed up and compress the site. Play with the DEFER command when you have time to play.
If you are running a WordPress website you can download and use the JavaScript to Footer plugin. If your code is clean and properly formed no need to play with the DEFER command.
it was very interesting to read
Think of how retarded the average person is, and realize half of them are stupider than that.