Boost Web Performance with CSS: Master content-visibility, will-change, contain, and font-display

When users visit a web page they expect fast loading and smooth interactions; slow performance often leads them to leave. This guide shows several CSS techniques that can significantly boost rendering speed and overall user experience.

Content Visibility ( content-visibility )

Many pages contain off‑screen elements that the browser still renders, wasting time. Using content-visibility:auto tells the browser to skip rendering elements outside the viewport, reducing render time dramatically.

Example: a page with 375 cards, only 12 visible, originally took 1037ms to render. Adding content-visibility:auto to each card drops the time to 150ms, a six‑fold improvement.

.card {
    content-visibility: auto;
}

When combined with contain-intrinsic-size, the element reserves space even while its content is skipped, preventing layout jumps.

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

The property works like a hybrid of display and visibility, allowing deferred rendering of chosen elements while keeping the document flow intact.

Reasonable Use of will-change

will-change

hints the browser that an element will change (e.g., opacity, transform) so it can create a separate GPU layer in advance. This can raise frame rates from ~50 FPS to over 120 FPS for simple opacity animations.

.animate {
    will-change: opacity;
}

Best practices:

Apply will-change only when needed and remove it after the animation.

Avoid applying it to many elements simultaneously.

Prefer adding it to a parent element and animating children.

Do not use it as a premature optimization; it can increase memory usage.

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

Make Elements Independent with contain

The CSS Containment Module Level 2 provides contain to isolate an element’s layout, paint, or size from the rest of the DOM, allowing the browser to skip unnecessary re‑calculations.

Values: layout – element’s layout does not affect ancestors and vice‑versa. paint – children cannot paint outside the element’s bounds. size – the element’s size is calculated without its children. content – shorthand for layout paint. strict – shorthand for layout paint size.

Applying contain:strict to a large list of items can drop layout time from ~4 ms to ~0.04 ms.

Use font-display to Solve FOUT

When loading custom fonts with @font-face, the browser may show fallback text (FOUT) while the font loads. The font-display descriptor controls this behavior. auto – default, text is invisible until the font loads. block – short block period (e.g., 3 s) then swap. swap – immediately show fallback text, swap when font loads. fallback – short block period, then fallback; swap when ready. optional – like fallback but may skip the font on slow connections.

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

Smooth Scrolling with scroll-behavior

The CSSOM View Module’s scroll-behavior property enables smooth scrolling without JavaScript.

html {
    scroll-behavior: smooth;
}

Avoid @import for Stylesheets

@import

blocks rendering because each import requires a network request before the stylesheet can be parsed. Using multiple <link> tags with appropriate media queries allows parallel loading and reduces render‑blocking time.

<!-- style.css contains only critical styles -->
<link rel="stylesheet" href="styles.css" media="all" />
<!-- Conditional styles -->
<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)" />
<link rel="stylesheet" href="print.css" media="print" />

Dynamic Custom Property Changes

CSS custom properties (variables) are powerful but changing a root variable forces a re‑calculation of all descendants, which can be costly. Use style.setProperty wisely and prefer scoped variables when possible.

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

Conclusion

Even with fast networks and powerful devices, web performance remains crucial. Applying modern CSS features— content-visibility, contain, will-change, font-display, and proper stylesheet loading—can dramatically improve rendering speed and user experience.