Skip to content
Motif
All tracks

Track 12

Platform internals & delivery

How the browser renders UI, isolation, and performance budgets. Optional, advanced.

  1. Lesson 1:
    Advanced16 min

    The rendering pipeline

    The browser turns DOM and CSS into pixels in stages: style, layout, paint, composite. Knowing which a property triggers is the key to smooth, jank-free UI.

  2. Lesson 2:
    Intermediate15 min

    Core Web Vitals

    Core Web Vitals score real user experience: LCP for loading, INP for responsiveness, CLS for stability. Learn the thresholds and what moves each one.

  3. Lesson 3:
    Advanced15 min

    Containment & isolation

    CSS containment lets you tell the browser a subtree is independent, so it can skip work. Learn contain, content-visibility, and will-change — and their costs.

  4. Lesson 4:
    Intermediate12 min

    Responsive images

    srcset and sizes let the browser fetch the smallest sharp source; modern formats and reserved dimensions cut bytes and layout shift for better Core Web Vitals.