A lot of articles have been written on website performance optimization lately but I want to share my hands-on-experience and important articles on the subject.
There are two types of performance:
- Server Performance
- Perceived Performance
Server Performance is associated with the number requests that a server can handle at a time and the time needed to process these requests. On high volume websites, since it determines the number of users a machine can serve before additional server is needed, this performance aspect is very important.
Perceived Performance is the speed of websites in visitors’ perspective. Even if the server performance is high, a site may appear slow to a visitor because of slow client-side performance.
This article focuses perceived performance tuning by supplying reasons for poor client-side performance and details out how we can achieve better client-side performance.
1. Make Fewer HTTP Requests
A dedicated team focused on quantifying and improving the performance of Yahoo! Products worldwide conducted experiments to learn more about optimizing web page performance. They discovered that popular sites spend between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to get components in the HTML document.
Each bar represents a specific component requested by the browser - Only 10% of 2.4 seconds is spent for downloading the html of Yahoo.com
Since browsers only are able to download two components on parallel per hostname, and every HTTP request has an average round-trip latency of 0.2 seconds, that causes a 2 second latency alone, if the site is loading 20 items, regardless of whether they are style sheets, images or scripts. (on an average broadband connection with a browser capable of downloading two components at a time).
Since browsers spend approximately 80% of the time fetching external components such as scripts, style sheets and images. Reducing the number of HTTP requests has the biggest impact on improving website performance. Moreover, it is the easiest way to make a performance improvement.
UPDATE How To: Minimize HTTP Requests – The Most Important Guideline for Improving Web Site Performance article focuses on ways of minimizing HTTP Requests to maximize web site performance.
2. Enforce Caching
If you examine the preferences dialog of any modern Web browser (like Internet Explorer, Safari or Mozilla), you’ll probably notice a cache setting. This lets you set a section of your computer’s hard disk to store copies of web pages, images and media for faster browsing.
This cache is especially useful when users hit the back button or click a link to see a page they’ve just looked at. Also, if navigation images throughout a site are the same, they’ll be served from browser's cache.
Internet Explorer Cache Settings
Web caching is useful for three important reasons:
- Reduce user-perceived Web-site delays,
- Reduce network bandwidth usage,
- Reduce server loads.
The Yahoo! Performance Team conducted another experiment to understand the difference between an empty cache (browser requests all the components to load the page) and full cache (most of the components are found in the disk to load the page and the HTTP requests corresponding to these components are avoided).
Loading Yahoo.com with full cache
Loading with an empty cache took 2.4 while loading with a full cache took 0.9 seconds. The full cache page view had 90% fewer HTTP requests and 83% fewer bytes to download than the empty cache page view.
3. Use HTTP Compression
The time it takes to transfer an HTTP request and response across the network can be significantly reduced by making fewer http requests. On the other hand, the end-user's bandwidth speed, Internet service providers are beyond the control of the development team. However compression reduces response times by reducing the size of the HTTP response.
In the case of HTTP compression, a standard gzip or deflate encoding method is applied to the payload of an HTTP response, significantly compressing the resource before it is transported across the web.
Bloggingdeveloper.com utilizes gzip compression. 74% bandwidth is saved by compression.
4. Increase the Number of Parallel Requests
As I mentioned earlier, browsers are able to download two or four components on parallel per hostname. So we may increase the number of parallel downloads by using additional aliases such as images.bloggingdeveloper.com. According to the results of experiments conducted by Yahoo! Performance Team, using too many hostnames increases the amount of simultaneous HTTP requests but it will also increase the amount of DNS requests which affects the performance negatively. The Performance Team mentioned a strong balance between the number of parallel HTTP requests and required DNS requests to be performed of 2 to 4 hostnames. For higher number of hostnames, you may negatively affect the performance.
5. Place StyleSheets into the Header
Web developers that care about performance want browser to load whatever content it has as soon as possible. This fact is especially important for pages with a lot of content and for users with slow Internet connections. When the browser loads the page progressively the header, the logo, the navigation components serve as visual feedback for the user.
When we place style sheets near the bottom part of the html, most browsers stop rendering to avoid redrawing elements of the page if their styles change.
6. Put Scripts to the end of Document
Unlike StyleSheets, it is better to place scripts to the end of the document. Progressive rendering is blocked until all StyleSheets have been downloaded. Scripts cause progressive rendering to stop for all content below the script until it is fully loaded. Moreover, while downloading a script, browser does not start any other component downloads, even on different hostnames.
Browser Cache Usage – Exposed! by Tenni Theurer
What the 80/20 Rule Tells Us about Reducing HTTP Requests – by Tenni Theurer
Maximizing Parallel Downloads in the Carpool Lane - by Tenni Theurer
Want automatic updates?
Subscribe to our RSS feed
Get Email Updates
sent directly to your inbox!