Asynchronous Loading: Definition, async vs defer, Performance

Was ist Asynchronous Loading?

Asynchronous Loading ist die Praxis, Resources (Scripts, Stylesheets, Images, Code-Modules) zu fetchen ohne das Parsing, Rendering oder den Main-Thread der Page zu blocken. Richtig gemacht kann Async-Loading Sekunden vom Page-Load shaven — falsch gemacht verursacht es Layout-Shifts, Race-Conditions und schlechtere UX als Sync-Loading.

Async-Loading-Techniken

async vs defer

<script src="app.js"></script>
<script async src="analytics.js"></script>
<script defer src="app.js"></script>

Image Lazy-Loading

<img src="hero.jpg" loading="eager" width="1200" height="600">
<img src="footer.jpg" loading="lazy" width="800" height="200">

Dynamic Imports für Code-Splitting

button.addEventListener('click', async () => {
  const { openModal } = await import('./modal');
  openModal();
});

Async-Data-Loading-Patterns

async function loadUsers() {
  const res = await fetch('/api/users');
  return res.json();
}

const [users, posts] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/posts').then(r => r.json())
]);

Async-Loading Best Practices

• defer für App-Scripts nutzen.
• async für Analytics + Ads.
• Below-the-fold Images lazy-loaden.
• LCP-Image eager-loaden.
• Routes code-splitten.
• Promise.all für concurrent Fetches.
• Loading-States zeigen.
• Errors handeln.
• Expensive Async-Ops throttlen/debouncen.

Häufige Fallstricke

• async auf App-Code der DOM braucht.
• Above-the-fold Image lazy-load.
• Sequential Awaits wenn Parallel möglich.
• Error-Handling auf Async vergessen.
• Kein Loading-State.
• Race-Conditions.
• Memory-Leaks von uncancelled Async.
• Blocking Await in Critical-Path.

FAQ: Asynchronous Loading

async vs defer: was nutzen?

defer für eigenen Code; async für Independent Third-party.

Funktioniert Lazy-Loading auf allen Browsern?

Native loading="lazy": ~95%+.

Wie beeinflusst Dynamic-Import die Bundle-Size?

Dramatisch — Code wird in separate Chunks gesplittet.

Sollte ich alle Images lazy-loaden?

Nein — nur Below-the-fold.

Was ist eine Race-Condition in Async-Code?

Zwei Async-Ops finishen in unexpected Order.

Wie cancele ich einen Async-Fetch?

AbortController.

Unterschied zwischen Promise und async/await?

Same Thing — async/await ist Syntactic Sugar.

Async-Loading-Impact mit LoadFocus testen

LoadFocus läuft Lighthouse-Audits aus 25+ Regionen, misst LCP/INP/TBT. Registrieren bei loadfocus.com/signup.