CODEWITHSUNDEEP
html
Roland Seuhs
Roland Seuhs

Reputation: 1995

HTML/Performance: Prerendering of multiple pages

In case of a clear probable direction of where the user will go (for example image gallery or similar) one may not only guess where the user will go after his next click, one may predict the next 5 clicks or more.

When one uses "prerender"-links (or "prefetch" for browsers that don't understand "prerender") to multiple pages, the browser will download and render all these links, but will it forget the data after the user has clicked on a link, and how long stays the prefetched/prerendered version usable? Is there any clear documentation on that feature?

In other words: Would a "prerender"-link to the next 5 pages make the website faster (because the user can skip a page quickly) or slower (because the browser needlessly prerenders 5 pages on every click)?

Edit: I have now made some tests and it seems as if multiple prerender-links doesn't make it faster if you just put in prerender links.

Upvotes: 3

Views: 1771

Answers (1)

Shlomi Hassid
Shlomi Hassid

Reputation: 6606

Nice Question, First we need to make it clear that "prerender" and "prefetch" are two different features with many different limitations and behavior. One of the big issues here are that they will both act slightly different depending on the webrowser and they are often misunderstood and misused.

Quick Overview

prefetch The concept of prefetching is included in the HTML5 spec better used for loading resources (stylesheets,js,pictures etc) - that's because it loads into the cache as a subresource. When prefetching a page the browser downloads (once the current page is fully loaded) the top layer of the page that is linked (Iframes in the target page won't be prefetched). Prefetching an entire page may cause lack of performance. what's cool about prefetching is that the limits are way higher - Prefetching Process is per tab (not webbrowser instance), And you can set Many links for Prefetching (IE < 9 - Max 10 Links, Mozilla unknown).

prerender First Presented By Chrome and implemented by IE11 Later - when added to a page it will execute a page full loading process (on a hidden tab) of the linked page at the background - You can see it firing (once the main page is loaded) by looking at the Task manager (Chrome). One of the big issues here are that a prerender process is per instance of a browser (not per tabs open) that mean that in case another site is already opened and fired this process yours may be ignored OR delayed (it depends which browser). Another interesting fact is that you can add only one "prerender" Link per page, if you add more they will be ignored - and if you are loading the prerender link dynamically you need to know there is an interval restrict issue (500ms - in Chrome).

Prerendering extends the concept of prefetching. Instead of just downloading the top-level resource, it does all of the work necessary to show the page to the user—without actually showing it until the user clicks. Prerendering behaves similarly to if a user middle-clicked on a link on a page (opening it in a background tab) and then later switched to that tab. However, in prerendering, that “background tab” is totally hidden from the user, and when the user clicks, its contents are seamlessly swapped into the same tab the user was viewing. From the user’s perspective, the page simply loads much faster than before.

Known ISSUES and IMPORTANT notes:

  • Certain animations may not appear when the page is displayed. This is likely because they've already run while the page was loaded in the background.
  • Timers may give unexpected results.
  • Cookies, cached content, and changes made by asynchronous operations (such as IndexedDB and web storage) are retained.
  • Private Browsing in some browsers will disable prerendering and prefetching ( "incognito" too ).
  • Some Browsers Won't support HTTPS Links (IE > 11, gecko < 1.9.1, Chrome Won't).
  • Chrome & IE won't support HTTP Link: header - <meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch">

Prefetching Summary:

  • Browsers: Is a part of HTML5 specs (Older IE < 9 acts as dns-prefetch).
  • Loads To: as subresources of the current Tab into the cache.
  • Limits: 10 links in IE11 (IE10 unknown, FireFox unknown).
  • Life Time: 5min.
  • Download Depth: Top layer only (of a webpage).
  • Links: HTTP, HTTPS (IE > 10, Gecko > 1.9.1), No 'same origin' restrict.
  • Dynamically: Supported.

Prerendering Summary:

  • Browsers: Chrome, IE > 10.
  • Loads To: Separate hidden Tab.
  • Limits: 1 link - Will trigger one per instance of the browser.
  • Life Time: Until another Prerendering process is fired (From any opened Tab).
  • Download Depth: Full Page Load.
  • Links: HTTP (HTTPS won't), No 'same origin' restrict.
  • Dynamically: 500ms between each change.

Prefetching delayed or ignored:

  • The target URL is not a HTTP GET XMLHTTPRequests - ignored (POST,PUT,DELETE)
  • Downloading Something using mozila - delayed
  • IE > 9 - More than 10 Links on the page - ignored
  • Two browsers (Mozila) are opened competing on bandwidth - delayed
  • Developer Tools open - ignored
  • Private mode Enabled - ignored
  • The target URL is a file download - ignored

Prerendering aborted or ignored/delayed:

  • The target URL is not a HTTP GET XMLHTTPRequests - ignored (POST,PUT,DELETE)
  • Another Prerender process is running - delayed (May be ignored)
  • More than 1 Links on the page - ignored (only first will run)
  • Browsers is competing on bandwidth - delayed
  • Developer Tools Or 'incognito' - ignored
  • The target URL is a file download - aborted
  • In IE < 10: The user switches to a different tab or browser instance - aborted & erased
  • HTMLAudio or Video in the page - aborted
  • Popup/window creation - aborted
  • Pages that trigger the malware warning - aborted

More

Upvotes: 12

Related Questions