Comments on: Positioning CSS and JS files in HTML content http://www.megaburst.com/architecture/positioning-css-and-js-files-in-html-content/ High performance web site building Fri, 21 Nov 2008 23:18:22 +0000 http://wordpress.org/?v=2.6.1 By: mike503 http://www.megaburst.com/architecture/positioning-css-and-js-files-in-html-content/#comment-133 mike503 Tue, 08 Apr 2008 03:26:14 +0000 http://www.megaburst.com/architecture/positioning-css-and-js-files-in-html-content/#comment-133 I tried to get the best score possible using YSlow! and positioning the CSS at the top, JS at the bottom, setting appropriate gzip, expires headers, etc, etc. However, it seems that some Javascripts should still be at the top - jQuery, while it has a document.ready() and other options to wait until the page has finished loading, doesn't seem to reliably perform when it's at the bottom... especially if you have page interaction features that could be clicked/executed before the page is fully loaded. So for now, I include jQuery at the top and any other script(s) which have user interaction options (which at this point, is all 4 of them or whatever) i.e. we had a "Login" link which popped up a DHTML window layer thingy - without jQuery having the document.ready() firing yet, the link was dead (and would stay dead even after the page loaded in certain browsers) - the only way to resolve it was to reload the page and wait until it fully loaded. Have to make sure that you can anticipate users being impatient and code appropriately :) I tried to get the best score possible using YSlow! and positioning the CSS at the top, JS at the bottom, setting appropriate gzip, expires headers, etc, etc.

However, it seems that some Javascripts should still be at the top - jQuery, while it has a document.ready() and other options to wait until the page has finished loading, doesn’t seem to reliably perform when it’s at the bottom… especially if you have page interaction features that could be clicked/executed before the page is fully loaded.

So for now, I include jQuery at the top and any other script(s) which have user interaction options (which at this point, is all 4 of them or whatever)

i.e. we had a “Login” link which popped up a DHTML window layer thingy - without jQuery having the document.ready() firing yet, the link was dead (and would stay dead even after the page loaded in certain browsers) - the only way to resolve it was to reload the page and wait until it fully loaded.

Have to make sure that you can anticipate users being impatient and code appropriately :)

]]>