Thời gian cho byte đầu tiên (TTFB)

Hỗ trợ trình duyệt

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 35.
  • Safari: 11.

Nguồn

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.

Hình ảnh trực quan về thời gian yêu cầu mạng. Dấu thời gian từ trái sang phải là Chuyển hướng, Bắt đầu trình chạy dịch vụ, sự kiện Tìm nạp trình chạy dịch vụ, Bộ nhớ đệm HTTP, DNS, TCP, Yêu cầu, Gợi ý ban đầu (103), Phản hồi (trùng lặp với Lời nhắc huỷ tải), Xử lý và Tải. Các thời gian liên quan là redirectStart và redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, secureConnectionStart, connectEnd, requestStart, interimResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart và loadEventEnd.
Sơ đồ các giai đoạn yêu cầu mạng và thời gian liên quan. TTFB đo lường thời gian đã trôi qua từ startTime đến responseStart.

TTFB là tổng thời gian 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 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ác định nghĩa khác của 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ó phần 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.

Để đ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ụ 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 kết quả đo lường. Đ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à 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, 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 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ư Thời gian hiển thị nội dung đầu tiên (FCP)Thời gian hiển thị nội dung lớn nhất (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.

Giá trị TTFB tốt là 0,8 giây trở xuống, giá trị kém là lớn hơn 1,8 giây và mọi giá trị ở giữa cần được cải thiện
Giá trị TTFB tốt là từ 0,8 giây trở xuống và giá trị kém là trên 1,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

Đ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, 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'. Điều này cũng giải thích cho 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.