Fast Web UX - 1. Introduction
Hello everyone, this is Rocky DeRaze, and welcome to my new series on Fast Web UX, in which I talk about how to speed up websites for a better user experience and why we need to do that as well.
It's best to understand web performance in detail to create the best user experience for your end user. It is obvious that higher performance means better engagement from the user end.
Did you know that half of the users on an e-commerce store expect the website to load in 2 seconds? Mere 2 seconds.
It was also found that 40% of people would exit the site if it took more than 3 seconds to load. Of course the situation is different in countries with low internet speeds - but in the developed nations this is the level at which the standards exist.
A 1-second delay causes 7% reduction in users taking any sort of action. Friction of this sort creates hurdles because of a lack of smooth experience. And when this friction occurs, users get disinterested to continue.
Google has Google Adwords that allow sites to get their results right on top. But what about the rest of them? They are called as organic search results. There are a lot of factors revolving around SEO that lets a website hit the top of the list. One of those is the page speed. If your website loads fast, it is more likely to appear in the top results on the google search page.
Google Analytics is a great tool which helps thousands of websites or more. We can see a correlation between the average speed and the average rankings of the websites.
In general, for those who run blogs and news sites, organic search results are the best gateways to traffic on to your website. All of this data points to the obvious conclusion that it is important to optimize your web site for speed.
Web optimization is necessary because of the way in which web servers and the browsers on your computers communicate with each other.
What do you mean by making websites load faster? It's nothing but reducing the loading time of that website. Loading of a website is nothing but downloading of the website after the request has been made and passed on by the server. What typically happens is that a user types in a request for a web page. This request is parsed by the server, which computes what is required to be sent, and sends it. Whatever data is thus sent, is downloaded onto the computer of the user and is viewed.
To speak in geeky terms, this means that the browser sends a HTTP request, and the server responds with a HTTP response. HTTP is Hypertext Transfer Protocol.
Now these three steps of web browser sending its request, the web server finding the appropriate response to send it back, and the web browser receiving the response - the overall time spent is known as latency.
Thus to improve performance, we need to reduce the latency involved. But there is one problem with this. In general, there are a lot of requests made by a browser and a lot of responses are received in general in today's web world. If there are too many requests, the user experience takes a hit, because of slower loading times.
In HTTP/1 version - head-of-line blocking can happen. This is nothing but the problem where the web browser limits the number of requests it can make at a single time. Due to this limit, the others are put on hold, and the page loading time increases a lot.
But this problem has been solved in HTTP/2 version. The only problem is with the fact that implementation requires to happen on the web server side as well. And less than 10% of the world's web servers have implemented this.
In today's world it's more than obvious that we need quite rich visual stimulation of sorts when we visit a website. We can't afford to have a simple HTML page without any styling or a page without any functionality. This means that there is CSS involved that colors the pages and makes them beautiful, and there is JavaScript involved, that makes the websites respond to the user interaction and behave in ways that we want to. Not only that, rich and beautiful images are also the norm on websites.
Thus, a website today has a HTML page, a CSS page, a JavaScript page, a Jquery page, a logo for the website in the PNG format, a set of pictures showing off the products or the information meant to be displayed. Now each of these things require a request to be passed from the browser, when it comes across the HTML tags like <link> or <img> with their src or href attributes.
Thus, only one request is sent to reach the website, but then ten more requests need to be made for the entire website to be displayed. If there are more and more requests, the time it takes to load the page increases.
Thus, to enhance web performance, we need to take care of serving them as fast as possible in order to retain the users and position ourselves in their minds by giving them a very smooth experience.
At the same time, we need to cater to the requirements of the modern web world. The access to content should be smooth but at the same time the visual content shouldn't be compromised. How do we do that is the core essence of web performance optimization.
Keep reading to learn more.