Vũ Thành Lâm

Hướng dẫn chuyên sâu về đo lường Core Web Vitals

5/5 - (1 bình chọn)

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã có hiệu quả như mong muốn? Khi nào bạn thấy được kết quả trong Google Search Console? Hãy cùng tìm hiểu nhé!


Google đã thông báo từ tháng 5 năm 2021 ( chỉnh sửa: tháng 6 năm 2021 ) rằng:  “Page Experience” là một phần của bảng xếp hạng các tìm kiếm. Nó được đo lường bằng một bộ số liệu có tên Core Web Vitals. Tôi chắc chắn rằng rất nhiều người trong chúng ta được yêu cầu đảm bảo rằng ta phải thông qua Core Web Vitals. Nhưng làm thế nào bạn có thể biết rằng mình đã thông qua? Việc trả lời câu hỏi này thực sự khó hơn bạn tưởng tượng. Bởi trong khi rất nhiều công cụ hiện nay đang giới thiệu các Core Web Vitals thì có rất nhiều khái niệm quan trọng và tương đối nhiều các chính sách cần hiểu. Ngay cả các công cụ của Google như PageSpeed ​​Insights và các báo cáo Core Web Vitals trong Google Search Console cũng đang cung cấp khá nhiều thông tin gây khó hiểu.

Tại sao và làm thế nào để chắc chắn rằng các bản sửa lỗi của bạn thực sự có hiệu lực? Bằng cách nào bạn mới có được một bức tranh tổng quan chính xác về Core Web Vitals? Theo dõi bài viết sau đây, tôi sẽ giải đáp cho bạn tất cả những thắc mắc khó nhằn này.


Contents

1. Core Web Vitals là gì? #

Core Web Vitals là tập hợp bộ ba số liệu được thiết kế để đo lường trải nghiệm cảm nhận của người dùng về sự nhanh hay chậm của một trang web, từ đó đưa ra các phản hồi tốt nhất. Các trang web nên nằm trong phạm vi Good (màu xanh lá cây) đối với cả ba Core Web Vitals để có được đầy đủ quyền lợi khi gia tăng xếp hạng. Khi vượt quá phần an toàn, các giá trị khác nhau của chỉ số Core Web Vitals trên hai trang có thể dẫn đến xếp hạng trải nghiệm khác nhau.

  The three Core Web Vitals metrics

2. Largest Contenful Paint (LCP) #

– LCP là thời gian tải hoàn tất của phần nội dung lớn nhất được hiển thị khi trang tải xong. Nó là phần mà người dùng quan tâm nhất, tồn tại dưới dạng hình ảnh biểu ngữ, một đoạn văn bản, v.v… Nó cũng là phần tử nội dung có kích cỡ lớn nhất trên trang, đồng thời là phần quan trọng nhất. LCP là một khái niệm tương đối mới song được xem như một thước đo chuẩn phản ánh thời điểm mà người dùng cảm thấy là trang đã được tải xong.

– LCP được biết đến là công cụ đo hiệu suất tải và là một proxy tốt đối với tất cả chỉ số cũ mà chúng tôi từng sử dụng (tức là Time to First Byte (TTFB), DOM Content Loaded, Start Render, Speed ​​Index) – nhưng bằng trải nghiệm của người dùng. Nó không bao gồm tất cả những thông tin được đề cập mà là một số liệu đơn giản hơn, báo hiệu một dấu hiệu tốt về việc tải trang.

3. First Input Delay (FID) #

– FID dùng để đo thời gian kể từ khi người dùng tương tác với một trang ( ví dụ: nhấp vào liên kết, nút…), cho đến khi trình duyệt đó có khả năng phản hồi với tương tác. Nếu tất cả nội dung được tải nhưng trang không phản hồi, thì đó sẽ là một trải nghiệm gây bực bội cho người dùng.

– Số liệu này không thể bị bắt chước bởi nó phụ thuộc vào thời điểm người dùng nhấp vào hoặc tương tác với một trang và có thống kê thời gian thực hiện.Tổng thời gian chặn (Total Blocking Time – TBT) là một proxy tốt cho FID khi sử dụng công cụ kiểm tra mà không có bất kỳ tương tác trực tiếp nào của người dùng, tuy vậy bạn vẫn nên chú ý đến Thời gian tương tác (Time to Interactive – TTI) khi thống kê FID.

4. Cumulative Layout Shifts (CLS) #

– CLS được thiết kế để đo độ ổn định trực quan của trang. Chắc hẳn tất cả chúng ta đều đã từng chọn một bài báo, bắt đầu đọc, và sau đó nội dung trên trang bị “xê dịch” xung quanh khi trang đã được tải hoàn tất. Điều này gây khó chịu cho người dùng vì thế nên hạn chế tối đa chúng. Tệ hơn là khi nút bạn định nhấp vào đột nhiên di chuyển và bạn phải nhấp vào một nút khác để thay thế! Dù vậy CLS đã cố gắng giải thích cho những thay đổi về bố cục này.

5. Lab và RUM #

– Một trong những ý chính cần hiểu về Core Web Vitals là chúng dựa trên số liệu hiện trường hoặc Chỉ số người dùng thực (RUM). Google sử dụng dữ liệu ẩn danh từ người dùng Chrome để làm các chỉ số phản hồi và cung cấp những dữ liệu này trong Báo cáo trải nghiệm người dùng Chrome (CrUX) . Dữ liệu ẩn danh đó dùng để đo lường ba số liệu trên, trong khi đó dữ liệu CrUX có sẵn trong một số công cụ bao gồm cả trong Google Search Console ở website của bạn.

– Các dữ liệu RUM đang được sử dụng là sự khác biệt thiết yếu vì một vài số liệu (ngoại trừ FID) đã có sẵn trong các công cụ hiệu suất web tổng hợp hoặc lab-based (dựa trên phòng thí nghiệm) như Lighthouse – vốn là yếu tố quan trọng trong việc theo dõi hiệu suất web của người dùng trong quá khứ. Những công cụ này chạy tải trang trên các mạng và thiết bị được mô phỏng, sau đó chúng sẽ cho bạn biết các chỉ số của lần chạy thử nghiệm đó.

