İlk Bayt Zamanı (TTFB)

Jeremy Wagner
Barry Pollard

Tarayıcı Desteği

  • 43
  • 12
  • 31
  • 11

Kaynak

İlk Bayt Süresi (TTFB), hem laboratuvarda hem de sahada bağlantı kurulum süresini ve web sunucusu duyarlılığını ölçmek için temel bir metriktir. Bir kaynak isteği ile yanıtın ilk baytının gelmeye başlaması arasındaki süreyi ölçer. Bu, bir web sunucusunun isteklere yanıt veremeyecek kadar yavaş olduğunun tanımlanmasına yardımcı olur. Gezinme istekleri (yani bir HTML belgesi isteği) durumunda, bu durum diğer anlamlı yükleme performansı metriklerinden önce gelir.

Ağ isteği zamanlamalarını gösteren şema. Soldan sağa aşamalar; 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(Kaldırma İstemi ile çakışır), İşleme ve Yükleme'dir. İlişkili zamanlamalar redirectStart ve redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart,secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domContentLoadedEventStart ve loadEventEnd şeklindedir.
Ağ isteği aşamalarının ve bunlarla ilişkili zamanlamaların şeması. 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
  • Service Worker başlatma süresi (varsa)
  • DNS araması
  • Bağlantı ve TLS iletişimi
  • Yanıtın ilk baytı gelene kadar istek

Bağlantı kurulum süresi ve arka uçtaki gecikmenin azaltılması TTFB'nizi azaltmaya yardımcı olur.

İyi bir TTFB puanı nedir?

TTFB, İlk Zengin İçerikli Boyama (FCP) ve Largest Contentful Paint (LCP) gibi kullanıcı odaklı metriklerden önce gerçekleştiği için sunucunuzun, kullanıcıların 75. yüzdelik dilimi'nin "iyi" eşiği dahilinde bir FCP deneyimi yaşaması için sunucunuzun gezinme isteklerine yeterince hızlı yanıt vermesini öneririz. Kaba bir kılavuz olarak, çoğu sitenin TTFB'si 0,8 saniye veya daha kısa olması gerekir.

İyi TTFB değerleri 0,8 saniye veya daha kısa, düşük değerler 1,8 saniyeden uzundur ve iyileştirme gerektirenler arasındaki her şey
İyi TTFB değerleri 0,8 saniye veya daha kısa, düşük değerler 1,8 saniyeden fazladır.

Önemli nokta: TTFB bir Önemli Web Verileri metriği olmadığından, daha uzun TTFB olması sitenizin önemli metriklerde iyi puan almasını zorlaştırmadığı sürece sitelerin mükemmel bir TTFB'ye sahip olması için kesinlikle gerekli değildir. Yükleme sürelerini optimize ederken sitenizin içeriği nasıl sunduğunu göz önünde bulundurun. Düşük bir TTFB, özellikle bir site ilk işaretlemesini hızlı bir şekilde sunuyorsa ve ardından, Tek Sayfalı Uygulamalar'da (SPA'lar) genellikle olduğu gibi komut dosyalarının onu anlamlı içerikle doldurmasını beklemek zorunda kalıyorsa önemlidir. Öte yandan, çok fazla istemci tarafı çalışma gerektirmeyen, sunucu tarafından oluşturulmuş bir site, TTFB daha yüksek olsa bile, istemci tarafından oluşturulan bir siteye göre daha iyi FCP ve LCP değerlerine sahip olabilir.

TTFB nasıl ölçülür?

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

Saha araçları

Laboratuvar araçları

JavaScript'te TTFB'yi ölçün

Tarayıcıdaki gezinme isteklerinin TTFB'sini, Gezinme Zamanlaması API'sini kullanarak ölçebilirsiniz. Aşağıdaki örnekte, navigation girişini dinleyen ve konsola kaydeden bir PerformanceObserver'in 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ığı da TTFB'yi tarayıcıda daha az karmaşık bir şekilde ö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, sadece gezinme istekleri için değil, tüm istekler için geçerlidir. Özellikle çapraz kaynak sunucularda barındırılan kaynaklar, bu sunucularla bağlantı kurarken gecikmeye neden olabilir. Sahadaki kaynakların TTFB'sini ölçmek için PerformanceObserver içinde Resource Timing API'yi kullanın:

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

  for (const entry of entries) {
    // Some resources might have a responseStart value of 0 if they're being
    // cached, or if a cross-origin resource is 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çmekte kullanılana benzer. Tek fark, 'navigation' girişlerini sorgulamak yerine bunun yerine 'resource' girişlerini sorgulamanızdır. Bağlantı zaten açıksa veya bir kaynak anında önbellekten alınmışsa birincil kaynaktan yüklenen bazı kaynakların 0 değerini döndürebileceğini de hesaba katar.

TTFB nasıl iyileştirilir?

Sitenizin TTFB'sini iyileştirme konusunda yardım için TTFB'yi optimize etme konulu ayrıntılı kılavuzumuza bakın.