How to prerender pages for an instant loading?

As we go forward, the competition for better and faster website performance is getting more and more close. All website developers try to provide a better user experience and improved web page performance to win in this competition by taking necessary actions including improving pages’ loading time. This is a must-to-consider goal while better performance is an important SEO signal during web page optimization. In this article, we will go deeper into the prerendering topic which is one of the solutions for reducing loading time and improving Core Web Vitals scores.

In this article:

• What is prerender?
  • What is the difference between prerendering and prefetching?
• Impact of prerendering on a web page performance
• Old method of prerendering (deprecated)
• When a page can be prerendered on Google Chrome?
• Prerender using speculation rules API
• Document rules in Speculation Rules API
  • eagerness in Speculation Rules API
• Debug prerender in browser console
• Detecting prerendered pages in server-side
• Dynamic and static prerendering in WordPress
• FAQs about prerendering pages on browsers

What is Prerender?

Prerender adds an ability to browsers render web pages that may be navigated by a user shortly. By asking the browser to prerender a page(s), it will download all the page resources or may execute JavaScript too. So, the prerendered pages perform like hidden opened tabs and are and ready to be shown to the users immediately after user click.

What is the difference between prerendering and prefetching?

By prefetching a web page, the HTML document will be fetched and ready to load fast by user interaction, while by prerendering a page, in addition to fetching the HTML document, the other page resources including images, js, and CSS will be fetched and prerendered.

Prerender and prefetch can be used on the same-origin.

Impact of prerendering on a web page performance

As mentioned earlier, when a future navigation is prerendered, its resources will be loaded and a prerendered format of the page is ready to be shown to the user. This way, the waiting time for fetching, executing, and rendering will be likely removed and an immediate page loading is the result. One critical point that must be considered is that the prerendering process uses memory and bandwidth, in this situation, the browser decides to prerender future navigations based on the device memory and battery condition.

Old method of prerendering (deprecated)

Earlier, prerendering was being done by the use of <link rel=”prerender” href=”/next-page/”>, by this mechanism, a page was prerendered and all its resources were downloaded, but JavaScript was not executed. It is recommended to use speculation rules API instead for prerendering which you can read about later in this article.

<link rel="prerender" href="https://example.com/page1/"> //Deprecated, use Speculation Rules API prerender instead

When a page can be prerendered on Google Chrome?

There are three ways for a page to be prerendered on Google Chrome:

1. Google Chrome may prerender a page after you enter the page’s address in the browser address bar.
2. Google Chrome may prerender search results after entering a search term in the browser address bar. You can see the Google Chrome predictions on chrome://predictors
3. A page can also be prerendered automatically by using speculation rules API. This way, you can tell the browser which page(s) should be prerendered.

Prerender using speculation rules API

For prerendering specific pages of your website, you can use speculation rules and insert a JSON to the specific page where you are going to prerender (or prefetch) the next pages that may be visited by a user. 

<script type="speculationrules">
{
 "prerender": [
   {
     "source": "list",
     "urls": ["next.html", "next2.html"]
   }
 ]
}
</script>

Prerendering process usually uses 100MB of device memory and it is limited to the 150MB memory usage.

You can also use the speculation rules to prefetch one or more pages the same as prerender.

Chromium based browsers are NOT able to prerender a web page using speculation rules API if:

1. You are using a low-memory device
2. Your device’s operating system is on battery saver or data saver mode.

Speculation rules can be inserted into the <head> or <body> of the current page statically and dynamically.

Google Chromium browsers do not prerender pages on low-end devices, but they will be preconnected instead.

Document rules in Speculation Rules API

Document rules in speculation rules API has been supported since Google Chrome 121. Document rules provide the possibility to prerender or prefetch links located on page based on include and exclude conditions, so the browser will consider them for prerendering or prefetching links.

prerender_script = {
  "prerender": [{
     "source": "document",
     "where": {
       "and": [
           {"href_matches": "/*"},
           {"not": {"href_matches": "/logout"}},
           {"not": {"selector_matches": ".no-prerender"}}
        ]}
      }]
};

In the example above, all links started with “/” will be prerendered except from the “/logout” page and all the links match “.no-prerender” selector.

eagerness in Speculation Rules API

It is also possible to add “eagerness” attribute with the “immediate”, “eager”, “moderate”, and “conservative” values to the document rules in the speculation rules API.

prerender_script = {
  "prerender": [{
     "source": "document",
     "where": {
       "and": [
           {"href_matches": "/*"},
           {"not": {"href_matches": "/logout"}},
           {"not": {"selector_matches": ".no-prerender"}}
        ]},
      "eagerness": "moderate"
      }]
};

1. immediate: It works immediately after page loading when speculation rules are observed, regardless of the hover or mouse down.
2. eager: It has the same functionality as “immediate”, but it will be later placed between “immediate” and “eager”
3. moderate: It works on mouse hover for 200 milliseconds, “pointerdown” event (if it happens before hovering), and on mobile taps.
4. conservative: It only works on touch down or pointer down.

Debug prerender in the browser DevTools

To check or make sure which pages are prerendered on the Google Chrome browser, you can follow the steps below:

1. Open Google Chrome DevTools.
2. Head over to the Application tab.
3. Scroll down the left side on DevTools and look for Speculative loads > Speculations.
4. Refresh the current page, and wait for the list of prerendered pages.

You can also change the renderer to the desired prerendered page, so you will be able to check if the page is fully prerendered or some parts of that are not prerendered by following the instructions below:

1. In the Application tab > Speculations, select the desired prerendered page.
2. In the Speculative Loading Attempt section on the same tab, press the Inspect button.
3. You can check if the renderer from the top right dropdown has been changed or not.

When the renderer is getting changed, it will be applied on all other DevTools tabs. For example, you can go to the Network tab, then you will see the requested page is the prerendered page.

After changing the renderer (by inspecting a prerendered page as mentioned earlier or selecting from the dropdown on the top right side of DevTools), you can also check HTTP Header, and see the Sec-Purpose: prefetch;prerender is set for prerendered resources in the Request Headers.

Now by heading over the Elements tab, you can check the prerendered page elements like its title <h1>.

Chromium based browsers limit the number of prerendering pages to 10 due to controlling the memory. Here is the error message in Speculations section in Google Chrome DevTools:

Failure – The prerender whose eagerness is “eager” was not performed because the initiating page already has too many prerenders ongoing. Remove other speculation rules with “eager” to enable further prerendering.

Depending on tabs that are active or not, if none of the prerendered pages be clicked, you will see the “Failure” message in the Speculations section in the DevTools after a couple of minutes. For re-prerendering the pages, you need to refresh the current page.

Detecting prerendered pages server-side

Web servers can respond based on HTTP headers. For detecting prerendered pages in server-side, the HTTP header must contain Sec-Purpose: prefetch;prerender, so web servers can log prerendered requests, return specific content, or prevent prerendering. By checking the web server logs, the prerender requests will be visible.

Sec-Purpose: prefetch;prerender // HTTP Request Header for prerendering

Dynamic and static prerendering in WordPress

For prerendering pages on a WordPress website, there is no need to make changes in codes anymore! By using Oxyplug Prerender and Prefetch plugin, in addition to having the prefetching option, you have the prerendering option as well. By enabling this newly added option in the plugin settings, X number of pages on the archive (category) pages and one or more links after X milliseconds of hovering will be prerendered automatically. It is also possible to add URLs of desired pages manually which you want to be prerendered on an specific page.

FAQs about prerendering pages on browsers