Datenschutz, kurz und ehrlich. Wir messen nur anonym, welche Seiten ankommen. Cookieless, ohne Werbe-Cookies, ohne Tracker, ohne Weiterverkauf. Du entscheidest, ob die Statistik mitläuft. Details in der Datenschutzerklärung.

    Glossar / Begriff

    Code-Splitting, im Tech-Kontext.

    Code-Splitting zerlegt ein JavaScript-Bundle in Teile, die der Browser nur bei Bedarf lädt. Weniger Startlast und schnellere Reaktion auf Klicks.

    Code-Splitting teilt den ausgelieferten JavaScript-Code in mehrere Dateien, die getrennt geladen werden. Üblich sind zwei Schnitte: pro Route, damit die Startseite nicht den Code der Buchungsstrecke mitschleppt, und pro schwerer Komponente, etwa Karte, Diagramm oder Editor. Bundler wie Vite, Rollup und webpack erzeugen die Teile automatisch an jedem dynamischen Import. Der Nutzen zeigt sich vor allem in INP und in der Zeit bis zur Bedienbarkeit, weniger im reinen LCP. Grenze: zu viele kleine Teile erzeugen zusätzliche Anfragen und Warteketten. Als Richtwert für den ersten Aufruf gilt ein JavaScript-Paket im niedrigen dreistelligen Kilobyte-Bereich, komprimiert gemessen.

    Beispiele aus dem Mittelstand

    • Eine Website mit Konfigurator lädt beim Start nur die Startseite; der Konfigurator kommt als eigener Teil erst beim Aufruf.
    • Ein Chart-Paket von mehreren hundert Kilobyte landet in einem eigenen Chunk und wird nur auf der Auswertungsseite geladen.
    // React: das Bundle der Route erst beim Aufruf laden
const Konfigurator = lazy(() => import("./pages/Konfigurator"));

<Suspense fallback={<Platzhalter />}>
  <Konfigurator />
</Suspense>;
    # Zeigt nach dem Build die größten JavaScript-Teile
npx vite build && du -h dist/assets/*.js | sort -h | tail -5
    Der oberste Eintrag ist fast immer der lohnendste Ansatzpunkt.

    Folge-Fragen

    Wo schneide ich am besten?

    Zuerst pro Route, danach an einzelnen schweren Bibliotheken. Alles Weitere bringt meist mehr Anfragen als Gewinn.

    Wie sehe ich, was im Bundle steckt?

    Ein Bundle-Visualizer als Build-Plugin zeigt die Anteile pro Paket. Ohne diese Messung ist jede Optimierung Raten.

    Verschlechtert Code-Splitting die Navigation?

    Nur ohne Vorabladen. Wer den Teil beim Überfahren des Links vorlädt, merkt beim Klick keinen Unterschied.

    Hilft Code-Splitting gegen schlechten LCP?

    Selten. LCP hängt meist am Bild und an der Serverzeit. Code-Splitting wirkt vor allem auf INP.

    Code-Splitting in der Praxis.

    Wo dieser Begriff in deinem Geschäft konkret wird, beginnt die Arbeit. Wir nennen klar, ob die Idee in unser Studio passt.

    SEO-Performance