Link Prefetching


Link prefetching is a method of preloading resources in the cache of the browser (client). The basic assumption in link prefetching is that if a user visits a site, he may want to retrieve other resources from that website. The loading of these resources can be accelerated through the website providing the browser with prefetching hints. This is done with information contained in the website source code. The rel attribute is listed with the value "prefetch" either in the header or within a link in the body of the website. Link prefetching is especially useful if the site owner is relatively sure that certain resources will be retrieved next by the site user. They therefore have to record and evaluate user behavior. Other names for link prefetching are prebrowsing and Prerendering.

General information

When a user visits a website, the client and server communicate in the background to load the content as quickly as possible. Once the site is fully loaded, the browser goes idle. It only communicates with the server when the user interacts through clicks or keyboard commands. Link prefetching is executed during this time. If resources have been marked up with the prefetch value, then the browser will load them into the cache. Images, CSS files or paginated webpages can be loaded to allow faster retrieval by the client.[1]

The original concept of link prefetching comes from Mozilla. It has been proposed as a recommendation for HTML5 to the W3C and is partially already implemented. A similar, but slightly modified approach is supported by the Google Chrome browser. The term used here is Prerendering. Internet explorer uses DNS prefetching, prerendering, and lazy load to optimize performance. Apple’s Safari browser apparently does not use a prefetching mechanism.[2]

How it works

Depending on your browser, there are different mechanisms that allow prefetching of resources. The concept of prefetching data, however, is similar.

  • Link prefetching: In link prefetching, resources are marked up with the prefetch value and the rel attribute, i.e., "rel="prefetch". Only items that are marked up using this attribute-value pair can be loaded. In most cases, these are links to other webpages, images, or CSS files. It should be noted that only the referenced resource is loaded and not the files that are associated with this resource. No scripts, CSS files or frames get loaded, which are located on the pre-loaded webpage. This type of prefetching was used starting in 2003 only by Mozilla Firefox. Since then all major browsers now support actual link prefetching.
  • DNS prefetching: Prefetching of domain names is possible with the command "rel="dns-prefetch"". DNS prefetching translates a DNS server into computer-readable characters (IP addresses) to use the idle time of the browser effectively. DNS resolution is therefore no longer required when loading the website.
  • Prerendering: Prerendering is much more comprehensive than prefetching. All resources that have been referenced with the command "rel="prerender"" are loaded into the cache. This includes CSS, JavaScript and even the DOM. Prerendering is similar to loading a website in a hidden browser tab. The complete resource is loaded. This is only useful if the website owner is 100 % sure that the user will visit that website.
  • Lazy load: Internet explorer can load images in advance, which have been marked up with the lazy load tag. This is usually done within the img tag behind the source, which is specified with the src tag: "<img src ="image.jpg"lazyload>".[3]
  • Sub-resources: The browsers Chrome and Opera have a prefetching solution that prioritizes certain resources. A resource that should always be loaded by the client may be specified in the header of an HTML document with the command "rel="subresource"". For example, CSS files, fonts or scripts that are needed anyway. The difference to link prefetching, is that these resources are loaded even if the browser is not in idle time.[4]

Disadvantages of link prefetching

Link prefetching improves performance of websites in the range of milliseconds. But it also has some disadvantages:

  • Link prefetching can affect your Internet bandwidth if other applications use it as well. If you get billed based on data volume, your cost may rise without you having opted to download that data.
  • Since link prefetching is implemented by default in browsers, the procedure violates aspects such as transparency and informational self-determination. Because there is no user-friendly option to disable prefetching - at least not in the regular Mozilla browser interface. Moreover, cookies of preloaded sites may get stored in the browser cache, without the user having explicitly agreed to this. This enables subsequent tracking.
  • Prefetching can cause statistics to be distorted. If the prefetch instructions do not get captured by the analytic program or the log files are not cleaned out, the server or the analysis program counts the virtual access as a visitor.
  • Too many prefetching instructions can strain the server being accessed.[5]
  • Security holes may arise because the prefetch instructions often refer to external providers. This means that other websites which were retrieved, may have been exploited for DDoS attacks.

Website operators should individually consider what resources would be useful to prefetch and how much performance they would actually gain from this in terms of milliseconds.

How to turn off prefetching

On the server side, prefetching can be prevented by checking the request in the header for the string: is "X-moz prefetch". On the client side, you would enter "about: config" in the Firefox address bar and modify the settings there.

The preferences can also be modified in the user profile. You can add the line "user_pref("network.prefetch-next", false);" in the prefs.js file. Mozilla assumes that with malfunctions of the prefetcher, the implementation is not working properly. Therefore, there is no possibility to disable prefetching in a simple manner in the UI for less ambitious users.[6] In the Google Chrome browser, prerendering can be turned off under Advanced Settings.

Relevance to search engine optimization

The impact of link prefetching is limited to page speed, since the prefetch commands are usually not interpreted by search engines as directives. Loading time of a website is indeed an indirect ranking signal, but it can also be reduced by other tricks and strategies (see Page Speed).[7] How prefetching affects the loading time of a website depends on several factors, for example, the resources which are referenced and the size of the data. The number of prefetching hints on a website is likely to affect it. It is recommended in any case, to use acceptable DNS prefetching, since only DNS addresses will be resolved into IP addresses. Presumably, the Google search engine uses a type of DNS prefetching to provide the SERPs faster.[8] The use of link prefetching should only be contemplated in individual cases where it would actually be advantageous for users.

References

  1. ↑ HTML5 Link Prefetching davidwalsh.name. Accessed on 10/19/2015
  2. ↑ Pre-browsing stevesouders.com. Accessed on 06/10/2015
  3. ↑ Link prefetching wikiwand.com.com. Accessed on 10/06/2015
  4. ↑ Prefetching, preloading, prebrowsing css-tricks.com. Accessed on 10/06/2015
  5. ↑ HTML5 Link Prefetching (or "The Most Dangerous Tag") cloudspace.com. Accessed on 01/03/2017
  6. ↑ Link prefetching FAQ developer.mozilla.org. Accessed on 10/06/2015
  7. ↑ SEO and other impacts of using rel=“dns-prefetch” webmasters.stackexchange.com. Accessed on 10/19/2015
  8. ↑ DNS Prefetching chromium.org. Accessed on 10/19/2015

Web Links

Retrieved from "https://en.ryte.com/wiki/index.php?title=Link_Prefetching&oldid=4169"

Category