Link prefetching

Last updated

Link prefetching allows web browsers to pre-load resources. This speeds up both the loading and rendering of web pages. Prefetching was first introduced in HTML5.

Contents

Prefetching is accomplished through hints in web pages. These hints are used by the browser to prefetch links. Resources which can be prefetched include: JavaScript, CSS, image, audio, video, and web fonts. DNS names and TCP connections can also be hinted for prefetching. [1] [2]

Prefetching in HTML5

There are two W3C standards covering prefetching for HTML5:

HTML5 methods for prefetch hints:

Link: <//pagead2.googlesyndication.com>; rel=dns-prefetch,       </js/bootstrap.min.js>; as=script; rel=preload,       </ads.html>; rel=prerender,       </css/bootstrap.min.css>; as=style; rel=preload 

Browser support

BrowserPrefetching Supported
Standard link prefetching DNS prefetching Prerendering Lazy-load (Images)
Android browserYes [5] No [5] No [5] No
Chromium Yes [5] Yes [5] Yes [5] No
Google Chrome Yes [5] Yes [5] Yes [5] No
Internet Explorer Yes [6] Yes [6] Yes [6] Yes [6]
Mozilla Firefox Yes [5] Yes [5] No [7] No
Opera Yes [5] No [5] No [5] No
Safari No [5] Yes [5] No [5] No

Historical

Modern browsers

Issues and criticisms

An issue inherent to indiscriminate link prefetching involves the misuse of "safe" HTTP methods. The HTTP GET and HEAD requests are said to be "safe", i.e., a user agent that issues one of these requests should expect that the request results in no change on the recipient server. [13] However, it is common for website operators to use these requests outside of this constraint. Plain hyperlinks (which almost universally result in GET requests) are often used to implement logout functionality and account verification, e.g., when a user completes an account creation form, and an automated service sends a verification e-mail to the user's given e-mail address.

Similarly, it is entirely possible for a hosting service to provide a Web front end to manage files, including links that delete one or more files. Users who visit pages containing these types of links, (whilst using a browser which employs an indiscriminate link prefetcher), might find that they have been logged out or that their files have been deleted. [14]

Additionally, there are a number of criticisms regarding the privacy and resource usage implications of link prefetching:

In the case of mobile devices or for users with a limited bandwidth allowance, prefetching may result in an unnecessary costly drain on limited bandwidth.

It is possible for implementations to prefetch links even when they are not specified as prefetch links.

In the case of prerendering, Google warns that improper use may result in the aforementioned increased bandwidth usage, slower loading of other links, and slightly stale content. [10]

See also

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">Web browser</span> Software used to access websites

A web browser is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on a range of devices, including desktops, laptops, tablets, and smartphones. In 2020, an estimated 4.9 billion people have used a browser. The most-used browser is Google Chrome, with a 64% global market share on all devices, followed by Safari with 19%.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

Mozilla Firefox has features which distinguish it from other web browsers, such as Google Chrome, Safari, and Microsoft Edge.

In computer hypertext, a URI fragment is a string of characters that refers to a resource that is subordinate to another, primary resource. The primary resource is identified by a Uniform Resource Identifier (URI), and the fragment identifier points to the subordinate resource.

A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

<span class="mw-page-title-main">HTTP referer</span> HTTP header field

In HTTP, "Referer" is an optional HTTP header field that identifies the address of the web page, from which the resource has been requested. By checking the referrer, the server providing the new web page can see where the request originated.

<span class="mw-page-title-main">Web development tools</span> Software used to test the UI of a website or web application

Web development tools allow web developers to test, modify and debug their websites. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

Web Slices are a web feed technology based on the hAtom Microformat that allows users to subscribe to portions of a web page. Microsoft developed the Web Slice format, and published a specification under their Open Specification Promise. The specification is not published by any independent standards body. Introduced in Internet Explorer 8 Beta 1, Web Slices can be previewed in a fly-out window. As of 2012, Internet Explorer 8 and 9 were the only browsers to support Web Slices natively, although Mozilla Firefox had support via an add-on called webchunks.

