HTML & Javascript performance

Question

I have a website, that is slow-ish. The server responds in around 2 - 300 ms at each request, but it takes 1.5 - 2 seconds for the page to be ready in the browser.

By experimenting with disabling javascript and CSS, I have determined that it is the browser's processing, that takes the majority of time.

Using Firebug, I see that the DOMContentLoaded event seems to fire after around 0.5 to 1 second after data is received from the server, and the "load" event fires after another half second.

Using Firebug's profiler, I see that javascript execution takes around 250 ms.

So, my questions are:

• What does the browser do in the remaining time, when Javascript execution takes 250 ms, but it takes a second before the page is ready ?
• What happens between DOMContentLoaded and load events
• What would be the best approach for me to performance-optimize the client side of such a page ?

Answer 1

To improve performance you could try using a Javascript code minimizer (see for example here: http://geekswithblogs.net/lbugnion/archive/2007/02/23/107120.aspx), anyway altough useful, I don't think you will get a dramatic speed improvement from this.

Answer 2

Not only loading, but page rendering takes time.

There are a lot of things you can do to optimize performance, you may use tools such as YSlow and PageSpeed to analyze the page further and determine what might be worth doing.

Do also take a look at the rules Steve Souders outlined in his book High Performance Web Sites:

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put Stylesheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make AJAX Cacheable

There is also a follow-up book called Even Faster Web Sites. You also find many of the tips in the books posted on his blog.

Another useful resource is Yahoo's Best Practices for Speeding Up Your Web Site.

Answer 3

This is a very broad question. There are entire books addressing client-side rendering performance. But in general,

• you want to make as few http requests as possible. merge all javascript into one file, all css into one, and as many images as possible into one (see spriteme)
• you want to make these requests as small as possible. minify and gzip your scripts. add a content-expires header set to a far-future date for static content
• there are public CDN's such as from google, that allow you to hotlink common scripts, such as the jQuery library, to google's servers. This means a lot of visitors will already have these files cached
• execution of javascript is usually a big bottleneck. you want to defer as much of your script load as possible. your css should always be included in your header, but a lot of your javascript can be included at the bottom of the page. in these cases, the page will show up quickly, eventhough there'll be a delay before DOMReady fires

As for the delay between DOMReady and page load events, this is where images (and potentially videos) are loaded, and possibly javascrpit is being executed.

Checkout the addon YSlow for Firebug.