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

{
    "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.

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.

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ố đó.

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:

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 đó:

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!