İ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 gecikmeyi azaltmak 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 bazı tarayıcılar ve araçlar (CrUX dahil), erken ipuçları da dahil olmak üzere ilk baytlar alınana kadar ölçüm yapar.

Erken İpuçları, erken yanıt vermenin yeni bir örneğidir. Bazı sunucular, belge yanıtının ana gövde kullanılabilir hale gelmeden önce akmasına izin verir. Bu işlem, yalnızca HTTP üst bilgileriyle veya <head> öğesiyle yapılabilir. Her ikisi de Etkileyici İpuçları'na benzer bir etkiye sahip olabilir ve bu nedenle TTFB'nin ölçtüğü şeyin tanımını bulanıklaştırabilir.

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. En önemli nokta, kullandığınız aracın neyi ölçtüğünü 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 saha verilerinde belirgindir. Son URL genellikle test edildiği ve genellikle önbelleğe alma değişikliklerini tekrar tekrar geçersiz kıldığı için laboratuvar testleri genellikle bu faktörlerden daha az etkilenir. Lighthouse, bunu daha net hale getirmek 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ındaki 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

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ığı, tarayıcıda TTFB'yi 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.