Why I inlined my CSS in 11ty
February 11, 2026
I recently made a small change to this 11ty site: I moved from external CSS to inlining my stylesheet directly in the HTML. The result? Faster page loads and a simpler deployment process.
I replaced this in my base.njk template:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
With this:
<style>
{% include "../../css/style.css" %}
</style>
That's it. One simple template change that makes every page generated by 11ty include the CSS directly in the <head>.
This site is small, and the CSS is small only 5KB. There’s no real reason to make an extra request for something that rarely changes. Inlining it means faster initial render and one less moving part.
It also simplifies deployment. There’s no separate CSS file to cache, invalidate, or forget to upload. Each page is self contained and ships exactly as it should.
Next post: Back to 11ty