Lazyload images (Eleventy plugin)
This plugin searches for <img>
tags and adds the attribute loading="lazy"
to improve web performance without adding external scripts😎; you can deactivate it in a per-image basis adding the attribute loading="eager"
(it is advised to do this with images that are in the first visible viewport).
The attribute is better explained here, and it's supported on most browsers.
Install the package:
npm install --save-dev eleventy-plugin-lazyload
# or:
yarn add --dev eleventy-plugin-lazyload
Then update your Eleventy configuration file (usually .eleventy.js
):
const lazyloadPlugin = require('eleventy-plugin-lazyload')
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(lazyloadPlugin, {
alt: false, // if enabled, adds an empty alt attribute on images that don't have it
})
}
This project is licensed under the MIT license