NCA Social Media
Erstellt:
Aktualisiert:
Autor:
Roland Golla
Grün leuchtende Boxengasse mit Rennwagen, Schild Astro Build und Mechanikerin

Warum ist mein Astro Build langsam?

Ein Astro Build kann wegen Vite Plugins, Syntax Highlighting, Bildern oder einer einzelnen schweren Seite langsam sein. Seit Astro 7.4 zeigt der Befehl astro build --timings, wo die Zeit verloren geht.
Diese Anleitung erklärt, was im Report steht und welche Beispiele das Astro Team dazu nennt. Einen Überblick über alle Neuerungen findest du auf unserer Astro Hauptseite.
Inhalt
NCA KI Workshop für Developer

Agentic Coding im Team, nicht nur im Glossar

Ein Tag inhouse mit Benjamin Klein für Developer, Tester und Admins. Context Engineering, Harness, ADRs und zwei Hands on Blöcke mit KI Agenten in eurem Setup.

  1. 1
    Kostenloses Vorgespräch
    Stand, Rollen und Ziele klären
  2. 2
    Workshoptag bei euch
    Praxis am Vormittag, Hands on danach
  3. 3
    Praxistag optional
    Agenten im eigenen Projekt
Benjamin Klein
Benjamin Klein
Senior Consultant
Zum Workshop für Developer arrow_forward

Astro Builds mit NCA und schnelle Hilfe vom Experten

Astro ist bei uns täglich im Einsatz, zusammen mit TypeScript, Tailwind und festen Quality Gates. Der Build ist dabei ein fester Teil unserer Pipeline.

Der Timings Report zeigt die Bremse in einem Lauf

Prüfe zuerst deine Node Version. Astro 7.4 braucht mindestens Node 22.22.0. Starte den Build danach so:
Code:
          

npx @astrojs/upgrade
astro build --timings

Am Ende steht eine Zusammenfassung. Sie enthält die Build Phasen, Vite Plugins, Markdown und Syntax Highlighting, das Rendern der Seiten, Bilder und Integrationen. Dazu kommt eine Liste der langsamsten Seiten mit Median und 95. Perzentil.
Lies den Report von oben nach unten. Suche zuerst die größte Phase, dann den größten Posten darin. Erst danach lohnt ein Blick in den Code.

Warteketten in Komponenten im Report erkennen

Das Astro Team zeigt dazu ein Beispiel. Ein Kommentarblock lädt erst die Kommentare, und jede Kommentar Komponente lädt danach ihr Nutzerprofil. Jede Seite wartet so zweimal nacheinander auf das Netzwerk.
Im Beispiel lädt der Kommentarblock deshalb alles gemeinsam und reicht die Profile nach unten. Schematisch sieht das so aus:
Code:
          

---
const [comments, users] = await Promise.all([
  fetch(commentsUrl).then((res) => res.json()),
  fetch(usersUrl).then((res) => res.json()),
]);
---

Die Seitenerzeugung sank dadurch von 2,10 auf 1,13 Sekunden. Das sind Werte aus dem Astro Beispiel.

Parallel Prerendering kommt nach der Messung

Astro 7.4 kann statische Seiten experimentell in mehreren Worker Threads rendern. Astro nennt dafür große Seiten mit CPU lastigem Rendern.
Code:
          

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    parallelPrerender: {
      workers: 4,
    },
  },
});

Standardmäßig nutzt Astro alle Kerne außer einem. Jeder Worker braucht Speicher. Wenn der Build keinen Speicher mehr hat oder nicht schneller wird, setze workers niedriger. Mit dem Cloudflare Adapter hat das Flag keine Wirkung, Astro warnt dann im Build.

When a build gets slow, it's not always obvious why.

Matthew Phillips, Astro Core Team – Astro Blog

Mehr zu Astro Builds

Unser Blog erklärt, warum der Astro Build nach dem Upgrade anders aussieht, und fasst alle Neuerungen unter Astro 7.4 erklärt zusammen. Der dist Ordner hat eine eigene Seite.
CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
Frontend: Optimieren Sie Ihre Webseite mit Astro JS und nutzen Sie die Vorteile der Barrierefreiheit

Optimieren Sie Ihre Webseite mit Astro JS und nutzen Sie die Vorteile einer schnellen, sicheren und barrierefreien Webseite. Erfüllen Sie die gesetzlichen Anforderungen und verbessern Sie die Benutzererfahrung Ihrer Webseite. Mit Astro JS können Sie die Ladezeit reduzieren, die Sicherheit maximieren und die SEO-Optimierung verbessern. Kontaktieren Sie uns, um mehr zu erfahren und um Ihre Webseite auf ein neues Level zu heben.

Häufige Fragen zu langsamen Astro Builds

Kurze Antworten für die Fehlersuche im eigenen Projekt.
Wie finde ich 2026 die Bremse im Astro Build?

Starte den Build mit astro build --timings. Astro zeigt danach Build Phasen, Vite Plugins, die langsamsten Dateien und das Rendern der Seiten. Dazu kommt eine Liste der langsamsten Seiten mit Median und 95. Perzentil.

Ab welcher Version gibt es 2026 das Flag --timings?

Das Flag gibt es seit Astro 7.4 vom Oktober 2026. Das Upgrade läuft mit npx @astrojs/upgrade. Astro und die offiziellen Integrationen verlangen jetzt mindestens Node 22.22.0.

Ist Parallel Prerendering 2026 produktionsreif?

Es ist in Astro 7.4 als experimentell gekennzeichnet. Mit dem Cloudflare Adapter wirkt es nicht, weil dieser Adapter sein eigenes Prerendering mitbringt.

Wie viele Worker stelle ich 2026 für Parallel Prerendering ein?

Astro nutzt standardmäßig alle Kerne außer einem. Jeder Worker rendert so viele Seiten gleichzeitig, wie build.concurrency erlaubt. Läuft der Build in einen Speicherfehler oder wird nicht schneller, empfiehlt Astro weniger Worker.

Was bringen inkrementelle Builds 2026 in Astro?

Inkrementelle statische Builds kamen experimentell mit Astro 7.2. Sie überspringen unveränderte Seiten. Parallel Prerendering verteilt die übrigen Seiten auf die Kerne.