Categories PageSpeed Insights

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

Vài lời của người dịch: bài viết này có nhiều thuật ngữ liên quan đến đo đạc hiệu suất, tốc độ website, nhiều cái phải để nguyên gốc tiếng Anh. Có thể bạn sẽ không hiểu hết (bản thân tôi cũng vậy), nhưng đừng lo lắng, khi cần tìm hiểu sâu hơn nữa chúng ta sẽ hiểu thôi. Ở đây bạn chỉ cần nắm được ý tưởng căn bản của bài viết là được. OK, chúng ta bắt đầu thôi.


Mọi người đều đã nghe nói về vấn đề hiệu suất, tốc độ (performance) quan trọng như thế nào rồi. Nhưng khi chúng ta nói về hiệu suất – và về việc tạo website ‘tải nhanh’ – ý cụ thể mà chúng ta muốn nói đến là gì vậy?

Sự thật thì tốc độ, hiệu suất là thông số tương đối (relative):

  • Một trang có thể nhanh với người dùng này (trên mạng có kết nối nhanh và thiết bị phần cứng tốt / powerful device) nhưng lại chậm với người dùng khác (trên mạng có kết nối chậm và thiết bị phần cứng yếu / low-end device);
  • Hai trang có thể tải xong chính xác trong cùng một khoảng thời gian đấy, nhưng một trang có vẻ tải nhanh hơn trang còn lại (nếu nó tải nội dung dần dần [kỹ thuật lazy load] thay vì đợi cho mọi thứ xong xuôi hẳn mới hiển thị nội dung bất kỳ nào đó);
  • Một trang có thể hiển thị nhanh nhờ tốc độ tải cao nhưng lại đáp ứng chậm (hoặc hoàn toàn không đáp ứng) với tương tác của người dùng (user interaction).

Vì thế khi nói về tốc độ, điều quan trọng phải là cụ thể, chính xác; và đề cập đến tiêu chí hiệu suất dưới góc nhìn khách quan có thể đo lường được (quantitatively measured). Những tiêu chí này được gọi là các chỉ số (metrics).

Nhưng chỉ vì có một chỉ số dựa trên tiêu chuẩn khách quan (objective criteria) và có thể đo lường được, điều đó không nhất thiết đảm bảo rằng bản thân những phép đo lường đó là hữu dụng (có ích).


1. Định nghĩa các chỉ số

Trong lịch sử, hiệu suất web được đo lường bằng sự kiện load. Tuy nhiên, dù cho sự kiện load là khoảnh khắc được xác định rõ ràng (well-defined moment) trong vòng đời của trang (page’s lifecycle), khoảnh khắc này không nhất thiết tương xứng với bất kỳ điều gì mà người dùng quan tâm.

Lấy ví dụ, một máy chủ có thể phản hồi với một trang tối thiểu (minimal page) rằng nó “tải” ngay lập tức nhưng sau đó lại trì hoãn tìm nạp nội dung (defer fetching content) và chỉ hiển thị bất cứ thứ gì trên trang cho đến vài giây sau khi sự kiện load kích hoạt. Trong khi một trang có thể có thời gian tải nhanh về mặt kỹ thuật, thời gian này sẽ không đại diện cho quá trình người dùng thực sự trải nghiệm quá trình tải trang (page loading).

Trong vài năm qua, các thành viên của đội Chrome-trong quá trình hợp tác với nhóm W3C Web Preformance-đã làm việc để chuẩn hóa bộ API và các chỉ số mới chính xác hơn để đo lường cách người dùng trải nghiệm hiệu suất, tốc độ của trang web.

Để giúp đảm bảo các chỉ số này là liên quan đến người dùng, chúng tôi định khung chúng với một số câu hỏi trọng tâm sau:

Nó có xảy ra hay không? Liệu điều hướng có khởi động thành công? Máy chủ đã phản hồi hay chưa?
Nó có ích không? Liệu có đủ nội dung đã được render (kết xuất) để người dùng có thể tham gia?
Nó có khả dụng? Liệu người dùng có thể tương tác với trang, hay nó bị bận rộn mất rồi?
Nó có thú vị không? Các tương tác có diễn ra trơn tru, tự nhiên và thoải mái hay lại bị lag và jank?

