CSS and rendering performance
You measure selector cost and style recalculation, layout and paint times, and make large pages smooth with tools such as content-visibility and containment.
Level 501 · 13 lessons · 12 practice labs
Lessons
Measuring
- Reading a rendering profile: style, layout, paint
- The cost of style recalculation
- Forced synchronous layout and layout thrashing
- Short task: profile the rendering of a slow page
Reducing
- Limiting work with contain
- Skipping the unseen with content-visibility
- Layers, compositing and memory
- Critical CSS and load order
- Font loading: font-display and subsets
- Short task: make a ten-thousand-row list smooth
Stability
- Preventing layout shift with CSS
- CSS size budgets and splitting
- Capstone: measure, fix and prove a heavy page
Practice labs
- Read a rendering profile: Split style, layout and paint time in a slow page's recording and find the most expensive step.
- Find an expensive selector: On a page with long style recalculation, find and simplify the troublesome selectors and measure again.
- Eliminate layout thrashing: Turn code that mixes reads and writes in a loop into batched reads and writes and remove forced layouts.
- Limit work with contain: Add contain to a frequently updated chat box so layout work doesn't spread to the rest of the page.
- Skip the unseen with content-visibility: Apply content-visibility to off-screen sections of a long FAQ page and measure first render time.
- Make a ten-thousand-row list smooth: Make a janky long list scroll at 60 fps with containment, virtual scrolling and suitable layers.
- Tune font loading: Shorten invisible text time with font-display and drop unneeded weights.
- Cut excess layer memory: Measure layer count and memory on a page with will-change on everything and remove the unneeded ones.
- Extract critical CSS: Inline critical CSS for the home page's first screen, defer the rest and prove the first-paint gain.
- Stabilise a shifting ad slot: Reserve space for a late-loading promo slot to bring layout shift close to zero.
- Remove shift from font swapping: Match fallback font metrics with size-adjust to remove the shift when the web font loads.
- Set and enforce a CSS size budget: Set a per-page CSS budget, split the bundles and add a check that fails the build when the budget is exceeded.
About this course
You measure selector cost and style recalculation, layout and paint times, and make large pages smooth with tools such as content-visibility and containment.
What you will learn
- Measuring
- Reducing
- Stability
Prerequisites
You should be experienced in the topics of the same path up to level 401.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 501; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.