Optimization

How to prerender pages for an instant loading?

Prerendering pages using speculation rules API

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?

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"
      }]
};
eagernesson DOMContentLoadedon hoveron mouse down
immediate✔️
eager✔️
moderate✔️✔️
conservative✔️
eagerness in speculation rules API
  1. immediate and eager: It works after page loading, regardless of the hover or mouse down.
  2. moderate: It works on hover and mouse down.
  3. conservative: It only works on mouse 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.
Checking prerendered pages on Google Chrome DevTools
Checking prerendered pages on Google Chrome DevTools

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.
Changing renderer by inspecting prerendered page Chrome DevTools
Changing renderer by inspecting prerendered page Chrome DevTools

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.

Prerendered page in network tab after changing renderer DevTools
Prerendered page in network tab after changing renderer DevTools

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.

Prerendered page HTTP header showing Sec-Purpose: prefetch;prerender
Prerendered page HTTP header showing Sec-Purpose: prefetch;prerender

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

Prerendered page H1 title is shown in current page DevTools after changing the renderer
Prerendered page H1 title is shown in current page DevTools after changing the renderer

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.

Prerendered page is discarded because of being in background for so long
Prerendered pages are discarded because of being in background for so long

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

Is a prerendered, but not visited page, recorded on Google Analytics reports?

No, Google Analytics is able to distinguish the prerendered pages from normally loaded pages, so there is not any unreal data about visited pages in the Google Analytics reports.

Are videos on a page downloaded during the prerendering process?

No, videos which are located on future navigations, are not downloaded during in the prerendering process.

Is there a file size limit during prerendering?

No, there is no file size limit for prerendering. So, even if there are resources such as images with large file sizes, the host page will be prerendered.

Is there a resource number limit during prerendering? 

No, there is no limit in the number of resources that are going to be prerendered using speculation rules API.

Is there any limit in the number of prerendering?

Yes, Chromium based browsers only prerender 10 pages to prevent high memory usage.

Leave a Reply

Your email address will not be published. Required fields are marked *