“The results indicate that web pages that were downloaded faster were perceived to be more interesting than the slower ones.”

Another conclusion from the same study: “The results show that satisfaction decreases with increases in response time.”

The latter quote does not only apply for web pages, but also for desktop applications or mobile apps. The thing you should remember here is that performance is a huge factor of an excellent user experience, and this is also the responsibility of the developer. In this chapter, we will look at common techniques on how to speed up a website.

Just last week I wrote a short article on system response times, and the conclusion is that users are demanding highly responsive applications. This article contains a few tips & tricks that can help you speed up your web application. Note that tools like Google PageSpeed will also help you dictate these techniques that first appeared in the book written by former Chief Performance Yahoo! Steve Souders.

Use fewer HTTP requests

Using fewer HTTP requests will speed up a website. Every request requires to setup a connection and your browser only allows for a limited number of connections to the same server at the same time (at the time of writing this is 2 for IE). There are a number of techniques that are reasonably easy to apply in modern programming environments.

• Combine JavaScript
• Combine style sheets
• Combine HTML templates (primarily for Angular type applications)
• Combine Images (CSS Sprites). Note that Data URLs do not perform well on mobile platforms, and CSS sprites are still preferred

Modern web development tools will do all the work for you. Use the right tools for the job and make sure you can trigger combining all these files with a single command for your release configuration.

Use Content Delivery Networks

Because of the limitation in the browser to have a limited number of open connections to the same server, a Content Delivery Network (CDN) can be used in order to download more data in parallel on the browser. Besides the fact that it already releases load on the original web server, and it can run in parallel,  it also has the benefit that if the client already has downloaded the same file (for instance a popular library like JQuery), the browser already loads it from its cache.

Leverage Caching

Every HTTP request contains headers for cache-control. One of these headers is “Expires”. For a resource, like an image or CSS that does not change very often, it is advised to add this header. If the header is set, the browser will cache the data, and only request again for it when the cache expires. It may be very easy to overlook – do not forget to also cache your Ajax requests.

Use Compression

Almost all modern browsers accept compressed data, they will indicate this in their request headers. In modern web servers it is easy to configure this, so with no extra code this feature can be enabled. It is generally worth compressing files greater than 1 or 2K, which is almost any file that would be downloaded. Using compression can give a performance increase because it will make the page download faster. The average response size will be 66% lower.

Ensure progressive rendering

Many browsers perform progressive rendering and request documents based on the order in the HTML. When the style sheet is loaded last, the page will only be shown to the user at this stage. The logic behind this is obviously that a page cannot be shown without the proper style rules being present. Progressive rendering means that the browser will show the parts of the page that has already been downloaded – this will give the user the impression that the page is faster, and, therefore, the page will be perceived as more interesting. To ensure progressive rendering place scripts in the bottom of the HTML and CSS on top. Also avoid CSS expressions.

Reduce DNS lookups by using Keep-Alive and fewer domains

Split components across at least 2 but a maximum of 4 hostnames, to use proper parallel downloads, and reducing the DNS lookups. Make sure that the server supports Keep-Alive.

Minify JavaScript, CSS and HTML templates

Although we already use combine all these files and have compression enabled, also make sure to minify them. This can reduce all the overall data transfer by another 20%.

Avoid Redirects

A redirect causes another request to be executed. This leads to the extra processing time for the CPU and extra waiting time for the user. One of the most common mistakes made is that a missing forward slash in the URL

Remove Duplicate Scripts

Although it may seem obvious, on large projects it is difficult to avoid that a developer will include a script on a page that has already been loaded at a higher level—just to make sure it is there, as his/her code relies on it. Although the browser will not download the script twice—as it knows it loaded the script already—all JavaScript will be parsed twice, which obviously leads to a performance decrease.

Although these performance tips have been listed years ago, they are still considered best practice today. If I am missing any important web performance techniques please add it to the comments!