Über 60 % des weltweiten Web-Traffics kommt von Smartphones. Gleichzeitig sind die Core Web Vitals seit 2021 ein offizieller Google-Rankingfaktor. Das bedeutet: Wer seine mobilen Core Web Vitals vernachlässigt, verliert nicht nur Nutzer – er verliert auch Rankings. Und das auf genau dem Gerät, das die Mehrheit deiner Besucher nutzt.
In diesem Artikel zeigen wir dir, wie du LCP, CLS und INP speziell für mobile Geräte optimierst – mit konkreten Maßnahmen, die du direkt umsetzen kannst.
Warum mobile Core Web Vitals anders sind
Google misst Core Web Vitals separat für Desktop und Mobile. Und hier liegt der Knackpunkt: Mobile Nutzer haben deutlich schlechtere Ausgangsbedingungen als Desktop-Nutzer:
- Langsamere CPUs: Selbst aktuelle Mittelklasse-Smartphones haben deutlich weniger Rechenleistung als ein Desktop-Rechner
- Schwankende Verbindungen: 4G-Verbindungen sind oft instabiler als Breitband-Internet
- Kleinere Arbeitsspeicher: Browser-Tabs auf Smartphones werden früher ausgelagert
- Touchscreen-Latenz: Touch-Events haben eine andere Latenz als Maus-Klicks
Was auf dem Desktop mit gutem Score lädt, kann auf dem Smartphone dramatisch schlechter abschneiden. Daher: Immer zuerst mobile Core Web Vitals messen, dann optimieren.
Die drei Metriken im Überblick
Bevor wir in die Optimierung gehen, eine kurze Auffrischung. Unser Artikel Core Web Vitals erklärt: LCP, CLS und FID einfach verstehen geht ausführlicher darauf ein – hier die mobile Perspektive.
LCP – Largest Contentful Paint
Wann wird das größte sichtbare Element geladen? Für Mobile gilt: unter 2,5 Sekunden für ein gutes Ergebnis. Häufig ist das Headerbild oder ein großer Text-Block das LCP-Element.
CLS – Cumulative Layout Shift
Wie stark verschiebt sich das Layout während des Ladens? Für Mobile besonders kritisch, weil Nutzer mit dem Finger scrollen und ein unerwartetes Layout-Sprung mitten im Tippen sehr störend ist. Zielwert: unter 0,1.
INP – Interaction to Next Paint
INP (Interaction to Next Paint) hat seit März 2024 FID (First Input Delay) ersetzt. Es misst die Verzögerung zwischen einer Nutzerinteraktion und der sichtbaren Reaktion der Seite. Auf Smartphones besonders kritisch: Touch-Events, Scroll-Events und komplexe Animationen. Zielwert: unter 200 Millisekunden.
Mobile LCP optimieren: Die 5 wichtigsten Maßnahmen
1. Das LCP-Element vorab laden (Preload)
Das größte sichtbare Element – meist ein Hero-Bild oder ein großer Textblock – sollte so früh wie möglich geladen werden. Mit einem preload-Link-Tag kannst du dem Browser signalisieren, dieses Element zu priorisieren:
<link rel="preload" as="image"
href="/images/hero-mobile.webp"
media="(max-width: 768px)">Wichtig: Das media-Attribut stellt sicher, dass mobil ein optimiertes (kleineres) Bild preloaded wird, nicht das Desktop-Bild.
2. Bilder in modernen Formaten ausliefern
WebP-Bilder sind im Schnitt 30 % kleiner als JPEG bei gleicher Qualität. Für Smartphones macht das einen erheblichen Unterschied. Unser Artikel über Bilder für das Web optimieren erklärt die Details. Kurze Checkliste:
- Hero-Bilder als WebP mit maximaler Breite von 800 px für Mobile
srcsetnutzen um verschiedene Bildgrößen für verschiedene Screens anzubieten- Lazy Loading für alle Bilder below the fold (
loading="lazy") - Das LCP-Bild selbst niemals lazy loaden!
3. TTFB verbessern: Server-Antwortzeit senken
Wenn der Server langsam antwortet, kann auch das beste Frontend nichts retten. Gerade auf schwachen Mobilverbindungen fällt eine hohe Time to First Byte (TTFB) besonders stark ins Gewicht. Zielwert: unter 200 ms.
- CDN (Content Delivery Network) nutzen – besonders wichtig für internationale Websites
- Server-seitiges Caching einrichten
- PHP/Datenbankabfragen optimieren (bei WordPress: Caching-Plugin wie LiteSpeed Cache oder WP Rocket)
4. Render-Blocking-Ressourcen entfernen
Externe CSS- und JavaScript-Dateien, die im <head> ohne async oder defer geladen werden, blockieren den Browser. Auf einem langsamen Smartphone macht das den Unterschied zwischen 2 und 5 Sekunden LCP. Mehr dazu in unserem Artikel über Render-Blocking-Ressourcen entfernen.
5. Schriftarten (Webfonts) optimal laden
Webfonts können den LCP erheblich verzögern. Best Practice für Mobile:
font-display: swapim CSS – zeigt sofort Systemschrift an, lädt Webfont nach- Webfonts
preconnectzur Schriftquelle - Nur die Schriftschnitte laden, die du tatsächlich nutzt
Mobile CLS optimieren: Layout-Sprünge verhindern
CLS-Probleme auf Smartphones entstehen durch dieselben Ursachen wie auf Desktop – aber die Auswirkungen sind schlimmer, weil der Nutzer aktiv tippt oder scrollt.
Größenangaben für Bilder und Videos
Die häufigste CLS-Ursache: Bilder ohne Breiten- und Höhenangaben. Der Browser weiß vor dem Laden nicht, wie viel Platz das Bild braucht – und verschiebt beim Laden das Layout.
<!-- Schlecht: kein width/height -->
<img src="bild.webp" alt="Beschreibung">
<!-- Gut: Aspect Ratio ist bekannt -->
<img src="bild.webp" alt="Beschreibung" width="800" height="450">Keine Inhalte dynamisch über bestehende Inhalte einfügen
Banner, Cookie-Hinweise, Newsletter-Popups oder Werbeanzeigen, die nachträglich über anderen Inhalt eingefügt werden, erzeugen massive CLS-Probleme. Strategien:
- Feste Dimensionen für Werbeflächen reservieren (auch wenn leer)
- Cookie-Banner von unten einblenden statt über Inhalt zu legen
- Skeleton-Screens statt nachträgliches Nachladen von Inhalt
Schriftarten ohne Layout Shift laden
Wenn eine Webfont nachgeladen wird und sich die Laufweite der Buchstaben ändert, entsteht ein Layout Shift. Mit font-display: swap und size-adjust lässt sich das minimieren:
@font-face {
font-family: 'MeinFont';
src: url('font.woff2') format('woff2');
font-display: swap;
size-adjust: 105%; /* Annäherung an die Fallback-Schrift */
}Mobile INP optimieren: Reaktionsfähigkeit verbessern
INP ist die jüngste und für viele Website-Betreiber unerwartetste Herausforderung. Die Metrik misst, wie schnell die Seite auf Nutzereingaben reagiert – Klicks, Taps, Tastatureingaben.
Was verursacht schlechtes INP auf Smartphones?
- Schweres JavaScript: Große JS-Bundles, die den Main Thread blockieren
- Zu viele Event-Listener: Jeder Event-Listener kostet Rechenzeit
- Komplexe DOM-Strukturen: Viele Elemente bedeuten mehr Rechenaufwand beim Rendern
- Ineffiziente Animationen: CSS-Animationen auf Eigenschaften wie
widthodermarginstatttransformundopacity
JavaScript aufteilen und verzögert laden
Lade JavaScript-Code nur dann, wenn er gebraucht wird:
// Statt alles auf einmal zu laden:
import { heavyModule } from './heavyModule.js';
// Lazy loading bei Bedarf:
button.addEventListener('click', async () => {
const { heavyModule } = await import('./heavyModule.js');
heavyModule.init();
});Long Tasks vermeiden
Als "Long Task" gilt jede JavaScript-Aufgabe, die länger als 50 ms dauert. Diese blockieren den Browser und führen zu schlechtem INP. Verwende requestIdleCallback oder setTimeout(fn, 0) um nicht-kritische Aufgaben in die nächste "ruhige" Phase zu verschieben.
Animationen richtig umsetzen
CSS-Animationen auf Eigenschaften, die Layout oder Paint auslösen (width, height, top, left), sind auf Smartphones teuer. Nutze stattdessen:
transform: translateX()stattlefttransform: scale()stattwidth/heightopacityfür Ein-/Ausblendenwill-change: transformbei bekannten Animationen (sparsam nutzen!)
Tools zur Messung mobiler Core Web Vitals
Zur Messung und Analyse gibt es mehrere Tools:
PageSpeed Insights (empfohlen für Einsteiger)
Google PageSpeed Insights (pagespeed.web.dev) zeigt sowohl Lab-Daten (simuliert) als auch echte Nutzerdaten (Chrome User Experience Report = CrUX) – separat für Mobile und Desktop. Starte hier für einen ersten Überblick.
Chrome DevTools – Mobile Emulation
Im Chrome DevTools kannst du unter "Performance" eine Seite mit gedrosselter CPU und langsamem Netzwerk simulieren. So siehst du, wie sich deine Seite auf einem günstigen Smartphone verhält. Stelle die CPU-Drosselung auf "4x slowdown" für realistische Ergebnisse.
Google Search Console – Core Web Vitals Bericht
Die Google Search Console zeigt, welche deiner URLs mobile Core Web Vitals-Probleme haben – basierend auf echten Chrome-Nutzerdaten. Dort siehst du, welche Seiten priorisiert werden sollten.
Web Vitals Chrome Extension
Die offizielle Web Vitals Extension misst LCP, CLS und INP live beim Surfen – auch auf deinen eigenen Seiten. Ideal für schnelle Checks ohne Tools öffnen zu müssen.
Checkliste: Mobile Core Web Vitals optimieren
Hier die wichtigsten Maßnahmen kompakt zusammengefasst:
- LCP-Element identifizieren (PageSpeed Insights → "LCP element")
- LCP-Bild preloaden mit
<link rel="preload" as="image"> - Bilder als WebP mit
srcsetfür verschiedene Bildschirmgrößen - LCP-Bild niemals lazy loaden
- TTFB unter 200 ms (CDN, Server-Caching)
- Alle Bilder mit width + height (verhindert CLS)
- Feste Dimensionen für Werbeflächen
- JavaScript async/defer laden
- Long Tasks aufteilen (< 50 ms pro Task)
- Animationen nur via transform + opacity
- Monatliches Monitoring via Google Search Console
Fazit: Mobile zuerst – immer
Google indiziert und bewertet deine Website nach dem Mobile-First-Prinzip. Das bedeutet: Die mobile Version deiner Seite bestimmt dein Ranking – auch für Desktop-Nutzer. Mobile Core Web Vitals sind kein Nice-to-have, sondern ein direkter Rankingfaktor.
Die gute Nachricht: Die meisten Verbesserungen lassen sich auch ohne tiefen Technologie-Stack umsetzen. Richtige Bildformate, korrekte Dimensionsangaben und ein schneller Server bringen dich bereits in den grünen Bereich.
Nutze unsere kostenlose Core Web Vitals Erklärung oder starte direkt mit der kostenlosen SEO-Analyse auf shift07.ai – wir zeigen dir genau, wo deine Website steht.