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 all the written script into single JS file, and similarly CSS styles into single CSS file.
Combine the background image in one file, and use it with its background-position
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.
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
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.