Web Vitals

Việc tối ưu hoá chất lượng của trải nghiệm người dùng là yếu tố then chốt mang đến thành công lâu dài của bất kỳ trang web nào trên web. Cho dù bạn là chủ doanh nghiệp, nhà tiếp thị hay nhà phát triển, Chỉ số quan trọng về trang web đều có thể giúp bạn định lượng trải nghiệm trên trang web của mình và xác định các cơ hội cải thiện.

Tổng quan

Các chỉ số quan trọng về trang web là một sáng kiến của Google nhằm cung cấp hướng dẫn thống nhất về các tín hiệu chất lượng cần thiết để mang lại trải nghiệm tuyệt vời cho người dùng trên web.

Những năm qua, Google đã cung cấp một số công cụ giúp đo lường và báo cáo về hiệu suất. Một số nhà phát triển là chuyên gia trong việc sử dụng các công cụ này, trong khi những nhà phát triển khác nhận thấy rằng việc cập nhật cả hai công cụ và chỉ số này là quá khó khăn.

Chủ sở hữu trang web không cần phải là chuyên gia về hiệu suất mới có thể hiểu được chất lượng trải nghiệm mà họ mang đến cho người dùng. Sáng kiến Chỉ số quan trọng về trang web nhằm mục đích đơn giản hoá bối cảnh và giúp các trang web tập trung vào những chỉ số quan trọng nhất, đó là Chỉ số quan trọng chính của trang web.

Các chỉ số quan trọng về trang web

Các chỉ số quan trọng về trang web là một tập hợp con của Các chỉ số quan trọng về trang web áp dụng cho mọi trang web, phải được tất cả chủ sở hữu trang web đo lường và sẽ xuất hiện trên mọi công cụ của Google. Mỗi chỉ số Chỉ số quan trọng chính của trang web thể hiện một khía cạnh riêng biệt của trải nghiệm người dùng, có thể đo lường tại hiện trường và phản ánh trải nghiệm thực tế về một kết quả quan trọng lấy người dùng làm trung tâm.

Các chỉ số tạo nên Chỉ số quan trọng chính của trang web sẽ phát triển theo thời gian. Bộ kế hoạch hiện tại cho năm 2020 tập trung vào 3 khía cạnh về trải nghiệm người dùng là tải, tương tácđộ ổn định về hình ảnh, đồng thời bao gồm các chỉ số sau (và các ngưỡng tương ứng):

Đề xuất về ngưỡng Nội dung lớn nhất hiển thị Đề xuất về ngưỡng Lượt tương tác đến nội dung hiển thị tiếp theo Đề xuất tích luỹ về ngưỡng Thay đổi bố cục

Để đảm bảo bạn đạt được mục tiêu được đề xuất cho các chỉ số này cho hầu hết người dùng, ngưỡng phù hợp để đo lường là phân vị thứ 75 của lượt tải trang, được phân đoạn trên thiết bị di động và thiết bị máy tính.

Các công cụ đánh giá việc tuân thủ Chỉ số quan trọng chính của trang web nên xem xét việc trang đó có đạt được các mục tiêu được đề xuất tại phân vị thứ 75 đối với cả ba chỉ số Core Web Vitals hay không.

Vòng đời

Các chỉ số trên kênh Chỉ số quan trọng chính của trang web sẽ trải qua vòng đời gồm 3 giai đoạn: thử nghiệm, đang chờ xử lý và ổn định.

Ba giai đoạn trong vòng đời của các chỉ số Core Web Vitals, được minh hoạ dưới dạng một chuỗi ba dấu chữ V. Từ trái sang phải, các giai đoạn là Thử nghiệm, Đang chờ xử lý và Ổn định.
Các giai đoạn trong vòng đời của Chỉ số quan trọng chính của trang web.

Mỗi giai đoạn được thiết kế để báo hiệu cho nhà phát triển về cách họ nên suy nghĩ về từng chỉ số:

  • Chỉ số thử nghiệm là các Chỉ số quan trọng chính của trang web tiềm năng. Các chỉ số này có thể vẫn trải qua những thay đổi đáng kể tuỳ thuộc vào quá trình thử nghiệm và ý kiến phản hồi của cộng đồng.
  • Chỉ số đang chờ xử lý là các Chỉ số quan trọng về trang web trong tương lai. Các chỉ số này đã vượt qua giai đoạn thử nghiệm và phản hồi, đồng thời có tiến trình ổn định để tiến hành ổn định.
  • Chỉ số ổn định là bộ Chỉ số quan trọng chính của trang web hiện tại mà Chrome coi là cần thiết để mang lại trải nghiệm tuyệt vời cho người dùng.

