What is the use of web page preloading? Prefetch web page preload instant.page technology

Web page loading speed will affect yourE-commercewebsite in search engineSEORanking.

What is web page preloading?

There is a technique called prefetch which is actually a preload technique.

• When a user intentionally visits a page, the browser preloads the page.
• When the user actually clicks on the link, the user directly reads the page content from the preloaded cache and reduces page load time.
• Amazon and others have found that 100-millisecond latency accounts for 1% of sales, but latency on the web is hard to overcome.

Prefetch webpageWhat is the use of preloading?

instant.page uses instant preloading - it preloads the page before the user clicks ▼

• Before the user clicks the link, they hover over the link.
• When the user hovers for 65ms, they will have a chance to click on the link, so instant.page starts to preload at this point, averaging over 300ms for the page to preload.
• On mobile devices, users start touching their display before releasing, taking an average of 90ms to preload the page.

Prefetch makes web pages load faster

• The human brain takes less than 100 milliseconds to perceive an action instantly.
• Therefore, instant.page preloading technology can make your website feel instant even on 3G (assuming your page rendering speed is fast).

How to solve the slow loading of web pages?

Pages are preloaded only when there is a high probability that the user will visit them, and it only preloads the HTML for that page, respecting the bandwidth and CPU of the user and the server.

• It uses passive event listeners to keep your pages smooth.
• It is not preloaded when the user enables data protection (as of version 1.2.2).
• It's 1 kB and loads after everything else.It is free and open source (MIT license).

What is the effect of Prefetch webpage preloading instant.page?

After testing adding the instant.page code, the improvement in website access speed is still relatively large.

• By default it will filter to preload only this site links and will not load links from other sites.
• When the mouse clicks on the article link on the left for more than 65ms, the Network will preload the article page.
• When hovering for less than 65ms, preloading is not performed (red part)▼

Using instant.page will significantly increase your site's PV and request volume:

• A friend said that his average number of visits per visit was 13.84.
• After use, the per capita number of visits rose to 17.43, which is equivalent to opening 4 more pages per person.

Things to note

• It should be noted that bloggers using paid CDNs and open full-site CDNs should do so with caution.
• But don't worry, preload only loads html pages, images and other files won't, so there won't be much traffic loss.

How to use web page preloading technology?

In fact, there is a rel attribute in the link tag of html5, one of which is prefetch, but the number of consumers is small.

The instant.page introduced in this article is a script that uses this technique.

• This script will judge based on how long the user mouses over the link.
• When it hits 65ms, the user has a half chance of opening the link and Instant.page preloads this page.

Web page preload JS script code

1) Officially provide JS scripts with Cloudflare acceleration▼

The use of instant.page is very simple, just add the following code to your websiteJust before the label.

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBz虚ni砖用wang络kLHw"></script>

2) Self-hosted freedomChen WeiliangOffer▼

• The script lives in the server, Instantclick-1.2.2.js, so you don't have to worry about slowing things down. 

Please add the following code to your websiteJust before the label:

<script src="https://img.chenweiliang.com/javascript/instantpage.js" type="module"></script>