TTFB là gì?
TTFB là chỉ số đo lường khoảng thời gian từ khi yêu cầu một tài nguyên đến khi byte đầu tiên của phản hồi bắt đầu đến.
TTFB là tổng của các giai đoạn yêu cầu sau:
- Thời gian chuyển hướng
- Thời gian khởi động trình chạy dịch vụ (nếu có)
- tra cứu DNS
- Kết nối và đàm phán TLS
- Yêu cầu, cho đến thời điểm byte đầu tiên của phản hồi đã đến
Việc giảm độ trễ trong thời gian thiết lập kết nối và trên phần phụ trợ có thể làm giảm TTFB.
Các định nghĩa khác về TTFB
Định nghĩa trước đó là định nghĩa thông thường, nhưng với việc ra mắt Gợi ý sớm, nội dung được coi là "byte đầu tiên" đang được tranh luận. firstInterimResponseStart
là một mục thời gian bổ sung mới cho responseStart
để phân biệt giữa các mục này, nhưng mục này chỉ được hỗ trợ trong Chrome và các trình duyệt dựa trên Chromium. Do đó, một số trình duyệt và công cụ (bao gồm cả CrUX) đo lường cho đến khi nhận được các byte đầu tiên, bao gồm cả Gợi ý sớm.
Gợi ý sớm chỉ là một ví dụ mới hơn về việc phản hồi sớm. Một số máy chủ cho phép xả phản hồi tài liệu trước khi có nội dung chính, chỉ với các tiêu đề HTTP hoặc với phần tử <head>
, cả hai đều có thể được coi là có hiệu quả tương tự như Gợi ý sớm và do đó cũng làm lu mờ định nghĩa về những gì TTFB đo lường.
Là một thước đo thời điểm trình duyệt nhận được "các byte đầu tiên" của dữ liệu có thể hành động cho tài liệu, tất cả các định nghĩa này đều có thể được coi là hợp lệ. Việc gửi sớm dữ liệu có giá trị thực sự nếu phản hồi đầy đủ sẽ mất thêm chút thời gian. Điều quan trọng nhất là bạn phải hiểu rõ công cụ bạn đang sử dụng đo lường những gì và nền tảng được đo lường ảnh hưởng như thế nào đến những thông tin đó. Điều này khiến bạn khó so sánh TTFB trên các nền tảng hoặc công nghệ khác nhau, tuỳ thuộc vào các tính năng mà chúng sử dụng và mức độ tác động của các tính năng đó đến kết quả đo lường TTFB đang được sử dụng.
TTFB cũng thường được coi là chỉ báo về thời gian phản hồi của máy chủ hoặc máy chủ lưu trữ. Tuy nhiên, thời gian tải sẽ chịu ảnh hưởng của các yếu tố nằm ngoài tầm kiểm soát trực tiếp đó, chẳng hạn như thời gian chuyển hướng, liệu nội dung đó có được phân phát từ một lượt truy cập vào bộ nhớ đệm của CDN hay phải thực hiện một hành trình dài hơn để quay lại máy chủ gốc. Điều này đặc biệt rõ ràng trong dữ liệu thực địa – thử nghiệm trong phòng thí nghiệm thường ít chịu ảnh hưởng của các yếu tố này vì URL cuối thường được kiểm thử và thường xuyên phủ nhận các thay đổi về bộ nhớ đệm. Lighthouse báo cáo thời gian phản hồi của máy chủ thay vì TTFB để làm rõ hơn vấn đề này, nhưng các công cụ khác trong phòng thí nghiệm có thể không báo cáo như vậy.
Điểm TTFB tốt là bao nhiêu?
Vì TTFB đứng trước các chỉ số tập trung vào người dùng như Hiển thị nội dung đầu tiên (FCP) và Nội dung lớn nhất hiển thị (LCP), nên máy chủ của bạn nên phản hồi các yêu cầu điều hướng đủ nhanh để 75% người dùng có trải nghiệm FCP trong ngưỡng "tốt". Theo hướng dẫn chung, hầu hết các trang web nên cố gắng đạt được TTFB dưới 0,8 giây.
Cách đo lường TTFB
Bạn có thể đo lường TTFB trong phòng thí nghiệm hoặc trong thực tế theo các cách sau.
Công cụ tại hiện trường
Công cụ của Labs
- Trong bảng điều khiển mạng của Công cụ của Chrome cho nhà phát triển
- WebPageTest
Đo lường TTFB trong JavaScript
Bạn có thể đo lường TTFB của các yêu cầu điều hướng trong trình duyệt bằng Navigation Timing API (API Thời gian điều hướng). Ví dụ sau đây cho biết cách tạo PerformanceObserver
để theo dõi mục nhập navigation
và ghi lại mục nhập đó vào bảng điều khiển:
new PerformanceObserver((entryList) => {
const [pageNav] = entryList.getEntriesByType('navigation');
console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
type: 'navigation',
buffered: true
});
Thư viện JavaScript web-vitals
cũng có thể đo lường TTFB trong trình duyệt một cách ngắn gọn hơn:
import {onTTFB} from 'web-vitals';
// Measure and log TTFB as soon as it's available.
onTTFB(console.log);
Đo lường yêu cầu tài nguyên
TTFB áp dụng cho tất cả yêu cầu, chứ không chỉ yêu cầu điều hướng. Cụ thể, các tài nguyên được lưu trữ trên máy chủ nhiều nguồn gốc có thể gây ra độ trễ do cần thiết lập kết nối với các máy chủ đó. Để đo lường TTFB cho các tài nguyên trong trường, hãy sử dụng Resource Timing API (API Thời gian tài nguyên) trong 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
});
Đoạn mã trước tương tự như đoạn mã dùng để đo lường TTFB cho một yêu cầu điều hướng, ngoại trừ việc thay vì truy vấn các mục nhập 'navigation'
, bạn sẽ truy vấn các mục nhập 'resource'
. Phương thức này cũng tính đến việc một số tài nguyên được tải từ nguồn gốc chính có thể trả về giá trị 0
, vì kết nối đã mở hoặc tài nguyên được truy xuất tức thì từ bộ nhớ đệm.
Cách cải thiện TTFB
Để biết hướng dẫn về cách cải thiện TTFB của trang web, hãy xem hướng dẫn chi tiết của chúng tôi về cách tối ưu hoá TTFB.