İ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.
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.
Ö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ı
- Chrome Geliştirici Araçları'nın ağ panelinde
- WebPageTest
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.