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.
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
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.