Joan León PRO
⚡️ Web Performance Consultant | Speaker | Staff Frontend Engineer at @AdevintaSpain | @GoogleDevExpert in #WebPerf | @cloudinary Ambassador
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
📚
📚
📚
📚
💻
💻
📓
Instant navigation with Speculation Rules API
By Joan León
Instant navigation with Speculation Rules API
Discover how the Speculation Rules API can help us improve the UX of our website's navigation flows. We'll learn how the API works, and how to use it to "pre-render" pages (in Chromium browsers) to achieve instant navigation.
