There are many ways to improve the performance of a Web site and the strategies that optimize this performance can be organized into three types.
The first category concerns support hardware. It is obvious that improving the performance of the machine (physical or virtual) that is hosting the web site or an application can also significantly reduce the loading time of web pages. However, only large companies with direct access to the front-end machines, whether they’re placed in-house or at a colocation hosting provider, can hope to optimize the website performance by working on the support hardware. Small and medium size companies usually rely on a web hosting provider, so it is not always possible for them to choose the hardware that is right for them. They can, however, improve upon the technical features of their web hosting plan: number of processors, server RAM, bandwidth, etc.
The second category concerns the optimization of the server side scripting. Most Web applications use some sort of programming language to create dynamic web pages, with some examples being PHP, ASP, JSP etc. Once you choose the programming paradigm, the speed of the site will depend heavily on the quality of the software. Two websites using the same scripting language and a web host with same technical characteristics can significantly differ in their performance due to the architectural choices of the software. Put simply, with regard to the optimization of server side scripting, there are two factors that matter most:
- Choice of the platform.
- Skills of the development team that produces the software.
The third category concerns the material displayed on the front end like pictures, animations, content, and even the client side scripting languages.
It is extremely important to understand the difference between the quality of software server side and the client side. A Web page can be optimized from a server side, for example,by writing PHP code with an eye towards performance. An optimization of this kind results in an improved execution speed at the server side. On the contrary, optimization at the client side needs well-written JavaScript code execution.
Let’s see an example: Consider a Web page that weights 5KB on the server, written in PHP. If the code is well written, page could produce the markup sent to the client in a matter of milliseconds. If poorly written, it could take seconds to accomplish the same task .
Now let’s look at the issue from the client side. The HTML page produced at the client side contains images, content and JavaScript code. Let us assume that this page weighs 20KB. Now this 20 KB size may have a 90% contribution by images and 10% by the textual content or a 50-50% contribution by both. However, there is also a possibility that most of its contribution comes from the JavaScript code.
Now this Javascript code must have been written extremely well and would have run very fast in the browser; but the very fact that it weighs a solid 20KB will still increase the page loading time drastically. Lesson? When optimizing the performance of the client side, always give more importance to reducing weight of the code than the speed of its execution. Obviously, both the factors are partly related and not mutually exclusive, but must be measured and evaluated independently for the best results.
Now, out of the three categories mentioned above, which one can you handle most effectively? The answer most likely, is the third one; simply because:
- As discussed earlier, most of us don’t have full control over the hardware,
- And server side programming, while very crucial, is also not under full control of the person who initiates activity on the Web. For example, if we use a CMS to create a web site, then we do not hold cards on the table and cannot expect to change website performance considerably. We can only use the most recent versions of CMS and hope that they are faster than the previous ones.
So let’s discuss what we can control- the contents exposed at the front-end i.e images, textual content, JavaScript libraries etc.
Reducing Website Loading Speed by Content Optimization
All modern browsers are equipped with tools that allow you to measure the loading time of each element on the page. For example, if you use Firefox, you can install the plugin Firebug. If you use Internet Explorer, you have an analysis tool built into the browser called ‘development tools’. If you use Chrome, you have an integrated tool which you can activate by this path: Customize menu – Tools – Tools for Developers. When you open a page on our site with one of these tools of analysis, you can get very useful information on the performance of the page.Let’s consider performance analysis using Firefox’s plugin Firebug.
In the figure above you can see the detailed information about each component- its size in KB, load time in milliseconds etc. Now you can identify the heavier elements and ask yourselves if you really want to keep them on the page. If they are extremely essential, are there any alternative solutions? (see for example the use of the CDN, discussed below)
Reducing Website Loading Speed by using Content Delivery Network (CDN)
The abbreviation CDN stands for Content Delivery Network and is the hosting service of libraries and resources distributed across a network. Many developers use this system to load the JavaScript libraries from a remote server in order to conserve the bandwidth on your host. Let’s understand how it works using a concrete example, considering the jQuery library.
When we load jQuery on our website we can specify a script tag to point to the jQuery site, such as in the lib directory. This means that every time a new user comes to the site, he will have to download the library, thereby hogging bandwidth and employing a certain time. However, if the script tag was referring to the URL of a CDN, then the library would be offloaded from the host associated with that URL. And CDN services consist of a network of servers that offer the same content. This means that the user will download the library using the bandwidth of the closest available server to his geographic location, thereby significantly reducing the page load time.
Most of the companies use CDN as a personal service to distribute their content on the Web. The primary advantage of this is that even if a company has its dedicated server located in India, even those who connect from UK will be able to load its website quickly, because it will automatically download all the content from the nearest CDN server.
Modus-operandi of CDNsReducing Website Loading Speed by Optimizing the Size Of The Images
The most used formats of images on the web are probably JPEG, GIF and PNG. Depending on the type of image you can optimize performance by choosing the right size. To understand what is the best format for a certain image, we have to analyze the type of image.
- If the image contains many colors, spread in a phased manner, with detailed nuances (such as a photograph), you can decrease its size by saving it in JPEG format.
- If the image is simpler, i.e. made up of bars, charts, graphs or symbols with a few well-defined colors and no gradients, then should use PNG format.
In case of doubt you can do a simple test: save the image in both formats and compare the size, keeping an eye on the quality of the result. If the quality remains almost unchanged to the naked eye, but the size is greatly reduced, probably you should use the lightweight format, i.e. JPEG. If the dimensions are similar, or if the quality of the compressed format is insufficient, then you should choose the richer format (PNG or GIF).
In the next part of this article, I’ll discuss in detail about optimizing content published on the front end.
Was this guide helpful? Have I missed something? Please share in the comments section below.
