HTML5 preloading makes pages render quickly

Preloading is a browser mechanism that uses browser idle time to pre-download/load pages/resources that the user is likely to browse next. When the user accesses a preloaded link, if it is hit from the cache, The page will be rendered quickly One direction in which browser manufacturers and developers work together is to make websites faster. There are many well-known acceleration solutions: CSS sprites (CSS sprites, puzzles) and image optimization, distributed configuration files (.htaccess), JS/text file compression, CDN acceleration, etc.

I introduced how to make the website faster in another blog post.
FireFox recommends a new website acceleration strategy: link preloading. What is link preloading? MDN describes it as follows:

Preloading is a browser mechanism that uses browser idle time to pre-download/load pages/resources that the user is likely to browse next. The page provides the browser with a collection that needs to be preloaded. After the browser completes loading the current page, it will download the pages that need to be preloaded in the background and add them to the cache. When a user accesses a preloaded link, if it is hit from the cache, the page will be rendered quickly.

Simple overview: Based on user analysis, the website allows the browser to download specified pages/documents/images in the background. It is super easy to implement:

HTML5 preload tag

Copy code

The code is as follows:

As can be seen from the above HTML code, preloading uses the tag and specifies rel=" prefetch" attribute, and the href attribute is the file path that needs to be preloaded. Mozilla also implemented some similar link rel attributes:

Copy code

The code is as follows:

Note: https protocol is also supported.

When to preload
Whether a website uses preloading depends on your needs, here are some suggestions:
- If a series of page slides are displayed the same, Then you can preload 1 to 3 pages before and after.
-Load common images within the website
-Preload the next page on the search results page

Prevent preloading
Firefox allows disabling preloading mode, the code is as follows:

Copy code

The code is as follows:

user_pref("network.prefetch-next", false);

Notes
Regarding link preloading, there are the following precautions:
- Preloading can be done across domains. Of course, cookies and other information will also be sent when requesting.
- Preloading can corrupt website statistics without the user actually visiting.
- Mozilla Firefox is currently the only browser that supports preloading mode, (2003-2010)
What do you think? Using free time to download additional files is a radical optimization

For more HTML5 preloading, the page can be rendered quickly. For related articles, please pay attention to the PHP Chinese website!