İlk Bayt Zamanı (TTFB)

Barry Pollard
Jeremy Wagner

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

Source

TTFB nedir?

TTFB, bir kaynak isteği ile yanıtın ilk baytının gelmeye başlaması arasındaki süreyi ölçen bir metriktir.

Ağ isteği zamanlamalarına dair bir görselleştirme. Soldan sağa doğru zamanlamalar şu şekildedir: Yönlendirme, Hizmet Çalışanı Başlatma, Hizmet Çalışanı Getirme etkinliği, HTTP Önbelleği, DNS, TCP, İstek, Erken İpuçları (103), Yanıt (Yükleme İstemiyle çakışır), İşleme ve Yükleme. İlişkili zamanlamalar; redirectStart ve redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart ve loadEventEnd'dir.
Ağ isteği aşamalarının ve ilişkili zamanlamaların diyagramı. TTFB, startTime ile responseStart arasında geçen süreyi ölçer.

TTFB, aşağıdaki istek aşamalarının toplamıdır:

  • Yönlendirme süresi
  • Hizmet çalışanı başlatma süresi (varsa)
  • DNS araması
  • Bağlantı ve TLS iletişimi
  • Yanıtın ilk baytının geldiği noktaya kadar istek

Bağlantı kurulum süresinde ve arka uçta gecikmeyi azaltmak TTFB'nizi düşürebilir.

TTFB ve İlk İpuçları

103 Erken İpucu'nun kullanıma sunulması, TTFB'nin "ilk bayt"ını ölçtüğüyle ilgili bazı karışıklıklara neden oluyor. 103 Erken İpucu, "ilk baytlar" olarak sayılır. finalResponseHeadersStart, ölçülecek nihai belge yanıtının (genellikle bir HTTP 200 yanıtı) başlangıcını ölçen responseStart için ek bir zamanlama girişidir.

Erken İpuçları, erken yanıt vermenin yeni bir örneğidir. Bazı sunucular, ana gövde kullanılabilir hale gelmeden önce doküman yanıtının erken temizlenmesine izin verir. Bu işlem, yalnızca HTTP üst bilgileriyle veya <head> öğesiyle yapılabilir. Her iki yöntem de erken ipuçlarıyla benzer bir etkiye sahiptir. Tüm bunların reponseStart ve dolayısıyla TTFB olarak ölçülmesinin bir diğer nedeni de budur.

Tam yanıtın verilmesi biraz daha zaman alacaksa verileri erkenden göndermenin gerçek bir değeri vardır. Ancak bu durum, kullanılan özelliklere ve bunların kullanılan TTFB ölçümünü nasıl etkilediğine bağlı olarak farklı platformlar veya teknolojilerdeki TTFB'yi karşılaştırmayı zorlaştırır. En önemli nokta, kullandığınız aracın neyi ölçtüğünü ve bunun ölçülen platformdan nasıl etkilendiğini anlamaktır.

İyi bir TTFB puanı nedir?

TTFB, ilk zengin içerikli boyama (FCP) ve en büyük zengin içerikli boyama (LCP) gibi kullanıcı odaklı metriklerden önce gelir. Bu nedenle, sunucunuzun gezinme isteklerine yeterince hızlı yanıt vermesi önerilir. Böylece, kullanıcıların %75'i "iyi" eşiğinin altında bir FCP deneyimleyebilir. Kabaca bir kılavuz olarak, çoğu sitenin TTFB'sinin 0,8 saniye veya daha az olması gerekir.

İyi TTFB değerleri 0,8 saniye veya daha azdır, kötü değerler 1,8 saniyeden uzundur ve bu değerler arasında kalanlar iyileştirilmelidir.
İyi TTFB değerleri 0,8 saniye veya daha kısa, kötü değerler ise 1,8 saniyeden uzundur.

TTFB'yi ölçme

TTFB, laboratuvarda veya sahada aşağıdaki yöntemlerle ölçülebilir.

Saha araçları

Laboratuvar araçları

JavaScript'de TTFB'yi ölçme

Navigation Timing API ile tarayıcıdaki gezinme isteklerinin TTFB'sini ölçebilirsiniz. Aşağıdaki örnekte, navigation girişini dinleyen ve konsola kaydeden bir PerformanceObserver'un nasıl oluşturulacağı gösterilmektedir:

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

web-vitals JavaScript kitaplığı, TTFB'yi tarayıcıda daha kısa bir şekilde de ölçebilir:

import {onTTFB} from 'web-vitals';

// Measure and log TTFB as soon as it's available.
onTTFB(console.log);

Kaynak isteklerini ölçme

TTFB, yalnızca gezinme istekleri değil tüm istekler için geçerlidir. Özellikle kaynak farklı sunucularda barındırılan kaynaklar, bu sunucularla bağlantı kurulması gerektiğinden gecikmelere neden olabilir. Alandaki kaynaklar için TTFB'yi ölçmek üzere PerformanceObserver içinde Resource Timing API'yi kullanın:

new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();

  for (const entry of entries) {
    // Some resources may have a responseStart value of 0, due
    // to the resource being cached, or a cross-origin resource
    // being served without a Timing-Allow-Origin header set.
    if (entry.responseStart > 0) {
      console.log(`TTFB: ${entry.responseStart}`, entry.name);
    }
  }
}).observe({
  type: 'resource',
  buffered: true
});

Önceki kod snippet'i, bir gezinme isteği için TTFB'yi ölçmek için kullanılana benzer. Tek fark, 'navigation' girişleri yerine 'resource' girişleri için sorgu göndermenizdir. Ayrıca, birincil kaynaktan yüklenen bazı kaynakların, bağlantı zaten açık olduğu veya kaynak bir önbellekten anında alındığı için 0 değerini döndürebileceği de dikkate alınır.

TTFB'yi iyileştirme

Sitenizin TTFB'sini iyileştirmeyle ilgili yardım için TTFB'yi optimize etme konulu ayrıntılı kılavuzumuza göz atın.