HTML & JavaScript performance

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开发者_Python百科 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 ?

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.

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.

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.

Adding to the previous answers, dont include all the Javascript files in the header itself.... This will just delay the DOM loading. Split the files before including and include it near the respective element in the body on which it is going to act.

Ofcourse you could include the minified version of JS libraries in the header.

Usage of Closure methods for variable scoping in javascript... and also usage of minimum number of global variables does matter for inc in preformance.

And use google's closure compiler or something similar to minify your js.