Articles /

performance

Performance-first CSS

Load and render strategies that keep CSS fast — covering CLS, FCP, LCP, and animation performance.

Why CSS performance matters in 2026

CSS blocks rendering. A large stylesheet delays First Contentful Paint (FCP) and Largest Contentful Paint (LCP). Layout shifts caused by images, fonts, and dynamic content damage Cumulative Layout Shift (CLS) scores. In 2026, Core Web Vitals are a confirmed ranking factor, and users on mobile networks still see CSS as the biggest bottleneck on the critical path.

The good news: modern CSS features themselves are part of the performance story. aspect-ratio eliminates CLS. animation-timeline: scroll() replaces JS scroll listeners that block the main thread. Pure CSS patterns replace heavy component libraries.

Eliminate layout shift (CLS)

Images: Set width and height attributes on <img> tags AND use aspect-ratio on the container. The browser uses the HTML attributes to infer ratio before the image loads.

/* Prevents CLS on image cards */
.media-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: oklch(0.9 0.02 260); /* placeholder color */
}
.media-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}

Fonts: Use font-display: swap so text renders immediately in a fallback font. Add size-adjust to the fallback font to match the metrics of your web font — this virtually eliminates font-swap layout shift.

@font-face {
  font-family: 'DM Sans';
  src: url('dm-sans.woff2') format('woff2');
  font-display: swap;
}
/* Fallback with adjusted metrics to prevent layout shift */
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial');
  size-adjust: 103%; /* tune to match web font metrics */
  ascent-override: 94%;
  descent-override: 24%;
}

Critical CSS and the render-blocking path

CSS loaded in <link rel="stylesheet"> in the <head> is render-blocking. For large sites:

  • Inline critical CSS: The styles needed for above-the-fold content can be inlined in a <style> block in the <head>. This removes the render-blocking request for the first screen.
  • Layer deferred CSS: Use <link rel="stylesheet" media="print"> for non-critical styles (browser still downloads but doesn't block render), or load them with JavaScript after the page has painted.
  • @layer for cascade management: CSS @layer gives you explicit cascade control. Third-party styles can go in a low-priority layer so your component styles always win without specificity battles.

Animation performance

Not all CSS properties are equal for animation. The browser has to do different amounts of work depending on what you animate:

  • Cheap (compositor-only): transform, opacity, filter. These run on the GPU compositor thread, off the main thread.
  • Expensive (layout): width, height, margin, padding, top/left. These trigger layout recalculation on every frame.
  • Medium (paint): background-color, border, color. These require repaint but not layout.
/* Good: GPU-composited */
.card:hover { transform: translateY(-2px); }
.bar { transform: scaleX(1); transition: transform 0.3s; }

/* Avoid for animation */
.card:hover { top: -2px; } /* triggers layout */
.bar { width: 100%; transition: width 0.3s; } /* triggers layout */

For scroll-driven progress bars, use transform: scaleX() instead of width. For expanding elements, clip-path or scale instead of max-height.

contain and content-visibility

/* Skip rendering off-screen content */
.article-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px; /* estimated height to prevent CLS */
}

/* Containment for components that don't affect outside layout */
.widget {
  contain: layout style; /* browser won't check outside this box */
}

content-visibility: auto is one of the highest-impact performance wins for long pages — it skips layout and paint for off-screen sections. The browser uses contain-intrinsic-size as a placeholder height to prevent scroll jumps as sections are rendered.

The goal of a CSS showcase site is to be its own argument: if you use these techniques, the site loads fast and that itself demonstrates performance-first CSS in action.