Các chỉ số quan trọng về trang web đang ở các giai đoạn sau trong vòng đời:

  • LCP: Ổn định
  • CLS: Ổn định
  • INP: Ổn định

Thử nghiệm

Khi một chỉ số bắt đầu được phát triển và đưa vào hệ sinh thái, chỉ số đó được coi là chỉ số thử nghiệm.

Mục đích của giai đoạn thử nghiệm là để đánh giá mức độ phù hợp của một chỉ số, trước tiên là tìm hiểu vấn đề cần giải quyết, sau đó có thể lặp lại những thử nghiệm mà các chỉ số trước đó có thể chưa giải quyết được. Ví dụ: Ban đầu, Lượt tương tác với nội dung hiển thị tiếp theo (INP) được phát triển dưới dạng một chỉ số thử nghiệm để giải quyết một cách toàn diện hơn các vấn đề về hiệu suất trong thời gian chạy trên web so với Độ trễ đầu vào đầu tiên (FID).

Giai đoạn thử nghiệm trong vòng đời của Chỉ số quan trọng chính của trang web cũng nhằm mang lại sự linh hoạt trong quá trình phát triển một chỉ số bằng cách xác định các lỗi và thậm chí là khám phá các thay đổi đối với định nghĩa ban đầu. Đây cũng là giai đoạn mà ý kiến phản hồi của cộng đồng quan trọng nhất.

Đang chờ xử lý

Khi nhóm Chrome xác định rằng một chỉ số thử nghiệm đã nhận được đủ ý kiến phản hồi và chứng minh được tính hiệu quả của chỉ số đó, thì chỉ số đó sẽ trở thành chỉ số đang chờ xử lý. Ví dụ: Vào năm 2023, INP được quảng bá từ trạng thái thử nghiệm sang trạng thái đang chờ xử lý với mục đích cuối cùng là gỡ bỏ FID.

Giai đoạn này sẽ giữ lại các chỉ số đang chờ xử lý trong tối thiểu 6 tháng để hệ sinh thái có thời gian thích ứng. Ý kiến phản hồi của cộng đồng vẫn là một khía cạnh quan trọng trong giai đoạn này vì ngày càng có nhiều nhà phát triển bắt đầu sử dụng chỉ số này.

Ổn định

Khi chỉ số đề xuất Chỉ số quan trọng chính của trang web được hoàn tất, chỉ số đó sẽ trở thành chỉ số ổn định. Đây là thời điểm mà chỉ số có thể trở thành Chỉ số quan trọng chính của trang web.

Chỉ số ổn định được tích cực hỗ trợ và có thể có các bản sửa lỗi cũng như thay đổi về định nghĩa. Các chỉ số quan trọng chính của trang web ổn định sẽ không thay đổi quá một lần mỗi năm. Mọi thay đổi đối với Chỉ số quan trọng chính của trang web sẽ được thông báo rõ ràng trong tài liệu chính thức của chỉ số đó, cũng như trong nhật ký thay đổi của chỉ số. Các chỉ số quan trọng về trang web cũng được đưa vào trong mọi hoạt động đánh giá.

Công cụ đo lường và báo cáo Chỉ số quan trọng chính của trang web

Google tin rằng Chỉ số quan trọng chính của trang web có vai trò quan trọng đối với mọi trải nghiệm web. Do đó, họ cam kết hiển thị các chỉ số này trong tất cả các công cụ phổ biến của mình. Các phần sau đây trình bày chi tiết về những công cụ hỗ trợ Chỉ số quan trọng chính của trang web.

Công cụ tại hiện trường để đo lường Các chỉ số quan trọng về trang web

Báo cáo trải nghiệm người dùng trên Chrome thu thập dữ liệu đo lường người dùng thực và ẩn danh cho từng Chỉ số quan trọng chính của trang web. Dữ liệu này cho phép chủ sở hữu trang web nhanh chóng đánh giá hiệu suất mà không cần yêu cầu họ đo lường số liệu phân tích theo cách thủ công trên trang của họ. Ngoài ra, dữ liệu này còn hỗ trợ những công cụ như PageSpeed Insightsbáo cáo Chỉ số quan trọng chính của trang web của Search Console.

  LCP (Thời gian hiển thị nội dung lớn nhất) INP CLS (Điểm số tổng hợp về mức thay đổi bố cục)
