| eleventyNavigation |
|
|---|
{% tableofcontents "open" %}
Eleventy allows you full control over the output. That also means that by-default we do not include any costly runtime JavaScript bundles that often hamper site performance!
{% callout "", "md" %}Have a look at our new Partial Hydration <is-land> component!{% endcallout %}
Sites listed on the Eleventy Leaderboards are tested and ranked (approximately) monthly as a fun community way to maintain speedy site performance for Eleventy sites.
- Want to add your site to the Leaderboards?
Looking for guidance on single page applications (SPA)?
Eleventy offers best-in-class build performance for JavaScript site generators.
<script src="/js/throbber.js"></script> {% renderTemplate "webc" %}{% endrenderTemplate %}Data taken from Which Generator Builds Markdown the Fastest? (July 2022).
- You can analyze your project’s specific build performance metrics (via DEBUG or Node.js CPU Profiling).
- Memoize costly Shortcodes and Filters (we typically see the most expensive ones are those performing JavaScript, CSS, or HTML minification)
- Take passthrough copy out of your build-loop with the Eleventy Dev Server.
- Use the Image HTML Transform method to optimize images on-request during development.
- Use
--incrementalfor Incremental builds. - Use the Directory Output plugin to report per-template performance and file size information.
- Making network requests (to an API) can be expensive! Use the Fetch utility to create a local cache of external network requests (use
durationto configure how long the cache should last).
Data taken from The JavaScript Site Generator Review, 2023 (February 2023).