CSS-Tricks v20 Cuts Page Weight 39% in Iterative Redesign

CSS-Tricks shaved total page weight from 2.03 MB to 1.24 MB — a 39% cut — in version 20 of its theme, its first full visual refresh since the previous version shipped five years ago. The site's author frames it not as a rebuild but as an "iterative rollup that's worthy of a version bump," and the numbers mostly back him up.

What got excavated?

The biggest wins are invisible. Nineteen years of accumulated theme code carried dead JavaScript: scripts for a long-gone embedded newsletter, Flexbox Guide toggle handling that predates proper HTML <details>, a jQuery lazy-loader WordPress core now covers, and third-party ad code retired when the site went to self-hosted ads. Compiled JavaScript dropped from 151.6 KB (55.3 KB gzipped) to 133.8 KB (48.1 KB).

The forum went too. It had sat in "archive mode" since roughly 2018, and the discussions dated back over a decade. Deactivating the bbPress plugin and clearing the database carved out 400 MB and let several custom templates disappear from the theme.

What changed in the workflow?

The build still runs Gulp — yes, still — but the surrounding tooling modernized:

• Prettier enforced via husky and lint-staged pre-commit hooks
• Stylelint enforcing alphabetical CSS property order
• A GitHub Actions build check
• Cache-busting switched from rewriting source files to filemtime()

The recurring terminal errors of years past are gone. He calls the result clean and fast, and doesn't claim the workflow is finished.

How did AI factor in?

He ran a security audit with Claude, prompting it to review recent WordPress security release notes and flag where the theme needed hardening. The AI acted as a gopher; he wrote most patches himself. His framing is candid: it's a gut-check for areas like security where he's "clearly no expert." A few unescaped custom field calls got fixed along the way.

What do the design changes actually do?

Sass got reorganized from a flat structure into partial directories, with compromises — /header should live in /layout, but ordering constraints won. CSS fell from 180 KB (31.7 KB gzipped) to 169 KB (24.6 KB), helped by splitting form styles into a separate forms.css served only where WooCommerce, Restrict Content Pro, and Gravity Forms are enqueued.

Semantic design tokens now abstract the accumulated grays, fonts, spacing, and one-off utilities. The visible payoff: consistent link styles with visual cues that don't rely solely on color or opacity changes — an accessibility improvement, not just polish. Forms and tables were reset and redone despite coming from three different plugin sources.

The site also got its first color scheme toggle in roughly eight years, handling system, dark, and light themes with a single toggle and a view transition that slides the new theme over the old. The article content container stays white in both modes; he isn't convinced black-on-toggle is the right call yet.

New visual flourishes lean on fresh CSS. A "Jawbreaker" dot texture generates 90 <circle> elements in PHP with randomized seed, size (2–5px), fill, and twinkle animation delays. A blobby gradient card behind homepage author avatars uses border-shape, shape(), and random() — Chrome-only today — with the first shape lifted from Temani Afif's blob generator. Hover states re-randomize per page load, and animation respects prefers-reduced-motion.

The Almanac index became a periodic-table-style layout of CSS features. The guides index dropped its vertical book-stack for a featured guide, a new-and-updated widget, and a categorized grid — with 27 guides, the old layout meant scrolling with no preview of what came next.

Do the Lighthouse numbers hold?

He calls Lighthouse "more fun than fact," and fair enough. The movement:

• Accessibility: 86 → 91; Best Practices: 75 → 100
• LCP: 8.5s → 7.2s; CLS: 0.032 → 0; Time to Interactive: 8.6s → 4.0s
• SEO slipped 92 → 90, which he explicitly doesn't prioritize over accessibility

Performance inched from 71 to 72, and TBT ticked up from 10ms to 13ms. He acknowledges limits: little control over time to first byte, and more cleanup still lurking in the theme directory. Further fixes will land in quieter iterative releases — the honest way to ship a 19-year-old site.