Trang này được dịch bởi Cloud Translation API.

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

Jeremy Wagner

Barry Pollard

Hỗ trợ trình duyệt

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. Các mốc thời gian từ trái sang phải là Chuyển hướng, Khởi động trình làm việc dịch vụ, Sự kiện tìm nạp trình làm việc dịch vụ, Bộ nhớ đệm HTTP, DNS, TCP, Yêu cầu, Gợi ý sớm (103), Phản hồi (chéo 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 khoảng thời gian trôi qua giữa `startTime` và `responseStart`.

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 giới thiệu 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.

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.

Điểm chính: Vì TTFB không phải là chỉ số Các chỉ số quan trọng về trang web, nên các trang web không nhất thiết phải đáp ứng ngưỡng TTFB "tốt", miễn là điều này không cản trở khả năng đạt điểm cao trên các chỉ số quan trọng.

Các trang web có cách phân phối nội dung khác nhau. TTFB thấp là yếu tố quan trọng để gửi mã đánh dấu đến ứng dụng nhanh nhất có thể. Tuy nhiên, nếu một trang web phân phối nhanh mã đánh dấu ban đầu, nhưng sau đó mã đánh dấu đó yêu cầu JavaScript điền nội dung có ý nghĩa vào mã đánh dấu đó (như trường hợp của Ứng dụng trang đơn (SPA)) thì việc đạt được TTFB thấp nhất có thể là đặc biệt quan trọng để quá trình hiển thị mã đánh dấu của ứng dụng có thể diễn ra sớm hơn.

Ngược lại, một trang web do máy chủ hiển thị không yêu cầu nhiều công việc phía máy khách có thể có TTFB cao hơn, nhưng các giá trị FCP và LCP tốt hơn so với trải nghiệm hoàn toàn do máy khách hiển thị. Đó là lý do ngưỡng TTFB chỉ là "hướng dẫn sơ bộ" và cần được cân nhắc dựa trên cách trang web phân phối nội dung cốt lõi.

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.