htmlgoogle-chromenavigationprefetchpre-rendering

`speculationrules` markup not working for prerendering pages in Chrome


Following the instructions in the Chrome blog Prerender pages in Chrome for instant page navigations, I am trying to enable pre-rendering on a website. I have added this snippet just before </body>.

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["/Test/1","/Test/2","/Test/3"]
      }
    ]
  }
</script>

However, on the latest version of Chrome 108, none of these valid URLs are prefetched or prerendered when opening the page. I can confirm this in the Network tab of Dev Tools, and by following links to the pages which take the usual load time.

In the console, HTMLScriptElement.supports('speculationrules') returns true.

Am I missing something?


Solution

  • I can confirm this in the Network tab of Dev Tools

    As the new prerender happens in a separate process (effectively like a background tab) any network calls are not shown in the current page’s DevTools.

    So here’s a few things to check:

    1. Use DevTools to debug speculation rules
    2. Make sure you have “Preload pages” ticked in Settings->Performance. Some extensions (such as uBlock Origin) can turn this setting off.
    3. Chrome doesn’t prerender when it’s already using a lot of memory. Try restarting Chrome with just that tab to rule this out.
    4. It’s worth confirming if this is a specific issue to your site, or a general prerendering issue. Checkout the demo linked from that article and let us know if that works
    5. Switching tabs currently cancels any prerenders. So make sure you launch straight from your page.
    6. URL param differences can prevent prerendering being activated as it’s effectively not the same page.