Báo cáo trải nghiệm người dùng trên Chrome
Thông tin chi tiết về tốc độ trang
Search Console (báo cáo Chỉ số quan trọng chính của trang web)

Dữ liệu do Báo cáo trải nghiệm người dùng trên Chrome cung cấp giúp chúng tôi đánh giá hiệu suất của trang web một cách nhanh chóng. Tuy nhiên, báo cáo này không cung cấp dữ liệu đo từ xa chi tiết theo lượt xem trang thường cần thiết để chẩn đoán, theo dõi và phản ứng nhanh với sự hồi quy. Do đó, các trang web nên thiết lập tính năng theo dõi người dùng thực của riêng mình.

Đo lường Các chỉ số quan trọng về trang web trong JavaScript

Bạn có thể đo lường từng Chỉ số quan trọng chính của trang web trong JavaScript thông qua các API web chuẩn.

Cách dễ nhất để đo lường tất cả các Chỉ số quan trọng chính của trang web là sử dụng thư viện JavaScript web-vitals. Đây là một trình bao bọc nhỏ đã sẵn sàng cho việc phát hành công khai xung quanh các API web cơ bản. Thư viện này đo lường từng chỉ số theo cách khớp chính xác với cách các chỉ số được báo cáo trong tất cả các công cụ của Google được liệt kê trước đó.

Với thư viện web-vitals, bạn có thể đo lường từng chỉ số bằng cách gọi một hàm duy nhất (xem tài liệu để biết toàn bộ thông tin về cách sử dụngAPI):

