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

Jeremy Wagner
Barry Pollard

Hỗ trợ trình duyệt

  • 43
  • 12
  • 31
  • 11

Nguồn

Thời gian cho byte đầu tiên (TTFB) là chỉ số cơ bản để đo lường thời gian thiết lập kết nối và khả năng phản hồi của máy chủ web ở cả phòng thí nghiệm và hiện trường. Phương thức này đo lườ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. Nhờ đó, bạn có thể xác định thời điểm một máy chủ web quá chậm nên không thể phản hồi các yêu cầu. Trong trường hợp yêu cầu điều hướng (tức là yêu cầu tài liệu HTML), yêu cầu này sẽ đứng trước mọi chỉ số hiệu suất tải có ý nghĩa khác.

Sơ đồ về thời gian yêu cầu kết nối mạng. Các giai đoạn từ trái sang phải là Redirect (trùng lặp với Prompt for Unload), Bộ nhớ đệm, DNS, TCP, Request, Response, Processing và Load. Các thời gian liên kết là RedirectStart và RedirectEnd (trùng lặp với Lời nhắc cho unloadEventStart và unloadEventEnd của Unload), tìm nạpStart, domainLookupStart, domainLookupEnd, connectStart,secureConnectionStart, connectEnd, requestStart, responseStart, responseEnd, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart 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 của 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
  • Thương lượng về việc kết nối và TLS
  • Yêu cầu, cho đến khi 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ợ giúp giảm TTFB của bạn.

Chỉ số TTFB tốt là gì?

Vì TTFB xảy ra trướ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) và Thời gian hiển thị nội dung lớn nhất (LCP), 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 trong ngưỡng "tốt". Theo hướng dẫn sơ bộ, hầu hết các trang web nên cố gắng đạt được chỉ số TTFB là 0,8 giây hoặc ít hơn.

Giá trị TTFB tốt là từ 0,8 giây trở xuống, giá trị kém lớn hơn 1,8 giây và bất kỳ giá trị nào còn lại cần cải thiện
Giá trị TTFB tốt là từ 0,8 giây trở xuống và giá trị kém lớn hơn 1,8 giây.

Điểm quan trọng: Vì TTFB không phải là một 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 có TTFB tốt, miễn là TTFB càng dài thì càng khiến trang web của bạn khó đạt được điểm cao về các chỉ số quan trọng. Khi tối ưu hoá thời gian tải, hãy cân nhắc cách trang web của bạn phân phối nội dung. Chỉ số TTFB thấp là đặc biệt quan trọng nếu trang web phân phối nhanh mã đánh dấu ban đầu, sau đó phải đợi các tập lệnh điền sẵn nội dung có ý nghĩa vào đó, như thường lệ với Ứng dụng trang đơn (SPA). Mặt khác, một trang web do máy chủ kết xuất mà không cần nhiều thao tác phía máy khách có thể có các giá trị FCP và LCP tốt hơn trang web do ứng dụng kết xuất, ngay cả khi TTFB của trang web cao hơn.

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 địa theo những cách sau.

Công cụ thực địa

Công cụ cho phòng thí nghiệm

Đ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 cách sử dụng Navigation Timing API. Ví dụ sau đây cho biết cách tạo một PerformanceObserver giúp theo dõi mục nhập navigation và ghi nhật ký mục đó 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 theo cách ít phức tạp 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ả các yêu cầu, chứ không chỉ các 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ễ trong khi 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 API Thời gian tài nguyên trong PerformanceObserver:

new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();

  for (const entry of entries) {
    // Some resources might have a responseStart value of 0 if they're being
    // cached, or if a cross-origin resource is 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 nên truy vấn các mục nhập 'resource'. Phương thức này cũng xét đến thực tế là một số tài nguyên được tải từ nguồn gốc chính có thể trả về giá trị 0 nếu 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

Để 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 chuyên sâu của chúng tôi về cách tối ưu hoá TTFB.