Exceptional Performance: Styles Up, Scripts Down

This is the first post in a series about improving website performance.

Here's a simple tip that can significantly speed up your website loading time in the eyes of your visitors. Since HTML defines the structure of your page and CSS defines how your website is presented, modern browsers hang onto your content until you tell them how it should be displayed. This behavior is called progressive rendering.

Blocked rendering versus progressive rendering.

Progressive rendering makes for a more responsive user experience.

If you use style tags throughout your page, or include external stylesheets in your page body, most browsers avoid rendering until those styles are parsed. IE may avoid rendering entirely, leaving your users to stare at a blank white page until everything is done loading. Declaring all of your styles at the top of the page ensures that the browser can take full advantage of progressive rendering and display content immediately. The HTML specification confirms that all <link> tags should be within the document head.

JavaScript, on the other hand, should be saved until the very end of the page whenever possible. When a browser comes across a script tag, it waits until that entire script executes before moving on. Putting your scripts immediately before your closing </body> tag does two things:

All of your HTML and CSS will have already been loaded, so in your visitor's eyes, your page is "done" loading.
Your scripts can immediately start using DOM objects, and don't necessarily have to wait for the events that signify the document finished loading.

Hope that improves the speed of your website! Read more tips at Yahoo.

Tags: [html, performance, php];