Chúng ta đều biết hiệu suất quan trọng như thế nào. Nhưng khi nói về hiệu suất và việc làm cho trang web "nhanh", chúng ta muốn nói đến điều gì cụ thể?
Thực tế là hiệu suất là tương đối:
- Một trang web có thể tải nhanh cho người dùng này (trên mạng nhanh với thiết bị mạnh) nhưng tải chậm cho 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 có thể có vẻ như tải nhanh hơn (nếu trang đó tải nội dung tăng tiến thay vì đợi đến khi hoàn tất để hiển thị nội dung).
- Một trang web có thể dường như tải nhanh nhưng sau đó phản hồi chậm (hoặc không phản hồi) với hoạt động 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 nói chính xác và đề cập đến hiệu suất theo chỉ số. Các tiêu chí khách quan có thể được đo lường bằng số liệu, nhưng điều quan trọng là bạn phải đảm bảo rằng các chỉ số bạn đang đo lường là hữu ích.
Xác định chỉ số
Trước đây, hiệu suất web được đo lường bằng sự kiện load. Tuy nhiên, mặc dù load là một khoảnh khắc được xác định rõ trong vòng đời của trang, nhưng khoảnh khắc đó 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 "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ị bất kỳ nội dung nào 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 trải nghiệm tải trang của người dùng.
Trong vài năm qua, các thành viên của nhóm Chrome (cộng tác với Nhóm làm việc về hiệu suất web của W3C) đã nỗ lực chuẩn hoá một bộ API và chỉ số mới để đo lường chính xác hơn trải nghiệm của người dùng về hiệu suất của một trang web.
Để đảm bảo các chỉ số phù hợp với người dùng, chúng tôi xây dựng các chỉ số đó dựa trên một số câu hỏi chính:
| Điều này có xảy ra không? | Quá trình điều hướng có bắt đầu thành công không? Máy chủ đã phản hồi chưa? |
| Thông tin này có hữu ích không? | Có đủ nội dung hiển thị để người dùng có thể tương tác với nội dung đó không? |
| Trang web có thể sử dụng được không? | Người dùng có thể tương tác với trang hay trang đang bận? |
| Trải nghiệm có vui vẻ không? | Các lượt tương tác có diễn ra suôn sẻ và tự nhiên, không bị giật không? |
Cách đo lường 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ác công cụ để mô phỏng quá trình tải trang trong một môi trường nhất quán và có kiểm soát
- Trên thực tế: trên những người dùng thực tế đang tải và tương tác với trang
Không có lựa chọn nào tốt hơn hay kém hơn lựa chọn kia. Trên thực tế, bạn thường nê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 phát hành tính năng chính thức, bạn không thể đo lường các đặc điểm hiệu suất của tính năng đó trên người dùng thực tế. Vì vậy, cách tốt nhất để ngăn chặn sự suy giảm hiệu suất là kiểm thử tính năng trong phòng thí nghiệm trước khi phát hành.
Trong trường hợp thực tế
Mặt khác, mặc dù việc kiểm thử trong phòng thí nghiệm là một chỉ số đại diện hợp lý cho hiệu suất, nhưng không nhất thiết phản ánh trải nghiệm thực tế của người dùng trên trang web của bạn.
Hiệu suất của một trang web có thể thay đổi đáng kể dựa trên khả năng của thiết bị và tình trạng mạng của người dùng. Tốc độ cũng có thể thay đổi tuỳ thuộc vào việc người dùng có đang tương tác với trang hay không (hoặc cách người dùng tương tác).
Quá trình tải trang cũng không phải lúc nào cũng có thể xác định trước. 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ác đặc điểm hiệu suất khác nhau giữa người dùng. Kiểm thử trong phòng thí nghiệm sẽ không ghi nhận được những khác biệt đó.
Cách duy nhất để thực sự biết hiệu suất của trang web đối với người dùng là đo lường hiệu suất của trang web khi người dùng tải và tương tác với trang web đó. Loại hình đo lường này thường được gọi là Theo dõi người dùng thực (RUM).
Các loại chỉ số
Có một số loại chỉ số khác liên quan đến cách người dùng cảm nhận về hiệu suất.
- Tốc độ tải được cảm nhận: tốc độ tải và hiển thị tất cả các thành phần hình ảnh của trang trên màn hình.
- Khả năng phản hồi khi tải: tốc độ tải và thực thi bất kỳ mã JavaScript bắt buộc nào để các thành phần phản hồi nhanh chóng với hoạt động tương tác của người dùng
- Khả năng phản hồi trong thời gian chạy: sau khi tải trang, trang có thể phản hồi tương tác của người dùng nhanh như thế nào.
- Tính ổn định về hình ảnh: các phần tử trên trang có thay đổi theo cách mà người dùng không mong muốn và có thể gây cản trở hoạt động tương tác của họ không?
- Mượt mà: hiệu ứng chuyển cảnh và ảnh động có hiển thị ở tốc độ khung hình nhất quán và chuyển đổi liền mạch 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, chắc hẳn bạn đã hiểu rõ rằng không có chỉ số nào đủ để nắm bắt tất cả các đặc điểm hiệu suất của một trang.
Các chỉ số quan trọng cần đo lường
- Hiển thị nội dung đầu tiên (FCP): đo lường thời gian từ khi trang bắt đầu tải đến khi bất kỳ phần nào của nội dung trang được kết xuất trên màn hình. (lab, field)
- Thời gian hiển thị nội dung lớn nhất (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 được hiển thị trên màn hình. (lab, field)
- Lượt tương tác đến 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 trên trang, đồng thời dựa trên số lượt tương tác, chọn độ trễ tương tác tệ nhất của trang (hoặc gần với độ trễ cao nhất) làm một giá trị duy nhất, đại diện để mô tả khả năng phản hồi tổng thể của trang. (lab, field)
- Tổng thời gian chặn (TBT): đo lường tổng thời gian từ thời điểm Hiển thị nội dung đầu tiên (FCP) đến Thời điểm tương tác (TTI), trong đó luồng chính bị chặn đủ lâu để ngăn khả năng phản hồi hoạt động đầu vào. (lab)
- Đ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ả các lần thay đổi bố cục không mong muốn xảy ra trong khoảng thời gian từ khi trang bắt đầu tải đến khi trạng thái vòng đời của trang thay đổi thành ẩn. (lab, field)
- Thời gian cho byte đầu tiên (TTFB): đo lường thời gian 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ẽ ra mắt các chỉ số mới để bổ sung cho những khía cạnh còn thiếu. Tuy nhiên, trong một số trường hợp khác, những chỉ số phù hợp 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ên rất hữu ích để hiểu được đặc điểm hiệu suất của hầu hết các trang web trên web. Các chỉ số này cũng hữu ích khi có một bộ chỉ số chung để các trang web so sánh hiệu suất của mình với đối thủ cạnh tranh.
Tuy nhiên, đôi khi, một trang web cụ thể có những đặc điểm riêng biệt khiến bạn cần thêm các chỉ số khác để nắm bắt toàn bộ thông tin về hiệu suất. Ví dụ: chỉ số LCP dùng để đo lường thời điểm nội dung chính của trang tải xong, nhưng có thể có trường hợp phần tử lớn nhất không phải là nội dung chính của trang, do đó, LCP có thể không liên quan.
Để 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:
- User Timing API
- Long Tasks API
- API Khung ảnh động dài
- Element Timing API
- Navigation Timing API
- Resource Timing API
- 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ác đặc điểm hiệu suất dành riêng cho trang web của bạn.