Mobil Web Performansı: Optimizasyon ve Best Practices

Mobil Performans Neden Farklı?

Mobil cihazlar daha düşük CPU ve bellek kapasitesine sahiptir. JavaScript parse ve compile süresi daha uzundur.

Ağ koşulları: 3G/4G/5G, WiFi. Değişken bandwidth ve latency. Mobil kullanıcılar daha yavaş bağlantıda olabilir.

Batarya: Ağır JavaScript ve animasyonlar batarya tüketir. Performans = batarya ömrü.

Ekran boyutu: Küçük ekranlar için optimize edilmiş görseller ve layout. Desktop-first yerine mobile-first.

Mobil-First Tasarım

Mobile-first CSS: Önce mobil stiller, sonra media query ile desktop. @media (min-width: 768px) ile büyük ekranlar için override.

Viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">. Mobilde doğru ölçekleme.

Touch targets: Butonlar ve linkler en az 48x48px. Parmakla kolay tıklanabilmeli. Yakın elementler arasında 8px boşluk.

Font boyutu: Minimum 16px. iOS, 16px'den küçük input'larda zoom yapar. Bu, UX'i bozar.

Navigation: Hamburger menu, bottom navigation, tab bar. Mobilde erişilebilir navigasyon.

Görsel Optimizasyonu

Responsive images: srcset ve sizes ile doğru boyut. Mobilde büyük görsel yükleme.

Image compression: WebP/AVIF format. Quality 75-80 mobil için yeterli. TinyPNG, Squoosh ile sıkıştırma.

Lazy loading: Sayfa altında kalan görselleri lazy load. loading="lazy" attribute.

Placeholder: Blur-up veya skeleton placeholder. Görsel yüklenirken placeholder gösterin.

CDN: Mobil kullanıcılar için en yakın CDN node. Cloudflare, Fastly gibi global CDN'ler.

JavaScript Optimizasyonu

Bundle size: Mobilde daha küçük bundle. Code splitting ile sadece gerekli kodu yükleyin.

Tree shaking: Kullanılmayan kodu kaldırın. ES modules kullanın.

Lazy loading: Ağır modülleri (chart, editor, map) lazy load edin. Dynamic import() ile.

Polyfill: Gereksiz polyfill'leri kaldırın. core-js yerine native API'leri kullanın (modern tarayıcılar destekler).

Web Workers: Ağır hesaplamaları ana thread'den ayırın. Mobilde UI thread'ini bloklamayın.

Ağ Optimizasyonu

HTTP/2 veya HTTP/3: Çoklu istekleri paralel işleme. Mobilde latency azaltır.

Compression: Gzip/Brotli ile metin tabanlı kaynakları sıkıştırın. %60-80 tasarruf.

Caching: Service Worker ile offline cache. Cache-first stratejisi ile tekrarlanan ziyaretlerde hızlı yükleme.

Prefetch/Preconnect: Kritik kaynakları önceden yükleyin. DNS ve TCP bağlantısını önceden kurun.

Resource hints: <link rel="preload"> ile kritik CSS ve font'ları önceden yükleyin.

Test ve İzleme

Real device testing: Gerçek mobil cihazlarda test edin. Chrome DevTools device emulation yeterli değildir.

Lighthouse mobile: Mobil performans audit. Throttling (CPU 4x slowdown, slow 4G) ile test.

WebPageTest: Mobil device ve connection profile ile test. Filmstrip ve waterfall analizi.

RUM: Gerçek mobil kullanıcı verileri. Device type, connection speed segmentasyonu.

Core Web Vitals: Mobil ve desktop için ayrı metrikler. Google Search Console'da mobil rapor.