By using site services you agree to our Cookies Use. We and our partners operate globally and use cookies, including for analytics, personalisation, and ads.Accept
X

/Real and subjective speed of page loading.

The subjective speed of page loading is a measurement of time between the click to visit a page and the start of content interaction. For example, the user begins to explore the headlines of the news before their pictures are loaded.

The page will be loaded only in 6 seconds but the user can already can estimate the breadth and depth of the assortment by filters. And he can explore the menu and open another product categories in new tabs.
The page will be loaded only in 6 seconds but the user can already can estimate the breadth and depth of the assortment by filters. And he can explore the menu and open another product categories in new tabs.

When the user opens new page he sees a white screen. After that the text is displayed and then the images and widgets are loaded. The white screen time is the time when the user's attention is idle. It is important to note that users spend fixed time to explore new website. This means that the user visits 2-3 pages in 30 seconds and decides whether he likes the site or not. Our task is not to waste his time on contemplating a white screen.

How to increase the load speed visually

This is the main YouTube page in the first seconds of loading. Waiting is more easier when the layout of the page is displayed.
This is the main YouTube page in the first seconds of loading. Waiting is more easier when the layout of the page is displayed.

It's important to show the user the first information as quickly as possible. For this you need:

Move JavaScript to the page bottom.

The browser downloads the files in order. So if you place Javascript at the beginning it will hold the load of CSS files and images. They participate in the creation of the site appearance.

Use lazy content downloading.

A good example of dynamic content loading is Instagram feed. This site loads new content when you scroll down the page.

Reduce the number of requests to the server.

This is how the Instagram sprite image looks like.
This is how the Instagram sprite image looks like.

The browser can download four files at the same time. Even if the file size is 1kb, anyway it will take about 0.2 seconds to perform service operations. This means that if the page contains 50 files, the user will spend 10 seconds to download them regardless of the connection speed and the computer power. Combine your CSS and JS files into one file, and combine multiple small images into sprites.

Add generic and safe fonts

Define default generic and safe fonts for <body> element. If you are using custom fonts on your site, need a time to download font's files. Before files will be downloaded, a browser shows his default fonts. You can choose one of the default fonts which looks similar like your. It makes a loading process more comfortable. See a list of default fonts on https://www.w3schools.com/cssref/css_websafe_fonts.asp .

These techniques help to win out the battle for a few seconds of the users' attention. Is it many or not, is up to you. But at the head of all successful companies perfectionists were and will be.

Check your site for issues

Only useful instructions