Some basic techniques to increase the website performance

In this competitive world, every company (brand) is trying to prove themselves different from others, where UX people are playing a good role by evaluating the market, competitors, and users. An application with great user experience have lots of study and research behind it. But is it sufficient, that an application have great user experience? Does loading speed matters? Does loading speed impact on the user experience?

Loading speed matters, and it impact on the user experience

No matter, how great a user experience is; if the web page loading speed is not taken care it’s worthless. Improving the web page loading speed is the major part of user experience. Web page speed is the gateway for the user. If a web page perform poorly, user will not even have a look at the page, and move to some other app. All efforts of research, usability and visual design will be useless.

Fast web experience is the key

Every website deserve fast web experience. But it’s depend on the requirement, at what level and at what extent, the page loading speed matter for the website. If you are going to create a next amazon site, every microsecond delay can snatch the money from table. Speed optimization is very subjective as there are many aspects to take care. Research done by the UX guys can be used as a tool, to identify the level of page loading speed optimization. Here are some very basic techniques that should be taken care in every websites.

Minimize HTTP requests

Reducing the HTTP request is the place to start, that optimize the page speed. Every request impact on the page performance. Components used in the page: stylesheet, script, images etc. are the essential and basic blocks of a page, that cannot be bypass. But if these blocks are used carefully, can improve the page performance.

Combine files

Combine all the written script into single JS file, and similarly CSS styles into single CSS file.

CSS Sprites

Combine the background image in one file, and use it with its background-position

Minify JavaScript and CSS

JavaScript and CSS files contains unnecessary character and unneeded white spaces. When these files are minified, it remove all the comments and white spaces that reduces the file size and improve the performance. JSMin and YUI Compressor tools are used to minify the JavaScript code.

Put CSS in the document head

Inline style and external stylesheet in body, hit the performance, as inline style causes the reflows and external style in the body, block rendering a web page. By putting CSS at the head, page render progressively, that display the page as soon as possible, and user receive the visual feedback early, even if using the slower connection.

Put script at the bottom

Script at top block the progressive rendering and the parallel download. While the script file is downloading, the browser won’t start any other downloads, even on different hostnames. So, it’s better to put script at the bottom.

Inline CSS and JavaScript block the page from getting any more resources

Optimize images

Most of the time time images are most heavy element in the page, and designer will never compromise to deteriorate the quality of the image. But there are tools that optimize the image by stripping unnecessary data from the file and still non-lossy. JPEGmini, PNGcrush, SmushIt, TinyPNG

In responsive web design, Images are downloaded even if hiding through display: none and visibility: hidden, load them as background in CSS and use media query to hide

Reduce the DOM elements

High number of DOM elements means slower DOM access in JavaScript, and more bytes to download. Semantic and correct way of markup can reduce the DOM elements, that in turns improve the page performance.

How to test website performance

Apart from the above given basic techniques, there are many to take care. Even selectors in CSS impact on the website performance. There are three great tools ( Yslow, google page speed, GTmetrix ) that can be used not only to test website performance, but also to explore it more.