Optimierung von Vue.js und Nuxt.js: Tipps und Tricks

Vue.js ist schnell. Aber nur, wenn man es richtig verwendet.

Ein Besucher wartet darauf, dass Ihre Website geladen wird, und geht dann nach drei Sekunden wieder. Leider ist das keine Science-Fiction – es ist die Realität vieler moderner Websites, die auch auf Frameworks wie Vue.js oder Nuxt.js basieren.

Lassen Sie uns zunächst klarstellen, worum es hier geht:

• Vue.js ist eines der beliebtesten JavaScript-Frameworks zur Erstellung von Webanwendungen.
• Nuxt.js ist ein Meta-Framework, das es ermöglicht, Vue.js im Browser und auf dem Server auszuführen, um unter anderem die Leistung zu steigern.

Richtige Optimierung ist nicht nur eine technische Feinheit für Programmierer. Es ist eine Investition, die sich in höheren Konversionen, besseren Positionen in Suchmaschinen und zufriedeneren Nutzern niederschlägt.

Kunden von PageSpeed.ONE wie Dr. Max oder Airstop, die Vue.js nutzen, erzielen dank richtiger Optimierung bessere Ergebnisse.

Warum Geschwindigkeit für Websites entscheidend ist#

Vielleicht denken Sie: „Was macht es schon, wenn die Website eine Sekunde länger lädt?“ Die Realität ist jedoch unerbittlich und Zahlen lügen nicht. Die Geschwindigkeit einer Website hat einen direkten und messbaren Einfluss auf Ihr Geschäft. Lassen Sie uns ein paar Beispiele betrachten:

• Google hat gemessen, dass wenn eine Seite die Web Vitals erfüllt, es um 24 % unwahrscheinlicher ist, dass Nutzer vor dem Laden abspringen.

• Die Konversionsrate eines E-Shops sinkt im Durchschnitt um 0,3 % mit jeder zusätzlichen Sekunde langsamerer Ladezeit.

• Geschwindigkeit ist ein direkter Ranking-Faktor für SEO im Google-Algorithmus.

Geschwindigkeit ist kein Luxus, sie ist eine Notwendigkeit. Und jede Millisekunde zählt. Diese Zahlen gelten umso mehr für Websites, die auf modernen JS-Frameworks wie React oder eben Vue.js basieren.

Warum? Weil sie fast immer mehr JavaScript laden und vor allem ausführen als traditionelle Websites und einen komplexeren Initialisierungsprozess durchlaufen müssen.

Aber keine Sorge. Mit dem richtigen Ansatz kann Ihre Vue.js-Website schneller sein als viele statische Seiten.

Ist Vue.js „von Natur aus“ langsam? Mythen von der Realität unterscheiden#

Es gibt die weit verbreitete Meinung, dass Vue.js und ähnliche moderne Frameworks von Natur aus langsam sind. Ja, mehr JavaScript bedeutet mehr Arbeit während des Geschwindigkeitsoptimierungsprozesses. Vue.js ist jedoch auf Leistung ausgelegt und Websites, die darauf basieren, können sehr schnell sein.

Leistungsprobleme resultieren in der Regel aus menschlichen Fehlern, nicht aus dem Framework selbst:

• Falsche Architektur
  Verwendung von Single Page Application (SPA) dort, wo serverseitiges Rendering besser wäre.

• Unzureichende Optimierung
  Ignorieren bewährter Verfahren. Einige davon deuten wir in diesem Text an.

• Testen nur auf schnellen Geräten
  Entwickler sehen oft nicht die echten Probleme der normalen Nutzer und ignorieren die sogenannte Performance Inequality Gap.

Vue.js kann an sich schnell sein. Der Schlüssel ist, es richtig einzusetzen und zu wissen, wann welche Technik verwendet werden sollte.

Wie Sie erkennen, dass Ihre Vue.js-Website schwächelt#

Vielleicht denken Sie, dass Ihre Website in Ordnung ist, weil sie für Sie schnell funktioniert. Aber testen Sie sie richtig?

Core Web Vitals: Drei Säulen der Geschwindigkeit#

Core Web Vitals sind drei Schlüsselmetriken, die bestimmen, ob Ihre Website aus Sicht der Nutzer schnell ist:

