How I sped up 11ty build time on Netlify from 5 min to 13s

Posted

2026-04-24

The Eleventy Image Plugin is amazing. Unfortunately generating images takes a lot of time. In Case of this site, it took 4-5 minutes on Netlify, meaning not only every change takes that long befor it goes live, also Netlify build minutes are eaten up quite quickly.

Ryan Gittings recently posted Speeding Up Large 11ty Builds on Netlify where he explains how to setup netlify build cache for netlify. As he is missing one critical detail, I'll explain it here.

First install tne plugin:

pnpm add netlify-plugin-cache
# or: npm i netlify-plugin-cache -D

In your netlify.toml you need to setup which folders should be cached by netlify. By default it's just .cache. But; since the 11ty image plugin does not use this folder for generated images, this has no effect yet.

To make this work, you need to add your folder with generated images to the caching:

# netlify.toml

[[plugins]]
package = "netlify-plugin-cache"
    [plugins.inputs]
    paths = [".cache", "_site/assets/generated"]

In my case it's _site/assets/generated, just make sure it's the same as specified in eleventy your Eleventy config.

// eleventy.config.js

config.addPlugin(eleventyImageTransformPlugin, {
	formats: ['avif'],
	outputDir: './_site/assets/generated/',
	urlPath: '/assets/generated/',
	widths: [600, 1200, 1920],
	defaultAttributes: {
		loading: 'lazy',
		decoding: 'async',
		alt: '',
	},
});

Also make sure you only generate sizes and formats you actually need. In most cases avif format is enough, since it's well supported across browsers. Which sizes makes sense really depends on your layout.

For me this cut Netlify build time from 4-5 minutes down to about 13 seconds. 🎉