by Cory Rauch 2008-11-28 Category: Web-Performance
So you have invested in an awesome website design complete with flash animation and fancy AJAX effects. You have increased your level of hosting service to maybe even a dedicated server or cluster of servers. But you still notice a slight delay? It may look like a blank screen with the status bar showing tons of CSS and Javascript files loading then the content renders. Or it maybe where the page loads and it hangs for a while and then goes and finishes loading. Whatever it looks like, you maybe suffering from rendering speed due to the design of your site. In this article we will go over what this is and some things you can do to increase the speed of rendering on your website.
The Problem
Well, in this context we define rendering as the time it takes for the web
browser to parse your HTML, CSS, and Javascript enough to display the page (or
render the page). From a technical perspective any delay to the web browser
from it getting to the content in the <body> tag will cause a delay in
rendering. In addition, content in the <body> tag can also delay the
rendering of the entire page (where maybe a piece renders but then hangs).
There are a few reason why this may happen but I am going to cover a few
things you can do to reduce this issue.
Possible Solution(s)
Well the first solution that may seem obvious is to reduce the amount of
things that are loading in the page, and this will help but it is not always
an option. Instead you can try reducing the amount of JavaScripts loading in
the <head> tag and in exchange load them in the <body>
tag preferably near the bottom of the page. This helps in two ways. One being that the javascript is not holding up the rendering of the page by increasing the time spent in the head tag. Secondly JavaScripts block parallel downloads even on different hostnames, so loading it at the bottom after everything above has already downloaded will increase performance. Also, JavaScripts that are loading in the <body> tag should if at all possible be loaded near the bottom for the same above reasons.
Browsers in general will load assets such as images, CSS, etc in a FIFO order, where up to 2 files will download in parallel as it queues up all assets on the page. So if for example you have a huge image or other file above a bunch of other assets, the assets below will not load until the content above is loaded. Since the 2 files in parallel limitation is based on hostname (where the browser will at most download 2 files in parallel from a single hostname), you can get around the max 2 files in parallel limitation by creating subdomains for specific types of content. For example you could host each file type under a sub-domain images.yoursite.com, css.yoursite.com, and scripts.yoursite.com to enable it to download 2 files per subdomain in parallel. You may also choose to take this to another level where you have images1.yoursite.com, images2.yoursite.com, etc and you host some images under each so that all the image files load in parallel (not just 2 at a time).
You can also maximize caching, where you have etag setup for file types that do not need to be reloaded each time the page is loaded. I have covered setting these up under Apache in other articles on my site, where a htaccess file has configuration lines in it to set the expiration for content. You may choose for example to have content that does not change often at all such as logo's to have an expiration of a month or longer. Though some research has shown that as much as 40%-60% of users have empty cache when visiting a well known site so you may want to also concentrate on empty cache performance too (Caching is not a fix all).
Other ImprovedSource Articles:
Why we need a Javascript-Based Database?
PHP v5.2 vs PHP v5.1
Ubuntu Apache Performance Tip