– Việc chạy Lighthouse trên máy móc công suất cao và nhận được điểm tốt có thể không phản ánh được những gì người dùng trải nghiệm trong thế giới thực cũng như những gì Google sẽ dùng để đo trải nghiệm người dùng trên website của bạn. LCP phụ thuộc rất nhiều vào điều kiện mạng và tốc độ xử lý của các thiết bị đang sử dụng (nhiều người dùng đang sử dụng các thiết bị có công suất thấp hơn bạn nghĩ). Tuy nhiên, đối với nhiều website phương Tây, điện thoại của họ không có hiệu suất thấp như các công cụ Lighthouse mà chế độ di động đề xuất (chúng khá hạn chế). Vì vậy, bạn có thể nhận thấy trường dữ liệu xuất hiện trên thiết bị di động nhiều và tốt hơn so với các thử nghiệm được gợi ý (có một số cuộc thảo luận về việc thay đổi cài đặt di động của Lighthouse ).

Tương tự, FID phụ thuộc vào tốc độ bộ xử lý và cách thiết bị có thể xử lý tất cả nội dung mà ta gửi đến nó. Đó có thể là hình ảnh để xử lý, các yếu tố bố cục trên trang và cả JavaScript ta muốn gửi xuống trình duyệt .

– Về lý thuyết, CLS dễ dàng dùng để đo lường hơn so với các công cụ khác vì nó ít bị ảnh hưởng bởi các biến thể mạng và phần cứng. Do đó, bạn sẽ nghĩ rằng nó không phụ thuộc vào sự khác biệt giữa Lab và RUM – ngoại trừ một số điểm quan trọng sau:

Điều này gây ra nhiều nhầm lẫn khi trang tải có CLS thấp, nhưng điểm CLS tại trường lại cao hơn. Đó là do CLS gây ra bởi quá trình             cuộn hoặc do các thay đổi khác sau lần tải ban đầu mà các công cụ kiểm tra thường đo được.

Các công cụ điển hình như PageSpeed ​​Insights: dùng để đo lường thiết bị di động và máy tính để bàn. Nhưng những chiếc điện thoại           khác nhau có kích thước màn hình khác nhau và máy tính để bàn thì thường lớn hơn nhiều so với bộ công cụ này, do đó                                Các Page Test gần đây đã tăng kích thước màn hình mặc định của chúng để phản ánh chính xác hơn quá trình sử dụng.

Biểu ngữ Cookie, các nội dung tùy chỉnh như quảng cáo, Adblockers, thử nghiệm A/ B… Một vài mục có thể khác song tất cả đều ảnh           hưởng đến nội dung được mô tả và những gì người dùng CLS có thể trải nghiệm.

Việc sử dụng cùng một tên cho các chỉ số trong các công cụ kiểm tra lab-based có thể không phản ánh chính xác các phiên bản thực. Điều đó sẽ gây nhầm lẫn. Một số người khuyên rằng chúng tôi nên đổi tên một hoặc tất cả các chỉ số này trong Lighthouse để phân biệt các chỉ số mô phỏng với các chỉ số RUM trong thế giới thực giúp tăng xếp hạng trên Google.

6. Previous Web Performance Metrics #

– Số liệu này khá mới mẻ và nó khác với tất cả các số liệu truyền thống mà chúng tôi sử dụng trước đây trong việc đo lường hiệu suất web, nó được hiển thị bởi một số công cụ như:  PageSpeed ​​Insights – một công cụ kiểm tra trực tuyến miễn phí. Chỉ cần nhập URL mà bạn muốn kiểm tra, nhấp vào Phân tích. Sau vài giây, bạn sẽ thấy hai tab hiển thị (một cho thiết bị di động và một cho máy tính để bàn) nhiều thông tin:

 Ví dụ về kiểm tra PageSpeed Insights

– Điểm hiệu suất lớn của Lighthouse vượt quá 100. Thông tin này đã nổi tiếng trong các cộng đồng hiệu suất web một thời gian và thường được biết đến như một chỉ số hiệu suất chính để hướng tới với mục đích tóm tắt sự phức tạp của nhiều chỉ số thành những gì đơn giản hơn. Có một số trùng lặp với Core Web Vitals, nhưng đó không phải là bản tóm tắt của ba Core Web Vitals (ngay cả các phiên bản lab-based), mà là một loạt các số liệu khác nhau.

Hiện tại, sáu chỉ số tạo nên điểm hiệu suất của Lighthouse – bao gồm một số Core Web Vitals và một vài chỉ số khác là:

– Để tăng thêm độ phức tạp, mỗi điểm trong số sáu điểm này đều có trọng số khác nhau về điểm Hiệu suất . CLS, mặc dù là một trong ba Core Web Vitals song hiện tại chỉ bằng 5% điểm Hiệu suất của Lighthouse (tôi đặt cược chỉ số này sẽ tăng lên ngay sau khi phiên bản CLS tiếp theo được phát hành). Điều đó có nghĩa là bạn có thể nhận được điểm hiệu suất Lighthouse rất cao, nằm trong phần Good và trang web của bạn sẽ tương đối ổn định. Tuy vậy, bạn vẫn không thể vượt qua ngưỡng Core Web Vitals. Do đó, bạn cần phải tập trung hơn và nỗ lực ngay bây giờ để xem xét ba chỉ số cốt lõi này.

– Với phần màu xanh lá cây, chúng tôi chuyển trường dữ liệu và chợt nhận ra một điểm nhầm lẫn khác:

Trong ví dụ này, tôi thường thấy nó được gắn cờ như một lời cảnh báo ngay cả khi những cái khác đều được thông qua. Có phải FCP đã suýt bỏ lỡ việc trở thành một Core Web Vitals hay nó chỉ trông như thể đã cân bằng hơn với bốn chỉ số?

– Nếu không có trường dữ liệu (field data) nào cho URL cụ thể đang được kiểm tra thì dữ liệu gốc (origin data) cho toàn bộ miền sẽ được hiển thị thay thế (dữ liệu này bị ẩn theo mặc định khi dữ liệu trường có sẵn cho URL cụ thể đó). Sau trường dữ liệu (field data), ta nhận được dữ liệu Lab, đồng thời nhận thấy sáu chỉ số tạo nên điểm hiệu suất đầu. Nếu bạn nhấp vào nút chuyển đổi ở trên cùng bên phải, bạn sẽ có thêm một chút mô tả về các chỉ số đó:

 Các số liệu trong thí nghiệm PageSpeed Insights

