Time to First Byte (TTFB)

Jeremy Wagner
Pollard Barry

Dukungan Browser

  • 43
  • 12
  • 31
  • 11

Sumber

Apa itu TTFB?

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

Diagram pengaturan waktu permintaan jaringan. Fase dari kiri ke kanan adalah Pengalihan (yang tumpang tindih dengan Prompt for Unload), Cache, DNS, TCP, Request, Response, Processing, dan Load. Waktu terkait adalah redirectStart dan redirectEnd (yang tumpang-tindih dengan Prompt for UnloadEventStart dan unloadEventEnd), fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, responseStart, 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
  • Meminta, hingga titik di mana byte pertama respons telah tiba

Mengurangi latensi dalam waktu penyiapan koneksi dan di backend akan berkontribusi pada TTFB yang lebih rendah.

Berapa skor TTFB yang bagus?

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 diupayakan agar Time To First Byte 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

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 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 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 menyebabkan latensi karena adanya kebutuhan untuk menyiapkan koneksi ke server tersebut. Untuk mengukur TTFB bagi 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 di atas mirip dengan yang digunakan untuk mengukur TTFB untuk permintaan navigasi, kecuali alih-alih membuat kueri untuk entri 'navigation', Anda justru membuat kueri untuk entri 'resource'. Hal ini juga menjelaskan fakta bahwa beberapa resource yang dimuat dari asal utama dapat menampilkan nilai 0, karena koneksi sudah terbuka, atau resource langsung diambil dari cache.

Cara meningkatkan TTFB

Panduan mendalam tentang mengoptimalkan TTFB telah dipublikasikan untuk memberikan lebih banyak panduan tentang cara meningkatkan TTFB situs Anda.