Utility CSS from a CDN in production

#The numbers

The production file is dist/monsoon.min.css. Measured on version 0.2.0:

CDNs and most hosts send brotli to browsers that accept it, so 88.3 kB is what a visitor downloads once. The repository has a size check that warns above 100 kB and fails above 120 kB with brotli, so the number cannot creep up unnoticed.

For comparison with everyday assets: that is less than a typical hero photo, and the stylesheet is shared by every page of the site.

#Caching and pinning

Pin the version in production. A versioned URL never changes content, so the browser can keep it in cache across visits and the CDN can serve it from the edge:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss@0.2.0/dist/monsoon.min.css">

Modern browsers partition their cache per site, so do not count on visitors already having the file from another website. Count on the second page view and every later visit being free.

#Render blocking is a feature for CSS

Stylesheets in the head block the first paint until they load. For your main stylesheet that is exactly what you want: the alternative is a flash of unstyled content. Keep it fast by:

• placing the <link> early in the <head>,
• using <link rel="preconnect"> for the CDN host if it is a new origin for the page,
• avoiding @import chains, which make the browser discover files one after another.

There is no JavaScript to wait for. Seed theming and dark mode are computed by the CSS engine during the same style pass as everything else.

#When purging is worth it

Purging removes the rules your files never mention. It is worth the extra step when the first visit matters a lot (for example a landing page for paid traffic), when you serve users on slow networks, or when you already have a deploy step anyway.

npx monsooncss purge "src/**/*.html" "src/**/*.js" -o public/monsoon.css

monsooncss purge: scanned 1 file
  kept 294 of 16351 utility rules
  public/monsoon.css: 281.2 kB raw, 48.4 kB gzip, 39.2 kB brotli (full build 88.0 kB brotli)

That output comes from the kitchen sink demo in the repository, a page that uses a wide mix of utilities. The purged file keeps the reset, the theme tokens and the keyframes, so seed theming and dark mode still work.

#Production checklist

1. Pin the exact version in the URL.
2. Add integrity and crossorigin if your security policy wants subresource integrity.
3. Preconnect to the CDN host, or self host the file on your own origin.
4. Decide if the full file is fine. If not, purge in your deploy step and safelist dynamic classes.
5. Check the page in light and dark mode, and with your seed color, before you ship.

#Frequently asked questions

#Keep reading