Như bạn có thể thấy, các lab versions của LCP và CLS được bao gồm vì chúng là một phần của Core Web Vitals. Chúng được đánh dấu bằng nhãn màu xanh lam (cực kì quan trọng). Page Speed ​​Insights cũng bao gồm một liên kết máy tính hữu ích để xem các tác động của những điểm số này lên tổng điểm. Đồng thời cho phép bạn điều chỉnh chúng để xem việc cải thiện từng số liệu sẽ ảnh hưởng như thế nào đối với điểm số của bạn. Hiện tại, điểm hiệu suất web có thể sẽ bị tụt lại một chút trong khi Core Web Vitals gây được nhiều chú ý hơn.

– Lighthouse cũng đã thực hiện gần 50 lần kiểm tra khác nhau về Cơ hội (opportunities) và Chẩn đoán (diagnostics) bổ sung. Những thứ này không ảnh hưởng trực tiếp đến điểm số hay Core Web Vitals nhưng có thể được các nhà phát triển web sử dụng để cải thiện hiệu suất trang web của họ. Chúng cũng được hiển thị trong Thông tin chi tiết về Page Speed Insights dưới tất cả các chỉ số, vì vậy bạn chỉ cần xem ảnh chụp phía trên và coi đây là những gợi ý về cách cải thiện hiệu suất thay vì những vấn đề cụ thể cần phải giải quyết.

– Những chẩn đoán sẽ hiển thị phần tử LCP và những thay đổi đã góp phần vào điểm CLS. Đây là những phần thông tin rất hữu ích khi tối ưu hóa cho Core Web Vitals của bạn! Trong khi những người ủng hộ hiệu suất web có thể đã tập trung nhiều vào điểm số và các kiểm tra của Lighthouse thì tôi thấy điều này tập trung chủ yếu vào ba chỉ số Core Web Vitals. Các chỉ số khác của Lighthouse và điểm tổng thể vẫn khá hữu ích để tối ưu hóa hiệu suất trang web của bạn nhưng Core Web Vitals hiện đang chiếm hầu hết các mục tiêu về hiệu suất web mới và các bài đăng trên blog SEO.

7. Đánh giá Core Web Vitals cho website  #

– Để có cái nhìn tổng quan về Core Web Vitals, hãy nhập URL vào PageSpeed ​​Insights như phía trên đã đề cập. Tuy nhiên, để đánh giá xem làm thế nào Google có thể nhìn thấy các Core Web Vitals trên toàn bộ website của bạn, hãy truy cập vào Google Search Console – một sản phẩm miễn phí do Google tạo ra cho phép bạn hiểu cách mà Google “nhìn thấy” website của bạn, bao gồm cả Core Web Vitals. Google Search Console từ lâu đã được sử dụng bởi các nhóm SEO nhưng với đầu vào mà các nhà phát triển website cần giải quyết Core Web Vitals, các nhóm phát triển cũng nên có quyền truy cập vào công cụ này. Để có quyền truy cập bạn cần:

  1. Sở hữu một tài khoản Google.
  2. Xác minh quyền sở hữu đối với website thông qua nhiều phương tiện khác nhau (đặt tệp vào máy chủ, thêm bản ghi DN, v.v…).

– Các báo cáo Core Web Vitals trong Google Search Console sẽ cung cấp cho bạn một bản tóm tắt về cách website của mình đáp ứng Core Web Vitals trong 90 ngày qua:

    Báo cáo Core Web Vitals trong Google Search Console

– Để được coi là đã vượt qua Core Web Vitals, tất cả các trang của bạn phải có màu xanh lá cây, không nên là màu cam hay màu đỏ. Dù màu cam là một dấu hiệu tương đối tốt thông báo bạn sắp vượt qua, nhưng bạn chỉ đạt được toàn bộ lợi ích khi được đánh giá màu xanh lá cây. Việc bạn muốn tất cả website của mình đều được đáp ứng hay chỉ cần một vài trang chính đạt yêu cầu là tùy thuộc vào bạn. Nhưng thường sẽ có các vấn đề tương tự trên nhiều trang và việc khắc phục những vấn đề đó trên các website có thể đưa số lượng URL không đạt yêu cầu đến một cấp độ dễ quản lý hơn.

Ban đầu, Google sẽ chỉ áp dụng xếp hạng Core Web Vitals cho thiết bị di động nhưng việc nó được triển khai trên máy tính để bàn sẽ chỉ còn là vấn đề thời gian. Vì vậy đừng bỏ qua máy tính để bàn khi bạn đang xem xét và sửa các trang của mình. Khi nhấp vào một trong các báo cáo, chúng sẽ cung cấp cho bạn chi tiết hơn về các chỉ số web. Bạn sẽ biết web nào không được đáp ứng và mẫu các URL nào bị ảnh hưởng.

– Về lý thuyết, Google Search Console sẽ nhóm các URL thành nhóm và cho phép bạn giải quyết các trang tương tự:

  1. Nhấp vào một URL để chạy Page Speed Insights.
  2. Chạy kiểm tra hiệu suất nhanh trên URL. Cụ thể bao gồm: việc hiển thị dữ liệu trường Core Web Vitals cho trang đó nếu chúng có sẵn.
  3. Khắc phục các vấn đề nổi bật và cho chạy lại PageSpeed ​​Insights để xác nhận các chỉ số phòng thí nghiệm hiện tại là chính xác.
  4. Chuyển sang trang tiếp theo.

Tuy nhiên, khi mới bắt đầu xem báo cáo Core Web Vitals, bạn có thể thất vọng vì báo cáo này dường như không cập nhật để phản ánh công việc của bạn. Nó dường như cập nhật mỗi ngày khi biểu đồ thay đổi, nhưng lại hầu như không thay đổi ngay cả khi bạn đã phát hành các bản sửa lỗi của mình. Dữ liệu trường Page Speed Insights cũng vẫn hiển thị URL nhưng website đó lại không thành công.

8. Báo cáo trải nghiệm người dùng trên Chrome (CrUX)  #

