Mobil geliştirmede Time-to-Interactive: tanımı, metriği ve ölçümü

Time-to-Interactive Nedir

Time-to-Interactive, bir sayfanın veya uygulamanın kullanıcının tam etkileşimine hazır olduğu anı yakalayan bir performans metriğidir. Web bağlamında TTI, gezinme başlangıcından üç koşulun karşılandığı ana kadar geçen süre olarak tanımlanır: sayfa yararlı içerik görüntüledi (First Contentful Paint), ana iş parçacığı en az 5 saniye boyunca boşta kaldı ve tüm olay dinleyicileri kaydedildi. Mobil uygulamalarda TTI, Activity başlatılmasından UI başlatmasının tamamlanmasına kadar geçen süredir; tüm durumlar yüklendiğinde, animasyonlar yapılandırıldığında ve kullanıcı gecikmeden herhangi bir düğmeye dokunabildiğinde.

Bu metrik, ilk etkileşimin kritik olduğu uygulamalar için özellikle önemlidir — giriş ekranları, arama, ödeme. TTI 5 saniyeyi aşarsa, kullanıcı uygulamayı “donmuş” olarak algılar ve kapatabilir. Google'a (Web Vitals Report, 2025) göre, TTI'sı 3,8 saniyenin altında olan sayfalar, TTI'sı 7 saniyenin üzerinde olan sayfalara göre %24 daha fazla dönüşüm gösterir. Fark 500 ms'de bile hissedilir — Amazon araştırmaları, her 100 ms gecikme için %1 gelir kaybı olduğunu göstermektedir.

TTI Nasıl Hesaplanır

TTI hesaplama algoritması W3C spesifikasyonunda tanımlanmış ve Lighthouse'ta uygulanmıştır. Hesaplama, First Contentful Paint (FCP) ile başlar — tarayıcının içeriğin ilk pikselini oluşturduğu an. Ardından algoritma bir “sessiz pencere” arar — ana iş parçacığında hiçbir görevin 50 ms'yi aşmadığı 5 saniyelik bir süre. TTI, bu pencereden önceki son göreve ayarlanır. 15 saniye içinde sessiz pencere bulunamazsa, TTI son uzun görevin süresine eşitlenir. Bu algoritma, TTI'nin yalnızca oluşturma anını değil, etkileşim için gerçek hazır olma durumunu yansıtmasını sağlar.

Mobil uygulamalarda (Android/iOS), W3C spesifikasyonunun tam bir eşdeğeri yoktur, ancak konsept aynıdır. TTI, onResume'da (başlatma başlangıcı) ve tüm asenkron işlemler tamamlandığında ilk karenin geri çağrısında zaman damgası yakalanarak ölçülebilir. Firebase Performance, kullanıcının etkileşimli oturumunun başlangıcı ve bitişi ile özel bir iz oluşturmanıza olanak tanır. Örneğin, Application.onCreate'da startTrace(“TTI”) ve tüm SDK'lar başlatılıp ilk kare oluşturulduktan sonra stopTrace().

TTI için özel iz örneği

Kotlin kodu, Firebase Performance kullanarak TTI ölçümünü gösterir. İz, Application.onCreate'da başlar ve ilk reportFullyDrawn'dan sonra durur.

class App : Application() {

    private var ttiTrace: Trace? = null

    override fun onCreate() {
        super.onCreate()
        ttiTrace = Firebase.performance
            .newTrace("tti")
        ttiTrace?.start()
    }

    fun stopTtiTrace() {
        ttiTrace?.stop()
        ttiTrace = null
    }
}

TTI, FCP, LCP ve FID: Farklar

Core Web Vitals ekosisteminde birkaç metrik vardır ve TTI genellikle First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) ile karıştırılır. FCP, etkileşim garantisi vermeyen içeriğin ilk pikselinin oluşturulma süresidir. LCP, en büyük içerik öğesinin (görsel, metin bloğu) oluşturulma süresidir. TTI ise oluşturmayı değil, etkileşime hazır olmayı ölçer. Fark kritiktir: FCP 1,2 saniye olabilir, ancak ana iş parçacığı JS paketi yüklenmesi tarafından bloke edilirse TTI 8 saniyeye ulaşabilir.

First Input Delay (FID), kullanıcının ilk eylemi ile tarayıcının olayı işlemeye başladığı an arasındaki gecikmeyi ölçer. FID “etkileşim kalitesi” iken, TTI “etkileşime kadar geçen süre”dir. TTI, arayüzün kaç saniye içinde yanıt verir hale geldiğini gösterirken, FID ne kadar yanıt verir olduğunu gösterir. İyi bir TTI, iyi bir FID olmadan imkansızdır çünkü ana iş parçacığı bloke edilirse TTI yüksek olur ve FID herhangi bir etkileşimi geciktirir. Mobil uygulamalarda, FID'nin eşdeğeri Touch Latency'dir — ekrana dokunma ile UI yanıtı arasındaki gecikme.

Mobil Uygulamalarda TTI

Native mobil uygulamalarda, TTI kavramı web'deki kadar standartlaştırılmamıştır, ancak önemi daha az değildir. Android'de TTI, uygulama simgesine dokunmaktan UI'nin tamamen etkileşimli hale geldiği ana kadar geçen süredir: RecyclerView kayar, düğmeler dokunmaya yanıt verir, animasyonlar sorunsuz çalışır. Android'de TTI'yi ölçmek için reportFullyDrawn (API 29+) ve FrameMetricsAggregator kombinasyonu kullanılır. reportFullyDrawn, geliştiricinin UI'nin hazır olduğunu düşündüğünde uygulamanın yaptığı bir çağrıdır. Sistem bu anı yakalar ve Android Vitals raporuna dahil eder.

