Web Vitals

Tối ưu hoá chất lượng trải nghiệm người dùng là chìa khoá cho 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, Các 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 chất lượng cao cho người dùng trên web.

Trong những năm qua, Google đã cung cấp một số công cụ để đ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 bắt kịp sự phong phú của cả công cụ và chỉ số đều rất khó bắt kịp.

Chủ sở hữu trang web không cần phải là chuyên gia về hiệu suất để hiểu được chất lượng trải nghiệm mà họ mang đến cho người dùng. Mục đích của sáng kiến Các chỉ số quan trọng về trang web là đơn giản hoá bối cảnh và giúp các trang web tập trung vào chỉ số quan trọng nhất, đó là Các chỉ số quan trọng về 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 nhóm các Chỉ số quan trọng về trang web áp dụng cho tất cả các trang web. Các chỉ số quan trọng về trang web này sẽ đượ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ố quan trọng chính của trang web thể hiện một khía cạnh riêng biệt trong trải nghiệm người dùng, có thể đo lường được trong thực tế và phản ánh trải nghiệm thực tế, dẫn đến một kết quả thiết yếu lấy người dùng làm trung tâm.

Các chỉ số tạo nên Các chỉ số quan trọng về trang web sẽ phát triển theo thời gian. Bộ quy tắc hiện tại cho năm 2020 tập trung vào 3 khía cạnh trải nghiệm người dùng là tải, khả năng tương tácđộ ổn định của 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 Thời gian hiển thị nội dung lớn nhất Đề xuất về ngưỡng lượt tương tác đến nội dung hiển thị tiếp theo Điểm số đề 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 những chỉ số này đối với hầu hết người dùng, một ngưỡng tốt để đ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à máy tính để bàn.

Các công cụ đánh giá mức độ tuân thủ Các chỉ số quan trọng về trang web nên xem xét việc một trang đạt nếu đáp ứng các mục tiêu đề xuất ở phân vị thứ 75 đối với cả 3 chỉ số Chỉ số quan trọng chính của trang web.

Vòng đời

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

3 giai đoạn trong vòng đời của các chỉ số Các chỉ số quan trọng về trang web, được minh hoạ dưới dạng chuỗi ba vạch. 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 Các chỉ số quan trọng về trang web.

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

  • Chỉ số thử nghiệm là Các chỉ số quan trọng về trang web tiềm năng. Các chỉ số này có thể vẫn đang 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.
  • Các chỉ số đang chờ xử lý là Các chỉ số quan trọng về trang web trong tương lai, đã vượt qua giai đoạn thử nghiệm và phản hồi, đồng thời có tiến trình rõ ràng để trở nên ổn định.
  • Chỉ số ổn định là bộ Các chỉ số quan trọng về trang web hiện tại mà Chrome coi là thiết yếu để 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 ở những giai đoạn sau đây trong vòng đời:

  • LCP (LCP): Chính thức
  • CLS: Ổn định
  • INP: Ổn định

Thử nghiệm

Khi một chỉ số ban đầu được phát triển và xuất hiện trong hệ sinh thái, nó đượ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à khám phá vấn đề cần giải quyết và có thể lặp lại những chỉ số trước đó có thể chưa giải quyết được. Ví dụ: ban đầu, chúng tôi phát triển Lượt tương tác với Nội dung hiển thị tiếp theo (INP) dưới dạng một chỉ số thử nghiệm để giải quyết các vấn đề về hiệu suất trong thời gian chạy xuất hiện trên web một cách toàn diện hơn so với Thời gian phản hồi lần tương tác đầu tiên (FID).

Giai đoạn thử nghiệm của vòng đời Các chỉ số quan trọng về 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à tìm hiểu những 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 đóng vai trò 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ả, chỉ số đó sẽ trở thành chỉ số đang chờ xử lý. Ví dụ: INP đã được nâng cấp từ trạng thái thử nghiệm sang trạng thái đang chờ xử lý vào năm 2023 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 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 bạn hoàn tất chỉ số đề xuất Chỉ số quan trọng chính của trang web, chỉ số đó sẽ trở thành chỉ số ổn định. Đây là thời điểm chỉ số này có thể trở thành Chỉ số quan trọng chính của trang web.

Các chỉ số ổn định được hỗ trợ tích cực và có thể chịu sự điều chỉnh của các bản sửa lỗi cũng như thay đổi về định nghĩa. Các chỉ số cho Các chỉ số quan trọng về trang web ổn định sẽ chỉ thay đổi 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 mọi quy trình đánh giá.

Các công cụ đo lường và báo cáo Các chỉ số quan trọng về trang web

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

Các công cụ tại chỗ để đ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, ẩn danh cho từng Chỉ số quan trọng chính của trang web. Dữ liệu này giú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 trên các trang theo cách thủ công, đồng thời hỗ trợ những công cụ như PageSpeed Insightsbáo cáo Các chỉ số quan trọng về trang web của Search Console.

  LCP (Thời gian hiển thị nội dung lớn nhất) INP CLS (Mức thay đổi bố cục tích luỹ)
Báo cáo trải nghiệm người dùng trên Chrome
PageSpeed Insights
Search Console (báo cáo Các chỉ số quan trọng về trang web)

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