– Lý do Web Vitals cập nhật chậm là vì dữ liệu trường được tính dựa trên dữ liệu 28 ngày trong CrUX, trong đó, chỉ có 75% dữ liệu. Sử dụng dữ liệu 28 ngày và phần trăm dữ liệu thứ 75 tương đối tốt vì chúng loại bỏ sự khác biệt để đưa ra phản ánh chính xác hơn về hiệu suất trên website của bạn mà không gây nhiều bất cập.

– Các chỉ số hiệu suất rất dễ bị ảnh hưởng bởi mạng và thiết bị, vì vậy cần phải loại bỏ các trở ngại để hiểu hơn về cách website của bạn đang hoạt động đối với hầu hết người dùng. Tuy nhiên, mặt trái của nó là cập nhật chậm một cách đáng thất vọng. Việc này tạo ra một vòng phản hồi rất chậm từ việc khắc phục các vấn đề cho đến khi bạn thấy kết quả của việc sửa chữa được phản ánh. Sự chậm trễ mà phân vị thứ 75 (p75) tạo ra tương đối hay ho song tôi không nghĩ rằng điều này là dễ hiểu. Nó sẽ đánh giá 75% lượt xem trang khách hàng của bạn truy cập trong 28 ngày đó đối với mỗi Core Web Vitals. Đây có thể là điểm Core Web Vitals cao nhất trong số 75% lượt xem trang của bạn (hoặc ngược lại là điểm thấp nhất). Vì vậy, nó không phải là mức trung bình của 75% lượt xem trang này, mà là giá trị thấp nhất của nhóm người dùng đó. Điều này tạo ra sự chậm trễ trong việc báo cáo rằng trung bình luân phiên không dựa trên phân vị sẽ không xảy ra.

– Chúng ta sẽ có một vài lời giải thích, giả sử, mọi người đều có LCP là 10 giây vào tháng trước và vì bạn đã sửa nó nên bây giờ nó chỉ mất 1 giây hay giả sử bạn có cùng một số lượng khách truy cập mỗi ngày và tất cả họ đều ghi được LCP này. Trong tình huống đó, bạn sẽ nhận được các số liệu sau:

Day LCP 28 day Mean 28 day p75
Day 0 10 10 10
Day 1 1 9.68 10
Day 2 1 9.36 10
Day 3 1 9.04 10
Day 20 1 3.57 10
Day 21 1 3.25 10
Day 22 1 2.93 1
Day 23 1 2.61 1
Day 27 1 1.32 1
Day 28 1 1 1

– Có thể bạn thấy rằng không có sự cải thiện mạnh mẽ nào của mình về điểm số CrUX cho đến ngày 22 khi nó đột ngột chuyển sang giá trị mới thấp hơn (khi chúng tôi vượt qua 75% mức trung bình 28 ngày – không phải ngẫu nhiên). Cho đến thời điểm đó, hơn 25% người dùng của bạn dựa trên dữ liệu đã thu thập được trước khi thay đổi, do đó, chúng tôi nhận giá trị cũ là 10 và giá trị p75 của bạn bị kẹt ở 10. Dường như bạn đã không đạt được tiến bộ nào trong một thời gian dài, trong khi mức trung bình cho thấy dấu hiệu giảm dần bắt đầu ngay lập tức. Vì vậy tiến bộ thực sự có thể được nhìn thấy. Mặt tích cực, trong vài ngày qua, giá trị trung bình thực sự cao hơn giá trị p75 vì p75, theo định nghĩa, đã lọc bỏ hoàn toàn các điểm cực trị.

          Biểu đồ thể hiện sự thay đổi lớn

Điều này có thể gây ngạc nhiên cho những người mong đợi những thay đổi dần dần (hoặc tức thời) khi bạn giải quyết các vấn đề về trang, vì một số trang được truy cập thường xuyên hơn những trang khác. Một lưu ý có liên quan là cũng không có gì lạ khi thấy biểu đồ Search Console của bạn gặp phải màu cam. Tùy thuộc vào các bản sửa lỗi của bạn và cách chúng tác động đến các ngưỡng, trước khi đạt đến màu xanh lá cây đó:

Biểu đồ Core Web Vitals trong Google Search Console

Dave Smart, đã chạy một thử nghiệm hấp dẫn: Theo dõi các thay đổi của Dữ liệu Core Web Vitals trong Báo cáo của Search Console. Anh ấy muốn xem tốc độ cập nhật của biểu đồ nhưng đã không tính đến phần phân vị thứ 75 của CrUX (điều này làm cho việc thiếu chuyển động trong một số biểu đồ của anh ấy có ý nghĩa hơn). Nhưng đây vẫn là một thử nghiệm thực tế hấp dẫn về cách đồ thị này cập nhật và nó rất đáng để xem xét!

Theo tôi thì phương pháp p75 – 28 ngày này không giải thích đầy đủ về sự chậm trễ trong báo cáo Core Web Vitals. Liệu đó có phải là điều tốt nhất bạn có thể làm: thực hiện các bản sửa lỗi, sau đó kiên nhẫn chờ đợi cho đến khi CrUX thông báo rằng các bản sửa lỗi của bạn được thông qua và được cập nhật biểu đồ trong Search Console và PageSpeed ​​Insights? Nếu các bản sửa lỗi của bạn không đủ tốt, liệu bạn có phải bắt đầu lại toàn bộ chu trình? Trong thời đại ngày nay những phản hồi cấp tốc thường chỉ để thỏa mãn cơn thèm của chúng ta và những vòng lặp phản hồi chặt chẽ là dành cho các nhà phát triển để cải thiện năng suất. Điều đó thật không hài lòng chút nào!

9. Tìm hiểu thêm về dữ liệu CRUX  #

Quay trở lại Page Speed ​​Insights, chúng ta có thể thấy nó hiển thị không chỉ giá trị p75 cho trang web mà còn hiển thị phần trăm số lần xem trang tương ứng với mỗi nhóm màu xanh lá cây, cam và đỏ trong các thanh màu bên dưới:

  PageSpeed Insights 4 chỉ số chính

