Home > Software design >  `speculationrules` markup not working for prerendering pages in Chrome
`speculationrules` markup not working for prerendering pages in Chrome

Time:12-15

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?

CodePudding user response:

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. The Chrome team are working on adding DevTools support.

So here’s a few things to check:

  1. Chrome doesn’t prerender when it’s already using a lot of memory. Try restarting Chrome with just that tab to rule this out.
  2. Make sure you have “Preload pages” ticked in Settings->Privacy & Security->Cookies and other site data
  3. Chrome Canary has a handy experimental setting which shows the reason pre-renders fail worth checking that out. Hopefully that will make it to stable soon.
  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 strait from your page.
  6. URL param differences can prevent prerendering being activated as it’s effectively not the same page.
  7. There have been a few bug fixes since 108, so it maybe you’re hitting one of those. Check dev, beta, or Canary versions.
  8. There is a “holdback” group of people we randomly select to disable this feature so we can continue to monitor it as it is rolled out, and compare to those not using it. It could be you’re in this group. Unfortunately there’s no easy way to tell this (the Chrome team is working on adding this). Could try different browsers, versions of Chrome, computers, or guest mode.

Might be able to advise more after you try above steps and let me know.

  • Related