Time to First Byte (TTFB)

Jeremy Wagner
Barry Pollard

Dukungan Browser

  • 43
  • 12
  • 31
  • 11

Sumber

Time to First Byte (TTFB) adalah metrik dasar untuk mengukur waktu penyiapan koneksi dan responsivitas server web di lab dan kolom. Fungsi ini mengukur waktu antara permintaan resource dan saat byte pertama respons mulai tiba. Hal ini membantu mengidentifikasi kapan server web terlalu lambat merespons permintaan. Dalam kasus permintaan navigasi, yaitu permintaan untuk dokumen HTML, permintaan ini mendahului setiap metrik performa pemuatan penting lainnya.

Diagram pengaturan waktu permintaan jaringan. Fase dari kiri ke kanan adalah Pengalihan, Inisiasi Service Worker, peristiwa Pengambilan Service Worker, Cache HTTP, DNS, TCP, Request, Petunjuk Awal (103), Respons(yang tumpang tindih dengan Prompt for Unload), Pemrosesan, dan Muat. 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 yang terkait. TTFB mengukur waktu berlalu antara startTime dan responseStart.

TTFB adalah jumlah dari fase permintaan berikut:

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

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

Berapa skor TTFB yang bagus?

Karena TTFB terjadi sebelum 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 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.

Poin utama: Karena TTFB bukan metrik Data Web Inti, situs tidak sepenuhnya perlu memiliki TTFB yang bagus, selama TTFB yang lebih lama tidak mempersulit situs Anda untuk mendapatkan skor bagus dalam metrik yang penting. Saat mengoptimalkan waktu pemuatan, pertimbangkan cara situs Anda menayangkan konten. TTFB yang rendah sangat penting jika situs mengirimkan markup awalnya dengan cepat, lalu harus menunggu skrip untuk mengisinya dengan konten yang bermakna, seperti yang sering terjadi dengan Aplikasi Web Satu Halaman (SPA). Di sisi lain, situs yang dirender server yang tidak memerlukan banyak pekerjaan sisi klien dapat memiliki nilai FCP dan LCP yang lebih baik daripada situs yang dirender klien, meskipun TTFB-nya lebih tinggi.

Cara mengukur TTFB

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

Alat lapangan

Alat lab

Mengukur TTFB di JavaScript

Anda dapat mengukur TTFB permintaan navigasi di browser menggunakan 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 sedikit kompleksitas:

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 saat menyiapkan koneksi ke server tersebut. Untuk mengukur TTFB bagi resource di kolom, gunakan Resource Timing API di PerformanceObserver:

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

Cuplikan kode sebelumnya mirip dengan yang digunakan untuk mengukur TTFB untuk permintaan navigasi, kecuali bahwa 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 jika koneksi sudah terbuka, atau resource langsung diambil dari cache.

Cara meningkatkan TTFB

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