Werkstattnotizen3 Abschnitte · 2 Min. LesezeitVon Dezső Mező · Veröffentlicht 3. Oktober 2026.mdNext.jsWeb VitalsPerformanceImages
Ein Lighthouse-Score ist ein Symptom, keine Diagnose. Die Fixes unten sind die, die bei echten Kunden-Builds tatsächlich etwas bewegt haben — einschließlich dieser Site, die einen 3D-Raum lädt und trotzdem besteht.
01Das Bild ist meist der Tatort
Das größte Element der Seite ist fast immer ein Hero-Bild, das unkomprimiert, unskaliert und spät ankommt. Ein sauber dimensioniertes AVIF/WebP mit expliziten Maßen behebt den schlimmsten LCP und den schlimmsten CLS in einem Zug — diese eine Änderung schlägt regelmäßig einen Monat Framework-Tuning.
02JavaScript, das du nicht auslieferst, kostet nichts
Route-Level-Code-Splitting ist in Next.js gratis und wird trotzdem regelmäßig von einem einzigen Import einer schweren Komponente am Seitenanfang zunichtegemacht. Der Raum auf dieser Site lädt seinen Renderer genau deshalb lazy: HTML, Text und Links sind interaktiv, bevor die erste Textur ankommt.
03Fonts sind eine Layout-Steuer
Ein Webfont ohne Display-Strategie ist ein garantierter Layout-Shift. Preloade die eine Schnittstärke, die die Überschrift rendert, swappe den Rest und setze Metrik-Overrides, damit der Fallback dieselbe Box einnimmt.
Was bleibt
- Zuerst das Hero-Bild fixen — es ist LCP und CLS zugleich.
- Code an der Route-Grenze splitten; die Imports darüber auditieren.
- Eine Schnittstärke preloaden und den Fallback metrisch angleichen.
- Auf einem Mittelklasse-Phone mit 4G messen, nicht auf dem MacBook mit WLAN.
Mehr aus dem Lab
Alle Beiträge ansehen
Die AI-Search-Visibility-Checkliste, die wir auf dieser Site fahren
Die EU-Barrierefreiheitsfrist ist vorbei — was noch gilt
Strukturierte Daten, die eine Answer-Engine nutzen kann
Die Local-SEO-Checkliste, die wir selbst abarbeiten
Sollen wir das an Ihrem System ansehen?Gespräch beginnen
