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

<Image 
  src="https://web-dev.imgix.net/image/jL3OLOhcWUQDnR4XjewLBx4e3PC3/ccT8ltSPrTri3tz7AA3h.png"
  title="Một biểu đồ các `pha` khi request tài nguyên và thời gian của chúng. TTFB đo lường khoảng thời gian từ startTime tới responseTime."
/>


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](https://web.dev/user-centric-performance-metrics) như
[First Contentful Paint (FCP)](https://web.dev/fcp) và [Largest Contentful Paint (LCP)](https://web.dev/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](https://web.dev/fcp/#what-is-a-good-fcp-score).
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**.

<Image 
  src="https://web-dev.imgix.net/image/W3z1f5ZkBJSgL1V1IfloTIctbIF3/ILJ1xKjzVisqOPPyHYVA.svg"
  title=""
/>

TTFB không phải là một chỉ số [Core Web Vitals](https://web.dev/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](https://web.dev/user-centric-performance-metrics/#in-the-lab)
hoặc [trong thực nghiệm](https://web.dev/user-centric-performance-metrics/#in-the-field) theo các cách sau

### Trong thử nghiệm #

- [Chrome User Experience Report](https://developer.chrome.com/docs/crux/)
- [web-vitals JavaScript library](https://github.com/GoogleChrome/web-vitals)

### Trong thực nghiệm #

- Trong [network panel](https://developer.chrome.com/docs/devtools/network/) của Chrome's DevTools
- [WebPageTest](https://www.webpagetest.org/)

### Đo lường TTFB trong JavaScript #

Những trình duyệt hỗ trợ ([nguồn](https://developer.mozilla.org/docs/Web/API/PerformanceResourceTiming/responseStart#browser_compatibility)):
- Google Chrome 43
- Firefox 31
- Edge 12
- Safari 11

Bạn có thể đo TTFB của [các request điều hướng](https://developer.mozilla.org/docs/Web/API/Request/mode)
trên trình duyệt với [Navigation Timing API](https://developer.mozilla.org/docs/Web/API/Navigation_timing_API).
Ví dụ sau cho thấy cách tạo [PerformanceObserver](https://developer.mozilla.org/docs/Web/API/PerformanceObserver)
để lắng nghe một entry `điều hướng` và logs nó ra console:

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

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

<Caution>
Không phải tất cả các trình duyệt đều hỗ trợ `PerformanceObserver` hoặc có cờ `buffered`.
Để hỗ trợ nhiều trình duyệt nhất có thể, xem xét sử dụng `web-vitals`,  thư viện được nhắc đến ở bên dưới.
</Caution>

`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:

```javascript
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](https://developer.mozilla.org/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API) với `PerformanceObserver`:

```javascript
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](https://developer.mozilla.org/docs/Web/HTTP/Headers/Timing-Allow-Origin).


## 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](https://en.wikipedia.org/wiki/Memory_paging#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](https://developer.mozilla.org/docs/Web/HTTP/Headers/Server-Timing) để 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](https://web.dev/redirects/).
- [Preconnect tới các server được yêu cầu](https://web.dev/uses-rel-preconnect/) cho các tài nguyên cross-origin.
- Gửi origin của bạn tới [danh sách HSTS được preload](https://hstspreload.org/)  loại bỏ độ trễ redirect từ HTTP sang HTTPS.
- Sử dụng [HTTP/2](https://web.dev/uses-http2/) hoặc [HTTP/3](https://en.wikipedia.org/wiki/HTTP/3).
- Cân nhắc sử dụng [predictive prefetching](https://web.dev/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](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-data).
- Sử dụng server-side generation (SSG) thay vì SSR (server-side rendering) khi có thể.

Nguồn: [https://web.dev/ttfb](https://web.dev/ttfb/)

Web Metrics

Time to First Byte (TTFB)