Optimizing Page Speed

Eleventy renders your pages to pre-built static HTML with no client-side JavaScript by default, so this starter is fast before you do anything. The tips below cover how to keep it that way, and which pre-wired pieces of this starter do the heavy lifting for you.

0 KB JS by defaultWebP via the {% image %} shortcode100 Lighthouse

Step 1

Ship as little JavaScript as possible

Biggest win

Eleventy compiles every template to plain HTML at build time and ships no client-side JavaScript on its own. There's no framework runtime to hydrate, so only add a <script> where you genuinely need interactivity, and keep it small and deferred.

src/index.html

{# Pure static HTML, nothing ships to the browser #}
<section class="hero">
  <h1>Fast by default</h1>
</section>

{# Add JS only where you truly need it, deferred, scoped #}
<script type="module" src="/assets/js/counter.js"></script>

The less you put on the wire, the higher your Lighthouse Performance score, toggle to compare:

100

Performance

100

Accessibility

100

Best Practices

100

SEO

This Eleventy site (zero JS)

Illustrative scores, but the gap is real: less JavaScript on the wire means a faster Largest Contentful Paint and a higher Performance score.

Step 2

Use the built-in {% image %} shortcode

This starter already wires up @11ty/eleventy-img in .eleventy.js as a Nunjucks shortcode, you don't need to install or configure anything. It generates responsive WebP + JPEG sizes, emits a full <picture>, and bakes in width / height so the layout never shifts (great for CLS).

Pass the source path, alt text, a CSS class, the loading attribute, and an optional sizes string:

src/index.html

{# args: src, alt, class, loading, sizes (optional) #}
{% image "./src/assets/images/hero.jpg", "Our team at work", "hero__image", "eager" %}

{# below the fold? lazy-load it #}
{% image "./src/assets/images/gallery/skyscraper.jpg", "Project showcase", "gallery__image", "lazy" %}

The shortcode is defined for you, this is what's already in .eleventy.js, so you only tweak it if you want different widths or output formats:

.eleventy.js

let metadata = await Image(`${src}`, {
  widths: [200, 400, 850, 1920, 2500],
  formats: ["webp", "jpeg"],
  urlPath: "/images/",
  outputDir: "./public/images",
});

// registered lower down:
eleventyConfig.addNunjucksAsyncShortcode("image", imageShortcode);

Always route images through {% image %} rather than a raw <img>: every call emits responsive WebP with dimensions baked in. The first loading argument lets you mark above-the-fold images eager and everything else lazy.

Step 3

Keep fonts self-hosted

Third-party font requests add a render-blocking round-trip. This starter already ships Roboto locally in src/assets/fonts (as .woff2 / .woff), and addPassthroughCopy("./src/assets") in .eleventy.js copies them straight to public/. To swap or add a family, drop the files in that folder and declare them with @font-face (use font-display: swap):

src/assets/css/root.css

@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/roboto-v29-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

Step 4

Let the LESS → PostCSS pipeline minify your CSS

This starter compiles your styles itself. Write LESS in src/assets/less; the processor in src/config/processors/less.js renders it through PostCSS, running autoprefixer on every build and cssnano minification when ELEVENTY_ENV=PROD: and writes the result to public/assets/css:

src/config/processors/less.js

const isProduction = process.env.ELEVENTY_ENV === "PROD";

// autoprefixer always; cssnano only minifies in production
const processor = postcss([
  autoprefixer(),
  ...(isProduction ? [cssnano({ preset: "default" })] : []),
]);

Measure, don't guess

After each change, audit the deployed URL with Google PageSpeed Insights or the Lighthouse tab in Chrome DevTools. Test the production build, the dev server is unoptimized and will always look slower.

Light pages, happy users.