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 giúp trang web "nhanh chóng", chúng tôi muốn nói đến điều 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 có 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 chính xác, nhưng một trang web có thể có vẻ tải nhanh hơn nếu tải nội dung dần dần, thay vì đợi đến cuối trang để hiển thị bất kỳ nội dung nào.
- Một trang web có thể tải nhanh, nhưng sau đó phản hồi chậm hoặc hoàn toàn không phản hồi tương tác của người dùng.
Khi nói về hiệu suất, điều quan trọng là phải chính xác và đề cập đến hiệu suất về metrics (các tiêu chí khách quan có thể đo lường được định lượng). Tuy nhiên, điều quan trọng là phải đảm bảo rằng các chỉ số bạn đang đo lường hữu ích.
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 một trang, nhưng khoảnh khắc đó không nhất thiết tương ứng với bất cứ điều gì mà người dùng quan tâm.
Ví dụ: một 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ị 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 tải.
Trong vài năm qua, các thành viên của nhóm Chrome cùng với Nhóm hoạt động về hiệu suất web của 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 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 sẽ trình bày chúng xoay quanh một số câu hỏi chính:
| Điều này có đang diễn 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? |
| Công cụ này có hữu ích không? | Nội dung đã hiển thị đủ để người dùng có thể tương tác với nội dung đó chưa? |
| Công cụ này có hữu ích không? | Người dùng có thể tương tác với trang hoặc trang có bận không? |
| Sản phẩm có thú vị không? | Các hoạt động tương tác có mượt mà và tự nhiên, không bị trễ và giật không? |
Cách đo lường các chỉ số
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 hoạt động tải trang trong một môi trường nhất quán, được kiểm soát
- Trong hiện trường: trên người dùng thực sự đang tải và tương tác với trang
Không có lựa chọn nào trong số này tốt hơn hoặc tệ hơn lựa chọn còn lại. Trên thực tế, thường thì bạn muốn sử dụng cả hai để đảm bảo hiệu suất tốt.
Ở phòng thí nghiệm
Việc thử nghiệm 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, không thể đo lường đặc điểm hiệu suất của chúng trên người dùng thực. Vì vậy, việc kiểm thử 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ự hồi quy về hiệu suất.
Trên thực địa
Mặt khác, mặc dù hoạt động kiểm thử trong phòng thí nghiệm là một proxy hợp lý cho hiệu suất nhưng không nhất thiết phản ánh trải nghiệm của tất cả người dùng trên trang web.
Hiệu suất của trang web có thể thay đổi đáng kể tuỳ theo điều kiện mạng và khả năng của thiết bị của người dùng. Tần suất này cũng có thể thay đổi tuỳ thuộc 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).
Việc tải trang không phải lúc nào cũng mang tính quyết định. Ví dụ: các trang web tải quảng cáo hoặc nội dung được cá nhân hoá có thể có các đặc điểm hiệu suất rất khác nhau giữa người dùng với người dùng. Thử nghiệm trong phòng thí nghiệm sẽ không ghi lại được những khác biệt đó.
Cách duy nhất để thực sự biết được trang web của bạn có hiệu suất 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 hình đ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ảm nhận của người dùng về hiệu suất:
- Tốc độ tải dự kiến: tốc độ một trang có thể tải và hiển thị tất cả các phần tử trực quan của trang đó lên màn hình.
- Khả năng phản hồi khi tải: tốc độ mà một trang có thể tải và thực thi bất kỳ mã JavaScript nào cần thiết để các thành phần phản hồi nhanh 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: tốc độ một trang có thể phản hồi hoạt động tương tác của người dùng sau khi tải.
- Độ ổ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 đợi và có khả năng ảnh hưởng đến hoạt động tương tác của họ hay không?
- Độ mượt: các hiệu ứng chuyển đổi và ảnh động có hiển thị với tốc độ khung hình nhất quán và di chuyển trơn tru từ trạng thái này sang trạng thái tiếp theo không?
Với tất cả các loại chỉ số hiệu suất này, hy vọng rằng rõ ràng là không có chỉ số nào là đủ để nắm bắt 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
- Hiển thị nội dung đầu tiên (FCP)
- Thời gian kể từ khi trang bắt đầu tải đến khi một phần bất kỳ của nội dung của trang hiển thị trên màn hình. (phòng thí nghiệm, trường)
- Thời gian hiển thị nội dung lớn nhất (LCP)
- Thời gian kể 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. (phòng thí nghiệm, trường)
- Lượt tương tác với nội dung hiển thị tiếp theo (INP)
- Độ trễ của mỗi lần nhấn, nhấp hoặc tương tác bằng bàn phím với trang. Dựa trên số lượt tương tác, chỉ số này chọn độ trễ tương tác kém nhất (hoặc gần nhất) của trang 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 trang. (phòng thí nghiệm, trường)
- Tổng thời gian chặn (TBT)
- Tổng thời gian từ FCP đến Thời gian tương tác (TTI), mà luồng chính bị chặn đủ lâu để ngăn phản hồi đầu vào. (phòng thí nghiệm)
- Điểm số tổng hợp về mức thay đổi bố cục (CLS)
- Điểm tích luỹ của tất cả những lần thay đổi bố cục không mong muốn xảy ra từ khi trang bắt đầu tải cho đến khi trạng thái vòng đời của trang thay đổi thành bị ẩn. (phòng thí nghiệm, trường)
- Thời gian cho byte đầu tiên (TTFB)
- 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. (phòng thí nghiệm, trường)
Danh sách này bao gồm các chỉ số đo lường nhiều khía cạnh về hiệu suất có liên quan đến người dùng, nhưng không bao gồm mọi chỉ số. Ví dụ: không đề cập đến khả năng phản hồi và độ mượt mà trong thời gian chạy.
Trong một số trường hợp, các chỉ số mới sẽ được giới thiệu để bao gồm những khía cạnh còn thiếu, nhưng trong các trường hợp khác, chỉ số hiệu quả nhất là 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 liệt kê ở đây là thông tin hữu ích để bạn nắm được thông tin chung về các đặc điểm hiệu suất của hầu hết các trang web trên web. Các bảng này cũng là cách hiệu quả để có bộ chỉ số phổ biến cho các trang web để so sánh hiệu suất của trang web đó với hiệu suất của các đối thủ cạnh tranh.
Tuy nhiên, đôi khi một trang web cụ thể có tính độc đáo theo cách nào đó và cần có thêm chỉ số để có được thông tin đầy đủ về hiệu suất. Ví dụ: chỉ số LCP được 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 có trong nội dung chính của trang, khiến LCP không liên quan.
Để giải quyết những trường hợp như vậy, Nhóm hoạt động 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 Tác vụ dài
- API Thời gian của phần tử
- API Navigation Timing
- Resource Timing API
- Thời gian của máy chủ
Hãy xem 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.