{"id":"l-css-4-5","courseId":"css-mastery","lang":"en","kind":"lesson","summary":"Know which CSS changes trigger layout, paint or only compositing, animate the cheap properties, and use content-visibility and aspect-ratio to keep long pages fast and stable.","html":"

Waypoint’s schedule looked finished, and then the team opened it on a three-year-old Android phone at the venue’s busy Wi-Fi. The save toast stuttered, the first scroll felt sticky, and speaker photos pushed the text down as they loaded. Nothing was broken; it was just doing more work than it needed to.

\n

CSS performance comes down to one question: how much of the rendering pipeline does this change force the browser to run?

\n

The rendering pipeline

\n

After your CSS changes something, the browser runs up to four stages to update the screen:

\n
    \n
  1. Style: work out which rules apply and compute each element’s values.
    2. \n
  2. Layout: calculate every box’s size and position.
    3. \n
  3. Paint: fill in the pixels: text, colors, borders, shadows, images.
    4. \n
  4. Composite: assemble the painted layers on the GPU, applying transforms and opacity.
    5. \n
\n

The trick is that each change only needs to start at a certain stage. Change width and layout must run, then paint, then compositing. Change background-color and layout can be skipped. Change transform or opacity on an element that has its own layer, and the browser can skip layout and paint, moving existing pixels around on the GPU.

\n
\n Four pipeline stages left to right: style, layout, paint, composite. A row for width, top and margin runs through all four. A row for color, background and box-shadow skips layout. A row for transform and opacity skips layout and paint.\n \n Style\n \n Layout\n \n Paint\n \n Composite\n width, top\n \n all four stages, every frame\n box-shadow\n \n \n skipped\n translate\n \n \n skipped\n
Which stages a property change triggers
\n

For a single click, the difference doesn’t matter. For an animation running 60 times a second, or a style change that touches 500 elements, it decides whether the page feels smooth.

\n

Animate the cheap properties

\n

The save toast was animated like this:

\n
CSS
@keyframes toast-in {\n  from { left: -320px; }\n  to   { left: 16px; }\n}
\n

left is a geometry property: every frame re-runs layout for the toast (and checks whether anything else moved), then repaints. The fix keeps the toast’s position fixed and moves its picture instead:

\n
CSS
.toast {\n  position: fixed;\n  left: 16px;\n  bottom: 16px;\n  animation: toast-in 250ms ease-out;\n}\n\n@keyframes toast-in {\n  from { translate: -336px 0; opacity: 0; }\n  to   { translate: 0 0;      opacity: 1; }\n}
\n

Same visual result, a fraction of the work. This is why every animation in this course used translate, scale, opacity and friends. The same reasoning applies to transitions: a hover that changes box-shadow repaints on each frame, which is fine for one card and noticeable for a grid of fifty animating at once. Fading in a pre-painted shadow on a pseudo-element with opacity is the cheaper alternative when it matters.

\n\n

Skip work you can’t see

\n

The schedule renders two days of sessions, but the user sees a screenful at a time. content-visibility: auto lets the browser skip layout and paint for sections that are off-screen:

\n
CSS
.day {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 1200px;\n}
\n

Skipped content has no size, so contain-intrinsic-size gives the browser an estimate to use as a placeholder; with auto, it remembers the real size once the section has been rendered. Without it, sections collapse to zero and the scrollbar jumps as you scroll. Content stays in the DOM and in the accessibility tree, and find-in-page still works. content-visibility: auto has been Baseline since September 2025, when Safari 26 added the auto value; a browser without it simply renders every section, as before.

\n

Don’t move things after they appear

\n

Cumulative Layout Shift, one of the Core Web Vitals, measures content jumping as the page loads. In CSS, the usual culprit is media without reserved space. A speaker photo with width: 100% and no height is 0px tall until the image arrives, then shoves everything down. Reserve the space:

\n
CSS
.speaker img {\n  width: 100%;\n  height: auto;\n  aspect-ratio: 1;\n  object-fit: cover;\n}
\n

width and height attributes on the <img> do the same job, since browsers derive an aspect ratio from them. For web fonts, font-display: swap plus a fallback font with similar metrics keeps text from reflowing when the font loads.

\n\n

Where you are now

\n

Across twenty lessons you’ve taken Waypoint’s schedule from a stylesheet that fought you to one you can predict: layers and :where() settle conflicts, custom properties expose component APIs, grid, subgrid and container queries handle layout, oklch() and light-dark() handle color, logical properties make it work in Arabic, and motion is kind and cheap. The habit to keep is the one from the first lesson: before you change CSS, predict what the browser will do, then check.

\n","toc":[{"id":"sec-1","text":"The rendering pipeline","level":2},{"id":"sec-2","text":"Animate the cheap properties","level":2},{"id":"sec-3","text":"Skip work you can’t see","level":2},{"id":"sec-4","text":"Don’t move things after they appear","level":2},{"id":"sec-5","text":"Where you are now","level":2}],"takeaways":["Every visual change goes through some of style, layout, paint and composite; geometry properties trigger layout, visual properties trigger paint, and transform and opacity can skip both.","Animate translate, scale, rotate and opacity; animating left, width or margin re-runs layout on every frame.","content-visibility: auto with contain-intrinsic-size lets the browser skip rendering off-screen sections of a long page.","Reserving space with aspect-ratio (or width and height attributes) prevents layout shifts when images and embeds load.","Measure before optimising, with the DevTools Performance panel and paint flashing, and remove will-change once an animation ends."],"further":[{"title":"Rendering performance (web.dev)","url":"https://web.dev/articles/rendering-performance"},{"title":"content-visibility (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility"},{"title":"Optimize Cumulative Layout Shift (web.dev)","url":"https://web.dev/articles/optimize-cls"}],"quiz":[{"q":"

A toast slides in by animating left from -320px to 16px. On a mid-range phone it stutters. What’s the best fix?

","options":[{"text":"Add will-change: left to the toast.","why":"will-change can’t make left cheap; changing it still re-runs layout every frame."},{"text":"Animate translate from -336px 0 to 0 0 instead, keeping left fixed.","why":"Correct. translate changes only how the already-painted toast is composited, so the browser can skip layout and paint during the animation."},{"text":"Shorten the animation to 50ms so there are fewer frames.","why":"The stutter comes from per-frame layout work; a 50ms slide is also too fast for people to follow."},{"text":"Use a JavaScript animation library instead of CSS.","why":"A JS library animating left hits the same layout cost, and runs on the busy main thread too."}],"answer":1},{"q":"

Which property change usually causes a repaint but no layout?

","options":[{"text":"padding","why":"Padding changes an element’s box size, so layout runs (and then paint)."},{"text":"font-size","why":"Font size changes text metrics and line breaks, which is a layout change."},{"text":"background-color","why":"Correct. The geometry doesn’t change, so layout is skipped, but the pixels must be repainted."}],"answer":2},{"q":"

The schedule has 60 session cards across two days, and the initial render is slow. You add content-visibility: auto to each day section. What else should you add?

","options":[{"text":"contain-intrinsic-size: auto 1200px, so skipped sections keep an estimated height and the scrollbar doesn’t jump.","why":"Correct. Skipped content has no size of its own; the intrinsic size placeholder (remembered once rendered, thanks to auto) keeps scrolling stable."},{"text":"will-change: contents on every card.","why":"That asks the browser to prepare every card for change, which costs memory and undoes the saving."},{"text":"Nothing; content-visibility handles sizing automatically.","why":"Without a size estimate, skipped sections collapse to zero height, so the page and scrollbar jump as you scroll."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n

Day 1

\n
\n
\n

Ana Ortiz

\n
\n
\n
\n

Day 2

\n

Twenty-eight sessions…

\n
\n
Saved to your schedule
","css":".speaker { width: 160px; }\n.photo {\n width: 100%;\n background: #ede9fe;\n border-radius: 12px;\n}\n.toast {\n position: fixed;\n left: 16px;\n bottom: 16px;\n padding: 8px 14px;\n border-radius: 8px;\n background: #1f2937;\n color: white;\n animation: toast-in 250ms ease-out;\n}\n\n@keyframes toast-in {\n from { left: -320px; }\n to { left: 16px; }\n}\n"},"solution":{"html":"
\n

Day 1

\n
\n
\n

Ana Ortiz

\n
\n
\n
\n

Day 2

\n

Twenty-eight sessions…

\n
\n
Saved to your schedule
","css":".speaker { width: 160px; }\n.photo {\n width: 100%;\n background: #ede9fe;\n border-radius: 12px;\n}\n.toast {\n position: fixed;\n left: 16px;\n bottom: 16px;\n padding: 8px 14px;\n border-radius: 8px;\n background: #1f2937;\n color: white;\n animation: toast-in 250ms ease-out;\n}\n.photo { aspect-ratio: 1; }\n\n.day {\n content-visibility: auto;\n contain-intrinsic-size: auto 1200px;\n}\n\n@keyframes toast-in {\n from { translate: -336px 0; opacity: 0; }\n to { translate: 0 0; opacity: 1; }\n}\n"},"checks":[{"id":"toast-keyframes-cheap","test":"const all = []; const walk = (rules) => { for (const r of rules) { all.push(r); if (r.cssRules) walk(r.cssRules); } }; for (const s of document.styleSheets) walk(s.cssRules); const kf = all.find((r) => r instanceof CSSKeyframesRule && r.name === 'toast-in'); if (!kf) return false; const props = [...kf.cssRules].flatMap((f) => [...f.style]); const cheap = ['translate', 'transform', 'opacity', 'scale']; return props.length > 0 && props.every((p) => cheap.includes(p)) && props.some((p) => p === 'translate' || p === 'transform');"},{"id":"toast-still-animates","test":"return style('.toast', 'animation-name') === 'toast-in' && parseFloat(style('.toast', 'animation-duration')) > 0;"},{"id":"toast-final-position","test":"await tick(400); const r = $('.toast').getBoundingClientRect(); return Math.abs(r.left - 16) < 1;"},{"id":"skip-offscreen","test":"return $$('.day').every((d) => style(d, 'content-visibility') === 'auto');"},{"id":"intrinsic-size","test":"return $$('.day').every((d) => { const v = style(d, 'contain-intrinsic-size'); return v.includes('auto') && /\\d/.test(v); });"},{"id":"photo-reserves-space","test":"const r = $('.photo').getBoundingClientRect(); return r.width > 0 && Math.abs(r.height - r.width) < 1;"}],"title":"Make the schedule cheap to render","prompt":"

Three performance fixes, all in CSS:

\n
    \n
  1. Rewrite the toast-in keyframes so the toast slides in from the left using only compositor-friendly properties (translate or transform, plus opacity if you like). Keep the name toast-in, and make sure the toast ends at left: 16px.
    2. \n
  2. Let the browser skip rendering off-screen .day sections, with an intrinsic size estimate that uses auto and a length.
    3. \n
  3. Make the .photo frame square before any image loads, so it reserves its space.
    4. \n
\n","hints":["The toast’s left: 16px can stay as is; animate how far it’s translated from that spot instead.","content-visibility: auto pairs with contain-intrinsic-size: auto <length>.","@keyframes toast-in { from { translate: -336px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }, .photo { aspect-ratio: 1; }."],"explanation":"

Animating left changes geometry, so every frame re-ran layout and paint. translate and opacity only change how the toast’s already-painted layer is composited, so the browser can run the animation without layout or paint, often off the main thread. content-visibility: auto lets the browser skip off-screen day sections entirely, and contain-intrinsic-size: auto 1200px stands in for their height until they’ve been rendered once, so the scrollbar stays stable. aspect-ratio: 1 gives the photo frame a height from its width, so nothing shifts when the image arrives.

\n","checkLabels":{"toast-keyframes-cheap":"toast-in animates only translate/transform and opacity","toast-still-animates":"The toast still runs the toast-in animation","toast-final-position":"The toast ends at its normal position","skip-offscreen":"Day sections use content-visibility: auto","intrinsic-size":"Day sections have an intrinsic size estimate with auto","photo-reserves-space":"The photo frame is square before the image loads"}},"words":766,"readMinutes":4}