Das Wichtigste an einem Webprojekt ist nicht das Aussehen, sondern die Benutzbarkeit. Next.js-Projekte legen dem Browser wegen der Kompilierung im Browser viel Arbeit auf und führen zu Rucklern. Deshalb müssen wir die Wirkung eines Gestaltungselements, das wir mit dem Gedanken “ja, das ist eine schöne Arbeit” eingebaut haben, auch richtig messen.

Gut abgewogene Ergänzungen lassen Websites schneller laden, und das ist ein wichtiger Vorteil, aber nicht der einzige. Der zweite große Vorteil: Sie wirken unmittelbar auf die Nutzererfahrung. Wenn ein Nutzer schnell auf Ihre Website kommt, beim Bewegen darin aber ins Stocken gerät, entsteht bei ihm die Neigung, nicht wiederzukommen.

Bei Next.js-Projekten ist uns aufgefallen, dass der Ablauf auf der Seite häufig abreißt. Zu diesem Verhalten gibt es in den Daten von Pagespeed und Chromium bisher noch keinen Namen und keine Bewertung, deshalb haben wir für unsere eigenen Tests ein durchschnittliches Telefon bestimmt und arbeiten damit.

Wer Ihre Website besucht und wie vertraut diese Menschen mit Technik sind, entscheidet über das Modell ihres Handys und damit auch über die Leistung ihres Browsers. Wir bei Türk SEM haben viel dazu recherchiert und herausgefunden, dass das durchschnittliche Telefon in der Türkei bei einem Samsung A13 oder Note 20 liegt.

Die ersten Tests auf den Websites aller unserer Kunden führen wir mit Geräten wie dem A13 und dem Note 20 durch.

Ein kritischer Befund zu Next.js und SEO

Unter allen Bedingungen und in allen Größen ist Next.js für die SEO-Arbeit außerordentlich vorteilhaft. Der Nutzer trifft im ersten Moment auf eine schnelle Website, und das gibt ihm natürlich einen guten Grund wiederzukommen. Bei Websites aber, die mit übertriebenen und falsch aufgebauten Animationen arbeiten, kann der Vorsprung aus dem Aufbau beim Bewegen durch die Website sofort ins Minus kippen.

Google nimmt das als “Long Tasks” wahr. Wenn der Einsatz von framer-motion auf Ihrer Website nicht richtig aufgebaut ist, wäre es keine Überraschung, dass Ihr Wert für Long Tasks hoch liegt. Sie haben Ihre Website fertiggestellt und testen sie mit einem iPhone 17 Pro Max? Dann haben Sie die Nutzererfahrung nicht wirklich geprüft. Der richtige Weg führt über ein durchschnittliches Gerät, nach unserer Annahme über die stärkeren Geräte zwischen A13 und Note 20.

Der Fehler mit der endlosen Animation

Was wir hier beschreiben, gilt natürlich für die Jahre 2026 und 2027. Wahrscheinlich wird dieser Beitrag im Jahr 2028 kaum noch etwas wert sein. Denn Tailwind CSS und Next.js verbessern vieles, und es wird noch besser werden. Sicher ist aber: Überlegen Sie, welches Telefon der Durchschnitt Ihrer Besucher benutzt, und richten Sie Ihre Tests auf dieses Gerät aus. Endlose Animationen können selbst auf guten Geräten nach einer Weile heftige Ruckler verursachen, sogar in der Desktop-Ansicht. Wenn eine endlose Animation keinen wirklich wichtigen Wert beisteuert, verzichten Sie darauf. Darauf zu verzichten kann der SEO Ihrer Website einen Vorteil bringen.

Der Test unter “echten” Bedingungen mit Chrome DevTools: CPU Throttling

Ein Next.js-Projekt, das auf einem Rechner der oberen Klasse läuft (i9-Prozessor, 32 GB RAM), kann sich bei einem echten Nutzer mit einem Samsung A13 anfühlen, als würde es “einfrieren”. Damit das nicht passiert, bremsen wir die Leistung des Geräts während der Entwicklung mit CPU Throttling künstlich um das 4-Fache.

CPU Throttling Schritt für Schritt

  1. Entwicklerwerkzeuge öffnen: Drücken Sie auf der Seite, die Sie testen wollen, F12, oder klicken Sie mit der rechten Maustaste und wählen “Untersuchen” (Inspect).
  2. Zum Reiter Performance wechseln: Klicken Sie im oberen Menü auf Performance.
  3. Capture Settings öffnen: Klicken Sie in diesem Reiter auf das Zahnrad, also auf “Capture settings”.
  4. Die CPU bremsen: Wählen Sie im Auswahlmenü “CPU” die Option “4x slowdown”.
    • Hinweis: Wenn Sie ein deutlich schwächeres Gerät nachstellen wollen, etwa Android-Geräte der Einstiegsklasse, können Sie auch “6x slowdown” nehmen.
  5. Aufzeichnen und testen: Drücken Sie auf “Record”, das Kreissymbol, und bewegen Sie sich wie ein Nutzer durch die Seite: klicken Sie Schaltflächen an, lösen Sie Animationen aus. Beenden Sie die Auswertung danach mit “Stop”.

Worauf sollten Sie schauen? Der kritische Messwert

Nach diesem Test sehen Sie im Ablauf des Main Thread rote Striche. Sie heißen “Long Tasks”, also lange laufende Aufgaben.

  • Rote Striche: Stehen im Hauptablauf viele rote Striche, dann “friert” die CPU ein, während sie diese Aufgaben abarbeitet.
  • Interaction to Next Paint (INP): Steigt die Zeit zwischen dem Klick auf eine Schaltfläche und der Reaktion des Browsers über 200 ms, verlässt ein Nutzer mit einem A13 oder Note 20 diese Website wahrscheinlich.

Kurz gefasst: Richten Sie sich nicht nur auf die Ladezeit, sondern auf die “Flüssigkeit im Moment der Bedienung”. Läuft Ihre Website auf einem um das 4-Fache gebremsten Prozessor noch flüssig, dann sind Ihr Code und Ihre Animationen für die “echte Welt” ausgelegt.