Loading Optimization

Loading optimization is about getting meaningful content on screen as fast as possible by reducing what the browser must download and process upfront.

Minimize and compress assets

• Minify CSS/JS (remove whitespace and comments) — handled by your build tool.
• Compress with gzip or Brotli on the server.
• Optimize images — the single biggest win for most sites.

Code splitting

Instead of one giant JavaScript bundle, split it so users download only what the current page needs. Load the rest on demand.

// Dynamic import — loads the module only when called
button.addEventListener("click", async () => {
  const { showChart } = await import("./chart.js");
  showChart();
});

// React: lazy-load a route/component
const Dashboard = React.lazy(() => import("./Dashboard"));

Tree shaking

Modern bundlers remove unused code from the final bundle automatically — as long as you use ES module import/export. Import only what you need:

// ✅ Tree-shakeable — only `debounce` is bundled
import { debounce } from "lodash-es";

// ❌ Imports the entire library
import _ from "lodash";

Lazy loading

Defer loading off-screen resources until they're needed:

<img src="below-fold.jpg" loading="lazy" alt="..." />

Caching and CDNs

• Browser caching — hashed filenames (app.a1b2c3.js) let browsers cache assets forever and only re-download when content changes.
• CDN — serves assets from servers physically close to users, cutting latency.

Resource hints

Tell the browser about important resources early:

<!-- Establish a connection to a third-party origin early -->
<link rel="preconnect" href="https://fonts.googleapis.com" />

<!-- Fetch a critical asset with high priority -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin />