Marcel SchreiberAutomatisierung und Agenten für kleine Betriebe
Problem
Website und Technik
Branche
Fotograf
Jahr
2026
Art des Projekts
Eigenes Projekt

SEO- und Motion-Relaunch einer Fotografen-Website

Layout-Verschiebung über dem Hero: vorher bei Mausbewegung in jeder Messung messbar, nachher in jedem Lauf 0.

Die Zahl: 21 von 21

Läufe ohne Layout-Sprung nach dem Fix; vorher bei jeder Mausbewegung messbar

Ausgangslage

Auf meiner Fotografen-Website folgt ein Sucher-Ring der Maus über dem Hero. Der Effekt gefiel mir, aber er bewegte sich über die CSS-Eigenschaften left und top. Bei jeder Mausbewegung berechnete der Browser das Layout neu, und die Seite verschob sich messbar. Dazu kamen Lücken bei der Suche: Footer, Startseite und Galerien verlinkten nicht gezielt aufeinander, und leere Galerien standen in der Sitemap. Ich wollte beides beheben und den Beleg dafür aus einer Messung haben, nicht aus einem Gefühl.

Was gebaut wurde

Der Ring bewegt sich jetzt über transform statt über left und top, damit der Browser kein Layout neu berechnet. Für die Suche habe ich die interne Verlinkung zwischen Footer, Startseite und Immobilien-Galerie angelegt und leere Galerien aus der Sitemap genommen. Die Messung läuft als Skript: Produktions-Build lokal, Chrome über Playwright, drei Sekunden Mausbewegung über dem Hero, Layout-Shift-API, Median aus drei Läufen, vorher und nachher mit demselben Skript. Einen frischen Build des Endstands hat zusätzlich ein Reviewer-Agent gemessen.

  • Next.js
  • CSS transform
  • Playwright
  • Chrome
  • Layout-Shift-API

Ergebnis

Die Layout-Verschiebung bei Mausbewegung über dem Hero war vorher in jeder Messung deutlich über 0: 0,196 in meiner Messung, 0,44 in einer unabhängigen Nachmessung mit anderer Mausbahn. Nachher ist sie in jedem Lauf 0. Der Vorher-Wert hängt an der Mausbahn, deshalb vergleiche ich nur Messungen mit identischem Skript. Eine LCP-Zahl nenne ich nicht, denn die Unterschiede liegen lokal im Rauschen. Ob die Suchänderungen Klicks bringen, ist offen, dafür gibt es noch keine Daten.

Beweis

Du findest die Messdateien für vorher und nachher, jeweils mit dem Median aus drei Läufen und den Elementen, die sich verschoben haben. Dazu kommen Vorher-Nachher-Screens des Heros bei 1440 Pixeln Breite. Die Dateien enthalten nur lokale Adressen und Klassennamen, keine Besucherdaten. Die Messung lässt sich mit dem Skript auf einem Produktions-Build wiederholen. Lighthouse-Berichte lege ich nicht bei, weil der Score zu stark streut, um etwas zu belegen. Wenn du das Messskript sehen willst, schreibe mir kurz.

Grenzen

Ich habe lokal mit einem Produktions-Build gemessen, nicht auf dem Live-Server und nicht mit echten Besuchern. Touch-Bedienung auf dem Handy ist nicht gemessen. Lighthouse-Scores nenne ich nicht: Der mobile Score schwankt im selben Stand stark, und die Änderung betrifft ihn nicht. Außerdem ist Layout-Stabilität nicht Ladegeschwindigkeit: Ich behaupte nicht, dass die Seite schneller lädt. Rankings, Klicks und Anfragen habe ich nicht untersucht, weil es im Zeitraum dafür keine Daten gibt.