# 11ty Hacks for Fun and Performance

DevFeed: [11ty Hacks for Fun and Performance](<https://devfeed.tech/articles/11ty-hacks-for-fun-and-performance-26560.md>)

Original publisher: [Read original article](<https://infrequently.org/2025/10/11ty-hacks-for-fun-and-performance/>)

Author: Alex Russell

Published: 2025-10-04T00:00:00Z

Content type: tutorial

Language: en

Sources: [Alex Russell](<https://devfeed.tech/sources/alex-russell.md>)

Topics: [Script](<https://devfeed.tech/topics/script.md>), [Nunjucks](<https://devfeed.tech/topics/nunjucks.md>), [Markdown](<https://devfeed.tech/topics/markdown.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [11ty](<https://devfeed.tech/tags/11ty.md>), [async](<https://devfeed.tech/tags/async.md>), [blog](<https://devfeed.tech/tags/blog.md>), [blogging](<https://devfeed.tech/tags/blogging.md>), [build](<https://devfeed.tech/tags/build.md>), [code](<https://devfeed.tech/tags/code.md>), [fun](<https://devfeed.tech/tags/fun.md>), [hacks](<https://devfeed.tech/tags/hacks.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [js](<https://devfeed.tech/tags/js.md>), [module](<https://devfeed.tech/tags/module.md>), [performance](<https://devfeed.tech/tags/performance.md>), [script](<https://devfeed.tech/tags/script.md>), [web](<https://devfeed.tech/tags/web.md>), [webdev](<https://devfeed.tech/tags/webdev.md>)

## AI overview

A developer shares techniques for improving performance in an 11ty site, including selectively loading shortcode resources through the 11ty Bundle plugin, avoiding duplicate scripts, and handling Nunjucks and Markdown preprocessing.

## Source excerpt

This blog really isn't just for beating up on Apple for the way it harms users, the web, standards, and society to maintain power and profits. So here's some fun stuff I've been doing in my 11ty setup to improve page performance. Contents Page-Specific Resources via Shortcodes and the 11ty Bundler Mo Pagination, Mo Problems Build Time Impact Scroll-Position Based Delayed Code Loading Faster CSS Selectors for 11ty Syntax Highlighting Lean Rada's CSS-only Low-Quality Image Previews Bonus Hack: Global Acronyms for Better Abbreviations Does It Work? Page-Specific Resources via Shortcodes and the 11ty Bundler You know how it gets once you've got a mature 11ty setup: shortcodes proliferate, and some generate output that might depend on JS or CSS. If your setup is anything like mine, you might also feel conflicted about including some of those resources globally. It's important to have them available for the posts that need them, but it's not great to bring a charting library, e.g., into every page when only 1 in 20 will need it. This blog has grown many such shortcodes that generate expansions for features like: Web Components for YouTube and Vimeo embeds WebPageTest.org test embeds plot.js based charts Here, for instance, is how a Vimeo embed looks in the markdown of a page, using Nunjucks for Markdown pre-processing: {% vimeo "VIDEOID", "TITLE" %} This expands to: <lite-vimeo videoid="VIDEOID" videotitle="TITLE"> <a href="http://vimeo.com/VIDEOID">TITLE</a> </lite-vimeo> But this also requires script; e.g.: <script type="module" async src="/assets/js/lite-vimeo/lite-vimeo.js"> </script> And the list keeps growing. To avoid having the weight of these components clogging up every page, a system for selectively pulling in their code would be helpful. It'd also be grand if we could make sure scripts appear just once, even if shortcodes are invoked multiple times per page. Included code should preferably also be located towards the top of the document. The 11ty Bundle plugin