A Few Tips for Scaling Up Web Performance
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.
- The greater the number of HTTP requests, the more the time required for the page to load and its responsiveness lessens. A critical mechanism to reduce the number of HTTP requests is to reduce the number of components in the Web page. This may be achieved by combining several components. For example, all scripts can be combined, many CSS style sheets can be merged together, etc.
- Minimising the DNS lookup is another important factor in optimisation. The primary role of Domain Name Systems is the mapping of human readable domain names to IP addresses. DNS lookups generally take somewhere between 20 and 120 milliseconds. Minimising the number of unique host names will reduce the number of DNS resolution attempts.
- Reducing the redirects can increase speed. These redirects are performed with 301 and 302 status codes.
- With respect to Web 2.0 / 3.0 / 4.0 applications, caching of AJAX (Asynchronous JavaScript And XML) requests is an important step.
- The number of DOM (Document Object Model) elements should be kept under control.
Server optimisation
- Using a Content Delivery Network (CDN) can help in optimising the Web page’s performance. Geographical proximity to the user has a positive impact on the time required to fetch content.
- A cache-control header can help. If the content is static, then the expiry should be set as Never Expire. For dynamic content, the time up to when the component is valid should be set. This will minimise HTTP requests.
- Compressing the components is another great step in optimisation. This can be achieved with ‘Gzip’. Experts estimate that the compression minimises the time required for responses by 70 per cent.
- With respect to AJAX applications, the GET method is preferable. So, along with XMLHttpRequest, as far as possible use the GET method.
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:
- Size of the cookies should be kept minimal.
- Cookies should be set at the appropriate level in the domain hierarchy. This is done to reduce the impact on sub-domains.
- Don’t forget to set a proper expiry date for the cookie.
Style sheets
Professionally designed style sheets make Web pages look elegant. The following factors must be considered in handling style sheets:
- It is better to keep the style sheets in the HEAD section of the Web pages. This is done to permit the pages to render incrementally.
- Care should be taken to use expressions in CSS. Mathematical expressions in CSS are evaluated a lot more times than the developer might actually expect. Avoid them as far as possible.
- If you have to include multiple CSS files, merge them all into one file. This reduces the number of HTTP requests.
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”>
- Opt to use <link> over the @import when using CSS in a page.
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.
- If possible, move the script to the bottom of the page. This cannot be done always (for example, if your page’s critical contents are rendered through the document.write() function).
- Using external JavaScript and style sheet files will enable better caching. So, it would be better in many scenarios to put CSS and JavaScript through the external mode.
- Minifying and Obfuscation are two effective mechanisms to improve the performance by tweaking the code. One survey indicates that obfuscation can achieve a 25 per cent reduction in size.
- Crowding of events needs to be avoided. Delegating events properly improves the performance of the page.
- The usage of async (asynchronous) must be encouraged, as shown below:
<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:
- Scaling down of images using HTML tags should be avoided. There is no point in using a bigger image and resizing it using the width and height attributes of the <img> tag.
- When using Data URI, the contents can be given in inline mode. This can be done for smaller sized images.
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’); }
- Images generally contain data that are not required in Web usage. For example, the EXIF metadata can be stripped before uploading to the server.
- There are many tools to help you optimise images, such as TinyPNG, Compressor.io, etc. There are command line based tools also, such as jpegtran, imgopt, etc.
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:
- JSPerf
- Benchmark.js
- JSlitmus
- Matcha
- Memory-stats.js
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:
- HTMLCompressor
- HTMLMinifier
- HTML_press
- Minimize
Some of the tools used for Minifying JavaScript and CSS are listed below:
- Uglifyjs2
- CSSmin.js
- Clean-css
- JShrink
- JSCompress
- YUI Compressor
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.