Metrik	Bedeutung	Empfohlener Wert
Largest Contentful Paint (LCP)	Ladegeschwindigkeit. Zeit bis zum Laden des größten sichtbaren Elements auf der Seite.	≤ 2,5 Sekunden
Interaction to Next Paint (INP)	Interaktionsgeschwindigkeit. Reaktionsgeschwindigkeit auf Benutzeraktionen (Klicks, Taps).	≤ 200 Millisekunden
Cumulative Layout Shift (CLS)	Layout-Stabilität. Stabilität des visuellen Layouts der Seite.	≤ 0,1

Sieben Schritte zu einer schnelleren Vue.js-Website#

Jetzt kommt der wichtigste Teil. Werfen wir einen Blick auf grundlegende Tipps, wie Sie Ihre Vue.js-Website beschleunigen können.

1. Richtige Architektur: SSR und SSG statt reines SPA#

Die Abkürzungen klingen kompliziert, aber die Essenz ist einfach. Anstatt darauf zu warten, dass Ihre Website JavaScript herunterlädt und ausführt, senden Sie dem Nutzer direkt fertigen HTML-Code.

Ein wenig übertrieben gesagt, ist es der Unterschied zwischen einem fertigen Mittagessen oder dem Warten darauf, dass jemand vor Ihnen am Tisch kocht.

Gehen wir die Abkürzungen durch:

• SPA (Single Page Application) ist eine Website, die die meisten Dinge gleich zu Beginn lädt und dann vorgibt, alles auf dem Client-Gerät ohne Reload zu bewältigen, jedoch auf Kosten eines sehr langsamen Starts und weiterer Nachteile. Ihr Mittagessen wird auf dem Tisch gekocht. Heute ist dies ein veralteter Ansatz.

• Server Side Rendering (SSR) bedeutet, dass der Server fertigen HTML-Code für jede Seite generiert. Der Nutzer sieht den Inhalt sofort, während im Hintergrund interaktives JavaScript geladen wird. Das wollen wir.

• Static Site Generation (SSG) geht noch weiter. HTML-Dateien werden im Voraus (während eines internen Entwicklerprozesses namens Build) generiert und als statische Dateien ausgeliefert. Das ist die schnellste mögliche Variante. Aber nicht geeignet für E-Shops und andere dynamischere Websites.

• Hybrider Ansatz kombiniert beide Methoden je nach Seitentyp – statische Seiten wie Blogposts als SSG, dynamische als SSR. Überlegen Sie, ob Sie dies für Ihre Website verwenden können.

Werfen wir einen Blick auf eine schematische SSR-Konfiguration für die serverseitige Vue.js-Komponente namens Nuxt.js:

// nuxt.config.ts oder nuxt.config.js für SSR

export default defineNuxtConfig({
  // Aktivierung von serverseitigem Rendering
  ssr: true,

  nitro: {
    prerender: {
      // Vorerzeugung statischer Seiten
      routes: ['/ueber-uns', '/kontakt', '/blog']
    }
  }
});

Wenn Ihre Website empfindlich auf Ladegeschwindigkeit reagiert, vermeiden Sie reine clientseitige SPAs. Erwägen Sie Kombinationen aus SSR und SSG.

2. Fortschrittliches Rendering: Lazy Loading als Retter#

Stellen Sie sich vor, Sie bauen ein Haus. Sie tragen nicht alle Ziegel auf einmal, sondern nach Bedarf. Genauso sollte sich auch Ihre Vue.js-Website verhalten.

Wie richten Sie das ein?

• Lazy Loading von Komponenten bedeutet, dass Komponenten erst geladen werden, wenn sie tatsächlich benötigt werden. Typischerweise sind dies Komponenten, die der Nutzer nicht auf dem ersten Bildschirm sieht oder die nur gelegentlich verwendet werden.

• Progressive Hydration ist der Prozess, bei dem JavaScript nach und nach an das vom Server generierte HTML „angeschlossen“ wird. Der Nutzer sieht den Inhalt sofort, aber die Interaktivität wird schrittweise dort hinzugefügt, wo sie benötigt wird.

• Code Splitting teilt Ihren Code automatisch in kleinere Teile auf, je nach Seiten oder Funktionen. Anstatt eine große Datei herunterzuladen, werden schrittweise nur die benötigten Teile geladen.

Beispiel für Lazy Loading von Komponenten:

// Verwenden Sie Lazy Loading
const HeavyChart = defineAsyncComponent(() => import('./HeavyChart.vue'));