2. Các chỉ số được đo lường như thế nào?

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

  • Trong điều kiện thí nghiệm (lab): sử dụng các công cụ để mô phỏng tải trang một cách nhất quán, trong môi trường được kiểm soát (controlled environment);
  • Trong điều kiện tự nhiên (filed): những người dùng thực tải và tương tác với trang.

Không có tùy chọn nào trong cả hai tùy chọn trên tốt hơn hoặc tệ hơn cái còn lại- trong thực tế, nói chung thì bạn sẽ muốn sử dụng cả hai để đảm bảo có được chỉ số hiệu suất, tốc độ tốt.


A. Trong điều kiện thử nghiệm

Kiểu tra hiệu suất trong điều kiện thử nghiệm là điều bắt buộc khi sản phẩm đang 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 trong sản phẩm, bạn không thể nào đo đạc được các chỉ số hiệu suất trên người dùng thực, vì thế kiểm tra chúng trong điều kiện thử nghiệm trước khi tính năng được phát hành là cách tốt nhất để ngăn chặn sự suy giảm hiệu suất.


B. Trong điều kiện tự nhiên

Mặt khác, trong khi kiểm tra trong môi trường thử nghiệm là giả lập (ủy thác) hợp lý để biết được hiệu suất, nó không nhất thiết phản ánh chính xác cách tất cả người dùng trải nghiệm website của bạn trong hoàn cảnh thực tế.

Tốc độ của trang thay đổi rất đột ngột dựa trên khả năng thiết bị của người dùng và điều kiện kết nối mạng/internet của họ. Nó cũng có thể dựa rất nhiều vào chuyện liệu (hoặc cách) người dùng tương tác với trang.

Hơn nữa, tải trang có thể không phải là yếu tố quyết định. Lấy ví dụ, các trang mà tải nội dung cá nhân hóa hoặc quảng cáo có thể trải nghiệm sự khác biệt lớn về các chỉ số hiệu suất từ người dùng này đến người dùng khác. Môi trường thử nghiệm sẽ không nắm bắt được hoàn hảo sự khác biệt này.

Cách duy nhất để thực sự biết được hiệu suất trang của bạn như thế nào với người dùng của bạn là thực sự đo hiệu suất của nó như cách các người dùng tải và tương tác với trang. Kiểu đo đạc này thường được đề cập bằng tên gọi Real User Monitoring – hoặc viết tắt là RUM.


3. Các kiểu chỉ số khác nhau

Có một số kiểu chỉ số đo lường khác nhau liên quan đến cách người dùng nhận thức về tốc độ.

  • Tốc độ tải nhận thức (perceived load speed): mức độ nhanh chóng mà một trang có thể tải và render tất cả các thành phần visual (trực quan) của nó trên màn hình;
  • Đáp ứng tải (load responsiveness): mức độ nhanh chóng một trang có thể tải và thực thi bất kỳ mã JavaScript nào được yêu cầu theo thứ tự của các thành phần để đáp ứng nhanh tương tác của người dùng;
  • Đáp ứng runtime: sau khi trang tải, mức độ nhanh chóng trang có thể đáp ứng với tương tác của người dùng;
  • Mức độ ổn định thị giác (visual stability): các thành phần trên trang có chuyển đổi theo cách mà người dùng không mong chờ và có khả năng gây trở ngại / can thiệp vào tương tác của họ không?
  • Độ mượt (smoothness): các chuyển tiếp và kết xuất hình ảnh động (animations render) có tốc độ khung hình ổn định và chuyển từ trạng thái này sang trạng thái khác mượt mà hay không?

Hy vọng là với việc đưa ra tất cả các kiểu chỉ số hiệu suất trên, bạn sẽ nhận ra rõ ràng rằng không có chỉ số đơn lẻ nào là đủ để nắm bắt tất cả các đặc điểm hiệu suất của một trang.