– Hình ảnh trên cho thấy CLS không đạt điểm Core Web Vitals, với giá trị p75 là 0,11 (cao hơn giới hạn đáp ứng 0,1). Mặc dù màu của phông chữ là màu đỏ song thực tế phải là màu cam (vì màu đỏ là trên 0,25). Điều thú vị hơn là thanh màu xanh lá cây ở mức 73% – thì khi đạt 75% trang này sẽ vượt qua Core Web Vitals. Mặc dù bạn không thể thấy các giá trị CrUX cũ nhưng bạn có thể theo dõi chúng theo thời gian. Nếu nó tăng lên 74% vào ngày mai thì chúng ta đang đi đúng hướng (tùy thuộc vào biến động). Ta có thể hy vọng sẽ sớm đạt được một mức tuyệt vời hơn là 75%. Đối với các giá trị ở xa hơn, bạn có thể kiểm tra định kỳ và xem mức tăng, sau đó dự đoán khi nào bạn có thể được thông qua.

CrUX cũng có sẵn dưới dạng một API miễn phí để có được số liệu chính xác hơn cho các tỷ lệ phần trăm đó. Khi bạn đã đăng ký khóa API , bạn có thể gọi nó bằng lệnh curl như thế này (thay thế API_KEY, formFactor và URL nếu thích hợp):

curl -s --request POST 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=API_KEY' \
    --header 'Accept: application/json' \
    --header 'Content-Type: application/json' \
    --data '{"formFactor":"PHONE","url":"https://www.example.com"}'   
Bạn sẽ nhận được phản hồi JSON như sau:
{
    "record": {
    "key": {
      "formFactor": "PHONE",
      "url": "https://www.example.com/"
    },
    "metrics": {
      "cumulative_layout_shift": {
        "histogram": [
          {
            "start": "0.00",
            "end": "0.10",
            "density": 0.99959769344240312
          },
          {
            "start": "0.10",
            "end": "0.25",
            "density": 0.00040230655759688886
          },
          {
            "start": "0.25"
          }
        ],
        "percentiles": {
          "p75": "0.00"
        }
      },
      "first_contentful_paint": {
        ...
      }
    }
  },
  "urlNormalizationDetails": {
    "originalUrl": "https://www.example.com",
    "normalizedUrl": "https://www.example.com/"
  }
} 

Nếu bạn muốn áp dụng một cách nhanh hơn để xem dữ liệu này thì Page Speed ​​Insights sẽ trả về độ chính xác mà bạn có thể thấy. Hãy:

  • Mở DevTools.
  • Chạy thử nghiệm Page Speed ​​Insights.
  • Tìm tên gọi XHR mà nó tạo ra.
    Lệnh gọi API PageSpeed ​​Insights trong trình duyệt

Ngoài ra còn có một trình khám phá API CrUX tương tác cho phép bạn thực hiện các mẫu hỏi của API CrUX. Mặc dù vậy, để hiển thị API thường xuyên, việc nhận khóa miễn phí và sử dụng Curl hoặc một số công cụ API khác sẽ dễ dàng hơn.

– API cũng có thể được coi như “origin”, thay vì URL. Tại thời điểm đó, việc này có thể hữu ích nếu URL của bạn không có sẵn thông tin CrUX nhưng Google Search Console thì không. Google chưa nêu (và không chắc chắn) chính xác Core Web Vitals sẽ ảnh hưởng như thế nào đến xếp hạng. Liệu điểm số ở cấp độ gốc có ảnh hưởng đến xếp hạng không hay chỉ ảnh hưởng đến điểm số URL riêng lẻ? Hoặc, chẳng hạn như PageSpeed ​​Insights, liệu Google có quay trở lại điểm số cấp độ ban đầu khi dữ liệu URL riêng lẻ không tồn tại? Rất khó để biết vào lúc này và gợi ý duy nhất cho đến nay là những câu hỏi trong FAQ:

Q: Cách tính điểm cho một URL mới được thiết lập và chưa tạo dữ liệu 28 ngày?

A: Có thể tính điểm tương tự như cách Search Console báo cáo dữ liệu trải nghiệm trang. Chúng tôi thực hiện cách nhóm các trang và tính điểm dựa trên trang tổng hợp đó.

– API CrUX có thể được gọi theo chương trình. Rick Viscomi từ nhóm Google CrUX đã tạo ra một màn hình Google Trang tính cho phép bạn kiểm tra hàng loạt URL hoặc các gốc, thậm chí có thể tự động theo dõi dữ liệu CrUX theo thời gian nếu bạn muốn giám sát chặt chẽ một số URL hoặc gốc. Việc bạn cần làm là:

  • Sao chép trang tính.
  • Vào Tools → Script trình chỉnh sửa.
  • Nhập thuộc tính tập lệnh CRUX_API_KEY bằng khóa của bạn (điều này cần được thực hiện trong trình chỉnh sửa kế thừa).
  • Chạy tập lệnh (có thể cho chạy định kỳ hoặc lên lịch để chạy thường xuyên hoạt động này).

Tôi đã sử dụng công cụ này để kiểm tra tất cả các URL của một website có báo cáo Core Web Vitals bị cập nhật chậm. Và nhận được xác nhận rằng CrUX không có dữ liệu cho nhiều URL trong khi hầu hết các URL khác đã vượt qua. Một lần nữa ta nhận ra rằng các báo cáo của Google Search Console tụt hậu- ngay cả từ dữ liệu CrUX nền tảng. Tôi không chắc liệu đó có phải là do các URL trước đó đã bị lỗi hay không nhưng hiện tại không có đủ lưu lượng truy cập để nhận dữ liệu CrUX. Điều này chứng tỏ rằng báo cáo này chắc chắn bị chậm. Tôi nghi ngờ một phần lớn trong số đó là do các URL không có dữ liệu trong CrUX và Google Search thì đang cố gắng hết sức để đặt cho chúng một giá trị. Vì vậy, báo cáo này là một khởi đầu tốt để bạn bắt đầu có cái nhìn tổng quan về website của mình. Đồng thời cũng là một báo cáo để ta theo dõi trong tương lai nhưng lại không phải là một báo cáo tuyệt vời để giải quyết các vấn đề mà bạn muốn nhận được phản hồi ngay lập tức.

