VietNetwork.Vn

Cảm nhận về tốc độ tải của trang web là một trải nghiệm mà không số liệu nào có thể gói gọn lại đầy đủ. Trong quá trình tải, một số giai đoạn có thể tác động đến vấn đề này.

Trong quá trình tải trình duyệt, một số bước có thể ảnh hưởng đến nó. Để đánh giá tốc độ tải các trang của bạn, cần quan sát một số chỉ số, bao gồm cả Start Render và Speed ​​Index. Nhưng mặc dù chúng có thể được sử dụng để đo tốc độ hiển thị của một trang, nhưng chúng không cho phép bạn đánh giá mức độ tương tác của trang, đây là một khía cạnh quan trọng trong trải nghiệm người dùng. Để làm được điều này, bạn cần tối ưu hóa Thời gian tương tác (TTI) của mình.

1. Thời gian Tương tác (Time To Interactive) là gì?

Thời gian tương tác là chỉ số cho phép bạn đánh giá mức độ tương tác. Nó được liên kết sâu sắc với trải nghiệm người dùng và phải được tính đến khi theo dõi hiệu suất web của bạn.

Điều quan trọng là phải xác định rằng Thời gian Tương tác không phải là một chỉ báo được tiêu chuẩn hóa. Cũng xin lưu ý rằng, mặc dù Google đã đưa số liệu này vào tính toán điểm Lighthouse và PageSpeed ​​Insights, nhưng trọng lượng của nó đã giảm trong những thay đổi gần đây trong cách tính điểm, đến mức dường như cuối cùng nó sẽ biến mất.

Chỉ số TTI (Time To Interactive) đưa ra thước đo thời gian để một trang trở nên tương tác đối với người dùng, tức là phản ứng với nhấp chuột. Nó phụ thuộc vào thời điểm khi:

• Trang hiển thị nội dung hữu ích được xác định bởi bức tranh có nội dung đầu tiên (First Contentful Paint)
• Các phần tử hiển thị nhất trên trang có tính tương tác (khi chúng có thể nhấp hoặc phản hồi khi di chuột qua, v.v.)
• Trang phản hồi các tương tác của người dùng trong thời gian tối đa là 50 mili giây.

Trong thực tế, thuật toán được sử dụng để tính toán TTI quan sát cả thác nước và hoạt động mạng. Ba giai đoạn liên quan đến việc xác định Thời gian Tương tác là:

• Chọn một điểm bắt đầu có liên quan, chẳng hạn như sơn nội dung đầu tiên (First Contentful Paint) hoặc DOMContentLoadedEnd.
• Từ thời điểm này, hãy tìm cửa sổ mà trong đó mạng ổn định trong 5 giây và cửa sổ đó không chứa các tác vụ dài.
• Khi điều này đã được tìm thấy, hãy nhìn lại phần cuối của nhiệm vụ dài cuối cùng và báo cáo thời gian đó là Thời gian Tương tác.

Điều này có nghĩa là không thể ước tính TTI trước khi phân tích tài liệu hoàn tất.

Dưới đây là một minh họa để giúp bạn hiểu rõ hơn về Thời gian Tương tác.


Hãy thêm một vài điều làm rõ:

• Không nên sử dụng bức tranh có ý nghĩa đầu tiên (First Meaningful Paint) làm điểm bắt đầu vì số liệu này chưa được chuẩn hóa.
• Không thể phát hiện TTI khi mạng không ổn định, nhưng giá trị TTI thực luôn được tìm thấy khi kết thúc một nhiệm vụ dài.
• Cần đợi ít nhất 5 giây trước khi một trang có thể được coi là tương tác và TTI có thể được báo cáo.
• Phép đo không coi một trang là tương tác trong khi bản dựng DOM chưa hoàn thành. Điều này có nghĩa là TTI đợi DOMContentLoadedEnd, ngay cả khi điều này xảy ra trong 5 giây ổn định mạng đã đề cập trước đó.

2. Làm thế nào để đo lường Thời gian Tương tác (Time To Interactive)?

Một số trang web tối ưu hóa tốc độ hiển thị nội dung và không nghĩ đến việc tối ưu hóa khả năng tương tác. Điều này có thể tạo ra trải nghiệm người dùng khó chịu: trang web dường như tải nhưng khi người dùng cố gắng tương tác thì không có gì xảy ra. Xấu hổ làm sao. Hãy suy nghĩ về việc đo lường và tối ưu hóa TTI của bạn, biết rằng đó là một số liệu cần được diễn giải cẩn thận.

Bạn có thể giám sát nó bằng tiện ích mở rộng Lighthouse, chỉ khả dụng trên Chrome, thông qua PageSpeed ​​Insights hoặc WebPageTest.

Các công cụ RUM không thể đơn giản đo Thời gian Tương tác.

Để đo lường khả năng các trang của bạn phản ứng với các tương tác của người dùng với các công cụ RUM, bạn có thể dựa vào độ trễ đầu vào đầu tiên (First Input Delay) là một phần của Core Web Vitals của Google.

3. Làm cách nào để cải thiện Thời gian Tương tác (Time To Interactive)?

Time To Interactive bị ảnh hưởng trực tiếp bởi các tập lệnh JavaScript, có thể chặn hiển thị trang. Càng có nhiều tập lệnh, độ trễ đối với TTI càng lớn. Điều này có thể khác nhau giữa các thiết bị về tác động của nó vì hiệu suất tập lệnh thay đổi đáng kể từ thiết bị này sang thiết bị khác. Bộ xử lý càng chậm thì càng dành nhiều thời gian cho việc phân tích và biên dịch các tập lệnh. Trên thiết bị di động, ví dụ, CPU bị nhiều giới hạn hơn là trên một máy tính để bàn, và kết quả là những JavaScript có tác động lớn hơn nhiều trên các trang web nạp vào điện thoại di động và Time To Interactive kéo dài đáng kể nữa.

Vì vậy, cách tốt nhất để cải thiện TTI là xóa hoặc trì hoãn JavaScript của bạn, và theo lẽ tự nhiên, để thực hiện việc này một cách nhanh chóng và hiệu quả, các công cụ sử dụng làm bộ nhớ Cache cung cấp tính năng làm trì hoãn JavaScript.