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.

<code>.card {
    content-visibility: auto;
}
</code>

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.

<code>.card {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}
</code>

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:

<code>.animate {
    will-change: opacity;
}
</code>

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

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

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.

<code>.item {
    contain: strict;
}
</code>

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

.

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

Smooth scrolling with scroll-behavior

Setting

scroll-behavior:smooth

on the

html

element enables native smooth scrolling for anchor navigation and programmatic scroll calls.

<code>html { scroll-behavior: smooth; }
</code>

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.

<code><!-- 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)" />
</code>

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.

<code>:root { --color: red; }
button { color: var(--color); }
</code>

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.