Đ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 bằng các API web tiêu chuẩn.

Cách dễ nhất để đo lường tất cả Các chỉ số quan trọng về trang web là sử dụng thư viện JavaScript web-vitals, một trình bao bọc nhỏ, sẵn sàng cho việc sản xuất xung quanh các API web cơ bản. Trình bao bọc này sẽ đo lường từng chỉ số theo cách khớp chính xác với cách những chỉ số đó được tất cả công cụ của Google nêu trên báo cáo.

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 đầy đủ 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 để sử dụng thư viện web-vitals nhằm đo lường và gửi dữ liệu Các chỉ số quan trọng về trang web đến điểm cuối của Analytics, bước tiếp theo là tổng hợp và báo cáo về dữ liệu đó để xem các trang của bạn có đáp ứng các ngưỡng đề xuất cho ít nhất 75% số 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ợ Các chỉ số quan trọng về trang web, nhưng ngay cả những nhà cung cấp đó cũng không nên có các tính năng chỉ số tuỳ chỉnh cơ bản để có thể đo lường Các chỉ số quan trọng về trang web trong công cụ của họ.

Một ví dụ trong số 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 bằng Google Analytics. Để xem hướng dẫn cách đo lường Các chỉ số quan trọng về 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 bất kỳ mã nào bằng tiện ích Các chỉ số quan trọng về trang web của Chrome. 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ị chúng 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 bạn, trang web của đối thủ cạnh tranh và tổng thể trang web.

  LCP (Thời gian hiển thị nội dung lớn nhất) INP CLS (Mức thay đổi bố cục tích luỹ)
chỉ số quan trọng trên web
Tiện ích Chỉ số quan trọng của trang web

Nếu muốn đo lường trực tiếp những chỉ số này bằng API web cơ bản, nhà phát triển có thể tham khảo những hướng dẫn sau đây về chỉ số để nắm được 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á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 Các chỉ số quan trọng về 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ù tất cả Các chỉ số quan trọng về trang web đều là các chỉ số thực địa trước tiên và quan trọng nhất, nhưng nhiều chỉ số trong số này cũng có thể đo lường được trong phòng thí nghiệm.

Đo lường trong phòng thí nghiệm là cách tốt nhất để kiểm tra 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 sự hồi quy hiệu suất trước khi chúng xảy ra.

Bạn có thể sử dụng các 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 (Mức thay đổi bố cục tích luỹ)
Công cụ của Chrome cho nhà phát triển (sử dụng TBT)
Lighthouse (sử dụng TBT)

Mặc dù phương pháp đo lường trong phòng thí nghiệm là một phần thiết yếu trong việc mang lại trải nghiệm chất lượng cao 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 trang web có thể thay đổi đáng kể dựa trên khả năng của thiết bị, đ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ỗi chỉ số Các chỉ số quan trọng về trang web đều có thể chịu ảnh hưởng của điểm số tương tác của người dùng. Chỉ phương pháp đo lường tại hiện trường mới có thể chụp được chính xác bức ảnh hoàn chỉnh.

Đề 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 cho từng Chỉ số quan trọng chính của 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 và mang lại trải nghiệm chất lượng cao cho người dùng, nhưng vẫn còn các chỉ số hỗ trợ khác.

Các chỉ số khác này có thể đóng vai trò là chỉ số đại diện hoặc chỉ số bổ sung cho 3 Chỉ số quan trọng chính của trang web, giúp ghi lại phần lớn trải nghiệm hoặc hỗ trợ chẩn đoán một vấn đề cụ thể.

Ví dụ: các chỉ số Thời gian cho byte đầu tiên (TTFB)Thời gian hiển thị nội dung đầu tiên (FCP) là hai khía cạnh quan trọng của trải nghiệm tải, và cả hai đều hữu ích trong việc chẩn đoán các sự cố với 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ố phòng thí nghiệm rất quan trọng trong việc phát hiện và chẩn đoán các vấn đề về tính tương tác tiềm ẩn có thể ảnh hưởng đến INP. Tuy nhiên, báo cáo này không thuộc bộ Các chỉ số quan trọng về trang web vì chúng không đo lường được theo trường và cũng không phản ánh kết quả lấy người dùng làm trung tâm.

Thay đổi đối với Các chỉ số quan trọng về 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 mà nhà phát triển hiện có để đo lường chất lượng trải nghiệm trên web. Tuy nhiên, những tín hiệu này không hoàn hảo và các điểm cải tiến hoặc bổ sung trong tương lai cần được dự kiến.

Các chỉ số quan trọng về trang web có liên quan đến mọi trang web và xuất hiện nổi bật trên 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 trên diện rộng. Do đó, nhà phát triển cần đảm bảo định nghĩa và ngưỡng của Các chỉ số quan trọng về trang web ổn định, cũng như nhận được thông báo trước và tần suất hằng năm mà họ có thể dự đoán được.

Các chỉ số quan trọng khác về trang web thường phụ thuộc vào bối cảnh hoặc công cụ và có thể mang tính thử nghiệm nhiều hơn so với Các chỉ số quan trọng về trang web. Do đó, định nghĩa và ngưỡng của những thuật ngữ này có thể thay đổi theo 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 lại rõ ràng trong tài liệu CHANGELOG công khai này.