4. Các chỉ số quan trọng cần đo

  • First contentful paint (FCP): đo khoảng thời gian từ khi trang bắt đầu tải cho đến khi bất kỳ phần nào thuộc nội dung của trang được render trên màn hình. (lab, field);
  • Largest contentful paint (LCP): đo thời gian từ khi trang bắt đầu tải cho đến khi khối văn bản hoặc phần tử hình ảnh lớn nhất được render trên màn hình. (lab, field);
  • First input delay (FID): đo thời gian từ khi người dùng lần đầu tương tác với trang (ví dụ, khi họ click vào liên kết, nhấn button hoặc sử dụng một tùy chỉnh, điều chỉnh điều gì đó dựa trên JavaScript) cho đến khi trình duyệt thực sự phản hồi được tương tác đó (field);
  • Time to Interactive (TTI): đo lường khoảng thời gian từ khi trang bắt đầu tải cho đến khi nó được hiển thị trực quan, các đoạn mã script ban đầu của nó (nếu có) phải được tải, và nó có khả năng đáp ứng nhanh chóng, đáng tin cậy với đầu vào của người dùng (lab);
  • Total blocking time (TBT): đo lường tổng thời gian giữa FCP và TTI khi luồng chính bị chặn đủ lâu để ngăn đáp ứng đầu vào (lab);
  • Cumulative layout shift (CLS): đo điểm tích lũy của tất cả các thay đổi layout không mong chờ xuất hiện từ khi trang bắt đầu tải cho đến khi trạng thái vòng đời của nó thay đổi thành ẩn (lab, field);

Dù danh sách trên bao gồm nhiều chỉ số đo lường các khía cạnh khác nhau về hiệu suất liên quan đến người dùng, nó không bao gồm tất cả mọi thứ (ví dụ runtime responsiveness và smotthness hiện chưa được đề cập đến).

Trong một số trường hợp, các chỉ số mới sẽ được giới thiệu để bổ khuyết cho các phần bị thiếu, nhưng trong các trường hợp khác các chỉ số tốt nhất là những thứ được thiết kế riêng cho trang web của bạn.


5. Các chỉ số tùy chỉnh

Các chỉ số hiệu suất liệt kê bên trên là các thông tin tốt để bạn có được hiểu biết tổng quan chung về các đặc điểm hiệu suất, tốc độ của hầu hết các trang trên thế giới web. Chúng cũng tốt khi bạn cần một nhóm chỉ số chung để so sánh hiệu suất của các trang là đối thủ của nhau.

Tuy nhiên, có những thời điểm khi một trang cụ thể là độc đáo theo cách nào đó, cần yêu cầu bổ sung thêm các chỉ số- để đo lường được bức tranh toàn cảnh về hiệu suất.

Lấy ví dụ, chỉ số LCP được dự định là chỉ số dùng để đo khoảng thời gian khi nội dung chính của trang được tải xong, nhưng có những trường hợp mà thành phần lớn nhất trên trang không phải là một phần của nội dung chính, và vì thế LCP có thể không phải là điều quá quan trọng nữa.

PS từ Kiến càng: thông tin trên cho thấy, việc bạn ý thức được điều gì là quan trọng và KHÔNG quan trọng trên trang rất có ý nghĩa, nhờ thế các giải pháp tối ưu của bạn mới thực sự có ích cho người dùng, chứ không đơn thuần chạy theo điểm số.

Để giải quyết các trường hợp như vậy, nhóm Web Performance Working cũng đã chuẩn hóa các API cấp thấp hơn có thể hữu ích cho việc triển khai các chỉ số tùy chỉnh của riêng bạn:

Bạn có thể tham khảo hướng dẫn từ bài viết các chỉ số tùy chỉnh (custom metrics) trên mạng để học cách sử dụng các API, qua đó đo đạc các đặc điểm hiệu suất cụ thể trên trang của bạn.

(Dịch từ bài viết: User-centric performance metrics, tác giả: Philip Walton, website: web[.]dev)

Back to Top