Page Speed und Core Web Vitals: Was Designer wissen müssen

Page Speed bezeichnet die Ladegeschwindigkeit einer Website; die Core Web Vitals sind Googles standardisierte Metriken für Nutzererfahrung, die Ladeleistung, Interaktivität und visuelle Stabilität messen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Web Performance, Ladegeschwindigkeit, Web Vitals, Performance Metriken

Was ist Page Speed?

Die Ladezeit einer Website beeinflusst direkt, wie viele Nutzer bleiben. Amazon berichtete, dass jede Verlangsamung von 100 ms die Conversion Rate um 1 % reduziert. Google zeigte in einer Studie, dass 53 % der mobilen Nutzer eine Seite verlassen, wenn sie länger als 3 Sekunden lädt (Google, 2018).

Seit 2021 fließen Googles Core Web Vitals direkt in das Suchmaschinen-Ranking ein. Websites, die diese Metriken nicht erfüllen, können schlechter ranken – unabhängig von Content-Qualität und Backlinks.

Für Designer ist das relevant, weil Design-Entscheidungen direkt die Performance beeinflussen: die Wahl der Schriften, die Größe von Bildern, die Komplexität von Animationen, die Anzahl der Elemente auf einer Seite.

Erklärung

Die drei Core Web Vitals

1. LCP – Largest Contentful Paint Misst, wie lange es dauert, bis das größte sichtbare Element geladen ist. Typischerweise ein Heldenbild, ein Video oder ein großer Textblock.

• Gut: ≤ 2,5 Sekunden
• Verbesserungsbedarf: 2,5–4 Sekunden
• Schlecht: > 4 Sekunden

Was Designer beeinflussen: Das Heldenbild Above the Fold: Was Besucher zuerst sehen ist in den meisten Fällen das LCP-Element. Große, unkomprimierte Bilder sind die häufigste Ursache für schlechten LCP. Bildoptimierung für Web: WebP, AVIF, Lazy Loading zeigt, wie Bilder für guten LCP optimiert werden.

2. INP – Interaction to Next Paint (ab 2024, ersetzt FID) Misst die Reaktionszeit auf Nutzerinteraktionen. Wie schnell reagiert die Seite auf Klicks, Taps, Tastatureingaben?

• Gut: ≤ 200 ms
• Verbesserungsbedarf: 200–500 ms
• Schlecht: > 500 ms

Was Designer beeinflussen: Schwere JavaScript-Animationen (CSS-Animationen für Designer verstehen) und zu viele DOM-Elemente verlangsamen die Interaktionszeit.

3. CLS – Cumulative Layout Shift Misst unerwartete Layout-Verschiebungen während des Ladevorgangs. Ein Bild, das zunächst keinen Platz reserviert und dann erscheint und den Text nach unten schiebt, erzeugt CLS.

• Gut: ≤ 0,1
• Verbesserungsbedarf: 0,1–0,25
• Schlecht: > 0,25

Was Designer beeinflussen: CLS ist fast vollständig durch Design-Entscheidungen kontrollierbar. Designer müssen sicherstellen, dass für Bilder immer Platzhalterflächen definiert sind und Webfonts: Einbindung, Performance, Lizenzen keine Text-Verschiebungen verursachen (FOUT).

Weitere wichtige Metriken

FCP – First Contentful Paint: Wann erscheint der erste Inhalt? Direkt beeinflusst durch Schrift-Ladezeiten (Webfonts: Einbindung, Performance, Lizenzen) und Code-Größe.

TTFB – Time To First Byte: Wie schnell antwortet der Server? Nicht direkt durch Designer beeinflussbar, aber relevant bei CMS für Designer: WordPress, Webflow, Kirby, Contentful.

Tools zur Performance-Messung

• Google PageSpeed Insights: Kostenloser Test mit Detailanalyse und Empfehlungen
• Lighthouse (in Chrome DevTools): Lokaler Test mit Performance-Score (0–100)
• WebPageTest.org: Ausführlichere Tests, Wasserfall-Diagramm, echte Geräte
• Chrome DevTools Network Tab: Lädt welche Ressource wie lange?

Performance-Budget

