TTFB là gì?
TTFB là chỉ số đo thời gian từ khi yêu cầu tài nguyên đến khi byte đầu tiên của phản hồi bắt đầu đến.
startTime đến responseStart.
TTFB là tổng hợp các giai đoạn yêu cầu sau đây:
- Thời gian chuyển hướng
- Thời gian khởi động của trình chạy dịch vụ (nếu có)
- tra cứu DNS
- Kết nối và thương lượng TLS
- Yêu cầu, cho đến thời điểm byte đầu tiên của phản hồi xuất hiệ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ủa bạn.
Các định nghĩa khác của TTFB
Định nghĩa trước đây là định nghĩa thông thường, nhưng với sự ra mắt của Gợi ý ban đầu, nội dung được coi là "byte đầu tiên" đang gây tranh cãi. firstInterimResponse là một mục thời gian bổ sung mới vào responseStart để phân biệt giữa các mục này, nhưng chỉ được hỗ trợ trong các trình duyệt dựa trên Chrome và 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 ý ban đầu.
Gợi ý ban đầu chỉ là một ví dụ mới về việc phản hồi sớm. Một số máy chủ cho phép đẩy phản hồi tài liệu trước khi có nội dung chính – chỉ với 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ư trong tính năng Gợi ý ban đầu, do đó cũng làm mờ định nghĩa về những biện pháp mà TTFB đo lường.
Để đo lường thời điểm trình duyệt nhận đượ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 có thể được coi là hợp lệ. Việc gửi lại dữ liệu sớm nếu phản hồi đầy đủ sẽ mất thêm thời gian. Điều quan trọng nhất là bạn phải hiểu rõ công cụ mà bạn đang sử dụng để đo lường nào, cũng như mức độ ảnh hưởng của chỉ số đó đến nền tảng đang được đo lường. Điều này gây khó khăn cho việc 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 tính năng mà họ sử dụng cũng như tác động của việc đo lường TTFB đang được sử dụng.
TTFB cũng thường được coi là một 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, gói thuê bao sẽ chịu ảnh hưởng của những 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, việc nó có được phân phát từ lượt truy cập vào bộ nhớ đệm của CDN hay không hay phải chuyển về máy chủ gốc có thể mất nhiều thời gian hơn. Điều này đặc biệt rõ ràng trong dữ liệu hiện trường – hoạt động kiểm thử trong phòng thí nghiệm thường ít bị ảnh hưởng bởi các yếu tố này vì URL cuối thường được kiểm tra và thường phủ định các thay đổi trong 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 cho điều này rõ hơn nhưng các công cụ trong phòng thí nghiệm khác có thể không làm được.
Điểm số TTFB tốt là gì?
Vì TTFB đứng trước các chỉ số tập trung vào người dùng như Nội dung hiển thị đầ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 để phân vị thứ 75 của người dùng trải qua FCP nằm trong ngưỡng "tốt". Theo hướng dẫn ban đầu, hầu hết các trang web nên cố gắng đạt được TTFB là 0,8 giây trở xuống.
Cách đo lường TTFB
Có thể đo lường TTFB trong phòng thí nghiệm hoặc trong thực địa theo những cách sau.
Công cụ tại hiện trường
Công cụ cho phòng thí nghiệm
- Trong bảng điều khiển mạng của Công cụ cho nhà phát triển của Chrome
- 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. Ví dụ sau đây cho biết cách tạo PerformanceObserver để theo dõi mục nhập navigation và ghi 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 các yêu cầu về 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 các máy chủ nhiều nguồn gốc có thể gây ra độ trễ do cần phải thiết lập kết nối với các máy chủ đó. Để đo lường TTFB cho tài nguyên trong thực địa, hãy sử dụng Resource Timing API 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'. Báo cáo này cũng xét đế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 ngay lập tức từ bộ nhớ đệm.
Cách cải thiện TTFB
Để được hướng dẫn về cách cải thiện TTFB cho trang web của bạn, hãy xem hướng dẫn chuyên sâu của chúng tôi về cách tối ưu hoá TTFB.