DocHero
Lesson 103 +10 XP

CSS Optimization

CSS Optimization

Make your CSS load faster and run smoother.

1. Reduce file size

  • Shorthand: use margin, padding, border, font, background, flex, grid instead of longhands.
  • Minify in production (strip whitespace/comments).
  • Remove unused rules: delete selectors you never use.
/* Before */
.element {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 10px;
  margin-left: 5px;
}
/* After */
.element {
  margin: 10px 5px;
}

2. Fewer requests

  • Combine images into sprites.
  • Inline small CSS directly.
  • Use background, @import rarely.

3. Reduce reflow

Repaint costs layout: prefer transform and opacity over animating left, top, width:

/* Fast: */
.move {
  transform: translateX(30px);
}
/* Slow: */
.move {
  left: 30px;
}

4. Load smartly

  • Put CSS in <head> (critical), defer heavy stuff.
  • Use media queries to split print/mobile resources.

5. Specificity hygiene

Keep selectors shallow to help your cascade debugging.

TL;DR

  • Use shorthands: fewer bytes, same power.
  • Prefer transform/opacity for animations.
  • Minify in production.
  • Remove unused styles.
  • Control load timing (critical CSS in head).