Ein Performance-Budget definiert verbindliche Grenzwerte für bestimmte Metriken oder Ressourcen (z. B. Gesamtseite max. 500 KB, LCP max. 2 s). Designer können zusammen mit Entwicklern ein Performance-Budget festlegen und in der Designphase darauf achten.

Beispiel: Wenn das Performance-Budget 2 Webfonts erlaubt, ist ein Design mit 5 verschiedenen Schriftfamilien inkompatibel.

Beispiele

CLS durch ungesetzte Bildgrößen: Ein Artikelbild wird ohne width und height Attribute eingebunden. Beim Laden schiebt es den Text 200 px nach unten – CLS-Wert: 0,3 (schlecht). Lösung: immer Bildabmessungen angeben oder CSS Aspect-Ratio-Placeholder.

LCP durch Lazy Loading auf Hero-Bild: Das Hero-Bild ist das LCP-Element und wurde mit loading="lazy" versehen. Das verzögert seinen Ladestart und verschlechtert LCP massiv. Lösung: Hero-Bild mit loading="eager" und fetchpriority="high".

Schrift-Ladezeit: Drei Webfont-Familien mit je 5 Schnitten werden geladen. Das ergibt 15 Netzwerkanfragen, bevor Text erscheint. FCP leidet. Lösung: Variable Fonts, nur benötigte Schnitte laden, font-display: swap.

In der Praxis

Was Designer konkret tun können

1. Bilder optimieren: WebP/AVIF, richtige Größen, no Lazy Loading auf Hero-Bildern (Bildoptimierung für Web: WebP, AVIF, Lazy Loading)
2. Schriften minimieren: Möglichst wenige Fonts, Variable Fonts bevorzugen (Webfonts: Einbindung, Performance, Lizenzen)
3. Bilddimensionen angeben: Immer Breite und Höhe für Bilder definieren (CLS-Prevention)
4. Animationen performant gestalten: Nur transform und opacity animieren (CSS-Animationen für Designer verstehen)
5. Seitenstruktur schlanke halten: Zu viele DOM-Elemente verlangsamen den Browser

Im Design Review

Performance sollte ein fester Punkt im Design Review sein. Fragen:

• Welches Element ist wahrscheinlich das LCP-Element?
• Sind alle Bilder mit Dimensionen versehen?
• Gibt es Webfonts, die das FCP verzögern könnten?
• Können Animationen Layout-Shifts verursachen?

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Beeinflusst Page Speed mein Google-Ranking? Ja, direkt seit dem Page Experience Update (2021). Core Web Vitals sind ein offizieller Ranking-Faktor. Allerdings ist Content-Relevanz weiterhin wichtiger.

Was ist ein guter Lighthouse-Score? 90+ gilt als gut. Unter 50 ist dringend Handlungsbedarf. Der Score allein ist aber nicht das Ziel – die tatsächlichen Core Web Vitals (gemessen an echten Nutzern) sind wichtiger.

Müssen Designer Performance verstehen? Ja. Ein Designer, der nicht versteht, dass ein 5 MB Hero-Bild die Seite langsam macht, entwirft Designs, die in der Produktion Probleme machen. Performance ist Teil des Designs.

Verwandte Einträge

• Bildoptimierung für Web: WebP, AVIF, Lazy Loading – Bilder für guten LCP optimieren
• Webfonts: Einbindung, Performance, Lizenzen – Schriften und FCP/CLS
• CSS-Animationen für Designer verstehen – Animationen und INP
• Above the Fold: Was Besucher zuerst sehen – Was als LCP-Element in Frage kommt
• Responsive Design: Grundlagen und Breakpoints – Performance auf mobilen Geräten
• CMS für Designer: WordPress, Webflow, Kirby, Contentful – CMS-Performance-Aspekte

Weiterführend

• Google (2024). Core Web Vitals.
• Google (2018). Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed.
• Grigorik, I. (2019). High Performance Browser Networking. O'Reilly Media.
• Enge, E. & Spencer, S. & Stricchiola, J. (2022). The Art of SEO. 4. Aufl. O'Reilly Media.
• WebPageTest (2024).