Mobil Uygulama Performans Optimizasyonu

Mobil uygulama performansı, kullanıcı deneyiminin en kritik faktörlerinden biridir. Yavaş bir uygulama, kullanıcı kaybına ve düşük değerlendirmelere yol açar. Bu rehberde, React Native ve Flutter uygulamalarınızı optimize etmek için kanıtlanmış teknikleri paylaşacağım.

Uygulama Başlatma Süresini Azaltma

Kullanıcılar, uygulamanızın hızlı açılmasını bekler. İdeal başlatma süresi 2 saniyenin altında olmalıdır.

React Native İçin

// Lazy loading ile modülleri yükleyin
const HomeScreen = React.lazy(() => import('./screens/HomeScreen'));
const ProfileScreen = React.lazy(() => import('./screens/ProfileScreen'));

function App() {
  return (
    <Suspense fallback={<LoadingScreen />}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </Suspense>
  );
}

Flutter İçin

// Deferred loading kullanın
import 'package:flutter/material.dart';
import 'screens/home_screen.dart' deferred as home;
import 'screens/profile_screen.dart' deferred as profile;

class App extends StatelessWidget {
  Future<void> _navigateToHome() async {
    await home.loadLibrary();
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => home.HomeScreen()),
    );
  }
}

Bellek Optimizasyonu

Bellek sızıntıları ve aşırı bellek kullanımı, uygulamanızın çökmesine neden olabilir.

Best Practice'ler

1. Gereksiz state'leri temizleyin
2. Event listener'ları kaldırın
3. Büyük listelerde FlatList/ListView kullanın
4. Görüntüleri optimize edin

// React Native - useEffect cleanup
useEffect(() => {
  const subscription = eventEmitter.addListener('event', handleEvent);
  
  return () => {
    // Cleanup
    subscription.remove();
  };
}, []);

// Görüntü optimizasyonu
<Image
  source={{ uri: imageUrl }}
  resizeMode="cover"
  style={{ width: 200, height: 200 }}
  // Önbellek kullanın
  cache="force-cache"
/>

Liste Performansı

Uzun listeler, mobil uygulamalarda yaygın bir performans sorunudur.

React Native FlatList Optimizasyonu

<FlatList
  data={items}
  renderItem={renderItem}
  // Performans optimizasyonları
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  updateCellsBatchingPeriod={50}
  initialNumToRender={10}
  windowSize={10}
  // Öğe yüksekliği sabit ise
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  // Benzersiz key
  keyExtractor={(item) => item.id}
/>

Flutter ListView Optimizasyonu

ListView.builder(
  itemCount: items.length,
  // Önbellek boyutu
  cacheExtent: 100,
  itemBuilder: (context, index) {
    return ListTile(
      key: ValueKey(items[index].id),
      title: Text(items[index].title),
    );
  },
)

Native Modül Entegrasyonu

Performans kritik işlemler için native kod kullanın.

React Native Native Module

// Android - Java
public class ImageProcessorModule extends ReactContextBaseJavaModule {
  @ReactMethod
  public void processImage(String imagePath, Promise promise) {
    try {
      // Yoğun işlem native kodda
      Bitmap processed = heavyImageProcessing(imagePath);
      promise.resolve(processed);
    } catch (Exception e) {
      promise.reject("ERROR", e);
    }
  }
}

// iOS - Swift
@objc(ImageProcessorModule)
class ImageProcessorModule: NSObject {
  @objc
  func processImage(_ imagePath: String, 
                   resolver: @escaping RCTPromiseResolveBlock,
                   rejecter: @escaping RCTPromiseRejectBlock) {
    // Yoğun işlem native kodda
    let processed = heavyImageProcessing(imagePath)
    resolver(processed)
  }
}

Animasyon Performansı

Pürüzsüz animasyonlar için 60 FPS hedefleyin.

React Native Animated API

import { Animated } from 'react-native';

const fadeAnim = useRef(new Animated.Value(0)).current;

// Native driver kullanın
Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 300,
  useNativeDriver: true, // Önemli!
}).start();

Flutter Animation

class AnimatedWidget extends StatefulWidget {
  @override
  _AnimatedWidgetState createState() => _AnimatedWidgetState();
}

class _AnimatedWidgetState extends State<AnimatedWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _controller,
      child: Container(),
    );
  }
}

Bundle Size Optimizasyonu

Uygulama boyutunu küçültmek, indirme ve güncelleme sürelerini azaltır.

React Native

# Hermes engine kullanın
# android/app/build.gradle
project.ext.react = [
    enableHermes: true
]

# ProGuard ile kod küçültme
# android/app/build.gradle
buildTypes {
    release {
        minifyEnabled true
        shrinkResources true
    }
}

Flutter

# Release build optimizasyonları
flutter build apk --release --split-per-abi
flutter build ios --release

Performans İzleme

Sürekli performans izleme, sorunları erken tespit etmenizi sağlar.

Firebase Performance Monitoring

import perf from '@react-native-firebase/perf';

// Custom trace
const trace = await perf().startTrace('custom_trace');
await performHeavyTask();
await trace.stop();

// HTTP request monitoring
const metric = await perf().newHttpMetric(url, 'GET');
await metric.start();
const response = await fetch(url);
await metric.setHttpResponseCode(response.status);
await metric.stop();

Sonuç

Mobil uygulama performansı, sürekli dikkat gerektiren bir süreçtir. Bu teknikleri uygulayarak:

• ✅ Daha hızlı başlatma süreleri
• ✅ Düşük bellek kullanımı
• ✅ Pürüzsüz animasyonlar
• ✅ Daha iyi kullanıcı deneyimi

elde edebilirsiniz. Performansı düzenli olarak ölçün ve optimize edin!