Practice & Assessment
Test your understanding of CSS Performance and Rendering
Multiple Choice Questions
5Which CSS property change is most performant during animation because it only triggers the composite step?
What is layout thrashing?
What does `content-visibility: auto` do?
The DevTools Coverage tab shows 85% of your CSS is unused. What is the most appropriate first tool to use?
Which CSS `contain` value tells the browser that an element's children will not visually overflow its bounds?
Coding Challenges
1Rewrite a janky animation to be GPU-composited
Given a provided HTML page with a slideshow component that animates using `left` and `top` CSS properties inside a setInterval loop, rewrite it to use CSS animations with `transform: translateX/translateY` only. Add `will-change: transform` to the animated elements. Verify in DevTools Performance panel that the before version shows Layout records per frame and the after version does not. Input: provided HTML/CSS with setInterval animation. Output: refactored version using CSS animations and transform. Include a screenshot of the Performance panel for both versions. Estimated time: 20 minutes.
Mini Project
Performance-Optimized Article Page
Build an article page with a hero image, 10 content cards, a sticky navigation bar, and a modal dialog. Requirements: (1) use transform + opacity only for all animations (fade-in, modal open/close, card hover scale), (2) add will-change: transform to animated elements, (3) apply content-visibility: auto to the 8 below-fold content cards with contain-intrinsic-size, (4) add contain: layout style paint to each card component, (5) extract critical CSS (above-fold styles) and inline it in <head>, load the rest asynchronously with the media=print trick, (6) run Lighthouse and document render-blocking resources eliminated and CLS score. Deliverable: single self-contained HTML file with inline critical CSS, and a README with Lighthouse scores and a list of CSS containment decisions made.