Lazy Loading verschiebt das Herunterladen von etwas, bis es tatsächlich benötigt wird — üblicherweise, wenn es gleich in den sichtbaren Bereich scrollt. Das verkleinert die initiale Payload, sodass der sichtbare Teil der Seite schneller lädt.
Der Browser erledigt das nativ mit einem einzigen Attribut:
Behalte immer width/height bei, damit der Browser Platz reserviert (vermeidet Layout Shift). Lade niemals dein LCP-Bild per Lazy Loading — es verzögert genau das, was gemessen wird.
Teile schwere oder selten genutzte UI (Modals, Charts) in einen separaten, bei Bedarf geladenen Chunk auf:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
Der dynamische import() weist den Bundler an, eine separate Datei zu erzeugen, die erst heruntergeladen wird, wenn <Chart> zum ersten Mal gerendert wird.
Lazy Loading ist der einfachste Gewinn mit der größten Hebelwirkung für eine schwere Seite: weniger zu Beginn herunterzuladen bedeutet schnelleres LCP und weniger JS zum Parsen. Interviewer wollen sehen, dass du das Hero-Bild nicht per Lazy Loading lädst — ein klassischer Fehler, der genau die Metrik verschlechtert, die du verbessern willst.
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spenden