How to Supercharge Web Rendering with CSS content-visibility, will-change & contain

Content Visibility (content-visibility)

The content-visibility property, part of the CSS Containment Module Level 2, lets browsers skip rendering off‑screen elements, dramatically cutting render time for pages with many hidden items.

It accepts visible, auto and hidden. Using content-visibility:auto on a large list of cards reduces a 1037 ms render to about 150 ms, roughly a six‑fold speed‑up.

.card {
    content-visibility: auto;
}

When height is not explicitly set, the element’s height is treated as 0, which can break scrolling; the contain-intrinsic-size property can provide a placeholder size to keep layout stable.

.card {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

Using will-change for GPU‑accelerated animations

The will-change hint tells the browser which properties will change, allowing it to create a separate compositing layer and move work to the GPU. It accepts values such as auto, scroll-position, content, or a custom property like transform or opacity.

Example:

.animate {
    will-change: opacity;
}

Apply the hint only when needed and remove it after the animation to avoid unnecessary memory usage.

var el = document.getElementById('element');
el.addEventListener('mouseenter', function() { this.style.willChange = 'transform, opacity'; });
el.addEventListener('animationend', function() { this.style.willChange = 'auto'; });

Containment with contain

The contain property isolates an element from the rest of the DOM, allowing the browser to limit layout, paint, and size calculations to that subtree. Values include layout, paint, size, content (shorthand for layout paint) and strict (shorthand for layout paint size).

Example with a large list of 10 000 items shows render time dropping from ~4 ms to ~0.04 ms when contain:strict is applied.

.item {
    contain: strict;
}

Font loading with font-display

When using @font-face, the font-display descriptor controls how fallback fonts are shown while the custom font loads, preventing Flash‑of‑Unstyled‑Text (FOUT). Values include auto, block, swap, fallback and optional.

@font-face {
    font-family: "Open Sans Regular";
    src: url("fonts/OpenSans-Regular.woff2") format("woff2");
    font-display: swap;
}

Smooth scrolling with scroll-behavior

Setting scroll-behavior:smooth on the html element enables native smooth scrolling for anchor navigation and programmatic scroll calls.

html { scroll-behavior: smooth; }

Avoiding @import and splitting CSS

Using multiple <link> tags with appropriate media queries reduces render‑blocking time compared to nesting stylesheets with @import, which forces sequential network requests.

<!-- Critical CSS -->
<link rel="stylesheet" href="styles.css" media="all" />
<!-- Form‑factor specific CSS -->
<link rel="stylesheet" href="sm.css" media="(min-width: 20em)" />
<link rel="stylesheet" href="md.css" media="(min-width: 64em)" />
<link rel="stylesheet" href="lg.css" media="(min-width: 90em)" />

CSS Custom Properties (variables)

Defining variables on :root creates global values that can be reused throughout the stylesheet. Changing a root variable with style.setProperty can trigger large style recalculations, so it should be used sparingly.

:root { --color: red; }
button { color: var(--color); }

Performance varies across browsers; Safari handles inline style updates quickly, while Firefox is slower, making setProperty the preferred method for many cases.

Conclusion

Even with modern hardware and fast networks, careful CSS optimisation—using content-visibility, will-change, contain, proper font‑loading strategies, smooth scrolling, media‑query splitting, and disciplined use of custom properties—remains essential for delivering fast, fluid web experiences.