A walkthrough of an optimized CSS loading strategy for an Eleventy static site. The approach uses component-colocated styles, a Cheerio-based post-processing transform to deduplicate and move stylesheets from body to head, and a custom Liquid shortcode that inlines styles as `<style>` elements in production while using external `<link>` tags in development for faster hot-reloading. The result is per-page minimal CSS with no duplicate requests.
Table of contents
What’s so difficult anyway? §Including necessary styles only §Deduplicating stylesheets §Inlining styles for performance §Optimizing the watch mode §Wrapping up §Sort: