Kullanıcının hissettiği yavaşlığı ölçülebilir bir akışa çeviriyoruz
React Native uygulamanızın performansı en güçlü geliştirme bilgisayarındaki emülatörden ibaret değildir. Sorunun görüldüğü cihaz, işletim sistemi, uygulama sürümü, veri büyüklüğü ve işlem adımları kaydedilir. İlk açılış ile yeniden açılış; yeni hesap ile çok kaydı olan kullanıcı farklı davranabilir. İnceleme, bu koşulların anlaşılmasıyla başlar.
Yayın sürümüne yakın release build üzerinde başlangıç ölçümü alınır. Geliştirme modunun ek yükü, gerçek kullanıcının gördüğü sonuçla karıştırılmaz. Açılışın tamamlanması veya ekranın kullanılabilir olması gibi ölçüm noktaları açık tanımlanır. Kullanıcının “yavaş” dediği anı kısa video ve tekrar adımlarıyla göstermek yararlıdır. Önceki ve sonraki ölçüm aynı koşullarda yapılmadığında sonuç güvenilir bir karşılaştırma değildir.
API bekleme, arayüz takılması ve bellek artışı farklı sorunlardır
Backend ve API performansı yavaş bir mobil ekranın nedeni olabilir; fakat ağ yanıtı hızlıyken arayüz de takılabilir. İstek süresi, veri boyutu ve ekranda yapılan iş ayrı incelenir. Kullanıcıya yüklenme durumu göstermek algıyı iyileştirebilir; bu, gecikmenin kaynağını ortadan kaldırdığı anlamına gelmez.
İlk değerlendirme katmanları ayırır. JavaScript tarafındaki iş, native çizim, veri aktarımı ve bellek kullanımı için gerekli profil bilgisi toplanır. Amaç bir araç ekranını raporlamak değil, gözlenen belirtiyi açıklayan kanıtı bulmaktır. Örneğin uzun bir listenin tüm verisini tek seferde hazırlamak ile aynı listenin büyük görsellerini yüklemek farklı düzeltmeler isteyebilir. Bulgular etki, emek ve bağımlılık açısından önceliklendirilir.
| Belirti | İncelenecek alan | Karşılaştırma örneği |
|---|---|---|
| İlk ekran geç hazır | Başlatma, başlangıç veri ve gerekli işler | Aynı cihazda yeni açılışın kullanılabilir olduğu an. |
| Kaydırma veya dokunma takılıyor | Render, liste yapısı ve görsel iş yükü | Aynı kayıt sayısıyla tekrar edilen etkileşim. |
| Uzun kullanımda sorun artıyor | Bellek, ekran ömrü ve kaynak temizliği | Aynı gezinme dizisinin önceki ve sonraki durumu. |
OKUMADAN SONRAKİ ADIMA
Yavaşlayan akışı birlikte inceleyelim
Kısa sorun kaydını, cihazınızı ve uygulama sürümünü paylaşın. Ölçülebilir bir başlangıç ve ilk düzeltme kapsamı oluşturalım.
Liste, state ve görsellerde gereksiz işi azaltma
Mobil arayüz bileşenleri veri ve ekran davranışıyla birlikte değerlendirilir. Bir kayıt güncellendiğinde bütün sayfanın yeniden işlem yapması gerekebilir; bunun kullanıcıya maliyeti ölçülür. State sınırları, tekrar eden hesaplama, liste veri miktarı ve görsel boyutları incelenir. Her bileşene aynı optimizasyon tekniğini eklemek çözüm değildir.
Memoization veya liste ayarı ancak ilgili sorunu düzelttiği gösterildiğinde uygulanır. Gereksiz bir önbellek bellek yükü artırabilir; fazla agresif liste ayarı boş alan veya içerik sıçraması oluşturabilir. Görsel yükünde gerçek görüntü boyutu ve ekrandaki ihtiyacın farkı değerlendirilir. Kullanıcının görmediği işi geciktirmek mümkün olabilir, ancak gerekli işlemi gizlemek veya eksik veri göstermek hedef değildir. Düzeltme işlevsel kabul ile birlikte incelenir.
Render kapsamı
Bir değişikliğin hangi bileşenleri etkilediği incelenir. Gereksiz tekrarın azaltılması ürünün doğru veri göstermesini bozmamalıdır.
Liste ve görsel yükü
Kayıt adedi, satır davranışı ve görsel kaynakları birlikte kontrol edilir. Ayarların kaydırma ve bellek üzerindeki etkisi karşılaştırılır.
İşin zamanı
Başlangıçta zorunlu iş ile sonra yapılabilecek iş ayrılır. Kullanıcının ilk görevini geciktiren gereksiz yük öncelikli incelenir.
Native katman, animasyon ve bellek için platforma özel inceleme
iOS uygulama davranışı ile Android'deki aynı akış birebir sonuç vermeyebilir. Native modül, izin, animasyon ve cihaz kapasitesi incelemeyi etkiler. Hangi işin hangi katmanda yürüdüğü profil verisiyle değerlendirilir. Bir ekranda JavaScript tarafı hızlı görünürken platformun çizim veya kaynak işlemi darboğaz oluşturabilir.
Uzun kullanımda belleğin artması için tekrar edilen bir gezinme senaryosu hazırlanır. Ekran kapandığında abonelik, dinleyici veya ilgili kaynakların davranışı incelenir. Animasyonun görevi geçişi anlaşılır kılmaktır; daha ağır görsel efekt eklemek performans düzeltmesi değildir. Kullanıcının hareket tercihleri ve erişilebilirlik de korunur. Platforma özgü düzeltme gerekiyorsa ortak kod değişikliğiyle aynı kapsam olarak varsayılmaz.
Sürüm yükseltme her yavaşlığın çözümü değildir
React Native sürüm yükseltme bir uyum veya bakım ihtiyacını karşılayabilir; performans sorununun kaynağı ise ayrıca ölçülmelidir. Paket veya mimari değişikliği öneriliyorsa bunu destekleyen bulgu ve geçiş maliyeti gösterilir. Tek bir yavaş ekran için bütün uygulamanın yeniden yazılması ilk öneri değildir.
Odaklı bir değişiklik uygulanır, aynı akış tekrar ölçülür ve kullanıcı işlevi doğrulanır. Bir sonucu başka cihazdaki farklı veriyle karşılaştırıp genel hız artışı ilan etmiyoruz. İyileştirme yalnızca en iyi örnek üzerinden değil, kararlaştırılan tekrar koşullarıyla değerlendirilir. Düzeltmenin yanında açık kalan sınırlar kaydedilir. API tarafındaki gecikme veya üçüncü taraf modül sorunu başka ekibin çalışmasını gerektiriyorsa bu bağımlılık açıkça belirtilir.
Performansın sonraki sürümlerde korunması ve teslim kapsamı
CI/CD kontrol noktaları önemli performans akışlarının tekrar değerlendirilmesini destekleyebilir. Her değişiklik için uzun bir cihaz testi yerine riskli akış ve uygun ölçüm düzeni seçilir. Düzenli mobil uygulama bakımı içinde sürüm değişiklikleri ve kullanıcı şikâyetleri takip edilir. İzleme her kullanıcı verisini sınırsız toplamayı gerektirmez.
Teslimde tekrar adımları, başlangıç bulgusu, uygulanan düzeltme ve karşılaştırma koşulları bulunur. Maliyeti sorun sayısı, yeniden oluşturma zorluğu, native bağımlılıklar ve cihaz kapsamı etkiler. Sabit FPS veya kullanıcı tutma artışı garanti edilmez. Görüşmeye yavaş akışın kısa kaydını, cihaz bilgisini ve uygulama sürümünü getirin. Böylece ilk incelemeyi genel bir optimizasyon söylemi yerine somut bir kullanıcı sorunu etrafında kapsamlandırabiliriz.
KARAR VERMEDEN ÖNCE
Sık sorulan sorular
Uygulama mağazasındaki sürüm mü incelenir?
Sorunun koşuluna göre mağaza sürümü veya ona karşılık gelen test edilebilir release build gerekir. Kaynak kodla build eşleşmesi önemlidir. Yalnızca geliştirme modu sonucundan gerçek kullanıcı performansı çıkarılmaz.
Kaydırma takılması için tüm uygulamayı yenilemek gerekir mi?
Her zaman değil. Liste, state, görsel veya native katmanla ilgili odaklı bir düzeltme yeterli olabilir. Yeniden yazma ancak ölçüm ve mevcut yapı böyle bir ihtiyacı destekliyorsa değerlendirilir.
Performans sorununa backend neden olabilir mi?
Evet. API gecikmesi, büyük yanıt veya veri hazırlama işi ekranda yavaşlık oluşturabilir. Ağ süresi ve cihazda yapılan iş ayrılır; hangi ekibin hangi düzeltmeden sorumlu olduğu belirlenir.
Belirli FPS veya açılış süresi garanti mi?
Hayır. Ölçüm hedefi cihaz, veri ve işlem koşullarıyla belirlenir. Önce başlangıç ölçülür; uygulanabilir düzeltme ve kabul koşulu ardından konuşulur. Her cihaz için sınırsız hedef verilmez.
Optimizasyon tasarımı değiştirecek mi?
Gereksinime göre değişebilir. Önce mevcut deneyimi koruyan düzeltmeler değerlendirilir. Görsel veya etkileşim değişikliği gerekiyorsa kullanıcı etkisi ve tasarım kararı ayrıca incelenir; rastgele animasyon kaldırılmaz.
İlk görüşme için ne hazırlamalıyız?
Sorunun kısa kaydı, cihaz ve işletim sistemi, uygulama sürümü, tekrar adımları ve örnek veri durumu yararlıdır. Kod ve uygun build erişimleri teknik inceleme kapsamında kontrollü düzenlenir.
KAPSAMI BİRLİKTE BELİRLEYELİM
Yavaşlayan akışı birlikte inceleyelim
Kısa sorun kaydını, cihazınızı ve uygulama sürümünü paylaşın. Ölçülebilir bir başlangıç ve ilk düzeltme kapsamı oluşturalım.
Performans incelemesini konuşalım