<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>
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
Lab
Field
Loading
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
<script type="speculationrules">
{
"prerender": [
{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}
],
"prefetch": [
{
"where": { "not": { "href_matches": "/*" } },
"eagerness": "moderate"
}
]
}
</script>
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);
}
🫠
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.
Impact on UX
😬
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();
😬
Barry Pollard
📚
📚
📚
📚
💻
💻
📓