
We use cookies to help provide you with the best possible online experience. By using this site, you agree that we may store and access cookies on your device. You can find out more and set your own preferences here
We use cookies to help provide you with the best possible online experience. By using this site, you agree that we may store and access cookies on your device. You can find out more and set your own preferences here
28 November, 2017
Every millisecond counts when it comes to loading Web pages and their responsiveness. It has become critical to optimise the performance of Web applications/pages to retain existing visitors and bring in new customers. If you are eager to explore the world of Web optimisation, then this article is the right place to start.
The World Wide Web has evolved into the primary channel to access both information and services in the digital era. Though network speed has increased many times over, it is still very important to follow best practices when designing and developing Web pages to provide optimal user experiences. Visitors of Web pages/applications expect the page to load as quickly as possible, irrespective of the speed of their network or the capability of their device.
Along with quick loading, another important parameter is to make Web applications more responsive. If a page doesn’t meet these two criteria, then users generally move out of it and look for better alternatives. So, both from the technical and economical perspectives, it becomes very important to optimise the responsiveness of Web pages.
Optimisation cannot be thought of just as an add-on after completing the design of the page. If certain optimisation practices are followed during each stage of Web page development, these will certainly result in a better performance. This article explores some of these best practices to optimise the performance of the Web page/application.
Web page optimisation is an active research domain in which there are contributions from so many research groups. An easy-to-use Web resource to start with the optimisation of Web pages is provided by Yahoo (https://developer.yahoo.com/performance/rules.html). There are other informative resources, too, such as BrowserDiet (https://browserdiet.com/en/#html). Various other factors that contribute to Web page optimisation are shown in Figure
Content optimisation
When responding to end user requests, the most time is taken up by the downloading of components such as images, scripts, Flash and style sheets.
Server optimisation
Cookies
Cookies are one of the most used mechanisms by Web developers to store tiny pieces of information. With respect to cookies, the following factors should be considered:
Style sheets
Professionally designed style sheets make Web pages look elegant. The following factors must be considered in handling style sheets:
For example, instead of the following code…
<link rel=”stylesheet” href=”1.css” media=”all”> <link rel=”stylesheet” href=”2.css” media=”all”> <link rel=”stylesheet” href=”3.css” media=”all”> <link rel=”stylesheet” href=”4.css” media=”all”> <link rel=”stylesheet” href=”5.css” media=”all”>
…use the command given below:
<link rel=”stylesheet” href=”complete.css” media=”all”>
JavaScript
JavaScript has become the de-facto client-side scripting language. So the way in which JavaScript components are built does have a significant impact on the performance of Web pages.
<script async src=”example.js”></script>
If you don’t use the aysnc keyword then the page has to wait till the example.js is fully downloaded. The aysnc keyword makes page parsing happen even before the downloading of the script is completed. Once the script is downloaded, it is activated. However, when using multiple async, the order of execution becomes a concern.
Optimising images
Images are an integral part of most Web pages. Hence, the way images are handled defines the performance of the application. The following factors should be considered:
So, instead of the following command…
.icon-test { background-image: url(‘test.png’); }
…use the code given below:
.icon-test { background-image: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1B MVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJRE FUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D’); }
Performance analysis tools
There are many tools available to analyse the performance of Web pages. Some of these tools are illustrated in above Figure
There are component-specific tools, too. For example, for benchmarking JavaScript, the following tools may be used:
For PHP, tools such as PHPench and php-bench could be harnessed.
Minifiers
As stated earlier, minifying is one of the optimisation techniques, for which there are many tools. For HTML, the following Minifiers could be tried out:
Some of the tools used for Minifying JavaScript and CSS are listed below:
Benchmarking Web servers
Benchmarking of Web servers is an important mechanism in Web page/application optimisation. Table 1 provides a sample list of tools available for benchmarking Web servers.
The Web optimisation domain is really huge. This article has just provided a few start-up pointers, using which interested developers can proceed further in understanding the advanced technicalities of the topic.