Speculation Rules + Eleventy

Automatically generates speculation rules enabling simple prefetching and prerendering across an Eleventy site.

Just install into your eleventy project (not currently published on npm):

npm install [path to this repository] --save-dev

Add it to your .eleventy.js:

// CJS syntax
const SpeculationRulesPlugin = require("eleventy-plugin-speculationrules");

module.exports = function(eleventyConfig) {
    eleventyConfig.addPlugin(SpeculationRulesPlugin);
};

// ESM syntax
import SpeculationRulesPlugin from "eleventy-plugin-speculationrules";

export default function(eleventyConfig) {
    eleventyConfig.addPlugin(SpeculationRulesPlugin);
}

Add the speculationRules shortcode to your layout, likely at the end of the <head> or <body> element. For example, in a Nunjucks template:

{% speculationRules %}

The following options can be passed to addPlugin:

shortcode: A string naming the generated shortcode (default "speculationRules")
action: What kind of preloading you would like ("prefetch" or "prerender"; default "prefetch")
eagerness: The speculation rules heuristic eagerness ("immediate", "eager", "moderate", or "conservative"; default "moderate")
exclude: An array containing or more URL patterns within the path prefix not to preload; path-relative ones will be rewritten according to your Eleventy path prefix

If you apply CSP to your site, you'll need to add 'inline-speculation-rules' to the script-src directive (or another directive applicable to <script> elements).

jeremyroman/eleventy-plugin-speculationrules

Speculation Rules + Eleventy