How to improve web page loading speed through preloader

How to improve web page loading speed through preloader

Pre-loader can be said to be the most important measure to improve browser performance. Mozilla officially released data that the loading performance of web pages through the preloader technology has increased by 19%. Chrome tested the top 2,000 websites ranked by Alexa, and the performance has been improved by 20%.

It is not a new technology, some people think that only Chrome has this feature. Others believe that it is the most effective way to improve browser performance in history. If you are contacting the preloader for the first time, you may already have countless question marks in your mind. What is a preloader? How does it improve browser performance?

1. you need to understand how the browser loads the webpage

The loading of a web page depends on script files and CSS style files. Let's take a look at the process of the browser loading a web page.

  • 1. the browser downloads the HTML and starts parsing. If the browser finds links to external CSS resources, it sends a download request.
  • The browser can parse the HTML file in parallel while downloading the CSS resource. However, once it finds a reference to the script file, it must wait for the script file to finish downloading and execute before continuing to parse.
  • After the script file is downloaded and executed, the browser can continue to parse the HTML. If it encounters non-blocking resources, the image browser will send a download request and continue to parse.

Even though the browser can execute multiple requests in parallel, it cannot execute in parallel with the operation on the script file.

You can open the linked webpage through IE7 for testing. We can see that the head tag of the web page contains 2 style files and 2 script files. In the body, it contains 3 pictures and 1 script file.

Through the waterfall flow, we can view the process of resource loading:

The downloading and execution of script files will block the downloading of other resource files, which will undoubtedly greatly reduce browser performance.

How the preloader improves network utilization

In 2008, IE, WebKit, and Mozilla all implemented the preloader function to improve network utilization and improve the blocking of script files to other resource files.

When the browser is blocked by a script file, another lightweight parser will continue to browse the remaining tags, looking for resources ie style files, script files, pictures, etc. that need to be downloaded.

Once discovered, the preloader can start receiving these resources in the background, waiting for the main parser to complete the current script operation, and other resources have been downloaded, thus reducing the performance loss caused by script blocking.

The following waterfall is the result of using IE8 to open the webpage in the link, and the performance has been significantly improved: IE8=7S> IE7=14S.

The pre-loading function is still an experimental area that major browser manufacturers enjoy. Many browsers try to set the priority of resource downloads. For example, Safari reduces the priority of style files that do not affect the current view area. Chrome sets the priority of the script file higher than the image, even if the script file is at the bottom of the HTML.

Pitfalls of preloaders

The preloader can only retrieve URLs in HTML tags, and cannot detect URLs added with script codes. Such resources can not be obtained until the script codes are executed.

I once encountered an example of judging the current Window width through javascript, and then deciding to load a CSS style file. The preloader cannot recognize such resources.

<html>
<head>
 <script>
 var file = window.innerWidth <1000? "mobile.css": "desktop.css"; document.write('<link rel="stylesheet" type="text/css" href="css/' + file + ' "/>'); </script>
 </head>
 <body>
 <img src="img/gallery-img1.jpg"/>
 <img src="img/gallery-img2.jpg"/>
 <img src="img/gallery-img3.jpg"/>
 <img src="img/gallery-img4.jpg"/>
 <img src="img/gallery-img5.jpg"/>
 <img src="img/gallery-img6.jpg"/>
 </body>
</html>

The above code can easily fool IE9's pre-loading mechanism. In the waterfall flow below, we can see that loading images occupies all connections. The CSS file does not start to download until the first image is loaded.

Factors affecting the loading sequence of the preloader

Currently, there are several ways to control the loading sequence of the preloader (using javacript to hide resource files is one of them). At the same time, W3C Resource Priorities also provides two features to affect the preloader.

lazyload: Download the marked resources until the resources that are not marked as lazyload have been downloaded.

postpone: The resource does not start downloading until it becomes visible to the end user. The display attribute of the ie tag is set to none.

Preload VS prefetch

Pre-fetching can inform the browser which resources may be used in the current page or other pages at a certain time in the future.

The following is a simple application pre-fetched to notify the browser to load resources for other sites to be visited:

<link rel="dns-prefetch" href="other.hostname.com">

Chrome allows us to notify the browser in advance to load resources that will be used in the future, and the declared resources will be downloaded with a higher priority.

<link rel="subresource" href="/some_other_resource.js">

(As mentioned in the Chromium source code, the priority of downloading resources marked as subresource is lower than that of style files and script files, but not lower than the priority of image loading)

There are also tags to inform the browser which files are lower-level pre-read files.

Pre-fetch independent resource files that will be used in the future.

<link rel="prefetch" href="/some_other_resource.jpeg">

By pre-reading, the entire page is rendered in the background.

<link rel="prerender" href="//domain.com/next_page.html">

summary

Preloading is not a new technology, it is of commemorative significance to improve browser performance, we don't need to do anything to use preloading.

It is widely used. I tested the following browsers, all of which have pre-loading functions:

  • IE8/9/10
  • Firefox
  • Chrome (inc Android)
  • Safari (inc iOS)
  • Android 2.3

Bruce Lawson (President of Opera) also announced that Opera Mini also supports preloading.

Reference: https://cloud.tencent.com/developer/article/1054605 How to improve web page loading speed through preloader-Cloud + Community-Tencent Cloud