The New CSS

← Blog/2026-02-10

How to build fast sites by shipping less CSS

Every kilobyte of CSS is a render-blocking resource. The browser cannot paint pixels until it has downloaded and parsed your stylesheets. Shipping less CSS is one of the most impactful performance optimizations you can make.

Why CSS payload matters

CSS blocks rendering. Unlike JavaScript, which can be deferred or loaded asynchronously, CSS in the <head> must be fully downloaded before the browser renders anything.

A 50KB stylesheet on a 3G connection adds measurable delay to First Contentful Paint. On low-end devices, parsing large CSS files also consumes CPU time.

Practical tips for reducing CSS

1. Start with a small baseline

Instead of loading a full framework and purging unused styles, start with a library that is small by design.

The New CSS ships under 5KB gzipped. That is the entire library — layout, typography, colors, responsive breakpoints, and dark mode. No purge step needed because there is nothing to purge.

<link rel="stylesheet"
  href="https://unpkg.com/the-new-css/dist/the-new-css.min.css">

2. Avoid unused styles

If you use a large framework, audit your CSS with DevTools Coverage tab. Look for rules that never match any element. Often, less than half of a large framework is actually used on a given page.

3. Use modern CSS features

Modern CSS reduces the need for workarounds:

  • CSS variables replace multiple duplicate values with a single custom property
  • @layer eliminates specificity hacks
  • oklch() provides better color manipulation without Sass functions

    • 4. Inline critical CSS

    For the fastest possible first paint, inline your critical CSS in the <head> and load the rest asynchronously. With a library under 5KB, you may be able to inline the entire stylesheet.

    5. Measure what matters

    Use Lighthouse or WebPageTest to measure:

  • First Contentful Paint (FCP)
  • Largest Contentful Paint (LCP)
  • Total blocking time from CSS

    • These metrics tell you whether your CSS payload is hurting real-world performance.

    The payoff

    Shipping less CSS means faster page loads, better Core Web Vitals, and a better experience for users on slow connections. It is one of the few optimizations that has zero trade-offs — less code means less to download, parse, and maintain.

    Try The New CSS — a lightweight CSS library built for fast sites.

    Try The New CSS

    A lightweight, zero-config CSS library for modern websites.

    Get started