Apa itu TTFB?
TTFB adalah metrik yang mengukur waktu antara permintaan sumber daya dan saat byte pertama respons mulai tiba.
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 Early Hints apa yang dianggap sebagai "byte pertama" siap untuk diperdebatkan. firstInterimResponseStart
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" 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 status "baik" nilai minimum. Sebagai panduan kasar, sebagian besar situs harus berupaya memiliki TTFB 0,8 detik atau kurang.
Cara mengukur TTFB
TTFB dapat diukur di lab atau di kolom dengan cara berikut.
Alat kolom
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 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.