Page Speed Mobile - Grundlagen und Best Practices 2025

Core Web Vitals für Mobile

Die Core Web Vitals sind die wichtigsten Metriken für die mobile Performance-Bewertung:

Largest Contentful Paint (LCP)

• Zielwert: Unter 2,5 Sekunden
• Messung: Zeit bis das größte sichtbare Element geladen ist
• Mobile Besonderheit: Langsamere Verbindungen und schwächere Hardware

First Input Delay (FID) / Interaction to Next Paint (INP)

• Zielwert: Unter 100ms (FID) / Unter 200ms (INP)
• Messung: Reaktionszeit auf erste Benutzerinteraktion
• Mobile Relevanz: Touch-Events sind kritischer als Maus-Events

Cumulative Layout Shift (CLS)

• Zielwert: Unter 0,1
• Messung: Visuelle Stabilität der Seite
• Mobile Problem: Häufiger durch dynamische Inhalte und Werbung

Mobile-spezifische Performance-Herausforderungen

Netzwerk-Bedingungen

• 3G/4G/5G Variabilität: Unvorhersagbare Verbindungsgeschwindigkeiten
• Data Saver Mode: Nutzer aktivieren Datensparmodus
• Roaming: Internationale Nutzer mit begrenzten Datenvolumen

Hardware-Limitationen

• Prozessorleistung: Schwächere CPUs in mobilen Geräten
• Arbeitsspeicher: Begrenzter RAM für JavaScript-Execution
• Batterie: Performance wird bei niedrigem Akkustand reduziert

Bildschirmgrößen

• Responsive Images: Verschiedene Auflösungen und Pixel-Dichten
• Viewport-Optimierung: Korrekte Darstellung auf allen Geräten
• Touch-Targets: Ausreichend große klickbare Bereiche

Technische Optimierungsstrategien

Bildoptimierung für Mobile

Responsive Images Implementation

<picture>
  <source media="(min-width: 768px)" srcset="image-desktop.webp">
  <source media="(max-width: 767px)" srcset="image-mobile.webp">
  <img src="image-fallback.jpg" alt="Beschreibung">
</picture>

Code-Minimierung und Komprimierung

CSS-Optimierung:

• Critical CSS inline einbinden
• Nicht-kritische CSS asynchron laden
• Unused CSS entfernen
• CSS-Minification aktivieren

JavaScript-Optimierung:

• Code-Splitting implementieren
• Tree-shaking für ungenutzten Code
• Lazy Loading für nicht-kritische Scripts
• Service Worker für Caching

Caching-Strategien

Browser-Caching:

• Statische Assets: 1 Jahr
• HTML-Dateien: 1 Stunde
• API-Responses: 5 Minuten

Service Worker Caching:

• Cache-First für statische Inhalte
• Network-First für dynamische Inhalte
• Stale-While-Revalidate für Balance

Mobile-spezifische Performance-Tools

Google PageSpeed Insights

• Mobile-spezifische Scores
• Field Data Integration
• Konkrete Optimierungsvorschläge

Chrome DevTools

• Mobile Simulation
• Network Throttling
• Performance Profiling

WebPageTest

• Real Device Testing
• Verschiedene Standorte
• Detaillierte Wasserfall-Diagramme

Progressive Web App (PWA) Optimierung

Service Worker Implementation

• Offline-Funktionalität
• Background Sync
• Push Notifications

App Shell Architecture

• Schnelle initiale Ladezeit
• Cached UI-Komponenten
• Dynamischer Content-Loading

Web App Manifest

• Installierbarkeit
• Splash Screen
• Theme Colors

Monitoring und Messung

Real User Monitoring (RUM)

• Echte Nutzerdaten
• Verschiedene Geräte und Netzwerke
• Kontinuierliche Überwachung

Synthetic Monitoring

• Regelmäßige Tests
• Verschiedene Standorte
• Alert-Systeme

Key Performance Indicators (KPIs)

• LCP < 2,5s
• FID/INP < 100ms/200ms
• CLS < 0,1
• Time to Interactive < 3,5s

Häufige Mobile Performance-Probleme

1. Render-Blocking Resources

• Problem: CSS und JS blockieren das Rendering
• Lösung: Critical CSS inline, JS asynchron laden

2. Unoptimierte Bilder

• Problem: Zu große Dateien, falsche Formate
• Lösung: WebP/AVIF, responsive Images, Lazy Loading

3. Excessive JavaScript

• Problem: Zu viel JS, schlechte Performance
• Lösung: Code-Splitting, Tree-shaking, Bundle-Analyse

4. Third-Party Scripts

• Problem: Tracking, Werbung, Widgets verlangsamen
• Lösung: Lazy Loading, asynchrone Einbindung

5. Server-Response-Zeit

• Problem: Langsame Backend-Performance
• Lösung: CDN, Caching, Server-Optimierung

Best Practices für Mobile Page Speed

1. Mobile-First Development

• Ansatz: Zuerst für Mobile entwickeln
• Vorteil: Bessere Performance von Anfang an
• Implementation: Progressive Enhancement

2. Critical Resource Prioritization

• Above-the-fold Content: Höchste Priorität
• Critical CSS: Inline einbinden
• Essential JavaScript: Minimieren und optimieren

3. Image Optimization Strategy

• Format-Wahl: WebP/AVIF mit JPEG-Fallback
• Größen-Anpassung: Responsive Images
• Lazy Loading: Für Below-the-fold Content

4. Code-Splitting und Lazy Loading

• Route-based Splitting: Pro Seite/Feature
• Component-based Splitting: Für große Komponenten
• Dynamic Imports: Für bedarfsgerechtes Laden

5. Caching-Strategie

• Browser-Caching: Für statische Assets
• Service Worker: Für Offline-Funktionalität
• CDN-Nutzung: Für globale Performance

Zukunft der Mobile Performance

HTTP/3 und QUIC

• Vorteile: Schnellere Verbindungsaufbau
• Mobile Benefit: Bessere Performance bei schwachem Signal
• Implementation: Server-seitige Unterstützung

Core Web Vitals Evolution

• Neue Metriken: Interaction to Next Paint (INP)
• Erweiterte Messung: Mehr User-Interaktionen
• Mobile-Focus: Stärkere Gewichtung mobiler Metriken

5G und Edge Computing

• Ultra-schnelle Verbindungen: Neue Möglichkeiten
• Edge-Caching: Content näher am Nutzer
• Real-time Features: Interaktive Anwendungen