Suchmaschinen & Performance
04 / Performance
Kernfrage
Wie schnell ist schnell genug?
Jede Sekunde Ladezeit kostet Aufmerksamkeit. Langsame Seiten werden verlassen, bevor sie zu sehen sind, besonders auf dem Handy unterwegs. Performance ist darum eine Gestaltungsaufgabe: Bilder, Schriften und Effekte haben ein Gewicht.
Lernziel: Du kannst die Core Web Vitals lesen und deuten, ein Performance-Budget festlegen und die häufigsten Bremsen in der Gestaltung vermeiden.
Jede Sekunde zählt.
4.1 / Core Web Vitals
Drei Werte für das Erlebnis.
Google misst die Nutzererfahrung mit drei Kennzahlen, den Core Web Vitals. Sie fliessen auch ins Ranking ein.
01
LCP
Largest Contentful Paint: Wann ist das grösste Element sichtbar? Gut bis 2,5 Sekunden.
02
INP
Interaction to Next Paint: Wie schnell reagiert die Seite auf Klicks? Gut bis 200 Millisekunden.
03
CLS
Cumulative Layout Shift: Wie stark springt das Layout beim Laden? Gut bis 0,1.
Gemessen wird bei echten Besucherinnen und Besuchern. PageSpeed Insights zeigt beides: Labordaten für die Fehlersuche und Felddaten aus dem echten Gebrauch.
Bilder sind der grösste Posten.
4.2 / Performance-Budget
Gewicht planen wie ein Budget.
Ein Performance-Budget legt fest, wie schwer eine Seite sein darf, zum Beispiel unter 1 MB für die Startseite und LCP unter 2,5 Sekunden. Jedes neue Element muss ins Budget passen: Ein Video im Kopfbereich kann allein mehr wiegen als die ganze restliche Seite.
Die grössten Posten sind fast immer Bilder, dann JavaScript und Schriften. Wer früh plant, muss später nicht mühsam abspecken.
Gewicht planen wie ein Budget.
4.3 / Gestalten für Tempo
Die häufigsten Bremsen.
Bilder in passender Grösse und in WebP oder AVIF, unterhalb des sichtbaren Bereichs erst bei Bedarf geladen. Höchstens zwei Schriftfamilien, als WOFF2 und mit font-display: swap. Animationen sparsam und mit transform und opacity statt mit Layout-Eigenschaften.
Gegen springende Layouts helfen feste Seitenverhältnisse für Bilder, Videos und Einbettungen. Fremde Skripte wie Chat-Fenster, Karten oder Tracker kosten viel: Prüfe bei jedem, ob er den Preis wert ist.
Feste Masse gegen springende Layouts.
Übung
Eine schnelle Startseite
Aufgabe: Optimiere die Startseite der Schreinerei Holzwerk oder einer eigenen Website.
SCHRITT 1
Miss die Startseite mit PageSpeed Insights auf dem Handy und notiere LCP, INP und CLS.
SCHRITT 2
Lege ein Performance-Budget fest und trage die Ist-Werte ins Werkzeug ein.
SCHRITT 3
Setze drei Massnahmen um: Bilder optimieren, Schriften reduzieren, ein fremdes Skript entfernen oder verzögern.
SCHRITT 4
Miss erneut und vergleiche.
Auswertung: Welche Massnahme hat am meisten gebracht, und was hat sie gekostet?