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.
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.
First 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
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
- 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.
will be something like
Look 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.
This 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!