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">Web browser</span> Software used to navigate the internet

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.

<span class="mw-page-title-main">Browser wars</span> Competition between web browsing applications for share of worldwide usage

A browser war is a competition for dominance in the usage share of web browsers. The "first browser war," (1995–2001) consisted of Internet Explorer and Navigator. Browser wars continued with the decline of Internet Explorer's market share and the popularity of other browsers, including Firefox, Google Chrome, Safari, Microsoft Edge and Opera.

In computing, the User-Agent header is an HTTP header intended to identify the user agent responsible for making a given HTTP request. Whereas the character sequence User-Agent comprises the name of the header itself, the header value that a given user agent uses to identify itself is colloquially known as its user agent string. The user agent for the operator of a computer used to access the Web has encoded within the rules that govern its behavior the knowledge of how to negotiate its half of a request-response transaction; the user agent thus plays the role of the client in a client–server system. Often considered useful in networks is the ability to identify and distinguish the software facilitating a network session. For this reason, the User-Agent HTTP header exists to identify the client software to the responding server.

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

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 typography</span> Publishing considerations for the Web

Web typography, like typography generally, is the design of pages – their layout and typeface choices. Unlike traditional print-based typography, pages intended for display on the World Wide Web have additional technical challenges and – given its ability to change the presentation dynamically – additional opportunities. Early web page designs were very simple due to technology limitations; modern designs use Cascading Style Sheets (CSS), JavaScript and other techniques to deliver the typographer's and the client's vision.

<span class="mw-page-title-main">Google Chrome</span> Web browser developed by Google

Google Chrome is a web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, iOS, and also for Android, where it is the default browser. The browser is also the main component of ChromeOS, where it serves as the platform for web applications.

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.

The Web Open Font Format (WOFF) is a font format for use in web pages. WOFF files are OpenType or TrueType fonts, with format-specific compression applied and additional XML metadata added. The two primary goals are first to distinguish font files intended for use as web fonts from fonts files intended for use in desktop applications via local installation, and second to reduce web font latency when fonts are transferred from a server to a client over a network connection.

The HTML5 specification introduced the video element for the purpose of playing videos, partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video on the web, instead of 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, HTML5 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 restricted resources on a web page to be accessed from another domain outside the domain from which the first resource was served.

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.

HTML5 Audio is a subject of the HTML5 specification, incorporating audio input, playback, and synthesis, as well as in the browser. iOS

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 HTML5 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.