Prefetching allows a browser to silently fetch the necessary resources (HTML) needed to display a web page that a visitor might access in the near future.
The browser is able to store the web page HTML in its cache enabling it to deliver the requested data faster. Once a user clicks on a particular link that has already been prefetched, they will see the content instantly because their browser has already downloaded it.
How it works
When a visitor accesses a page, we detect which links are visible on the visitor’s screen and prefetch the HTML of the pages which the links point to. This means that in the event that the visitor would click one of these links, the requested page loads significantly faster because the HTML has been downloaded in advance and therefore displays instantly.
In the example below, the visitor has accessed the Home page of a website. There are a total of five links in view on the visitors screen: four in the main navigation on one on a button. Those five links all get prefetched and will load much faster if the visitor decides to click one of them.
Expected speed gains
According to our own tests, pages load around 20-30% faster on average when prefetching is enabled.
Triggers and limitations
Here are some more facts about how prefetching works:
- We only prefetch HTML - not CSS, scripts or other resources. The HTML is minified so it only takes up a few kilobytes of space and doesn't burden the visitor's network.
- Prefetching only kicks in if we detect that the visitor is on a relatively fast internet connection and their network is idle. If their browser is busy doing other things like downloading a file or streaming a video, prefetching won't start.
- Prefetching only applies to internal pages, meaning pages that are part of the website and share the same root URL. Links to external pages are not prefetched, for example a link to a product on Amazon or a link to a Facebook page.
- Only links that are visible in the visitor's viewport are being prefetched. For example, if the visitor is browsing at the top of a page, their browser won't start prefetching links in the website footer. If the visitor scrolls down and the footer is in view, the browser starts to prefetch those links. The idea behind this is to only fetch resources that the visitor is likely to want to use.
- We've set a cut-off point at 25 pages. This means that a visitor's browser will only prefetch up to a maximum of 25 links on a page. This helps prevent over-prefetching which would otherwise cause unnecessary stress on the visitor's network.
How to enable prefetching
In the Editor, go to Setting > Website load speed and tick the option Enable prefetching of internal pages. After publishing your website, prefetching is active on all your pages.
How to detect if prefetching works
Open up your published website, right-click any element on the page and select Inspect to open Chorme DevTools (most other browsers have similar tools) - or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
Click the Network tab and refresh the page. As you browse the page, look for resources that are initiated by the prefetching service quicklink.js:1. In this example, we can see that it has prefetched the pages About us, Services and Contact.
Open up one of the prefetched pages and check the Network tab again. If the page HTML document has (prefetch cache) in the Size column, it means it was retrieved from the browser cache and was previously prefetched. This means prefetching was successful.
Prefetching works with the following browsers: Chrome, Safari, Firefox, Edge, Opera, Android Browser, Samsung Internet, IE 11.
The main downside to prefetching is that if a visitor doesn't navigate to the page that has been prefetched, their browser will have already unnecessarily fetched the asset in the background, thus increasing the size of its cache without any realized benefit. However, this drawback is countered by the built-in limitations of only prefetching links that are in view and the 25-page cut-off point (see above).