Speeding up Web Page Loading
Learn about the issues with web page loading and how to address them.
Introduction
Before a user can consume any content, many steps are involved (for example, sending a request, getting a response, rendering the page, and so on) that can add substantial latency. There is another user-perceived delay that surfaces because of the web page construction, called a web page load delay.
A web page consists of multiple web objects, such as HTML, JavaScript, CSS, images, audio, and so on. But some web objects are not required at the initial loading of the page. For example, a web page displays the notification icon but not the list of notifications. The list can be fetched from the server only when the user clicks on the notification icon. To implement such behavior, the code used for the notification list will not be loaded initially. We want to avoid loading this code because it will increase the initial page load time (PLT). This inevitably increases the risk of users losing interest in the site and moving on to another website that loads quickly. This user behavior is depicted in the following illustration, where 2 seconds is an example of the load time:
Load time is one of the important aspects of the user experience, and losing visitors impacts revenue. For example, according to Amazon, a 100 millisecond delay in page load time results in a loss of
In this lesson, we’ll discuss the main issues that increase the loading time and how we can address them by prioritizing the components of the web page, such as which component should be loaded and when. Let's start with how a web page loads in the browser.
The web page load process (WPL)
The web page load process (WPL) consists of multiple steps. Let's understand these steps through the following illustration:
Starting ...