Time to First Byte (TTFB)

TTFB là gì?

TTFB là chỉ số đo lường thời gian từ khi request tài nguyên tới khi nhận được byte response đầu tiên trả về.

TTFB là tổng của các pha dưới đây:

• Thời gian điều hướng
• Thời gian service worker khởi động (nếu có)
• Phân giải tên miền (DNS lookup)
• Thiết lập kết nối và khởi tạo TLS
• Request tài nguyên, cho đến thời điểm nhận được byte đầu tiên trong response trả về

Giảm độ trễ khi thiết lập kết nối khi khởi tạo backend sẽ góp phần làm giảm TTFB.

Thế nào là một điểm TTFB tốt?

Vì TTFB là chỉ số đứng trước các chỉ số quan trọng của người dùng như First Contentful Paint (FCP) và Largest Contentful Paint (LCP), nên máy chủ của bạn phải phản hồi đủ nhanh để 75% người dùng đạt ngưỡng FCP tốt. Theo các nghiên cứu sơ bộ, đa số các trang web nên cố gắng có TTFB dưới 0.8 giây.

TTFB không phải là một chỉ số Core Web Vitals. Do đó các trang web không nhất thiết phải đạt được một giá trị TTFB tốt, miễn là nó không làm ảnh hưởng tới các chỉ số quan trọng của trang web.

Làm thế nào để đo lường TTFB

TTFB có thể được đo lường trong thử nghiệm hoặc trong thực nghiệm theo các cách sau

Trong thử nghiệm

• Chrome User Experience Report
• web-vitals JavaScript library

Trong thực nghiệm

• Trong network panel của Chrome's DevTools
• WebPageTest

Đo lường TTFB trong JavaScript

Những trình duyệt hỗ trợ (nguồn):

• Google Chrome 43
• Firefox 31
• Edge 12
• Safari 11

Bạn có thể đo TTFB của các request điều hướng trên trình duyệt với Navigation Timing API. Ví dụ sau cho thấy cách tạo PerformanceObserver để lắng nghe một entry điều hướng và logs nó ra console:

new PerformanceObserver((entryList) => {
  const [pageNav] = entryList.getEntriesByType('navigation');

  console.log(`TTFB: ${pageNav.responseStart}`);
}).observe({
  type: 'navigation',
  buffered: true
});

web-vitals là một thư viện JavaScript có thể đo TTFB trên trình duyệt một các đơn giản:

import {onTTFB} from 'web-vitals';

// Đo và log TTFB khi có thể.
onTTFB(console.log);

Đo lường request của các tài nguyên

TTFB áp dụng cho tất cả các request, không chỉ riêng với request điều hướng. Đặc biệt, các tài nguyên trên các máy chủ khác (cross-origin) có thể trễ hơn do cần phải thiết lập kết nối tới các máy chủ đó. Để đo TTFB cho các tài nguyên trong thử nghiệm, sử dụng Resource Timing API với PerformanceObserver:

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

  for (const entry of entries) {
    // Một vài tài nguyên có thể có responseStart bằng 0, do
    // tài nguyên đó được cache hoặc một tài nguyên cross-origin
    // được tải về mà không có header Timing-Allow-Origin
    if (entry.responseStart > 0) {
      console.log(`TTFB: ${entry.responseStart}`, entry.name);
    }
  }
}).observe({
  type: 'resource',
  buffered: true
});

Đoạn code ở trên khá giống để đo TTFB cho 1 request điều hướng, ngoại trừ thay vì lấy navigation entry thì bạn lấy resource entry. Nó cũng giải thích vì sao một số tài nguyên primary origin có thể trả về giá trị 0 do kết nối đã được mở hoặc một tài nguyên được truy xuất trực tiếp từ cache.

Gotchas

TTFB của các cross-origin sẽ không thể đo trong thử nghiệm nếu cross-origin server không thiết lập một header Timing-Allow-Origin header.

Làm thế nào để cải thiện TTFB

Việc cải thiện TTFB phần lớn phụ thuộc vào nhà cung cấp dịch vụ lưu trữ và stack backend của bạn. Giá trị TTFB cao có thể do một trong các vấn đề sau:

• Nhà cung cấp dịch vụ với cơ sở hạ tầng không đủ để xử lí tải cho lượng truy cập cao
• Máy chủ web không đủ bộ nhớ có thể dẫn tới thrashing
• Các bảng trong cơ sở dữ liệu không được tối ưu
• Cấu hình máy chủ cơ sở dữ liệu dưới mức tối ưu

Tối thiểu hoá TTFB thường được thực hiện bằng cách chọn một nhà cung cấp dịch vụ với hạ tầng đảm bảo thời gian hoạt động và khả năng đáp ứng cao. Điều này kết hợp với một CDN có thể hữu ích.

Sử dụng Server-Timing API để thu thập thêm thêm các dữ liệu về hiệu năng của các backend service. Điều này có thể giúp xác định các khả năng có thể cải thiện mà không được chú ý đến.

Các khả năng khác để cải thiện TTFB cao và độ trẽ trải nghiệm bao gồm:

• Tránh redirects page nhiều lần.
• Preconnect tới các server được yêu cầu cho các tài nguyên cross-origin.
• Gửi origin của bạn tới danh sách HSTS được preload loại bỏ độ trễ redirect từ HTTP sang HTTPS.
• Sử dụng HTTP/2 hoặc HTTP/3.
• Cân nhắc sử dụng predictive prefetching để điều hướng các trang nhanh chóng cho người dùng chưa được xác định một tuỳ chọn để giảm mức sử dụng dữ liệu.
• Sử dụng server-side generation (SSG) thay vì SSR (server-side rendering) khi có thể.

Nguồn: https://web.dev/ttfb