Đối với những người muốn tìm hiểu sâu hơn về CrUX, ta có các bảng dữ liệu CrUX hàng tháng có sẵn trong BigQuery (chỉ ở cấp gốc, không dành cho các URL riêng lẻ). Rick cũng đã ghi lại các cách để bạn có thể tạo một trang tổng quan CrUX. Dựa vào đó bạn có thể biết rằng nó là cách tốt để theo dõi hiệu suất tổng thể website của bạn theo tháng.

Bảng điều khiển CrUX LCP

10. Các thông tin khác về dữ liệu Crux  #

Đến phần này có lẽ bạn đã hiểu hơn về bộ dữ liệu CrUX. Bạn sẽ biết được tại sao một số công cụ lại cập nhật chậm và thất thường đồng thời cũng có thể đã khám phá được nhiều hơn. Trước khi chuyển sang các lựa chọn thay thế, có một số điều cần hiểu thêm về CrUX để bạn thực sự hiểu sâu về dữ liệu mà nó đang hiển thị. Vì vậy sau đây là một bộ sưu tập các thông tin hữu ích khác mà tôi đã thu thập được về CrUX mà có liên quan đến Core Web Vitals.

  • CrUX chỉ dành cho Chrome: Tất cả những người dùng iOS cũng như các trình duyệt khác (Desktop Safari, Firefox, Edge, v.v…), chưa kể các trình duyệt cũ hơn (Internet Explorer,…) đều không có trải nghiệm người dùng phản ánh trong dữ liệu CrUX, v.v… trên nền tảng Google về Core Web Vitals.

– Hiện tại, mức sử dụng của Chrome rất cao. Trong hầu hết các trường hợp, các vấn đề về hiệu suất mà nó đề cập cũng sẽ ảnh hưởng đến các trình duyệt khác, đó là điều cần lưu ý. Vị trí độc quyền của Google trong lĩnh vực tìm kiếm, hiện đang khuyến khích mọi người tối ưu hóa cho trình duyệt của họ. Phiên bản Chrome đang được sử dụng cũng sẽ bị tác động vì các chỉ số này (cụ thể là CLS) vẫn đang phát triển cũng như các lỗi đang được tìm thấy và sửa chữa. Đã có những cải tiến liên tục đối với CLS trong các phiên bản Chrome gần đây, với một định nghĩa lớn hơn về CLS đã cập bến Chrome 91. Dữ liệu trường đang được sử dụng có thể mất một khoảng thời gian để những thay đổi này được cung cấp trở lại cho người dùng, sau đó thêm vào dữ liệu CrUX.

  • CrUX chỉ dành cho người dùng đã đăng nhập vào Chrome hoặc trích dẫn định nghĩa thực tế:

  “CrUX được tổng hợp từ những người dùng đã chọn tham gia đồng bộ hóa lịch sử duyệt web của họ, chưa thiết lập cụm mật khẩu                 đồng bộ hóa và đã bật báo cáo thống kê sử dụng.” – Báo cáo trải nghiệm người dùng Chrome , Nhà phát triển của Google

Vì vậy, nếu bạn đang tìm kiếm thông tin trên một website chủ yếu được truy cập từ các mạng công ty – nơi các cài đặt đó bị tắt bởi các chính sách CNTT trung tâm, thì bạn có thể không thấy nhiều dữ liệu. Điều này tương tự như việc những người dùng doanh nghiệp nghèo đó vẫn bị buộc phải sử dụng Internet Explorer vậy!

  • CrUX bao gồm tất cả các trang: Bao gồm cả những trang thường không xuất hiện trên Google Search, chẳng hạn như “các trang không được lập chỉ mục, robboted…” (mặc dù có các ngưỡng tối thiểu để URL và các gốc được hiển thị trong CrUX). Giờ đây, những danh mục trang đó có thể sẽ không được đưa vào kết quả của Google Search, do đó, tác động của xếp hạng đối với chúng có thể không quan trọng nhưng chúng vẫn sẽ được đưa vào CrUX. Tuy nhiên, báo cáo Core Web Vitals trong Google Search Console dường như chỉ hiển thị các URL được lập chỉ mục, vì vậy chúng sẽ không hiển thị ở đó.

Con số gốc được hiển thị trong PageSpeed Insights và trong dữ liệu CrUX thô sẽ bao gồm các trang không được lập chỉ mục, không công khai và như tôi đã đề cập ở trên, chúng tôi không chắc chắn về tác động của nó. Một website mà tôi làm việc thường có một tỷ lệ lớn khách truy cập vào các trang đã đăng nhập và trong khi các trang công khai hoạt động rất hiệu quả thì các trang đã đăng nhập lại không hoạt động. Điều đó làm sai lệch nghiêm trọng điểm số của Web Vitals.

– API CrUX có thể được sử dụng để lấy dữ liệu của các URL đã đăng nhập này nhưng các công cụ như PageSpeed ​​Insights thì không thể vì chúng chạy một trình duyệt thực do đó sẽ được chuyển hướng đến các trang đăng nhập. Khi chúng tôi thấy dữ liệu CrUX đó và nhận ra tác động, chúng tôi đã sửa chữa số liệu gốc, nó đã bắt đầu giảm xuống nhưng vẫn cần thời gian để kiểm tra.

Các trang không được lập chỉ mục hoặc đã đăng nhập thường là “ứng dụng” thay vì tập hợp các trang riêng lẻ. Vì vậy chúng có thể đang sử dụng phương pháp luận Ứng dụng Trang Đơn với một URL thực, nhưng cũng có nhiều trang khác nhau bên dưới. Điều này có thể ảnh hưởng đặc biệt đến CLS do nó được đo lường trong toàn bộ vòng đời của trang. Tôi hy vọng những thay đổi sắp tới đối với CLS sẽ giúp ích cho điều đó. Như đã đề cập trước đây, báo cáo Core Web Vitals trong Google Search Console dù dựa trên CrUX song chắc chắn không phải là các dữ liệu giống nhau. Điều này chủ yếu là do Google Search Console cố gắng ước tính Web Vitals cho các URL không có dữ liệu CrUX. Các URL mẫu trong báo cáo này cũng không phù hợp với dữ liệu CrUX.

