Apa itu TTFB?
TTFB adalah metrik yang mengukur waktu antara permintaan untuk resource dan saat byte pertama respons mulai tiba.
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.
Cara mengukur TTFB
TTFB dapat diukur di lab atau di lapangan dengan cara berikut.
Alat lapangan
Alat lab
- Di panel jaringan DevTools Chrome
- WebPageTest
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.