Performance-Optimierung für Nuxt-Anwendungen

Eine schnelle Website ist ein Wettbewerbsvorteil. Google nutzt Core Web Vitals als Ranking-Faktor, Nutzer verlassen langsame Seiten, und Konversionsraten sinken messbar mit jeder zusätzlichen Sekunde Ladezeit. Wenn Ihre Nuxt-Anwendung nicht gut performt, lassen Sie Traffic und Umsatz auf dem Tisch liegen.

Hier sind die Optimierungsstrategien, die wir auf jedes Nuxt-Projekt anwenden.

Messen vor dem Optimieren

Bevor Sie etwas ändern, etablieren Sie Ihre Baseline. Führen Sie diese Tools aus und notieren Sie die Werte:

• Google Lighthouse (in Chrome DevTools) — Gesamt-Performance-Score, LCP, FID, CLS
• WebPageTest.org — Reale Lade-Waterfall und Filmstrip
• Google PageSpeed Insights — Felddaten von echten Nutzern via Chrome UX Report
• Nuxt DevTools — Komponenten-Renderzeiten und Payload-Größen

Optimieren Sie die Metriken, die am meisten zählen: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS).

Bildoptimierung

Bilder sind typischerweise die schwersten Assets auf jeder Seite. Nuxt Image macht die Optimierung unkompliziert.

Nuxt Image Modul verwenden:

<NuxtImg
  src="/hero-image.jpg"
  width="800"
  height="400"
  format="webp"
  loading="lazy"
  sizes="sm:100vw md:80vw lg:800px"
/>

Best Practices:

• format="webp" für moderne Kompression (30–50% kleiner als JPEG)
• Explizite width und height setzen zur Vermeidung von Layout-Shifts (CLS)
• loading="lazy" für Bilder unterhalb des sichtbaren Bereichs
• sizes-Attribut für responsive Bildladung — keine Desktop-Bilder auf Mobilgeräten
• Image-CDN erwägen (Cloudinary, imgix) für dynamische Größenanpassung

Lazy Loading von Komponenten

Nicht jede Komponente muss sofort laden. Nuxt unterstützt Lazy-Loading mit einer einfachen Namenskonvention:

<!-- Diese Komponente lädt erst, wenn sie in den Viewport kommt -->
<LazyHeavyChart :data="chartData" />

Wann Lazy-Loading verwenden:

• Inhalte unterhalb des sichtbaren Bereichs (Charts, Karten, Karussells)
• Modale und Dialog-Inhalte
• Third-Party-Widgets (Chat-Widgets, Social Embeds)
• Komponenten, die von schweren Bibliotheken abhängen

Bundle-Optimierung

Große JavaScript-Bundles sind die häufigste Ursache für langsame Interaktivität.

Bundle analysieren:

npx nuxi analyze

Dies generiert eine visuelle Treemap, die zeigt, was genau in Ihrem Bundle steckt.

Reduktionsstrategien:

• Tree-Shaking: Importieren Sie nur, was Sie nutzen (import { debounce } from 'lodash-es' statt import _ from 'lodash')
• Dynamische Imports: Schwere Bibliotheken nur bei Bedarf laden
• Dependencies auditieren: Ungenutzte Pakete entfernen und schwere Bibliotheken durch leichtere Alternativen ersetzen
• Große Bibliotheken externalisieren: Wenn eine Bibliothek vom CDN geladen wird, aus dem Bundle ausschließen

Server-Side-Rendering-Optimierung

Bei SSR beeinflusst die Server-Antwortzeit direkt den LCP.

Strategien:

• Gerenderte Seiten cachen mit Nuxts eingebautem Cache-Layer oder Reverse Proxy
• Route Rules nutzen um Seiten statisch vor-zu-rendern, die sich selten ändern
• Datenabruf optimieren — sequentielle API-Calls vermeiden, paralleles Fetching mit Promise.all() nutzen
• Serverseitige Berechnung minimieren — schwere Verarbeitung in Background-Jobs auslagern

Route Rules Beispiel:

// nuxt.config.ts
routeRules: {
  '/blog/**': { isr: 3600 }, // Blog-Posts stündlich revalidieren
  '/about': { prerender: true }, // Statisch zur Build-Zeit
  '/dashboard/**': { ssr: true }, // Immer server-gerendert
}

Font-Optimierung

Custom Fonts können die Ladezeit erheblich beeinflussen und sichtbares Text-Flashing verursachen.

Best Practices:

• font-display: swap verwenden, um sofort Fallback-Text anzuzeigen
• Fonts selbst hosten statt von Google Fonts laden (eliminiert DNS-Lookup und Verbindungsoverhead)
• Fonts auf benötigte Zeichen subsetten
• Kritische Fonts vorladen

Caching-Strategie

Effektives Caching reduziert Serverlast und verbessert die Performance bei wiederholten Besuchen.

Multi-Layer-Caching:

1. CDN Edge Caching — statische Assets und vorgerenderte Seiten global gecacht
2. Service Worker — kritische Ressourcen für Offline-Support und sofortige Loads cachen
3. API-Response-Caching — externe API-Antworten cachen zur Latenzreduzierung
4. Browser-Caching — passende Cache-Control-Header für statische Assets setzen

Third-Party-Script-Management

Analytics, Chat-Widgets und Marketing-Pixel sind oft die größten Performance-Killer.

Strategien:

• Third-Party-Scripts mit defer oder async laden
• requestIdleCallback oder setTimeout für nicht-kritische Scripts
• Chat-Widgets nur auf bestimmten Seiten laden (Kontaktseite, nicht die gesamte Site)
• Partytown nutzen, um Third-Party-Scripts in einem Web Worker auszuführen

Monitoring in Production

Performance-Optimierung ist keine einmalige Aufgabe. Überwachen Sie kontinuierlich:

• Google Search Console — Core Web Vitals Reports von echten Nutzern
• Real User Monitoring (RUM) — tatsächliche Performance der Besucher tracken
• Lighthouse CI — Performance-Audits bei jedem Deployment
• Error Tracking — Runtime-Fehler erkennen, die die User Experience beeinträchtigen

Quick Wins Checkliste

Für sofortige Verbesserungen, starten Sie hier:

• Nuxt Image aktivieren und Bilder zu WebP konvertieren
• loading="lazy" für Bilder unter dem sichtbaren Bereich
• Explizite Dimensionen für alle Bilder und Videos
• npx nuxi analyze ausführen und ungenutzte Dependencies entfernen
• Gzip/Brotli-Kompression auf dem Server aktivieren
• Cache-Control-Header für statische Assets
• Nicht-kritische Third-Party-Scripts verzögern
• Kritische Fonts und CSS vorladen

Möchten Sie ein professionelles Performance-Audit für Ihre Nuxt-Anwendung? Kontaktieren Sie uns — wir identifizieren genau, was Sie ausbremst, und beheben es.