# CSS & JS optimization — Responsive & Mobile-First Design

Source: https://www.geekswithgeeks.com/en/responsive-design/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.

```html
<!-- 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).