Instant navigation with

Speculation Rules API

I'm techie

<script type="speculationrules">
{
  "prefetch": [
    {
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>
<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "href_matches": "/*"
    }
  }]
}
</script>
<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "href_matches": "/*"
    },
    "eagerness": "moderate"
  }]
}
</script>
"eagerness": "immediate | eager | moderate | conservative"
<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
        { "not": {"selector_matches": ".do-not-prerender"}},
        { "not": {"selector_matches": "[rel~=nofollow]"}}
      ]
    }
  }]
}
</script>

Why?

64.8% of origins (↑ 1.1%) had good LCP

78.2% of origins (↑ 0.2%) had good CLS

85.0% of origins (↑ 0.8%) had good INP

50.1% of origins (↑ 2.0%) had good LCP, CLS and INP

Chrome UX Report 📊
The 202408 release is now live on BigQuery!

Lab

Field

Loading

LCP

Largest Contentful Paint 

How does it work?

chrome://predictors/

A Use Case

Load page

Prerender

Prerender

Load page

Load page

LCP

Load page

Prerender

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["product-list-page.html"]
    }
  ]
}
</script>

  home.html

Load page

Prerender

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["product-detail-page.html"]
    }
  ]
}
</script>

  product-list-page.html

Load page

Prerender

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["product-detail-page.html"],
      "eagerness": "..."
    }
  ]
}
</script>

  product-list-page.html

  • immediate: This is used to speculate as soon as possible, that is, as soon as the speculation rules are observed.
  • eager: This behaves identically to the immediate setting, but in future, we are looking to place this somewhere between immediate and moderate.
  • moderate: This performs speculations if you hold the pointer over a link for 200 milliseconds (or on the pointerdown event if that is sooner, and on mobile where there is no hover event).
  • conservative: This speculates on pointer or touch down.

speculationrules/eagerness

Demo or
it didn't happen

<script type="speculationrules">
  {
    "prerender": [
      {
        "where": { "href_matches": "/*" },
        "eagerness": "moderate"
      }
    ],
    "prefetch": [
      {
        "where": { "not": { "href_matches": "/*" } },
        "eagerness": "moderate"
      }
    ]
  }
</script>

speculationrules/like-a-boss

if (HTMLScriptElement.supports &&
    HTMLScriptElement.supports('speculationrules')) {
  const specScript = document.createElement('script');
  specScript.type = 'speculationrules';
  specRules = {
    prerender: [
      {
        urls: ['/next.html'],
      },
    ],
  };
  specScript.textContent = JSON.stringify(specRules);
  console.log('added speculation rules to: next.html');
  document.body.append(specScript);
}

speculationrules/like-a-boss

speculationrules/like-a-boss

Single Page Application

speculationrules/support

🫠

Caution: Over-speculation has a clear cost to users for bandwidth, memory, and CPU costs, but also for sites themselves. Be conscious of the impact you are putting on your users when implementing speculations. The eagerness settings allow you to reduce the likelihood of wasted speculations. Chrome also places limits on speculations to reduce the impact of overuse.

speculationrules/caution

Impact on UX

😬

speculationrules/caution

Impact on analytics

// Set up a promise for when the page is activated,
// which is needed for prerendered pages.
const whenActivated = new Promise((resolve) => {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', resolve, {once: true});
  } else {
    resolve();
  }
});

async function initAnalytics() {
  await whenActivated;
  // Initialise your analytics
}

initAnalytics();

😬

Speed Brain: helping web pages load 45% faster

Speculative Loading
By WordPress Performance Team

Barry Pollard

speculationrules/resources

📚

📚

📚

📚

💻

💻

📓