İlk Bayt Zamanı (TTFB)

Jeremy Wagner
Barry Pollard

Tarayıcı Desteği

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

Kaynak

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 gecikmenin azaltılması TTFB'nizi düşürebilir.

TTFB'nin diğer tanımları

Önceki tanım, geleneksel tanımdır ancak Erken İpuçları'nın kullanıma sunulmasıyla "ilk bayt" olarak kabul edilen şey tartışmaya açık hale gelmiştir. firstInterimResponseStart, bunları ayırt etmek için responseStart'a eklenen yeni bir ek zamanlama girişidir ancak bu yalnızca Chrome ve Chromium tabanlı tarayıcılarda desteklenir. Bu nedenle, Erken İpuçları da dahil olmak üzere bazı tarayıcılar ve araçlar (CrUX dahil), ilk baytlar alınana kadar ölçüm yapar.

Erken İpuçları, erken yanıt vermenin yeni bir örneğidir. Bazı sunucular, ana gövde kullanılabilir olmadan önce belge yanıtının temizlenmesine izin verir. Bu işlem, yalnızca HTTP üstbilgileriyle veya <head> öğesi ile gerçekleştirilebilir. Bunların her ikisi de Erken İpuçları'na benzer olarak kabul edilebilir ve böylece TTFB'nin neleri ölçtüğünün tanımını bulanıklaştırır.

Belgeyle ilgili işlem yapılabilir verilerin "ilk baytlarının" tarayıcı tarafından ne zaman alındığının bir ölçüsü olarak tüm bu tanımlar geçerli kabul edilebilir. Tam yanıtın biraz daha zaman alacağı durumlarda verileri erken göndermenin gerçek bir değeri vardır. Buradaki en önemli nokta, kullandığınız aracın hangi ölçümün olduğunu ve bunun ölçülen platformdan nasıl etkilendiğini anlamaktır. 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.

TTFB, genellikle sunucu veya ana makine yanıt süresinin bir göstergesi olarak kabul edilir. Ancak yönlendirme süresi, CDN tarafından isabet edilen bir önbellekten mi yayınlandığı veya kaynak sunucuya geri dönmek için potansiyel olarak daha uzun bir yolculuk yapması gerekip gerekmediği gibi doğrudan kontrolünüz dışındaki faktörlerden etkilenir. Bu durum özellikle alan verilerinde belirgindir. Nihai URL genellikle test edildiği ve önbelleğe alma değişikliklerini çoğu zaman tekrar tekrar olumsuz etkilediği için laboratuvar testleri genellikle bu faktörlerden daha az etkilenir. Lighthouse, bu durumu daha net bir şekilde belirtmek için TTFB yerine sunucu yanıt süresini raporlar ancak diğer laboratuvar araçları bunu yapmayabilir.

İ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 fazladır ve bu değerler arasında kalan değerlerde iyileştirme yapılması gerekir.
İ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

Gezinme Timing API'si ile tarayıcıda gezinme isteklerinin TTFB'sini ölçebilirsiniz. Aşağıdaki örnekte, bir navigation girişini işleyen ve bunu konsola kaydeden bir PerformanceObserver işleminin 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 için bir 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, bağlantı zaten açık olduğu veya bir kaynağın önbellekten anında alındığı için birincil kaynaktan yüklenen bazı kaynakların 0 değeri döndürebileceği de hesaba katılı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.