CSS performance: optimizing the rendering engine

Learn how to reduce rendering work with `will-change`, `content-visibility`, containment and intrinsic placeholders, so complex interfaces stay responsive even on slower devices.

How much do you know about CSS?

📘 Theory

`will-change`: preparing the browser in advance

Use it as a hint, not as decoration.

The `will-change` property tells the browser that a property such as `transform` or `opacity` is likely to change soon. That gives the engine a chance to prepare optimizations before the animation starts.

A common pattern is `will-change: transform, opacity;` on an element that is about to animate in. This can remove the small hesitation that sometimes appears at the start of a heavy motion effect.

The catch is memory cost. Extra compositing layers are not free, so `will-change` should be reserved for elements that genuinely benefit from it instead of being sprayed across the whole page.

`content-visibility`: skip work that the user cannot see yet

This is one of the most practical rendering optimizations available in modern CSS.

With `content-visibility: auto`, the browser can postpone layout and paint work for content that is still far outside the viewport. In other words, it stops spending effort on sections the user has not reached yet.

That makes it especially valuable for long landing pages, documentation, article pages with many modules, comment sections or any layout with heavy blocks that appear much later in the scroll.

`contain-intrinsic-size`: reserve space and avoid layout jumps

Deferred rendering should not create unstable scrolling.

If off-screen content is skipped entirely, the browser still needs a placeholder size so the rest of the document can be laid out correctly.

That is why `contain-intrinsic-size` matters. It gives the browser a reasonable stand-in size until the real content is rendered, which helps avoid layout shifts and sudden changes in scroll behavior.

1 `will-change`: preparing the browser in advance 2 `content-visibility`: skip work that the user cannot see yet 3 `contain-intrinsic-size`: reserve space and avoid layout jumps

🧪 Learn by doing

Example Demo: high-performance long page Notice how off-screen sections are deferred while hover effects still feel snappy on the visible blocks.

⌄

🏁 Challenges

Challenge Challenge: optimize a complex footer The footer is visually heavy and slows the first render. Defer it until the user gets near it and reserve 500px of space.

⌄

🧰 Resources

Useful links

web.dev - content-visibility MDN - CSS containment MDN CSS MDN Layout Cookbook

Test

Check your knowledge with a test about CSS.

Test for CSS

Course resources 78

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 63

CSS architecture: methodologies, layers and team decisions

Lesson 65

PostCSS: automate and modernize your CSS pipeline

›