Time to First Byte (TTFB)

Jeremy Wagner
Barry Pollard

Dukungan Browser

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

Sumber

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.

Definisi TTFB lainnya

Definisi sebelumnya adalah definisi konvensional, tetapi dengan diperkenalkannya Petunjuk Awal apa yang dianggap sebagai "byte pertama" diperdebatkan. firstInterimResponseStart adalah entri pengaturan waktu tambahan baru untuk responseStart guna membedakan keduanya, tetapi hanya didukung di browser berbasis Chrome dan Chromium. Oleh karena itu, beberapa browser dan alat (termasuk CrUX) mengukur hingga byte pertama diterima, termasuk Petunjuk Awal.

Petunjuk Awal hanyalah contoh baru untuk merespons lebih awal. Beberapa server memungkinkan penghapusan respons dokumen sebelum isi utama tersedia—baik hanya dengan header HTTP, atau dengan elemen <head>, yang keduanya dapat dianggap memiliki efek yang mirip dengan Petunjuk Awal sehingga juga mengaburkan definisi pengukuran TTFB.

Sebagai ukuran saat "byte pertama" dari data yang dapat ditindaklanjuti untuk dokumen diterima oleh browser, semua definisi ini dapat dianggap valid. Ada nilai nyata dalam mengirim kembali data lebih awal jika respons lengkap akan memakan waktu lebih lama. Yang paling penting adalah memahami alat ukur apa yang Anda gunakan dan bagaimana hal itu dipengaruhi oleh platform yang diukur. Hal ini memang menyulitkan perbandingan TTFB di berbagai platform atau teknologi, bergantung pada fitur yang digunakan, dan dampaknya terhadap pengukuran TTFB yang digunakan.

TTFB juga sering dianggap sebagai indikator waktu respons server atau {i>host<i}. Namun, hal ini akan terpengaruh oleh faktor di luar kontrol langsung tersebut seperti waktu pengalihan, baik ditayangkan dari cache yang diakses oleh CDN atau harus melakukan perjalanan yang berpotensi lebih lama kembali ke server origin. Hal ini terutama terlihat dalam data lapangan—pengujian lab biasanya kurang terpengaruh oleh faktor ini karena URL akhir biasanya diuji dan sering kali berulang kali meniadakan perubahan caching. Lighthouse melaporkan waktu respons server, bukan TTFB, untuk memperjelas hal ini, tetapi alat lab lainnya mungkin tidak.

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 mengalami FCP dalam batas "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 kolom 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 secara 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 origin dapat menimbulkan 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 asal 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.