// Mit Ladezustand (z.B. Spinner)
const HeavyTable = defineAsyncComponent({
  loader: () => import('./HeavyTable.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200
});

Laden Sie nur das, was sichtbar ist. Der Rest kann warten.

3. Bundle-Größe: Weniger JavaScript, mehr Geschwindigkeit#

Jedes Kilobyte JavaScript muss heruntergeladen, geparst und ausgeführt werden. Auf langsamen Geräten oder schwachen Verbindungen kann das ewig dauern. Deshalb ist es wichtig, die Größe Ihres JavaScript-Bundles so klein wie möglich zu halten. Wie geht das?

• Tree Shaking ist der Prozess, der automatisch ungenutzten Code aus Ihrem Bundle entfernt. Moderne Bundler wie Webpack oder Vite machen das automatisch, aber Sie müssen ihnen helfen, indem Sie richtig importieren.

• Audit der Abhängigkeiten bedeutet, regelmäßig zu überprüfen, welche Bibliotheken Sie wirklich benötigen. Oft bleibt in Projekten Bibliotheken, die Sie nicht mehr verwenden, die aber das Bundle weiterhin aufblähen.

• Dateikomprimierung kann die Bundle-Größe um bis zu 70 % reduzieren. Moderne Brotli-Komprimierung ist noch effektiver als traditionelles Gzip.

// Falsch – importiert die gesamte Bibliothek (mehrere MB)
import _ from 'lodash';

// Richtig – importiert nur die benötigte Funktion (einige kB)
import { debounce } from 'lodash-es';

// 💡 Noch besser – eigene einfache Implementierung
const debounce = (fn, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), delay);
  };
};

Einfacher Tipp: Das Tool bundlephobia.com zeigt Ihnen die Größe jeder Abhängigkeit und empfiehlt Alternativen.

Jedes Kilobyte zählt. Halten Sie Ihr Bundle auf Diät.

4. Optimierung für besseres INP: Schnelle Reaktionen auf Klicks#

Interaction to Next Paint (INP) misst, wie schnell die Website auf Benutzeraktionen reagiert. Wenn ein Nutzer auf eine Schaltfläche klickt und nichts passiert, oder es langsam geschieht, ist unser lieber Nutzer frustriert.

Das häufigste Problem sind anspruchsvolle Operationen, die im Hauptthread des Browsers ausgeführt werden, die wir lange Aufgaben nennen (messbar mit der Metrik JS Long Tasks (JSLT) oder synthetisch mit der Metrik TBT). Wenn Ihr JavaScript viel verarbeitet, kann der Browser nicht auf Klicks reagieren.

Die Hydrierung, also das Wiederbeleben der Anwendung, kann den Browser belasten und Nutzern die Interaktion erschweren. Diesen Effekt haben wir beispielsweise beim Projekt Airstop.cz behandelt.

Was kann man dagegen tun?

• Nutzen Sie Lazy Hydration. Vor allem bei Komponenten, bei denen klar ist, dass der Nutzer sie nicht sofort aktiviert. Das können typischerweise Menüs, Modals, Filter, Fußzeilen usw. sein.

• Debouncing und Throttling sind Techniken, die die Anzahl der aufgerufenen Funktionen bei schneller Wiederholung einer Aktion begrenzen. Typischerweise beim Eingeben in ein Suchfeld oder beim Scrollen.

• Reduzieren Sie den DOM. Die dynamische HTML-Struktur (DOM) ist grundlegend. Halten Sie sie so klein wie möglich, idealerweise unter 3.000 DOM-Knoten.

Debouncing für die Suche:

// Debouncing für die Suche – reagiert erst 300 ms nach dem letzten Tastendruck
import { debounce } from 'lodash-es';

const searchProducts = debounce((query) => {
  // Die Suche wird erst nach einer Pause gestartet
}, 300);

// 🖱️ Throttling für Scroll – wird maximal einmal alle 100 ms ausgeführt
import { throttle } from 'lodash-es';

const handleScroll = throttle(() => {
  // Optimierung des Scroll-Listeners
}, 100);

Schwere Operationen wie das Filtern großer Datenmengen oder komplexe Berechnungen sollten über API-Aufrufe auf den Server verschoben werden.

Halten Sie den Hauptthread des Browsers frei. Der Nutzer muss sofortige Reaktionen spüren.

5. Virtualisierung von Listen: Tausende Artikel ohne Verlangsamung#

