Time To Interactive là gì?

bởi Nguyễn Đức Anh
TIME TO INTERACTIVE - bắt đầu tương tác

Time To Interactive (TTI) là một trong sáu chỉ số được theo dõi trong khu vực Performance của báo cáo Lighthouse. Mỗi chỉ số nắm bắt một số khía cạnh của tốc độ tải trang.

Đo đạc chỉ số TTI (Thời điểm tương tác) là quan trọng bởi vì một số trang có khả năng tối ưu hiển thị nội dung tốt nhưng lại phải hy sinh khả năng tương tác. Điều này có thể gây bực bội trong trải nghiệm người dùng: trang web đã hiện ra đây rồi, nhưng khi người dùng cố gắng tương tác với nó thì không có chuyện gì xảy ra cả.

Lighthouse trình bày TTI dưới dạng giây đồng hồ:

thời gian tương tác

TTI đo cái gì?

TTI đo khoảng thời gian bao lâu thì trang có khả năng tương tác đầy đủ. Một trang được xem là tương tác đầy đủ khi:

  • Trang hiển thị nội dung hữu ích, cái được đo bằng First Contentful Paint,
  • Trình xử lý sự kiện được đăng ký cho hầu hết các yếu tố hiển thị trên trang, và
  • Phản hồi của trang với các tương tác của người dùng diễn ra trong vòng 50 mili giây

Lưu ý: Cả First CPU Idle (CPU nhàn rỗi đầu tiên) và TTI đều đo khoảng thời gian khi trang sẵn sàng cho người dùng nhập thông tin vào. First CPU Idle xảy ra khi người dùng có thể bắt đầu tương tác với trang; TTI xảy ra khi người dùng hoàn toàn có khả năng tương tác với trang. Xem tài liệu của Google về Tương tác đầu tiên và tương tác ổn định nếu bạn muốn tính toán chính xác từng chỉ số.

Cách Lighthouse xác định chỉ số TTI của bạn

Điểm số TTI là sự so sánh điểm số TTI trang của bạn và TTI cho các trang web thực, dựa trên dữ liệu từ HTTP Archive. Lấy ví dụ, các trang có hiệu suất render TTI trong phân vị thứ 99 có giá trị là 2,2 giây. Nếu TTI trang web của bạn là 2,2 giây, điểm số TTI của bạn là 99.

Bảng này cho thấy cách giải thích điểm số TTI của bạn:

Điểm số TTI (tính dưới dạng giây)Mã màuĐiểm số TTI (phân vị HTTP Archive)
0-5,2Xanh (nhanh)75-100
5,3-7,3Cam (trung bình)50-74
Trên 7,3Đỏ (chậm)0-49

Làm thế nào cải thiện được điểm số TTI

Một trong các cải thiện có thể có ảnh hưởng lớn lên TTI là trì hoãn (deferring) hoặc loại bỏ (removing) các công việc không cần thiết liên quan đến JavaScript. Hãy nhìn vào các cơ hội tối ưu hóa JavaScript của bạn. Đặc biệt, xem xét giảm tải JavaScript bằng cách tách mã (code splitting) và áp dụng mẫu PRPL (Preload-Render-Precache-Lazy load). Tối ưu hóa JavaScript của bên thứ ba cũng mang lại cải tiến đáng kể cho một số trang.

Có hai kiểm tra đưa ra thêm các cơ hội để giảm công việc của JavaScript:

Theo dõi TTI trên các thiết bị của người dùng thực

Để biết cách đo khi TTI thực sự xuất hiện trên các thiết bị của người dùng của bạn, hãy ghé thăm trang các chỉ số hiệu suất, tốc độ tập trung vào người dùng. Phần theo dõi TTI mô tả cách truy cập dữ liệu TTI theo chương trình và gửi nó lên Google Analytics.

Lưu ý: TTI có thể khó theo dõi trong thực tế. Theo dõi FID (First Input Delay) có thể là một trung gian tốt cho TTI.

Làm thế nào cải thiện được tổng thể điểm số hiệu suất của bạn

Trừ khi bạn có lý do rõ ràng để chỉ tập trung vào một chỉ số cụ thể, còn không thì thường sẽ tốt hơn nếu bạn tập trung vào cải thiện tổng thể điểm số hiệu suất (overall performance score).

Sử dụng khu vực Opportunities/Cơ hội trong báo cáo Lighthouse để xác định sự cải tiến nào sẽ có giá trị nhất trên trang của bạn. Cơ hội càng quan trọng, hiệu ứng sẽ càng lớn đối với điểm hiệu suất của bạn. Lấy ví dụ, hì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 sự cải thiện lớn nhất:

Tab cơ hội của Lighthouse

Bạn có thể ghé thăm trang thư mục chứa các nội dung về kiểm tra hiệu suất (tiếng Anh) để học cách giải quyết các cơ hội được xác định trong báo cáo Lighthouse.

(Dịch từ bài viết Time to Interactive, trang web[.]dev)

0 bình luận

Khu vực bình luận

avatar