How to increase page load speed via Preloader

Preloader (Pre-loader) can be said to be the most important step in improving browser performance. Mozilla official release data, through the Preloader technology page load performance improved 19%,chrome test Alexa Top 2000 sites, performance has 20% increase.

It is not a new technology, some people think that only Chrome has this feature. Others say it is the most effective way to improve browser performance ever. If you touch the preloader for the first time, you may already have an infinite number of question marks in mind. What is a preloader? How does it improve the performance of the browser?

The first thing you need to know is how the browser loads the web

the loading of a Web page depends on the script file, CSS style file. Let's take a look at the browser loading Web page process.

• First, the browser downloads the HTML and begins parsing. If the browser discovers an external CSS resource link, it sends a download request.
• The browser can parse the HTML file in parallel while downloading the CSS resource, but once a reference to the script file is found, you must wait for the script file to finish downloading and execute before parsing continues.
• After the script file finishes downloading and executing, the browser can continue parsing the HTML work if it encounters a non-blocking resource i.e. the picture browser sends a download request and continues parsing.

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

You can test by opening a page in a link in IE7. As we can see, the page head tag contains 2 style files and 2 script files. In body, contains 3 pictures, a script file.

With waterfall flow We can view the process of resource loading:

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

how the Preloader improves network utilization

In the 2008, IE, WebKit and Mozilla all implemented Preloader functions to improve network utilization and to improve the blocking status of script files against other resource files.

When the browser is blocked by the script file, another lightweight parser will continue to browse the remaining tags, looking for resources to download i.e. Style files, script files, pictures, etc.

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

The following waterfall flow is the result of using IE8 to open the page in the link, with significant performance improvements: ie8=7s > ie7=14s.

Pre-loading is still an area of experimentation for big browser vendors. Many browsers try to prioritize the download of resources. For example, Safari reduces the priority of not using the style file for the current view area. Chrome sets the script file to a higher priority than the picture, even if the script file is at the bottom of the HTML.

Pre-loader traps

The preloader can only retrieve URLs in HTML tags, and cannot detect URLs added using script code until the script code executes to obtain such resources.

I have encountered an example of using JavaScript to determine the current window width and then make a decision to load a CSS style file. The preloader does not recognize this type of resource.

The above code can easily cheat IE9 pre-loading mechanism, in the waterfall flow below we can see that the loading of the picture takes up all the connection, until the first picture is loaded, the CSS file will start to download.
Factors that affect the loading order of the Preloader
Currently, there are several ways to control the loading order of the preloader (both of which use Javacript to hide the resource file), while the Resource priorities also provides two features to influence the preloader.
Lazyload: The tagged resource is not downloaded until it has been marked as a lazyload resource download completed.
Postpone: The resource will not start downloading until it is visible to the end user. i.e. the display property of the label is set to none.
Pre-loadVSPre-read
Pre-read (pre-fetching) notifies the browser which resources may be used in the current page or other pages at some future time.
Here is a simple app for pre-reading that notifies the browser to load resources for the other sites that will be accessed:
<link rel= "Dns-prefetch" href= "other.hostname.com" >
Chrome allows us to pre-notify the browser to load resources that will be used in the future, and the declared resources will be downloaded at a higher priority.
<link rel= "Subresource" href= "/some_other_resource.js" >
(Chromium source mentions that the resources that are marked as Subresource are downloaded with a lower priority than the style and script files, but not less than the image load priority)
There are also tags that tell the browser which files are the lower-level pre-read files.
Pre-read standalone resource files that will be used in the future.
<link rel= "prefetch" href= "/some_other_resource.jpeg" >
The entire page is rendered in the background by a pre-read method.
<link rel= "PreRender" href= "//domain.com/next_page.html" >
Summary
Preloading is not a new technology, it's memorable for improving browser performance, and we don't need to do anything to use preloading.
It is widely used, and I have tested the following browsers, all with preloaded features:

 
 

  
  
 
   
IE8/9/10
 
   
Firefox
 
   
Chrome (inc Android)
 
   
Safari (inc IOS)
 
   
Android 2.3
 
  
 
 
Bruce Lawson (President of Opera) also announced that opera Mini also supported preloading.