Wenn Sie eine Liste mit Tausenden von Produkten, Artikeln oder Kommentaren haben, können Sie sie nicht alle auf einmal rendern. Das würde die Website bis zur Unbrauchbarkeit verlangsamen.

Virtualisierung bedeutet, dass Sie nur sichtbare Elemente plus einen kleinen Puffer herum rendern. Beim Scrollen werden die Elemente dynamisch ausgetauscht. Es ist, als ob Sie ein Buch lesen – Sie lesen nicht alle Seiten auf einmal, nur die aktuelle.

Es gibt fertige Bibliotheken für Vue.js, die die Virtualisierung für Sie implementieren. Die beliebtesten sind vue-virtual-scroller oder vue-virtual-scroll-grid.

Virtualisierung kann die Leistung von Listen um Hunderte von Prozent verbessern, insbesondere auf mobilen Geräten mit begrenzter Leistung.

Rendern Sie nur das, was der Nutzer sieht. Tausende Artikel können warten.

6. Richtige Arbeit mit Bildern: Moderne Formate und Lazy Loading#

Bilder machen bei einigen Websites den Großteil der zu ladenden Datenmenge aus. Die richtige Optimierung von Bildern kann der effektivste Weg sein, um eine Website zu beschleunigen.

• Moderne Formate wie WebP und AVIF bieten 25–50 % bessere Komprimierung als herkömmliches JPEG bei gleicher Qualität. Moderne Browser unterstützen bereits WebP und AVIF.

• Responsive Images bedeutet, die richtigen Größen für verschiedene Geräte zu liefern. Warum ein 2000px breites Bild auf ein Mobiltelefon mit einem 400px breiten Bildschirm laden?

• Lazy Loading von Bildern bedeutet, dass Bilder erst geladen werden, wenn sie in das Sichtfeld des Nutzers gelangen. Dies beschleunigt das anfängliche Laden der Seite erheblich.

• Platzhalterbilder verhindern Layoutverschiebungen (Inhaltsverlagerungen) während des Ladens. Sie können verschwommene Miniaturen, farbige Hintergründe oder Skeleton Loader verwenden. Seien Sie jedoch vorsichtig, da sie bei unsachgemäßer Anwendung die Geschwindigkeit verschlechtern können.

Beispiel im Code – responsive Bilder mit Lazy Loading:

<!-- AVIF-Bild mit Fallback auf WebP + Lazy Loading -->
<picture>
  <source src="product-image.avif" type="image/avif" />
  <img src="product-image.webp" loading="lazy" alt="Produktbeschreibung" width="800" height="600" />
</picture>

Optimieren Sie Bilder sorgfältig, besonders wenn sie Ihr LCP-Element sind.

7. Profilierung: Messen ist der Schlüssel zur Verbesserung#

Ohne Messen optimieren Sie im Blindflug. Vielleicht optimieren Sie etwas, das gar kein Problem ist, während Sie das eigentliche Nadelöhr übersehen.

Welche Tools sollten Sie neben den absoluten Grundlagen wie synthetischem und CrUX-Monitoring verwenden?

• Chrome DevTools Performance Panel zeigt Ihnen, wo Ihr Code am meisten Zeit verbringt. Sie können sehen, welche Komponenten am langsamsten gerendert werden oder welche Funktionen die CPU belasten. Mehr über das Messen von Core Web Vitals im Browser.

• Vue DevTools bieten spezifische Vue.js-Metriken – welche Komponenten neu gerendert werden, wie lange ihr Mount oder Update dauert.

• Real User Monitoring (RUM) verfolgt echte Nutzer auf echten Geräten mit realem Internet. Labortests sind wichtig, aber RUM zeigt die Realität. Es ist das genaueste von allen drei Arten der Geschwindigkeitsmessung.

Was Sie nicht messen, können Sie nicht verbessern.

Weitere Tricks für Fortgeschrittene: CDN, Prefetching und moderne Technologien#

Wenn Sie die Grundlagen beherrschen, können Sie weitergehen. Hier sind ein paar Tipps für Optimierungen über das oben Genannte hinaus:

• Wählen Sie eine gute Infrastruktur und ein Content Delivery Network (CDN). CDN bedeutet, dass Ihre Dateien vom nächstgelegenen Server zum Nutzer geladen werden. Es ist, als ob Sie Filialen in allen Städten statt einer Zentrale hätten. Nutzen Sie Cloudflare oder AWS CloudFront.