Tôi thấy nhiều trường hợp URL đã được sửa dữ liệu CrUX trong PageSpeed ​​Insights hoặc trực tiếp thông qua API, tất cả sẽ được hiển thị chuyển qua Web Vitals. Nhưng khi bạn nhấp vào dòng màu đỏ trong báo cáo Core Web Vitals và lấy các URL mẫu, các URL đã chuyển này sẽ hiển thị như thể chúng không thành công . Tôi không chắc Google Search Console sử dụng phương pháp heuristics nào cho việc nhóm này hoặc tần suất cập nhật và các URL mẫu, nhưng theo tôi thì điều này có thể làm được nếu như ta thực hiện việc cập nhật thường xuyên hơn!

  • CrUX dựa trên lượt xem trang: Điều đó có nghĩa là các trang phổ biến nhất của bạn sẽ có ảnh hưởng rất lớn đến dữ liệu CrUX gốc. Một số trang sẽ hiện hoặc thoát khỏi CrUX mỗi ngày khi chúng đạt đến các ngưỡng chỉ định hoặc không. Có lẽ dữ liệu gốc đang phát huy tác dụng đối với những trang đó. Mặt khác, nếu bạn có một chiến dịch lớn trong một khoảng thời gian cụ thể và có nhiều lượt truy cập, sau đó bạn lại thực hiện cải tiến nhưng có ít lượt truy cập hơn, khi ấy bạn sẽ thấy một tỷ lệ lớn rõ ràng của dữ liệu cũ, kém hơn.

– Dữ liệu CrUX được tách thành ĐTDĐ, Máy tính để bàn và Máy tính bảng – mặc dù chỉ có Thiết bị di động và Máy tính để bàn được hiển thị trong hầu hết các công cụ song API CrUX và BigQuery vẫn cho phép bạn xem dữ liệu Máy tính bảng nếu bạn thực sự muốn, nhưng tôi khuyên bạn nên tập trung vào Di động sau đó là Máy tính để bàn. Ngoài ra, hãy lưu ý trong một số trường hợp như API CrUX, nó được đánh dấu là PHONE thay vì MOBILE, để phản ánh dựa trên hệ số hình thức thay vì dữ liệu dựa trên mạng di động.

Nói chung, những vấn đề này là do tác động của việc thu thập dữ liệu trường (RUM), nhưng tất cả những sắc thái ấy vẫn có thể xảy ra rất nhiều khi bạn được giao nhiệm vụ “sửa chữa Core Web Vitals”. Khi bạn càng hiểu cách các Core Web Vitals này được thu thập và xử lý dữ liệu ra sao thì điều này sẽ càng có ý nghĩa. Đồng thời bạn càng có nhiều thời gian hơn để khắc phục các vấn đề thực tế thay vì vò đầu bứt tai tự hỏi tại sao nó không báo cáo những gì bạn nghĩ.

11. Nhận phản hồi nhanh hơn  #

Đến lúc này bạn đã có cách xử lý tốt hơn đối với các cách Core Web Vitals được thu thập và hiển thị thông qua các công cụ khác nhau. Trái lại, chúng tôi phải đối mặt với các vấn đề như làm sao có thể nhận được phản hồi tốt hơn và nhanh hơn. Việc chờ đợi 21-28 ngày để xem tác động trong dữ liệu mấu chốt, chỉ để nhận ra các bản sửa lỗi của bạn là cách quá chậm. Mặc dù các mẹo trên có thể áp dụng để xem liệu CrUX có đang đi đúng hướng hay không nhưng vẫn chưa phải là cách lý tưởng nhất. Do đó, giải pháp duy nhất là tìm hiểu sâu hơn về CrUX để tái hiện những gì nó đang làm nhằm hiển thị dữ liệu nhanh hơn.

– Một số sản phẩm RUM thương mại trên thị trường đo lường hiệu suất người dùng và các cách hiển thị dữ liệu trong trang tổng quan, API cho phép bạn truy vấn dữ liệu sâu hơn với tần suất chi tiết hơn nhiều so với mức CrUX cho phép. Vì Core Web Vitals được hiển thị dưới dạng API trình duyệt (ít nhất là các trình duyệt dựa trên Chromium, các trình duyệt khác như Safari và Firefox chưa hiển thị một số chỉ số mới hơn như LCP và CLS ), theo lý thuyết, chúng phải là cùng một dữ liệu khi tiếp xúc với CrUX và do đó với Google – với những lưu ý tương tự ở trên!

– Đối với những người không có quyền truy cập vào các sản phẩm RUM này, Google đã cung cấp thư viện JavaScript Web Vitals. Nó cho phép bạn truy cập vào các chỉ số và báo cáo lại khi thấy phù hợp. Đồng thời có thể được sử dụng để gửi dữ liệu này trở lại Google Analytics bằng cách chạy tập lệnh sau trên các website của bạn:

<script type="module">
  import {getFCP, getLCP, getCLS, getTTFB, getFID} from 'https://unpkg.com/web-vitals?module';

  function sendWebVitals() {
    function sendWebVitalsGAEvents({name, delta, id, entries}) {
      if ("function" == typeof ga) {  
        ga('send', 'event', {
          eventCategory: 'Web Vitals',
          eventAction: name,
          // The `id` value will be unique to the current page load. When sending
          // multiple values from the same page (e.g. for CLS), Google Analytics can
          // compute a total by grouping on this ID (note: requires `eventLabel` to
          // be a dimension in your report).
          eventLabel: id,
          // Google Analytics metrics must be integers, so the value is rounded.
          // For CLS the value is first multiplied by 1000 for greater precision
          // (note: increase the multiplier for greater precision if needed).
          eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
          // Use a non-interaction event to avoid affecting bounce rate.
          nonInteraction: true,
          // Use `sendBeacon()` if the browser supports it.
          transport: 'beacon'
        });
      }
    }

    // Register function to send Core Web Vitals and other metrics as they become available
    getFCP(sendWebVitalsGAEvents);
    getLCP(sendWebVitalsGAEvents);
    getCLS(sendWebVitalsGAEvents);
    getTTFB(sendWebVitalsGAEvents);
    getFID(sendWebVitalsGAEvents);

  }

  sendWebVitals();
</script>

Bạn cũng có thể sử dụng tập lệnh sau:

<script type="module" src="/javascript/send-web-vitals.js"></script>

