JavaScript Document prerendering Property

What You’ll Learn

Document.prerendering is a read-only instance property that returns true while the document is prerendering in the background via Speculation Rules. Learn MDN’s analytics pattern, prerenderingchange, activationStart, and five examples with try-it labs.

Introduction

Modern browsers can load pages in the background before the user clicks a link, using the Speculation Rules API. That hidden load is called prerendering. Scripts on the prerendered page need to know whether they are running in that background phase—that is what document.prerendering provides.

MDN: the read-only property returns true if the document is currently in the process of prerendering, and false if it is not. false is also returned for documents that have finished prerendering and for documents that were not prerendered.

Related Document tutorials: hidden, activeViewTransition, Document constructor.

Understanding Document.prerendering

A read-only instance property on Document. Its value tells you whether prerender is in progress right now.

• Value — true during prerender, false otherwise (MDN).
• Read-only — reflects browser state; you cannot set it from script.
• After activation — becomes false even if the page was prerendered (MDN).
• Past prerender — use activationStart on navigation timing (MDN).
• Status — Experimental and Limited availability (MDN).

📝 Syntax

document.prerendering

Value

A boolean — true while prerender is active, false when it is not (MDN).

MDN example — analytics during prerender

if (document.prerendering) {
  analytics.sendInfo("got this far during prerendering!");
}

MDN example — delay init until activation

if (document.prerendering) {
  document.addEventListener("prerenderingchange", initAnalytics, {
    once: true,
  });
} else {
  initAnalytics();
}

⚖️ Prerender vs Visibility Properties

Examples Gallery

Examples follow MDN Document: prerendering. On a normal page load, document.prerendering is false—that is expected in try-it labs.

console.log(document.prerendering);
// false on a normal navigation

false

const supported = "prerendering" in document;
console.log("prerendering supported?", supported);

if (supported) {
  console.log("Currently prerendering?", document.prerendering);
}

prerendering supported? true
Currently prerendering? false

if (document.prerendering) {
  analytics.sendInfo("got this far during prerendering!");
}

(analytics not sent — prerendering is false)

function initAnalytics() {
  console.log("Analytics initialized");
}

if (document.prerendering) {
  document.addEventListener("prerenderingchange", initAnalytics, {
    once: true,
  });
} else {
  initAnalytics();
}

Analytics initialized

if (document.prerendering) {
  document.addEventListener(
    "prerenderingchange",
    () => {
      console.log("Prerender activated after this script ran");
    },
    { once: true },
  );
} else if (performance.getEntriesByType("navigation")[0]?.activationStart > 0) {
  console.log("Prerender activated before this script ran");
} else {
  console.log("This page load was not via prerendering");
}

This page load was not via prerendering

🚀 Common Use Cases

• Delay analytics — avoid counting prerender as a full page view (MDN).
• Defer ads / autoplay — start only after prerenderingchange.
• Custom boot logic — skip heavy init while prerendering === true.
• Activation metrics — measure how often prerenders become real visits.
• Debugging Speculation Rules — verify scripts run during background load.
• Safe defaults — fall back to normal init when the API is missing.

📝 Notes

• MDN: Experimental and Limited availability — Experimental banner shown above.
• false does not mean “never prerendered”—check activationStart for past prerender (MDN).
• Read-only boolean; you cannot force prerender from this property.
• Pair with Speculation Rules markup on linking pages to enable prerender.
• Related: hidden, activeViewTransition, Document constructor.

💡 Best Practices