Time to First Byte (TTFB)

Barry Pollard
Jeremy Wagner

Browser Support

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

Source

Apa yang dimaksud dengan TTFB?

TTFB adalah metrik yang mengukur waktu antara permintaan resource dan saat byte pertama respons mulai diterima.

Visualisasi pengaturan waktu permintaan jaringan. Pengaturan waktu dari kiri ke kanan adalah Pengalihan, Inisialisasi Pekerja Layanan, peristiwa Pengambilan Pekerja Layanan, Cache HTTP, DNS, TCP, Permintaan, Petunjuk Awal (103), Respons (yang tumpang-tindih dengan Permintaan untuk Pembongkaran), Pemrosesan, dan Pemuatan. Pengaturan waktu terkait adalah redirectStart dan redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart, dan loadEventEnd.
Diagram fase permintaan jaringan dan pengaturan waktu terkaitnya. TTFB mengukur waktu yang berlalu antara startTime dan responseStart.

TTFB adalah jumlah fase permintaan berikut:

  • Waktu pengalihan
  • Waktu startup pekerja layanan (jika ada)
  • pencarian DNS
  • Koneksi dan negosiasi TLS
  • Permintaan, hingga saat byte pertama respons tiba

Mengurangi latensi dalam waktu penyiapan koneksi dan di backend dapat menurunkan TTFB Anda.

TTFB dan Petunjuk Awal

Pengenalan 103 Early Hints menyebabkan beberapa kebingungan terkait apa yang diukur oleh TTFB "byte pertama". 103 Petunjuk Awal dihitung sebagai "byte pertama". finalResponseHeadersStart adalah entri pengaturan waktu tambahan ke responseStart yang mengukur awal respons dokumen akhir (biasanya respons HTTP 200) yang akan diukur.

Petunjuk Awal hanyalah contoh yang lebih baru untuk merespons lebih awal. Beberapa server mengizinkan penghapusan respons dokumen awal sebelum isi utama tersedia—baik hanya dengan header HTTP, atau dengan elemen <head>, yang keduanya dapat dianggap memiliki efek yang mirip dengan Petunjuk Awal. Ini adalah alasan lain mengapa semua ini diukur sebagai reponseStart dan juga TTFB.

Ada nilai nyata dalam mengirim kembali data lebih awal jika respons lengkap akan memerlukan waktu lebih lama. Namun, hal ini mempersulit perbandingan TTFB di berbagai platform atau teknologi, bergantung pada fitur yang digunakan, dan dampaknya terhadap pengukuran TTFB yang digunakan. Yang paling penting adalah memahami apa yang diukur oleh alat yang Anda gunakan dan bagaimana hal itu dipengaruhi oleh platform yang diukur.

Berapa skor TTFB yang baik?

Karena TTFB mendahului metrik yang berfokus pada pengguna seperti First Contentful Paint (FCP) dan Largest Contentful Paint (LCP), sebaiknya server Anda merespons permintaan navigasi dengan cukup cepat sehingga persentil ke-75 pengguna mendapatkan FCP dalam nilai minimum "baik". Sebagai panduan kasar, sebagian besar situs harus berusaha memiliki TTFB 0,8 detik atau kurang.

Nilai TTFB yang baik adalah 0,8 detik atau kurang, nilai yang buruk lebih besar dari 1,8 detik, dan nilai di antara keduanya perlu ditingkatkan
Nilai TTFB yang baik adalah 0,8 detik atau kurang, dan nilai yang buruk lebih besar dari 1,8 detik.

Cara mengukur TTFB

TTFB dapat diukur di lab atau di lapangan dengan cara berikut.

Alat kolom

Alat lab

Mengukur TTFB di JavaScript

Anda dapat mengukur TTFB permintaan navigasi di browser dengan Navigation Timing API. Contoh berikut menunjukkan cara membuat PerformanceObserver yang memproses entri navigation dan mencatatnya ke konsol:

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

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

Library JavaScript web-vitals juga dapat mengukur TTFB di browser dengan lebih ringkas:

import {onTTFB} from 'web-vitals';

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

Mengukur permintaan resource

TTFB berlaku untuk semua permintaan, bukan hanya permintaan navigasi. Secara khusus, resource yang dihosting di server lintas-asal dapat menyebabkan latensi karena perlunya menyiapkan koneksi ke server tersebut. Untuk mengukur TTFB untuk resource di kolom, gunakan Resource Timing API dalam PerformanceObserver:

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
});

Cuplikan kode sebelumnya mirip dengan yang digunakan untuk mengukur TTFB untuk permintaan navigasi, kecuali Anda membuat kueri untuk entri 'resource', bukan entri 'navigation'. Hal ini juga memperhitungkan fakta bahwa beberapa resource yang dimuat dari origin utama dapat menampilkan nilai 0, karena koneksi sudah terbuka, atau resource diambil secara instan dari cache.

Cara meningkatkan TTFB

Untuk panduan meningkatkan TTFB situs, lihat panduan mendalam kami tentang mengoptimalkan TTFB.