The main objective of the article is to discuss how and where we can optimize the website performance.
Introduction
In my previous article, we looked into the importance of optimizing the website performance and its impacts. In this article, we are going to look into how and where we can optimize the website performance.
Background
It may seem to be a challenging task thinking about where and how we can optimize the website performance.
In order to simplify this challenging task, let me describe a simple example to correlate the scenario: a student preparation strategy for India’s most prestigious exam IIT. In order to qualify the exam he has to overcome lot of hurdles.
Below mentioned are few steps that a student follows to gear himself towards the main exam.
- To understand his current position, he undergoes through some mock tests.
- From the assessment results, he knows which areas to focus on.
- He then works hard on those areas and strengthen his skills.
- He again goes through the assessment tests.
The above steps are shown in the figure 1 and are repeated by the student until he is ready and confident enough to crack the main exam.
Figure 1 (By Sachin Kumaraswamy)
Ok now let us focus with same thoughts and ideas for optimizing the website performance. The overall process of improving the website performance can be divided into four steps as shown in the figure 2.
The four steps are as mentioned below:
- Profile the website, analyzing it will help us to understand what are the areas of the website impacted by the performance issues why they are there.
- Identify appropriate techniques, learning, best practices what best suits the situation and how we can enhance the website’s speed.
- Implement the changes, having determined which techniques will best suit the website.
- Keep on monitoring the site, checking for any signs of decreased speed.
Figure 2 (By Sachin Kumaraswamy)
The above four steps can be applied to any website, irrespective of the technology and rules used to build the application which will help us to realize the performance details.
A website keeps on evolving and grows big as the business expands. The four steps described above can be used as reference in case we are stuck at some point or not sure what to do as next step to improve the website performance.
Let us discuss the four steps in details step by step:
Profile
There are already some free tools readily available which can leveraged to profile the website. For example the link http://www.1stwebdesigner.com/freebies/tools-profiling-websites-speed/ has many tools listed. These tools are smart enough and help us to get great insight of details. Based on the details, we can know which areas to focus on to improve the website performance. Before implementing the changes it is necessary for us to take a snapshot of the current status of the website’s performance which will help us to see and compare how the improvements that we apply will affect the site. In short it will give a detailed picture of before and after implementation of the changes. The snapshot can also be used as benchmark for the future. The comparison view containing the optimized results vs. the original results will be very helpful. This data can also shared across other members of the team as reference material to justify the approach and time we are spending on optimizing the website performance.
Identify
Based on the profiling results we can now know the affected areas of the application which needs to be improved. Over the time with more and more usage of the tools we can easily identify the areas that need to be optimized.
Implement
In this step we have to implement the code changes based on the suggestions and best practices to the website.
Monitor
In this step we will be monitoring the website. Once all the code changes are implemented and deployed to the server, the site should be stable and highly optimized. In due course of time as the business expands the application size grows and this can lead to the possible chances of degradation in website performance. Hence by keeping a constant eye on the site with appropriate monitoring mechanism we will be able to track the performance of the site.
We need to apply the above four steps to optimize the site until the optimal performance is achieved.
Now we are clear about what we need to do in order to optimize the website performance. Ok now there are few important questions arise like: “Where to optimize? What areas we need to focus on to optimize the website? Is it the front-end or the back-end of the site we should focus on?” To answer these questions we must know where the end users are spending most of their time while browsing a page. When an end user opens a web page there are lot of resources (i.e. javascript, stylesheet, flash, html etc.) gets downloaded to the client machine.
In the figure 3 below, we can notice that the content is downloaded and the browser is parsing the HTML and they form the core part of the request. While the browser is parsing the HTML it needs to download the dependent resources like stylesheets, javascript, images, and flash components for complete rendering of the page.
Figure 3 (Reference from: http://www.httparchive.org/)
From the above figure 3, we can notice that even though the html document forms a very small percentage of the overall download compared to other components, the end users spent have to spent most of the time waiting for the other components to download.
From code and implementation changes perspective, we as backend developer always have tendency to jump on the server side code in order to optimize the website performance. This will include rearchitecting the code, database indexing. But in reality web page speed has less to do with the server-side code and more to do with the components that construct the page. Hence if we focus on these components and find better ways to improve the download time, then we can definitely make good progress towards website optimization process. We should always remember Steve Souder’s, Performance Golden Rule:
80-90% of the end-user response time is spent on the frontend.
Start there.
Based on the above rule, we should always start thinking first the best ways to optimize the front end part of the application which in turn will boost the overall performance of the application. Once the front end optimization is done, we can then focus on improvement of the server side code and database components.
Conclusion
So far we have discussed about all the performance life cycle which we can use to improve the website performance. Hope these are some helpful tips.
Thanks for Reading,