Các chỉ số hiệu suất tập trung vào người dùng

Philip Walton

Ai trong chúng ta cũng biết được tầm quan trọng của hiệu suất. Nhưng khi nói về hiệu suất và về việc giúp trang web "nhanh", ý nghĩa cụ thể của chúng tôi là gì?

Sự thật là hiệu suất chỉ mang tính tương đối:

• Một trang web có thể tải nhanh đối với một người dùng (trên mạng nhanh với thiết bị mạnh) nhưng lại chậm đối với người dùng khác (trên mạng chậm với thiết bị cấp thấp).
• Hai trang web có thể hoàn tất quá trình tải trong cùng một khoảng thời gian, nhưng một trang web có thể có vẻ tải nhanh hơn (nếu trang web tải dần nội dung thay vì đợi đến cuối trang để hiển thị nội dung bất kỳ).
• Một trang web có thể xuất hiện với tốc độ tải nhanh nhưng sau đó phản hồi chậm (hoặc hoàn toàn không phản hồi) với sự tương tác của người dùng.

Khi nói về hiệu suất, điều quan trọng là bạn phải chính xác và đề cập đến hiệu suất về chỉ số. Tiêu chí khách quan có thể định lượng được đo lường, nhưng bạn cũng cần phải đảm bảo các chỉ số bạn đang đo lường hữu ích.

Xác định chỉ số

Trước đây, hiệu suất của trang web được đo lường bằng sự kiện load. Tuy nhiên, mặc dù load là một thời điểm được xác định rõ ràng trong vòng đời của một trang, nhưng không nhất thiết phải tương ứng với bất kỳ điều gì mà người dùng quan tâm.

Ví dụ: máy chủ có thể phản hồi bằng một trang tối thiểu có thể "tải" ngay lập tức, nhưng sau đó trì hoãn việc tìm nạp nội dung hoặc hiển thị mọi nội dung trên trang cho đến vài giây sau khi sự kiện load kích hoạt. Về mặt kỹ thuật, một trang như vậy có thời gian tải nhanh, nhưng thời gian đó không tương ứng với cách người dùng trải nghiệm trang.

Trong vài năm qua, các thành viên của nhóm Chrome – cùng với Nhóm làm việc về hiệu suất web W3C – đã nỗ lực chuẩn hoá một bộ API và chỉ số mới giúp đo lường chính xác hơn cách người dùng trải nghiệm hiệu suất của một trang web.

Để giúp đảm bảo các chỉ số này phù hợp với người dùng, chúng tôi tập trung vào một vài câu hỏi chính sau đây:

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

Các chỉ số hiệu suất thường được đo lường theo một trong hai cách:

• Trong phòng thí nghiệm: sử dụng công cụ để mô phỏng tải trang trong môi trường nhất quán, được kiểm soát
• Trong thực địa: trên người dùng thực thực sự tải và tương tác với trang

Không có lựa chọn nào trong số này hẳn là tốt hơn hoặc tệ hơn các lựa chọn còn lại. Trên thực tế, bạn thường muốn sử dụng cả hai để đảm bảo hiệu suất tốt.

Ở phòng thí nghiệm

Việc kiểm thử hiệu suất trong phòng thí nghiệm là điều cần thiết khi phát triển các tính năng mới. Trước khi các tính năng được phát hành chính thức, bạn không thể đo lường các đặc điểm hiệu suất của các tính năng đó trên người dùng thực. Vì vậy, việc thử nghiệm các tính năng đó trong phòng thí nghiệm trước khi phát hành tính năng là cách tốt nhất để ngăn chặn sự sụt giảm hiệu suất.

Trong trường

Mặt khác, mặc dù thử nghiệm trong phòng thí nghiệm là một proxy hợp lý cho hiệu suất, nhưng thử nghiệm không nhất thiết phản ánh cách người dùng thực tế trải nghiệm trang web của bạn.

Hiệu suất của một trang web có thể thay đổi đáng kể tuỳ theo khả năng thiết bị của người dùng và tình trạng mạng. Dữ liệu này cũng có thể thay đổi tuỳ vào việc người dùng có tương tác với trang đó hay không (hoặc cách thức tương tác).

Lượt tải trang cũng không phải lúc nào cũng mang tính quyết định. Ví dụ: các trang web tải nội dung hoặc quảng cáo được cá nhân hoá có thể có đặc điểm hiệu suất rất khác nhau giữa người dùng. Thử nghiệm trong phòng thí nghiệm sẽ không thể hiện được những điểm khác biệt đó.

Cách duy nhất để thực sự biết trang web của bạn hoạt động như thế nào cho người dùng là thực sự đo lường hiệu suất của trang web khi những người dùng đó tải và tương tác với trang web. Loại đo lường này thường được gọi là Giám sát người dùng thực (RUM).

