CSS Performance: Selectors, @import and Layout Cost
Ship less CSS, keep selectors flat, split CSS per template, use link instead of @import, and measure selector and layout cost with live benchmarks.
Related chapters
- Core Web Vitals in Production: LCP, INP and CLS
- The Cost of JavaScript: Bundle Size, Parsing and Hydration
- Critical Rendering Path Explained: DOM, CSSOM, Paint
- Critical CSS: Inline Above-the-Fold Styles
- HTTP Caching Explained: Cache-Control, ETag, CDN
- Lazy Loading Images and Code: Best Practices
- List Virtualization (Windowing) in React Explained
- Intersection Observer API Explained, with Examples
- Frontend Performance Case Studies: Netflix, Airbnb, Flipkart
Keep learning
More courses
- Jobs, linked to lessons — Browse jobs where every requirement links to the chapter that teaches it. See how ready you are, how long the gap takes to close, and which listings look stale.
- Match a job post to courses — Paste a job post. Each skill is matched to a track here and put in learning order, foundations first.
- React from open source with patterns — Patterns extracted from Material UI, Radix, React Aria, React Hook Form, Redux Toolkit, TanStack, and Next.js — not slides about hooks.
- Database in depth — How a query becomes work. Indexes, isolation, locks, and the plans that explain why a page is slow — not an ORM tour.
- System Design — Core concepts first (SQL vs NoSQL, CAP, indexing, replication, sharding), then designs grouped by what carries them: the database, Redis, Kafka, or many services.
- Microservices — Microservice patterns one diagram at a time: how to split a monolith, how services talk, and how data stays consistent without distributed transactions.
- Kafka — A beginner-to-senior path through event logs, reliable delivery, production operations, and disaster recovery.
- TypeScript in depth — The type system as a design tool. Inference, narrowing, generics, and the errors that mean the model is wrong — not a catalog of utility types.
- CSS in depth — See the box, then the page. Visual chapters from the box model through Flexbox surprises, Grid, selectors, and units, then backgrounds, shapes, and visual effects, each with a playground.
- Accessibility — Foundations first (WCAG in plain words, semantic HTML, lists, alt text), then hands-on HTML labs, a full pass of WAI-ARIA 1.3, and a final fix-the-page challenge.
- Docker — What an image is, why layers cache, and how containers find each other on a network.
- Redis — Fifteen Redis patterns, one picture each: cache, session, lock, counter, rate limiter, queue, and when Redis is the wrong tool.