Lesson 24 / 25

CSS & JS optimization

Minify CSS, defer non-critical JavaScript, and split code to reduce time-to-interactive on mobile.

Reducing CSS and JavaScript impact

  1. Minify CSS and JS — Remove whitespace, compress class names. 2. Defer non-critical JS — Add defer attribute to script tags. 3. Code splitting — Load only what's needed per page. 4. Remove unused CSS — Use PurgeCSS or similar tools.

Optimized script loading

Strategies to load JavaScript efficiently.

<!-- Critical CSS (inline) -->
<style>
  body { font-family: sans-serif; }
  .hero { background: #06b6d4; }
</style>

<!-- Non-critical CSS (async) -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

<!-- Critical JS (async) -->
<script async src="critical.js"></script>

<!-- Non-critical JS (defer) -->
<script defer src="analytics.js"></script>

Critical rendering path on mobile

Every byte counts on slow networks. Prioritize above-the-fold CSS.

Use CSS containment for performance

The contain property helps browsers optimize rendering by limiting layout recalculations.

Web fonts and performance

System fonts load instantly. Web fonts need loading strategy (font-display: swap).