Optimizing web page load time

Idea

Developers spend lot of time optimizing performance of web servers. There are many good reasons for doing this, such as fewer servers in a data center and lower probability of overloading those servers. However, the benefits of web server optimization are often negligible for the user experience. Surprisingly, it might take as little as 10% of the total page load time to download the HTML document that is generated on the fly by the web servers.

So what happens in the remaining time? The browsers spend it downloading static files: CSS files, JavaScript files and images. The browsers also need to execute the code in the JavaScript files. While JavaScript is executed, other files are not being downloaded.

The typical issues impacting the performance are:

• JavaScript code and CSS rules are split into multiple small files.
• JavaScript code is executed before the browser displays anything on the screen.
• JavaScript gets downloaded before the CSS files.
• The browser needs to download too many images.

First step in optimization is to minimize the number of HTTP requests. These simple tips can easily reduce the load time by 50%:

• Merge all CSS files into a single file.
• Merge all JavaScript file into a single file.
• Use spriting to merge multiple images referenced by CSS into one image.

Users expect to see something on the screen as quickly as possible. If they need to wait too long, they are likely go to another web site (temporarily or never comes back). The content shown first should be the content that users are most interested in. Other content, such as ads can be loaded later.

• Execute JavaScript after loading the CSS files.
• If possible, execute the JavaScript only after the page has been loaded.

Most helpful tools in getting insight into page load times are YSlow and Page Speed. They also give you useful hints how to improve page load performance.

References

If you want to better understand issues related to load time optimization, these two books by Steve Sounders provide valuable information: High Performance Web Sites: Essential Knowledge for Front-End Engineers
and Even Faster Web Sites: Performance Best Practices for Web Developers.
It is also interesting to see what optimizations Google uses in JavaScript compiled by Google Web Toolkit in order to decrease page load times. Watch the video at Measure in Milliseconds: Performance Tips for Google Web Toolkit