CSS Performance
What actually costs: which property changes trigger layout, which only paint, and which the compositor handles alone. Layout thrash, containment, critical CSS, font loading and the image sizing that causes layout shift.
Who it is for
Has never measured anything.
For someone confident in the language who wants the traps, the edge cases and the interview questions.
You will get the most out of it if you have written CSS recently enough to read it without effort, and have been surprised by it at least once. If you are picking the language up for the first time, start with CSS Essentials and come back to this one.
It is also built for interview preparation: the questions are the ones that get asked because they separate people who have read the documentation from people who have hit the behaviour in production.
How long it takes
90 graded questions at roughly 45 seconds each is about 68 minutes of answering in total.
At the default five questions a day, and because the session mixes in your other courses, expect around 18 days — call it 3 weeks — to see everything once, plus a few weeks of thinning reviews after that before it is all mastered.
A question is mastered on the third correct answer, once the gap between reviews has grown past a week — so a course cannot be finished in a weekend however long you sit with it.
Question mix
- 60 multiple choice
- 10 concept cards
- 10 predict the output
- 10 put it in order
- 10 matching questions
Syllabus
What you will be asked about
-
01
The Rendering Pipeline
Say which of style, layout, paint and composite a given property change forces.
-
02
Layout Thrash
Spot a read-after-write that forces synchronous layout, and reorder the code so it does not.
-
03
Compositor-Only Properties
Explain why transform and opacity animate cheaply, and what promoting a layer actually costs.
-
04
will-change And Its Cost
Use will-change at the right moment and explain the side effects it brings with it.
-
05
Containment
Choose the right contain value and say which work the browser is then allowed to skip.
-
06
content-visibility
Apply content-visibility to long pages and size the placeholders so nothing jumps.
-
07
Selector Cost And Invalidation
Explain why selector length rarely matters and what does make style recalculation slow.
-
08
Critical CSS And Render Blocking
Decide what blocks the first paint and what to inline, preload or defer.
-
09
Font Loading, FOIT And FOUT
Choose a font-display strategy and explain when the font file is actually requested.
-
10
Image Sizing And Layout Shift
Reserve space for media so nothing moves, and choose sizes that do not waste bytes.
8 more topics, and all 90 questions
CSS Performance is a Pro course. One subscription opens it and every other course in the catalogue, including the ones still being written.
A question from this course
The Rendering Pipeline
The row is invisible. What has it done to the page's geometry?
<style>
.row { visibility: hidden; }
</style>
<div class="row">Draft</div>Show the answer
B Nothing: it still generates a box and still occupies its space, so hiding it this way moves nothing
You may have read visibility: hidden as a synonym for display: none because both make the element disappear. It is not: the box is still laid out and still reserves its space, which is why toggling it costs paint but not layout. display: none removes the box and therefore does cost layout both ways.
The rest of the track
CSS at every depth
CSS Essentials
Selectors, specificity and the cascade, then inheritance, the box model and the units everything else is built on. Ten topics where the rule you wrote is not the rule that won, and the reason is always one of the same few.
CSS Core
Grid and flexbox past the first example, custom properties, calc with relative units, and the parts of backgrounds, overflow and transitions that surprise people. Ten topics that assume you already know the cascade.
CSS Idioms & Pitfalls
The CSS written out of habit that is wrong or fragile. !important as a first resort, id selectors for styling, magic numbers instead of intrinsic sizing, z-index escalation, and shorthands that quietly reset the longhand you set above.
CSS Advanced
Containing blocks, stacking contexts, block formatting contexts and the genuinely surprising cases of margin collapsing. Then cascade layers, :is and :where, and what happens to a custom property that is invalid at computed-value time.
CSS Interview Questions
Specificity arithmetic, the cascade in full, box-sizing, centring in every mechanism, and flexbox against grid. Ten topics built around the questions that get asked out loud and the "what colour is this, and why" that follows.
Start CSS Performance
in tomorrow’s session.
Enrol and this course joins your daily five, mixed in with everything else you are studying — 90 questions spread over about 18 days rather than dropped on you at once.
Browse the catalogue