Các loại chỉ số

Có một số loại chỉ số khác có liên quan đến cách người dùng cảm nhận về hiệu suất.

• Tốc độ tải dự kiến: tốc độ tải và hiển thị tất cả các thành phần hình ảnh lên màn hình của một trang.
• Khả năng phản hồi của khả năng phản hồi: tốc độ tải và thực thi mọi mã JavaScript bắt buộc mà một trang có thể tải và thực thi mã JavaScript bắt buộc để các thành phần phản hồi nhanh với tương tác của người dùng
• Thời gian chạy phản hồi: sau khi tải trang, tốc độ mà trang có thể phản hồi với tương tác của người dùng.
• Độ ổn định về hình ảnh: các thành phần trên trang có thay đổi theo cách mà người dùng không mong đợi và có khả năng ảnh hưởng đến hoạt động tương tác của họ không?
• Độ mượt: hiệu ứng chuyển đổi và ảnh động có hiển thị ở tốc độ khung hình nhất quán và chuyển đổi linh hoạt từ trạng thái này sang trạng thái khác không?

Với tất cả các loại chỉ số hiệu suất này, hy vọng rằng không một chỉ số nào cũng đủ để thể hiện tất cả đặc điểm về hiệu suất của một trang.

Các chỉ số quan trọng cần đo lường

• Nội dung đầu tiên hiển thị (FCP): đo thời gian từ khi trang bắt đầu tải cho đến khi bất kỳ phần nào của nội dung trên trang hiển thị trên màn hình. (lab, field)
• Nội dung lớn nhất hiển thị (LCP): đo lường thời gian từ khi trang bắt đầu tải đến khi khối văn bản hoặc phần tử hình ảnh lớn nhất hiển thị trên màn hình. (lab, field)
• Lượt tương tác với nội dung hiển thị tiếp theo (INP): đo lường độ trễ của mỗi lượt nhấn, lượt nhấp hoặc lượt tương tác bằng bàn phím được thực hiện với trang và (dựa trên số lượt tương tác) chọn độ trễ tương tác kém nhất của trang (hoặc gần mức cao nhất) làm một giá trị đại diện duy nhất để mô tả khả năng phản hồi tổng thể của một trang. (lab, field)
• Tổng thời gian chặn (TBT): đo lường tổng thời gian từ FCP đến TTI, trong đó luồng chính bị chặn đủ lâu để ngăn khả năng phản hồi dữ liệu đầu vào. (phòng thí nghiệm)
• Điểm số tổng hợp về mức thay đổi bố cục (CLS): đo lường điểm số tích luỹ của tất cả những lần thay đổi bố cục ngoài dự kiến xảy ra giữa thời điểm trang bắt đầu tải cho đến khi trạng thái vòng đời chuyển sang trạng thái ẩn. (lab, field)
• Thời gian đến byte đầu tiên (TTFB): đo thời gian cần thiết để mạng phản hồi yêu cầu của người dùng bằng byte đầu tiên của tài nguyên. (lab, field)

Trong một số trường hợp, chúng tôi sẽ thêm các chỉ số mới để bổ sung những khía cạnh còn thiếu. Tuy nhiên, trong các trường hợp khác, chỉ số tốt nhất là những chỉ số được điều chỉnh riêng cho trang web của bạn.

Chỉ số tùy chỉnh

Các chỉ số hiệu suất được đề cập trước đó rất hữu ích để hiểu chung về đặc điểm hiệu suất của hầu hết các trang web trên web. Việc này cũng hữu ích khi có một bộ chỉ số chung cho các trang web để so sánh hiệu suất của trang web đó với hiệu suất của đối thủ cạnh tranh.

Tuy nhiên, đôi khi một trang web cụ thể khác biệt theo một cách nào đó sẽ đòi hỏi bạn phải có các chỉ số bổ sung để có được bức tranh toàn cảnh về hiệu suất. Ví dụ: chỉ số LCP được dùng để đo lường khi nội dung chính của một trang đã tải xong, nhưng có thể có những trường hợp mà phần tử lớn nhất không nằm trong nội dung chính của trang và do đó, LCP có thể không phù hợp.

Để giải quyết những trường hợp như vậy, Nhóm làm việc về hiệu suất web cũng đã chuẩn hoá các API cấp thấp hơn, có thể hữu ích cho việc triển khai các chỉ số tuỳ chỉnh của riêng bạn:

• API Thời gian người dùng
• API Tasks
• API Khung ảnh động dài
• API Thời gian phần tử
• Navigation Timing API
• API Thời gian tài nguyên
• Thời gian của máy chủ

Hãy tham khảo hướng dẫn về Chỉ số tuỳ chỉnh để tìm hiểu cách sử dụng các API này nhằm đo lường đặc điểm hiệu suất dành riêng cho trang web của bạn.