Moderne Websites bündeln ihren JavaScript-Code oft in einer großen Datei, dem JavaScript-Bundle. Der Browser muss sie vollständig laden, auswerten und ausführen, bevor alles funktioniert, auch Code für Funktionen, die der Besucher nie aufruft. Code-Splitting zerlegt dieses Bundle in mehrere Teile, im Fachjargon Chunks. web.dev beschreibt Code-Splitting als Technik, die die Startzeit so kurz wie möglich halten soll [1]. Geladen wird zuerst, was die Seite sofort braucht.
So funktioniert das Aufteilen
Das wichtigste Werkzeug ist der dynamische Import. Im Gegensatz zur festen import-Anweisung am Anfang einer Datei ist import() ein Ausdruck, der ein Modul asynchron lädt und ein Promise zurückgibt [2]. Das Modul wird erst ausgewertet, wenn der Code diese Stelle erreicht. Ein einmal geladenes Modul bleibt im Speicher, spätere Importe lösen keine neue Anfrage aus [2]. Ein Beispiel aus web.dev: Der Code zur Prüfung eines Formulars lädt erst, wenn jemand das Formular abschickt [1].
Bundler wie webpack, Parcel und Rollup erkennen dynamische Importe und legen dafür eigene Dateien an [1]. web.dev nennt außerdem zwei verbreitete Muster: Bibliotheken von Drittanbietern kommen in ein eigenes Bundle, das der Browser lange zwischenspeichern kann, und viele Frameworks teilen den Code nach Routen oder Komponenten auf [1]. Dann lädt die Seite "Kontakt" nicht den Code der Seite "Produktkonfigurator".
MDN rät, dynamische Importe nur dort zu verwenden, wo sie nötig sind. Für Abhängigkeiten, die beim Start ohnehin gebraucht werden, ist der statische Import besser, weil Werkzeuge ihn leichter analysieren und ungenutzten Code entfernen können [2].
Wirkung auf Ladezeit und Bedienbarkeit
Weniger JavaScript beim Start bedeutet laut web.dev kürzere Ladezeiten und eine Seite, die früher bedienbar ist [1]. Ist der Hauptthread frei, reagiert die Seite schneller auf Klicks und Eingaben, das verbessert INP. Bei Seiten, die ihren Inhalt erst im Browser aufbauen, kann auch LCP profitieren [1].
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Worauf du bei SEO achten musst
Für Suchmaschinen ist entscheidend, wann ein Teil nachlädt. Google interagiert nicht mit der Seite, es scrollt und klickt also nicht [3]. Inhalte, die erst nach einem Klick oder einer anderen Nutzeraktion geladen werden, landen deshalb womöglich nicht im Index. Code-Splitting eignet sich gut für Funktionen wie Chat-Fenster, Bildergalerien oder Rechner. Text, Überschriften und Links, die gefunden werden sollen, gehören in den Teil, der ohne Zutun des Besuchers lädt. Nach unserer Erfahrung lohnt sich nach dem Umbau ein Blick in den Test für Live-URLs der Search Console, ob der Hauptinhalt im gerenderten HTML steht.
Mehr zum Zusammenspiel von JavaScript und Suche steht im Ratgeber JavaScript-SEO: Grundlagen und im Eintrag JavaScript-SEO. Für Onlineshops gibt es die Frage Wie hält man Theme und JavaScript im Shop schlank?.
Deine Seite lädt ein großes Skript, und du weißt nicht, welche Teile davon später kommen könnten? Darüber sprechen wir in der gratis Sprechstunde.
- Organisation Reduce JavaScript payloads with code splitting (Houssein Djirdeh, Jeremy Wagner). web.dev (Google). Stand 05.11.2018. abgerufen am 31.10.2026
- Organisation import(). MDN Web Docs. Stand 31.10.2026. abgerufen am 31.10.2026
- Organisation Probleme mit Lazy-Loading-Inhalten von Websites beheben. Google Search Central. Stand 18.12.2025. abgerufen am 31.10.2026
Häufige Fragen
Was bringt Code-Splitting?
Der Browser lädt beim Start weniger JavaScript. Die Seite wird schneller bedienbar und reagiert flüssiger auf Eingaben, weil der Hauptthread weniger zu tun hat.
Wie setzt man Code-Splitting um?
Meist über dynamische Importe mit import(), die Bundler wie webpack, Parcel oder Rollup in eigene Dateien aufteilen. Viele Frameworks teilen den Code außerdem nach Routen auf.
Kann Code-Splitting dem Ranking schaden?
Wenn Inhalte erst nach einem Klick oder Scrollen geladen werden, findet Google sie womöglich nicht, weil es nicht mit der Seite interagiert. Indexierbarer Text gehört deshalb in den Teil, der ohne Nutzeraktion lädt.
Sollte man jedes Modul dynamisch laden?
Nein. MDN rät, dynamische Importe nur bei Bedarf einzusetzen. Was beim Start ohnehin gebraucht wird, lädt man besser statisch.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder du rufst einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Fehler entdeckt? Schreib uns.
