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 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.

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à chuyển hướngEnd,fetchStart, domainLookupStart, domainLookupEnd, connectStart, safetyConnectionStart, connectEnd, requestStart, thấpResponseStart, responseStart, unloadEventStart, unloadEventEnd, responseEnd, domContributor, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadStart vàloadEventEnd. — Sơ đồ về 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 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 là định nghĩa thông thường nhưng có phần giới thiệu của Gợi ý sớm thì được coi là "byte đầu tiên" cần tranh luận. firstInterimResponseStart 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 việc xả phản hồi tài liệu diễn ra 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 che khuất định nghĩa về những biện pháp mà TTFB đo lường.

Là thước đo thời điểm "byte đầu tiên" trình duyệt nhận được dữ liệu hữu ích 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 lại dữ liệu sớm có giá trị thực tế nếu phản hồi đầy đủ 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 và mức độ ảnh hưởng đến nền tả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 đầu tiên hiển thị (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 nghiệm FCP nằm trong mức "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ác giá trị TTFB tốt là 0,8 giây trở xuống, giá trị kém lớn hơn 1,8 giây và bất cứ điều gì ở giữa cần cải thiện — Giá trị TTFB tốt là 0,8 giây trở xuống và giá trị kém lớn hơn 1,8 giây.

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

Các trang web khác nhau về cách phân phối nội dung. TTFB thấp là yếu tố quan trọng để gửi mã đánh dấu cho khách hàng càng sớm càng tốt. Tuy nhiên, nếu một trang web phân phối mã đánh dấu ban đầu nhanh chóng nhưng mã đánh dấu đó lại yêu cầu JavaScript điền nội dung có ý nghĩa vào trang web đó — như trường hợp với Ứ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 để việc máy khách hiển thị mã đánh dấu có thể xảy ra sớm hơn.

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

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.