The process of loading any page can be divided into several stages: a white screen, the first display of content, the loading of meaningful information and a full download. It is necessary to show the user any meaningful content as early as possible. For example, for a news site, these are news headlines, for an online store page, this is a product filter that allows you to start familiarizing yourself with the assortment. It is with the display of meaningful content that the process of studying the page begins.
When the user clicks on the link, at first he sees a white screen. Then the first text and images are displayed. The time that the user spends contemplating the white screen is lost time. It is important to note that the user makes an impression of the site in 15 seconds. If there are 8 of them, he sees a white screen, then the probability of holding him is very low.
How to show the first content as early as possible
It is important to show the user the information as early as possible. Next, we will list the ways to achieve this.
Move the JavaScript to the bottom of the page
Browsers load files in the order they follow in the page code. If you put JavaScript at the beginning of the page, they will delay loading text, images, and CSS files following them. Because of this, the display of meaningful content is greatly delayed.
Use lazy loading of content
Lazy loading is a method of displaying a page when the required content is loaded dynamically as needed. A good example of this technique is the Instagram feed. The site loads new photos while scrolling through the content. Lazy loading is often used in online stores on the product list pages.
Reduce the number of requests to the server
Browsers download no more than 4 files at a time. Even if a small picture weighing 1Kb is loaded, it still spends about 0.2 seconds for service operations. If the page consists of 50 files, the user will spend 2.5 seconds just waiting, even if he has super-fast internet. Group CSS and JS files into one file, use sprites for many small images, and glyph fonts for icons.
Specify generic and safe fonts
If you use non-standard fonts on your site, then it takes time to download them. At the time of the final file upload, the text design may change dramatically. To avoid a sharp transition from standard fonts to yours, specify in advance the generic and safe font sets of the same family as yours. Then at the time of the final page loading, the user will not see how the text design changes dramatically. You can find a list of generic and safe fonts here https://www.w3schools.com/cssref/css_websafe_fonts.asp .
These techniques allow you to win the battle in a few seconds of the user’s attention. Advanced Site Checker will instantly find and give recommendations on how to fix these and many other problems.
*The social network is banned on the territory of the Russian Federation