Tổng thời gian chặn

Tổng thời gian chặn (TBT) là một trong những chỉ số được theo dõi trong phần Hiệu suất của báo cáo Lighthouse. Mỗi chỉ số thể hiện một số khía cạnh liên quan đến tốc độ tải trang.

Báo cáo Lighthouse hiển thị TBT theo mili giây:

Ảnh chụp màn hình kiểm tra Tổng thời gian chặn Lighthouse

Các chỉ số đo lường của TBT

TBT đo lường tổng thời gian mà một trang bị chặn phản hồi với hoạt động đầu vào của người dùng, chẳng hạn như nhấp chuột, nhấn vào màn hình hoặc nhấn bàn phím. Tổng được tính bằng cách cộng phần chặn của tất cả các tác vụ dài giữa Thời gian hiển thị nội dung đầu tiên và Thời gian tương tác. Bất kỳ tác vụ nào thực thi trong hơn 50 mili giây là một tác vụ dài. Khoảng thời gian sau 50 mili giây là phần chặn. Ví dụ: nếu Lighthouse phát hiện một tác vụ dài 70 mili giây, thì phần chặn sẽ là 20 mili giây.

Cách Lighthouse xác định điểm TBT của bạn

Điểm TBT của bạn là điểm số so sánh thời gian TBT của trang và TBT nhân với hàng triệu trang web thực khi tải trên thiết bị di động. Hãy xem bài viết Cách xác định điểm chỉ số để tìm hiểu cách thiết lập ngưỡng điểm của Lighthouse.

Bảng này trình bày cách diễn giải điểm TBT của bạn:

Thời gian TBT
(tính bằng mili giây)		 Mã hoá màu
0–200 Xanh lục (nhanh)
200-600 Da cam (trung bình)
Trên 600 Đỏ (chậm)

Cách cải thiện điểm TBT

Hãy xem bài viết Điều gì khiến các tác vụ mất nhiều thời gian của tôi? để tìm hiểu cách chẩn đoán nguyên nhân gốc của các tác vụ dài bằng bảng điều khiển Hiệu suất của Công cụ của Chrome cho nhà phát triển.

Nhìn chung, những nguyên nhân phổ biến nhất gây ra tác vụ dài là:

  • Tải, phân tích cú pháp hoặc thực thi JavaScript không cần thiết. Trong khi phân tích mã trong bảng điều khiển Hiệu suất, bạn có thể thấy luồng chính đang hoạt động không thực sự cần thiết để tải trang. Việc giảm tải trọng JavaScript bằng cách phân chia mã, xoá mã không dùng đến hoặc tải JavaScript bên thứ ba một cách hiệu quả sẽ cải thiện điểm số TBT.
  • Câu lệnh JavaScript không hiệu quả. Ví dụ: sau khi phân tích mã trong bảng điều khiển Hiệu suất, giả sử bạn thấy một lệnh gọi đến document.querySelectorAll('a') trả về 2.000 nút. Việc tái cấu trúc mã để sử dụng một bộ chọn cụ thể hơn chỉ trả về 10 nút sẽ cải thiện điểm TBT của bạn.

Cách cải thiện Điểm hiệu suất tổng thể

Trừ phi có lý do cụ thể để tập trung vào một chỉ số cụ thể, bạn nên tập trung vào việc cải thiện Điểm hiệu suất tổng thể.

Sử dụng mục Cơ hội trong báo cáo Lighthouse để xác định những điểm cải thiện sẽ có giá trị nhất cho trang của bạn. Cơ hội càng quan trọng thì tác động càng lớn đến Điểm hiệu suất của bạn. Ví dụ: ảnh chụp màn hình Lighthouse dưới đây cho thấy việc loại bỏ các tài nguyên chặn hiển thị sẽ mang lại điểm cải tiến lớn nhất:

Lighthouse: Mục Cơ hội

Xem trang đích Kiểm tra hiệu suất để tìm hiểu cách giải quyết các cơ hội xác định được trong báo cáo Lighthouse.

Tài nguyên