Web storage, sometimes known as DOM storage, is a standard JavaScript API provided by web browsers. It enables websites to store persistent data on users' devices similar to cookies, but with much larger capacity and no information sent in HTTP headers. There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Web Storage is standardized by the World Wide Web Consortium (W3C) and WHATWG, and is supported by all major browsers.

A link relation is a descriptive attribute attached to a hyperlink in order to define the type of the link, or the relationship between the source and destination resources. The attribute can be used by automated systems, or can be presented to a user in a different way.

HTTP Strict Transport Security (HSTS) is a policy mechanism that helps to protect websites against man-in-the-middle attacks such as protocol downgrade attacks and cookie hijacking. It allows web servers to declare that web browsers should automatically interact with it using only HTTPS connections, which provide Transport Layer Security (TLS/SSL), unlike the insecure HTTP used alone. HSTS is an IETF standards track protocol and is specified in RFC 6797.

HTML video is a subject of the HTML specification as the standard way of playing video via the web. Introduced in HTML5, it is designed to partially replace the object element and the previous de facto standard of using the proprietary Adobe Flash plugin, though early adoption was hampered by lack of agreement as to which video coding formats and audio coding formats should be supported in web browsers. As of 2020, HTML video is the only widely supported video playback technology in modern browsers, with the Flash plugin being phased out.

Cross-origin resource sharing (CORS) is a mechanism that allows a web page to access restricted resources from a server on a domain different than the domain that served the web page.

The cache manifest in HTML5 was a software storage feature which provided the ability to access a web application even without a network connection. It became part of the W3C Recommendation on 28 October 2014.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

HTML audio is a subject of the HTML specification, incorporating audio input, playback, and synthesis, all in the browser.

Encrypted Media Extensions (EME) is a W3C specification for providing a communication channel between web browsers and the Content Decryption Module (CDM) software which implements digital rights management (DRM). This allows the use of HTML video to play back DRM-wrapped content such as streaming video services without the use of heavy third-party media plugins like Adobe Flash or Microsoft Silverlight. The use of a third-party key management system may be required, depending on whether the publisher chooses to scramble the keys.

<span class="mw-page-title-main">Progressive web app</span> Specific form of single page web application

A progressive web application (PWA), or progressive web app, is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly. It is intended to work on any platform with a standards-compliant browser, including desktop and mobile devices.

References

  1. 1 2 "Preload". w3c.github.io. Retrieved 2016-03-19.
  2. 1 2 "Resource Hints". w3c.github.io. Retrieved 2016-03-19.
  3. Nottingham, M. (2010). "Web Linking". RFC 5988 . IETF. doi: 10.17487/RFC5988 . S2CID   367264 . Retrieved 2016-03-19.
  4. "Resource Hints (Example 6)". Resource Hints: W3C Working Draft. W3C. Retrieved 2016-10-31.
  5. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 "Prebrowsing". Steve Souders. 2013-10-07.
  6. 1 2 3 4 5 6 "Getting to the Content You Want, Faster in IE11". IEBlog, Microsoft. 2013-12-04. Archived from the original on 2014-05-12.
  7. "Bug 730101 - Implement prerendering in Firefox". Mozilla. 2014-10-18.
  8. Fisher, Darin; Saksena, Gagan. "Link Prefetching in Mozilla: A Server-Driven Approach" (PDF). Retrieved 2014-05-09.
  9. "Controlling DNS prefetching" . Retrieved 2014-05-09.
  10. 1 2 "Web Developer's Guide to Prerendering in Chrome" . Retrieved 2014-05-09.
  11. "Internet Explorer 9 Network Performance Improvements" . Retrieved 2014-05-09.
  12. "About Google Instant" . Retrieved 2014-05-09.
  13. Fielding, Roy; Gettys, Jim; Mogul, Jeffrey; Frystyk, Henrik; Masinter, Larry; Leach, Paul; Berners-Lee, Tim (June 1999). "Safe Methods". Hypertext Transfer Protocol—HTTP/1.1. Network Working Group. IETF. p. 50. sec. 9.1.1. doi: 10.17487/RFC2616 . RFC 2616 . Retrieved 2009-12-16.
  14. various (2009). "Mouseover Prefetch?". Gervase Markham, MozillaZine. Archived from the original on 2009-05-31. Retrieved 2009-12-16.