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.
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.
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
- Di panel jaringan DevTools Chrome
- WebPageTest
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.