Time to First Byte (TTFB)

Jeremy Wagner
Barry Pollard

Dukungan Browser

  • 43
  • 12
  • 31
  • 11

Sumber

Apa itu TTFB?

TTFB adalah metrik yang mengukur waktu antara permintaan sumber daya dan saat byte pertama respons mulai tiba.

Visualisasi waktu permintaan jaringan. Pengaturan waktu dari kiri ke kanan adalah Redirect, Service Worker Init, Service Worker Fetch, HTTP Cache, DNS, TCP, Request, Early Hints (103), Response (yang tumpang-tindih dengan Prompt for Unload), Processing, dan Load. Pengaturan waktu terkait adalah redirectStart dan redirectEnd, pengambilanStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart, dan loadEventEnd.
Diagram fase permintaan jaringan dan pengaturan waktunya yang terkait. 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 diterima

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

Definisi lain dari TTFB

Definisi sebelumnya adalah definisi konvensional, tetapi dengan diperkenalkannya Petunjuk Awal apa yang dianggap sebagai "byte pertama" patut diperdebatkan. firstInterimResponse adalah entri pengaturan waktu tambahan yang baru ke responseStart untuk membedakan keduanya, tetapi ini hanya didukung di browser berbasis Chrome dan Chromium. Oleh karena itu, beberapa browser dan alat (termasuk CrUX) melakukan pengukuran 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 serupa dengan Petunjuk Awal, sehingga juga cloud definisi dari apa yang diukur TTFB.

Sebagai ukuran kapan "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 mempersulit perbandingan TTFB di berbagai platform atau teknologi, bergantung pada fitur yang mereka gunakan, dan bagaimana hal itu memengaruhi pengukuran TTFB yang digunakan.

TTFB juga sering dianggap sebagai indikator waktu respons server atau {i>host<i}. Namun, hal ini akan dipengaruhi oleh faktor di luar kontrol langsung tersebut seperti waktu pengalihan, apakah disalurkan dari cache yang ditemukan oleh CDN atau harus melakukan perjalanan yang berpotensi lebih lama kembali ke server asal. Hal ini terutama terlihat pada data lapangan—pengujian lab biasanya tidak terlalu terpengaruh oleh faktor ini karena URL akhir biasanya diuji dan sering kali berulang kali meniadakan perubahan dalam cache. Lighthouse melaporkan waktu respons server dan 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 berupaya 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 apa pun di antaranya perlu perbaikan
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. Guna 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 alih-alih membuat kueri untuk entri 'navigation', Anda membuat kueri untuk entri 'resource'. 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 cara meningkatkan TTFB situs Anda, lihat panduan mendalam kami untuk mengoptimalkan TTFB.