Mobile Performance: 4G-Throttling und Touch-Latenz

Mobile ist NICHT Desktop kleiner gerechnet

Ein häufiges Missverständnis: "Wenn Desktop schnell ist, ist Mobile auch okay." Die Realität auf Mid-Range-Android-Phones:

• CPU ist 4-6× langsamer als ein Desktop-i7 (Lighthouse simuliert das mit 4× Slowdown)
• JavaScript-Parsing dominiert - ein 200 KB JS-Bundle parsed in 200-400 ms auf Mobile
• Connection variiert massiv - Lighthouse rechnet mit "Slow 4G" (~1.6 Mbps, 150 ms RTT)
• Touch-Latenz sollte unter 100 ms liegen, sonst fühlt es sich kaputt an

Realistische Test-Geräte als Baseline

Gerät	Relevanz	CPU
Moto G Power (2023)	Mid-Range-Android-Baseline (Google's Empfehlung)	Snapdragon 662
Pixel 5	Solides Mid-High-End	Snapdragon 765G
iPhone SE (3. Gen)	Mainstream iPhone	A15 Bionic
Pixel 8 / iPhone 15	High-End, NICHT als Baseline nutzen	-

Wenn das Lighthouse-Audit auf Mid-Range-Mobile rot ist, dein eigenes Pixel 8 aber smooth zeigt: optimieren ist nötig. Dein Gerät ist nicht repräsentativ.

Mobile-Performance Hebel

1. JavaScript reduzieren - aggressiv

Mobile leidet am meisten unter JS. Lieber 50 KB extra HTML als 50 KB JS. Astro, Hugo, 11ty schicken oft < 20 KB JS - React-Apps mit ungebremstem Wachstum kommen schnell auf 500+ KB.

2. Touch-Targets ≥ 48 × 48 px

Apple Human Interface Guidelines: 44 pt. Google Material: 48 dp. Lighthouse Accessibility checkt das. Buttons unter dieser Größe sind frustrierend zu klicken auf Mobile.

3. Viewport meta sauber setzen

<meta name="viewport" content="width=device-width, initial-scale=1">

Ohne diesen Tag rendert Mobile-Safari die Seite mit 980 px Breite und zoomt auf 30 % - Katastrophe.

4. Reduce-Motion respektieren

User mit prefers-reduced-motion wollen weniger Animationen. CSS:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Spart auch Performance auf langsamen Geräten.

5. Image-Sizing für Mobile

srcset mit max 800 px Variante. Auf einem iPhone-Viewport mit DPR 3 = 800 px reicht völlig. Größere Bilder werden umsonst geladen.

Im DevTools mobile auditieren

1. Chrome DevTools → Toggle Device Toolbar (Ctrl+Shift+M)
2. Gerät: Pixel 7 oder Moto G Power
3. Network: Slow 4G
4. CPU: 4× Slowdown
5. Lighthouse: Performance + Mobile

Das ist die Bewertung die für Google's Mobile-First-Index zählt.