Mobile Web Performance: Optimierung und Best Practices

Warum mobile Performance anders ist

Mobile Geräte haben geringere CPU- und Speicherkapazität. JavaScript Parse und Compile Zeit ist länger.

Netzwerkbedingungen: 3G/4G/5G, WiFi. Variable Bandbreite und Latenz. Mobile Nutzer können auf langsameren Verbindungen sein.

Batterie: Schweres JavaScript und Animationen verbrauchen Batterie. Performance = Batterielebensdauer.

Bildschirmgröße: Optimierte Bilder und Layout für kleine Bildschirme. Mobile-First statt Desktop-First.

Mobile-First Design

Mobile-First CSS: Zuerst mobile Styles, dann mit Media Query für Desktop überschreiben. @media (min-width: 768px) für große Bildschirme.

Viewport Meta Tag: <meta name="viewport" content="width=device-width, initial-scale=1">. Korrekte Skalierung auf Mobilgeräten.

Touch Targets: Buttons und Links mindestens 48x48px. Leicht mit Finger tippbar. 8px Abstand zwischen nahen Elementen.

Schriftgröße: Minimum 16px. iOS zoomt bei Inputs unter 16px. Dies ruiniert UX.

Navigation: Hamburger Menu, Bottom Navigation, Tab Bar. Zugängliche Navigation auf Mobilgeräten.

Bildoptimierung

Responsive Images: Richtige Größe mit srcset und sizes. Keine großen Bilder auf Mobilgeräten laden.

Bildkomprimierung: WebP/AVIF Format. Quality 75-80 ausreichend für Mobil. Komprimieren mit TinyPNG, Squoosh.

Lazy Loading: Bilder unterhalb des Folds lazy laden. loading="lazy" Attribut.

Placeholder: Blur-up oder Skeleton Placeholder. Placeholder anzeigen während Bild lädt.

CDN: Nächster CDN-Node für mobile Nutzer. Globale CDNs wie Cloudflare, Fastly.

JavaScript-Optimierung

Bundle-Größe: Kleineres Bundle auf Mobilgeräten. Nur notwendigen Code mit Code Splitting laden.

Tree Shaking: Ungenutzten Code entfernen. ES Modules verwenden.

Lazy Loading: Schwere Module (Chart, Editor, Map) lazy laden. Mit dynamic import().

Polyfill: Unnötige Polyfills entfernen. Native APIs statt core-js verwenden (moderne Browser unterstützen sie).

Web Workers: Schwere Berechnungen vom Hauptthread trennen. UI Thread auf Mobilgeräten nicht blockieren.

Netzwerkoptimierung

HTTP/2 oder HTTP/3: Parallele Verarbeitung mehrerer Anfragen. Reduziert Latenz auf Mobilgeräten.

Komprimierung: Textbasierte Ressourcen mit Gzip/Brotli komprimieren. 60-80% Einsparung.

Caching: Offline-Cache mit Service Worker. Schnelles Laden bei wiederholten Besuchen mit Cache-First Strategie.

Prefetch/Preconnect: Kritische Ressourcen vorladen. DNS- und TCP-Verbindung vorab herstellen.

Resource Hints: Kritische CSS und Fonts mit <link rel="preload"> vorladen.

Testen und Monitoring

Real Device Testing: Auf echten Mobilgeräten testen. Chrome DevTools Device Emulation reicht nicht aus.

Lighthouse Mobile: Mobile Performance Audit. Testen mit Throttling (CPU 4x Slowdown, Slow 4G).

WebPageTest: Testen mit mobilem Gerät und Verbindungsprofil. Filmstrip und Waterfall Analyse.

RUM: Echte mobile Nutzerdaten. Device Type, Connection Speed Segmentierung.

Core Web Vitals: Separate Metriken für Mobil und Desktop. Mobilbericht in Google Search Console.