Total Blocking Time (TBT) là gì?

bởi Duc Anh Nguyen
Total Blocking Time

Total Blocking Time (TBT) là chỉ số quan trọng, lấy người dùng làm trung tâm, dùng để đo khả năng đáp ứng tải (load responsiveness), vì nó giúp định lượng mức độ nghiêm trọng của khoảng thời gian từ khi trang không có khả năng tương tác đến khi có khả năng tương tác ổn định (reliably interactive)-TBT thấp giúp đảm bảo trang sử dụng được.

TBT là gì?

Chỉ số Total Blocking Time đo tổng lượng thời gian giữa First Contentful Paint (FCP)Time To Interactive (TTI) khi mà luồng chính (main thread) bị chặn đủ lâu để ngăn các đáp ứng đầu vào.

Luồng chính được coi là “bị chặn” bất cứ khi nào có một tác vụ dài (long task)-một tác vụ mà có thể chạy trên luồng chính nhiều hơn 50 mili giây (ms). Chúng tôi nói luồng chính “bị chặn” bởi vì trình duyệt không thể làm gián đoạn một tác vụ đang được tiến hành. Vì thế trong sự kiện mà người dùng thực hiện tương tác với trang vào giữa thời điểm tác vụ dài, trình duyệt phải đợi cho tác vụ hoàn thanh xong thì nó mới có thể phản hồi tương tác của người dùng được.

Nếu tác vụ đủ dài (ví dụ như bất kỳ tác vụ nào trên 50ms). Rất có thể người dùng sẽ lưu ý đến sự trì hoãn và nhận thức được rằng trang đang bị chậm.

Thời gian bị chặn (blocking time) của một tác vụ dài nhất định là khi thời lượng của nó vượt quá 50 ms. Và tổng thời gian bị chặn (TBT) cho một trang là tổng thời gian chặn (blocking time) cho từng tác vụ dài xuất hiện giữa FCP và TTI.

Ví dụ, hãy xem đồ hình dưới đây về luồng chính của trình duyệt trong khi trang tải:

các tác vụ TBT

Timeline (dòng thời gian) phía trên có năm tác vụ, ba trong số đó là tác vụ dài (long task) bởi vì thời gian của chúng kéo dài hơn 50ms. Đồ hình tiếp theo cho thấy thời gian bị chặn cho từng tác vụ dài:

thời gian chặn trong mỗi tác vụ dài

Trong khi tổng thời gian dùng để chạy các tác vụ trong luồng chính là 560 ms, chỉ khoảng thời gian 345 ms mới bị xem là thời gian chặn.

Độ dài tác vụThời gian bị chặn của tác vụ
Tác vụ một250 ms200 ms
Tác vụ hai90 ms40 ms
Tác vụ ba35 ms0 ms
Tác vụ bốn30 ms0 ms
Tác vụ năm155 ms105 ms
Total Blocking Time345 ms

TBT quan hệ với TTI như thế nào?

Chỉ số TBT là người bạn đồng hành tuyệt vời của TTI, vì nó giúp định lượng mức độ nghiêm trọng của khoảng thời gian từ một trang không có khả năng tương tác (non-interactive) đến khi nó có khả năng tương tác ổn định (reliably interactive).

TTI xem xét một trang là “tương tác ổn định” nếu luồng chính không phải gánh tác vụ dài nào trong khoảng thời gian ít nhất 5 giây. Điều này có nghĩa là nếu có ba tác vụ 51 ms trải dài qua 10 giây có thể cho TTI tương đương một tác vụ kéo dài 10 giây-nhưng hai kịch bản này sẽ cho cảm giác rất khác biệt khi người dùng cố gắng tương tác với trang.

Trong trường hợp đầu tiên với ba tác vụ 51 ms có TBT chỉ 3 ms. Trong khi cái còn lại, có duy nhất một tác vụ kéo dài 10 giây sẽ có TBT là 9950 ms. Giá trị TBT lớn hơn trong trường hợp thứ hai định lượng trải nghiệm tồi hơn.

Cách đo TBT

TBT là chỉ số phải được đo trong môi trường thử nghiệm. Cách tốt nhất để đo TBT là chạy kiểm tra hiệu suất Lighthouse trên trang của bạn.

Lưu ý: Trong khi có thể đo TBT trong môi trường tự nhiên, nó không được khuyến khích vì tương tác của người dùng có thể ảnh hưởng đến TBT của trang theo cách thức có thể dẫn đến rất nhiều biến thể trong báo cáo của bạn. Để hiểu rõ hơn sự tương tác của trang trong môi trường tự nhiên, bạn phải đo First Input Delay (FID).

Thế nào là chỉ số TBT tốt?

Để cung cấp trải nghiệm người dùng tốt, các trang phải cố gắng phấn đấu có được Total Blocking Time ít hơn 300 mili giây khi kiểm tra trên thiết bị di động có phần cứng trung bình.

Để biết chi tiết cách TBT của trang ảnh hưởng đến điểm số hiệu suất Lighthouse của bạn, bạn có thể tìm đọc bài viết về chủ đề đó (có thể tôi sẽ dịch sau).

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

Để học cách cải thiện TBT cho một trang cụ thể, bạn có thể chạy trình kiểm tra hiệu suất của Lighthouse và đặt sự chú ý vào bất kỳ cơ hội cụ thể nào mà chương trình kiểm tra gợi ý.

Nói chung để cải thiện TBT (cho bất kỳ trang nào), hãy tham khảo các hướng dẫn về hiệu suất sau:

Chuỗi bài viết về các chỉ số tăng tốc:

(Dịch từ bài viết: Total Blocking Time (TBT), tác giả: Philip Walton, website: web[.]dev)

0 bình luận

Để lại bình luận