iOS'te, TTI'nin eşdeğerleri Time to First Frame ve Time to Responsive'dır. MetricKit, başlatma süresi verilerini aşamalara bölerek toplar — çalıştırılabilir dosya yükleme, çerçeve başlatma, ilk kare oluşturma. Apple, Time to First Frame'in 400 ms'yi geçmemesini ve tam etkileşimin 2 saniye içinde sağlanmasını önerir. Uygulama bir yer tutucu ekranı gösterip ardından içerik yüklüyorsa, TTI ilk kareden değil, gerçek içeriğin etkileşime hazır olduğu andan itibaren hesaplanır.

FrameMetrics ile Android'de TTI Ölçümü

Kotlin kodu, FrameMetricsAggregator kullanarak ilk etkileşimli kareyi izler. Kullanıcı tarafından başlatılan ilk kare tamamlandığında geri çağrı etkinleşir.

class TtiTracker(private val activity: Activity) {

    private val metrics = FrameMetricsAggregator()
    private var startTime = 0L

    fun onStart() {
        startTime = System.nanoTime()
        metrics.add(activity.window)
    }

    fun onFirstFrame() {
        val ttiMs = (System.nanoTime() - startTime) / 1_000_000
        Log.d("TTI", "Time to Interactive: $ttiMs ms")
        metrics.reset()
    }
}

TTI Optimizasyon Yöntemleri

TTI optimizasyonu üç yönü içerir: ana iş parçacığındaki iş yükünü azaltma, kritik olmayan bileşenlerin gecikmeli yüklenmesi ve aşamalı oluşturma. İlk yön, senkron işlemleri en aza indirmektir: SharedPreferences'i DataStore ile değiştirmek, SDK başlatmayı arka plan iş parçacığına taşımak, Dagger/Hilt modüllerini tembel yüklemek. İkincisi gecikmeli yüklemedir: başlangıçta görünmeyen ekranlar (alt sayfalar, diyaloglar, sekmeler) ilk kareden sonra başlatılmalıdır. Üçüncüsü aşamalı oluşturmadır: önce bir iskelet ekranı gösterin, ardından içeriği parçalar halinde yükleyin.

Android'de etkili bir yöntem, sıralanmış başlatıcılarla App Startup kitaplığını kullanmaktır. Örneğin, Firebase Analytics başlatıcısı isteğe bağlı yapılabilir ve başlangıçtan 2 saniye sonra ertelenebilir. iOS'te eşdeğer, lazy bayrağı ile Initialization Dependencies'dir. Web için temel yöntemler kod bölme, ağaç sallama, kritik kaynaklar için ön yükleme/ön bağlantı ve engellemeyen JS için defer'dır. Google Lighthouse belirli öneriler sunar: “Eliminate render-blocking resources” ve “Defer offscreen images” doğrudan TTI'yi etkiler.

React Native'de Kod Bölme

React Native'de React.lazy ve Suspense kullanarak paket bölme örneği. HeavyScreen bileşeni yalnızca kullanıcı bu ekrana gittiğinde yüklenir ve başlangıç ekranının TTI'sini azaltır.

import React, { lazy, Suspense } from 'react';

const HeavyScreen = lazy(() =>
    import('./screens/HeavyScreen')
);

const App = () => (
    <Suspense fallback={<Loading />}>
        <HeavyScreen />
    </Suspense>
);

TTI Ölçüm Araçları

TTI'yi ölçmek için platforma ve analiz derinliğine göre değişen çeşitli araçlar mevcuttur. Web'de birincil araç, Chrome DevTools'taki Lighthouse'dur. Lighthouse bir denetim çalıştırır ve TTI'yi milisaniye cinsinden çıktılar ve iyileştirme için belirli öneriler sunar. Sürekli izleme için PageSpeed Insights (Google) kullanılır — gerçek kullanıcılardan Chrome User Experience Report (CrUX) verilerini toplar. Native uygulamalarda TTI, Android Vitals (Google Play Console) ve MetricKit (Apple) aracılığıyla ölçülür.

Üretim izlemesi için popüler araçlar arasında Firebase Performance Monitoring (özel izler), Datadog RUM (Gerçek Kullanıcı İzleme) ve Sentry Performance bulunur. Bu araçlar yalnızca TTI'yi göstermekle kalmaz, aynı zamanda TTI ile dönüşüm, terk etme, oturum süresi gibi iş metrikleri arasındaki korelasyonu izlemenize de olanak tanır. Önerilen eşikler: < 3,8 sn — iyi, 3,8–7 sn — iyileştirme gerekli, > 7 sn — kritik. Native uygulamalar için eşikler daha katıdır: < 2 sn — iyi, 2–5 sn — orta, > 5 sn — kritik, çünkü mobil uygulama kullanıcıları gecikmelere karşı daha az toleranslıdır.

Lighthouse CI Yapılandırması

CI/CD hattında otomatik TTI kontrolü için Lighthouse CI yapılandırma örneği. 3,8 saniye eşiği aşıldığında, yapı bir uyarı ile işaretlenir.

// lighthouserc.js
module.exports = {
    ci: {
        assert: {
            assertions: {
                'interactive': ['warn', {
                    maxNumericValue: 3800
                }],
                'first-contentful-paint': ['error', {
                    maxNumericValue: 1800
                }]
            }
        },
        collect: {
            startServerCommand: 'npm start',
            url: ['http://localhost:3000'],
            numberOfRuns: 3
        }
    }
};