– Nhược điểm của thao tác này là chậm, một phần do có quá nhiều JavaScript. Như bạn thấy ở trên, tập lệnh này khá nhỏ và thư viện nó tải là một 1,7 kB nén (4,0 kB không nén). Với tư cách là một mô-đun, việc thực thi thao tác có thể bị hoãn lại. Do đó website của bạn sẽ không bị ảnh hưởng quá nhiều, đồng thời dữ liệu mà nó thu thập sẽ là điều kiện đắt giá giúp bạn điều tra Core Web Vitals theo cách thức thời gian thực hơn dữ liệu CrUX cho phép.

– Tập lệnh đăng ký một chức năng để gửi một sự kiện Google Analytics khi mỗi số liệu có sẵn. Đối với FCP và TTFB, đây là ngay sau khi trang được tải, đối với FID sau lần tương tác đầu tiên từ người dùng, trong khi đối với LCP và CLS là khi trang được điều hướng khỏi hoặc ở chế độ nền và LCP và CLS thực tế chắc chắn được biết đến. Bạn có thể sử dụng các công cụ dành cho nhà phát triển để xem các báo hiệu này được gửi cho trang đó, trong khi dữ liệu CrUX diễn ra trong nền mà không bị lộ ở đây.

– Lợi ích của việc đưa dữ liệu này vào một công cụ như Google Analytics là bạn có thể chia nhỏ dữ liệu dựa trên tất cả các thông tin khác mà bạn có. Trong đó bao gồm:

  • Hệ số hình thức (máy tính để bàn hoặc thiết bị di động).
  • Khách truy cập mới hoặc quay lại.
  • Chuyển đổi kênh, phiên bản Chrome,…

– Dữ liệu RUM sẽ bị ảnh hưởng bởi việc sử dụng thực tế. Hoạt động người dùng trên các thiết bị nhanh hoặc chậm hơn sẽ được ghi lại. Bạn cần lưu ý lý do dữ liệu CrUX được tổng hợp trong 28 ngày và việc chỉ xem xét phân vị thứ 75 là để loại bỏ phương sai. Khi có quyền truy cập vào dữ liệu thô, bạn sẽ được xem dữ liệu một cách chi tiết hơn, điều đó cũng có nghĩa là bạn dễ bị ảnh hưởng bởi các biến thể cực đoan. Song miễn là bạn ghi nhớ điều đó, việc duy trì quyền truy cập sớm vào dữ liệu sẽ rất có giá trị.

Phil Walton đã tạo một trang tổng quan Web-Vitals. Trang này có thể trỏ được vào tài khoản Google Analytics của bạn để tải xuống dữ liệu, tính toán phần trăm thứ 75 (để giúp ích cho các biến thể). Sau đó hiển thị điểm Core Web Vitals, biểu đồ thông tin, chuỗi thời gian của dữ liệu và 5 trang được truy cập hàng đầu của bạn với các yếu tố tạo nên những điểm số đó.

  Biểu đồ LCP trong bảng điều khiển Web Vitals

Bạn có thể lọc trên các trang riêng lẻ (sử dụng ga:pagePath==/page/path/index.htmlbộ lọc) và xem một biểu đồ như thế này trong vòng một ngày sau khi bạn phát hành bản sửa lỗi của mình. Nếu bản sửa lỗi của bạn đã thành công, bạn có thể chuyển sang thử thách tiếp theo:

 Đo lường các cải tiến của Web Vitals/ngày trong bảng điều khiển Web Vitals

Với JavaScript, bạn có thể hiển thị thêm thông tin vào phần tùy chỉnh của Google Analytics. Phil đã viết một Debug Web Vitals xuất sắc trong bài đăng về thao tác này.  Các tùy chỉnh này cũng có thể được báo cáo trong trang tổng quan (sử dụng ga:dimension1làm Debug dimensiontrường) để lấy dữ liệu xem phần tử LCP trên các trình duyệt đó:

 Gỡ lỗi nhận dạng từ Trang tổng quan Web Vitals

Như tôi đã đề cập, các sản phẩm RUM thương mại thường sẽ tiết lộ loại dữ liệu này. Nhưng đối với những người chưa sẵn sàng cam kết tài chính cho các sản phẩm đó, điều này ít nhất cũng mang lại lợi ích đầu về các chỉ số dựa trên RUM và chúng có thể hữu ích như thế nào để nhận được phản hồi nhanh hơn về những cải tiến mà bạn đang triển khai. Nếu bạn muốn có thông tin này, hãy tham khảo thêm các sản phẩm RUM khác ngoài kia. Đồng thời hãy theo dõi các biểu đồ Search Console để đảm bảo bạn không bỏ sót bất kỳ điều quan trọng gì.

12. Kết luận  #

Core Web Vitals là một tập hợp các chỉ số chính nhằm thể hiện trải nghiệm người dùng khi duyệt web. Là một người ủng hộ hiệu suất web, tôi hoan nghênh bất kỳ sự thúc đẩy nào để cải thiện hiệu suất của các website. Tác động xếp hạng của các số liệu này chắc chắn đã tạo ra một tiếng vang lớn trong cộng đồng SEO và hiệu suất web.

Mặc dù bản thân các chỉ số đã rất thú vị, nhưng có lẽ điều thú vị hơn là việc sử dụng dữ liệu CrUX để đo lường chúng. Về cơ bản, thao tác này làm hiển thị dữ liệu RUM cho các website mà chưa bao giờ xem xét việc đo lường hiệu suất trang web trong lĩnh vực này. Lý do cho việc chúng ta đã quá phụ thuộc vào dữ liệu lab trong một thời gian dài là vì dữ liệu RUM bị nhiễu. Các bước mà CrUX thực hiện để giảm thiểu điều này giúp mang lại một cái nhìn ổn định hơn, nhưng cái giá phải trả là khiến việc kiểm soát những thay đổi gần đây trở nên khó khăn hơn.

Hy vọng rằng bài đăng này sẽ giải thích sâu hơn cho bạn một số cách khác nhau để truy cập vào dữ liệu Core Web Vitals cho website và một số hạn chế của mỗi phương pháp. Tôi cũng hy vọng rằng nó sẽ giải thích được một số dữ liệu mà bạn đang khó hiểu, cũng như đề xuất một số cách để khắc phục những hạn chế đó.

Chúc bạn tối ưu hóa website thật tốt!

Exit mobile version