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

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.