• Optimierung für BFCache, also schnelle Rückkehr zur vorherigen Seite, kann mit wenig Aufwand gute Ergebnisse erzielen.

• Speculation Rules API bietet intelligente Vorhersagen zur Navigation, aber die Implementierung ist anspruchsvoll, Vorsicht ist geboten.

Erfolge von PageSpeed.ONE: reale Optimierungsergebnisse#

Theorie ist schön, aber was ist mit der Praxis? Wir haben mit mehreren Vue.js-Projekten gearbeitet, bei denen sich die Leistungsoptimierung deutlich bemerkbar gemacht hat.

Eines davon ist die Website des Reiseanbieters Airstop.cz, wo wir dem Entwicklerteam von DesignDev geholfen haben, das Nutzererlebnis während eines laufenden Redesigns zu verbessern.

Das Projekt ist noch im Gange, aber wir sehen bereits eine Verbesserung der Core Web Vitals-Metriken um Dutzende von Prozent:

Bei Airstop.cz zeigt sich, dass Projekte auf Vue.js große Fortschritte bei der Geschwindigkeit machen können. Und es ist noch früh.

Bei einem weiteren unserer Kunden, der Apothekenkette Dr. Max, haben wir bereits grüne LCP- und CLS-Metriken, und derzeit wird an der Verbesserung der Interaktivität (INP) gearbeitet. Beispiele für diese Optimierungen sind:

1. Optimierung der Benutzerinteraktionen mit Loaders durch die Methode nextTick auf der gesamten Website.
2. Beschleunigung der Benutzerinteraktionen bei komplexen Produkt-Suchen.
3. Optimierung von Ereignissen, die über den GTM (Google Tag Manager) ausgelöst werden.

Jedes Projekt ist spezifisch, aber die Prinzipien bleiben gleich – ohne Optimierung nach der Entwicklung kann die Geschwindigkeit nicht auf einem guten Niveau gehalten werden. Das Wichtigste ist, mit dem Messen zu beginnen und schrittweise Änderungen umzusetzen.

Wie Monitoring von PageSpeed.ONE Ihnen helfen kann#

In unserem PageSpeed.ONE-Geschwindigkeitsmonitoring können Sie die Core Web Vitals-Metriken in Echtzeit verfolgen und spezifische Probleme identifizieren. Häufig beobachten wir bei Vue.js-Websites Probleme mit großen JavaScript-Bundles oder langsamer Hydrierung (dem Prozess, bei dem interaktives JavaScript an HTML angehängt wird).

Wir verfolgen die Entwicklung der Core Web Vitals-Metriken langfristig bei unserem Kunden Dr. Max und seinen Mitbewerbern.

Messen ist die Grundlage. Ohne Daten optimieren Sie im Blindflug.

Unser PageSpeed.ONE Monitoring PLUS bietet diese Vorteile:

• Kontinuierliche Überwachung von Core Web Vitals aus CrUX-Daten und synthetisch.
• Vergleich mit der Konkurrenz in Ihrer Branche und weiteren Domänendaten.
• Detaillierte Analysen von jedem Testlauf.
• Wächter und Alerting bei Leistungsabfall mit der Möglichkeit, schnell zu reagieren.

Wir empfehlen dringend, das Monitoring zu automatisieren, damit Sie sich auf die Optimierung konzentrieren können.

Fazit: Geschwindigkeit als Wettbewerbsvorteil#

Die Optimierung von Vue.js-Anwendungen sollte kein einmaliges Ereignis, sondern ein kontinuierlicher Prozess sein. Vue.js ist an sich nicht langsam, Probleme entstehen durch unsachgemäße Verwendung oder unzureichende Optimierung.

Beginnen Sie mit dem Messen über Core Web Vitals, erwägen Sie die Implementierung von SSR und optimieren Sie schrittweise nach unserer Liste. Denken Sie daran, dass jede Millisekunde zählt und Geschwindigkeit Ihr Wettbewerbsvorteil sein kann.

Sie wissen nicht, wie es weitergeht? Zögern Sie nicht, uns zu kontaktieren.

Das Ergebnis der Optimierung von Vue.js wird eine schnellere Website, zufriedenere Nutzer, bessere Positionen in Suchmaschinen und nicht zuletzt höhere Umsätze sein.