import {onCLS, onINP, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

Sau khi định cấu hình trang web của mình để sử dụng thư viện web-quan trọng nhằm đo lường và gửi dữ liệu Chỉ số quan trọng chính của trang web đến một điểm cuối phân tích, bước tiếp theo là tổng hợp và báo cáo dữ liệu đó để xem liệu các trang của bạn có đáp ứng các ngưỡng được đề xuất đối với ít nhất 75% lượt truy cập trang hay không.

Mặc dù một số nhà cung cấp dịch vụ phân tích đã tích hợp sẵn tính năng hỗ trợ cho các chỉ số Core Web Vitals, nhưng ngay cả những nhà cung cấp đó không nên có các tính năng cơ bản về chỉ số tuỳ chỉnh giúp bạn đo lường Chỉ số quan trọng chính của trang web trong công cụ của họ.

Một ví dụ cho trường hợp này là Báo cáo Các chỉ số quan trọng về trang web, cho phép chủ sở hữu trang web đo lường Các chỉ số quan trọng về trang web thông qua Google Analytics. Để xem hướng dẫn về cách đo lường Chỉ số quan trọng chính của trang web bằng các công cụ phân tích khác, hãy xem bài viết Các phương pháp hay nhất để đo lường Các chỉ số quan trọng về trang web tại hiện trường.

Bạn cũng có thể báo cáo về từng Chỉ số quan trọng chính của trang web mà không cần viết mã bằng cách sử dụng Tiện ích Chỉ số quan trọng chính của trang web. Tiện ích này sử dụng thư viện web-vitals để đo lường từng chỉ số trong số này và hiển thị các chỉ số này cho người dùng khi họ duyệt web.

Tiện ích này có thể hữu ích trong việc tìm hiểu hiệu suất của trang web của riêng bạn, trang web của đối thủ cạnh tranh và web nói chung.

  LCP (Thời gian hiển thị nội dung lớn nhất) INP CLS (Điểm số tổng hợp về mức thay đổi bố cục)
web-vitals
Tiện ích Chỉ số quan trọng của trang web

Những nhà phát triển muốn đo lường trực tiếp các chỉ số này bằng các API web cơ bản có thể sử dụng các hướng dẫn về chỉ số sau đây để biết thông tin chi tiết về cách triển khai:

Để được hướng dẫn thêm về cách đo lường những chỉ số này bằng các dịch vụ phân tích phổ biến hoặc công cụ phân tích nội bộ của riêng bạn, hãy xem bài viết Các phương pháp hay nhất để đo lường Chỉ số quan trọng của trang web tại hiện trường.

Các công cụ trong phòng thí nghiệm để đo lường Các chỉ số quan trọng về trang web

Mặc dù mọi Chỉ số quan trọng về trang web đều là chỉ số thực tế trước hết, nhưng bạn cũng có thể đo lường nhiều chỉ số trong phòng thí nghiệm.

Đo lường trong phòng thí nghiệm là cách tốt nhất để kiểm thử hiệu suất của các tính năng trong quá trình phát triển trước khi phát hành cho người dùng. Đây cũng là cách tốt nhất để phát hiện lỗi hồi quy hiệu suất trước khi chúng xảy ra.

Bạn có thể dùng những công cụ sau đây để đo lường Các chỉ số quan trọng về trang web trong môi trường phòng thí nghiệm:

  LCP (Thời gian hiển thị nội dung lớn nhất) INP CLS (Điểm số tổng hợp về mức thay đổi bố cục)
Công cụ của Chrome cho nhà phát triển (hãy dùng TBT)
Ngọn hải đăng (hãy dùng TBT)

Mặc dù kết quả đo lường trong phòng thí nghiệm là một phần thiết yếu để mang đến trải nghiệm tuyệt vời, nhưng tính năng này không thay thế cho việc đo lường tại hiện trường.

Hiệu suất của một trang web có thể thay đổi đáng kể dựa trên khả năng thiết bị của người dùng, điều kiện mạng, những quy trình khác có thể đang chạy trên thiết bị và cách họ tương tác với trang. Trên thực tế, mức độ tương tác của người dùng có thể ảnh hưởng đến từng chỉ số trong Chỉ số quan trọng chính của trang web. Chỉ có phép đo tại hiện trường mới có thể chụp được toàn bộ bức ảnh chính xác.

Các đề xuất để cải thiện điểm số của bạn

Những hướng dẫn sau đây đưa ra đề xuất cụ thể về cách tối ưu hoá các trang của bạn theo từng Chỉ số quan trọng về trang web:

Các chỉ số quan trọng khác về trang web

Mặc dù Các chỉ số quan trọng về trang web là các chỉ số quan trọng để hiểu rõ và mang lại trải nghiệm tuyệt vời cho người dùng, nhưng vẫn còn những chỉ số hỗ trợ khác.

Những chỉ số khác này có thể đóng vai trò là proxy (hoặc chỉ số bổ sung cho 3 Chỉ số quan trọng chính của trang web) nhằm nắm bắt phần lớn trải nghiệm hoặc hỗ trợ chẩn đoán một vấn đề cụ thể.

Ví dụ: chỉ số Thời gian để tải byte đầu tiên (TTFB)Nội dung đầu tiên hiển thị (FCP) đều là hai khía cạnh quan trọng của trải nghiệm tải và đều hữu ích trong việc chẩn đoán vấn đề về LCP (thời gian phản hồi của máy chủ chậm hoặc tài nguyên chặn hiển thị tương ứng).

Tương tự, một chỉ số như Tổng thời gian chặn (TBT) là một chỉ số trong phòng thí nghiệm cũng đóng vai trò quan trọng trong việc phát hiện và chẩn đoán các vấn đề tiềm ẩn về tương tác có thể ảnh hưởng đến INP. Tuy nhiên, đây không phải là một phần trong tập hợp Chỉ số quan trọng chính của trang web vì chúng không thể đo lường được trên trường và cũng không phản ánh kết quả lấy người dùng làm trung tâm.

Các thay đổi đối với Chỉ số quan trọng của trang web

Các chỉ số quan trọng về trang web và Các chỉ số quan trọng về trang web là những tín hiệu tốt nhất hiện có dành cho nhà phát triển để đo lường chất lượng trải nghiệm trên web. Tuy nhiên, các tín hiệu này chưa hoàn hảo và chúng tôi có thể sẽ cải tiến hoặc bổ sung trong tương lai.

Chỉ số quan trọng chính của trang web áp dụng cho mọi trang web và xuất hiện nổi bật trong các công cụ có liên quan của Google. Những thay đổi đối với những chỉ số này sẽ có tác động sâu rộng; do đó, nhà phát triển cần phải đảm bảo các định nghĩa và ngưỡng của Chỉ số quan trọng chính của trang web sẽ ổn định, đồng thời các bản cập nhật phải được thông báo trước và theo tần suất hằng năm có thể dự đoán được.

Các Chỉ số quan trọng khác về trang web thường dựa trên bối cảnh hoặc công cụ cụ thể, đồng thời có thể mang tính thử nghiệm cao hơn so với Chỉ số quan trọng chính của trang web. Do đó, các định nghĩa và ngưỡng của chúng có thể thay đổi với tần suất lớn hơn.

Đối với tất cả các Chỉ số quan trọng về trang web, các thay đổi sẽ được ghi nhận rõ ràng trong tệp CHANGELOG công khai này.