Client Side optimization

Published:
Updated:
If I have to fix slow responding website my first thoughts are server side optimizations: the database may not be optimized or caching is not enabled, or things like that. We often overlook another major part of our web application: the client. We often ignore this area, but it has major impact on performance of a website. So before jumping into optimization we need to know how things are processed by the browser.

Web pages utilize a lot of resources; they can contain images, JavaScript and CSS files, Flash and much more. For each individual resource there is a separate request from the browser to the server -- and requests cost time. Each request has two phases, the time required making connection to the server and making the request, and the actual time it takes to send the resource and download it to the broswer.

Each additional image or file is slowing is your website. Browsers should download these resources in parallel, but there is limit to how many concurrent connections a browser can make to your website at a given time. The typical modern browser can have six to eight connections to a domain. This means that no more than eight parallel request will be made to your website by browser. If your page needs more resources, the browser will have to wait for previous requests to be completed before it makes the requests for other resource; until then, they are queued and compete for connections to the server. Moreover some resources depend on other resources -- for example, a JavaScript requiring another JavaScript file. If you take this into account, you can see that this limit can greatly affect performance.
 
Open the developer tool of your browser (F12) and go to the Networks tab, and browse to a page of any website. You will see something like following.

27f077c.pngFirst the browser tries to get the HTML of the page (the first request listed). Once it has the HTML, the browser knows all of the resources required to render this page correctly. After the HTML, the browser starts downloading the resources. In this case for 3.5 seconds it had to wait just to get the HTML. After that there are several parallel requests to the server for the resources. A little later you will see something like
011590c.pngIf you look at the later request, those resources are needed, but they were queued until the previous resources were all downloaded. Once the page load is complete, you will find every image, style sheet and JavaScript file required by the page. At the bottom of the Network tab you will find a summary of all requests.
0b04615.png
The browser made 54 requests to just display one page and it took 5.93 seconds. Now, we know what is bad, so we can look for solutions:
  • Reduce the number of requests.
  • Minimize the data required to fulfill the requests.
These are some of the things you can do:
  • Optimize HTML: Remove white space wherever possible, including comments and unused tags
  • Bundling: All the resources listed in the Network tab are necessary. We can't remove the resources, but we can combine them. This reduces the number of requests. Several JavaScript and CSS files can be combined into a single file for JavaScript and single file for the styles. It is true that this will be a bigger file, but that will download faster than several requests.
  • Minification: This removes extra white spaces and comments from a file. You should also rename variable to use short names. This drastically reduces size of files.
    137f8a7.pngwill be something like
    2465acc.pngLook at Bundling and minification, JsCompress and CleanCSS for more information.
  • Customize Header Expiry/Caching: Most developers know about caching on the server, but you can also control what is cached on the client side. Caching Images and other static resource is generally a good idea.
    2dc8157.pngThis applies to a particular page response.
  • Get static resources off your server: Host your static resources on other server than the website server. If possible use content delivery networks (CDN).

    A content delivery network or content distribution network is a system of computers containing copies of data, placed at various points in a network so as to maximize bandwidth for access to the data from clients throughout the network. A client accesses a copy of the data near to the client, as opposed to all clients accessing the same central server, so as to avoid bottleneck near that server. For example, using Jquery https://code.jquery.com/jquery-2.1.3.min.js you can use CDNs for all of static content.
  • Optimize images: The images used can reduce lot of kilobytes if properly optimized. This technique is very useful and is definitely a must for websites having lot of high resolution images. You should not scale down a bigger image where small image is needed; use a smaller image instead. Steelbytes works well for the novice designer, but for designers PNG optimization techniques can be of immense value.
Once you are done with the changes these are a few online tools that can tell you what can be further optimized; a handy one is Google's PageSpeed.

Explore these options and checkout the difference!
1
1,590 Views

Comments (0)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.