eleventy-plugin-auto-preload is a plugin for Eleventy that adds a preload for the first image with fetchpriority="high".
To install and use the plugin, install it as a dev dependency in your Eleventy project:
npm install eleventy-plugin-auto-preload --save-devAnd add this to .eleventy.js:
const autoPreload = require("eleventy-plugin-auto-preload");
eleventyConfig.addPlugin(autoPreload);Make sure the largest image visible above the fold has a fetchpriority="high" attribute, so that the plugin adds a preload element in the <head> of the document, to improve image loading start time.
More information:
- about
fetchpriority="high": Optimizing resource loading with Priority Hints - about
<link rel="preload"… />: Preload critical assets to improve loading speed
This project is licensed under the MIT License.