Google đã cung cấp cho chúng ra rất nhiều công cụ để đo lường 3 chỉ số của Core Web Vitals (LCP, FID, CLS) như: Google Pagespeed Insights, Lighthouse, Measure Web Dev,… Nhưng bạn có biết 3 chỉ số được đo lường trong các công cụ đó không đến từ các lần tải trang thực của khách truy cập?
Bài viết này sẽ hướng dẫn bạn thu thập và đo lường 3 chỉ số của Core Web Vitals cho website WordPress trong Google Analytics từ các lần tải trang thực của khách truy cập (field data) chứ không phải từ môi trường thí nghiệm với các thiết bị được cấu hình sẵn (lab data).
Chỉ bằng cách đo lường Core Web Vitals từ các lần tải trang thực (field data), bạn mới thật sự biết được trang web của mình đã được tối ưu tốc độ và trải nghiệm người dùng hay chưa.
Lưu ý, yêu cầu trước khi đọc tiếp bài viết này, hãy chắc chắn là bạn đã đang sử dụng Google Analytics để thu thập dữ liệu của khách truy cập trong WordPress. Bạn cũng cần phải nắm được một cách khái quát về Core Web Vitals cũng như 3 chỉ số chính của Core Web Vitals.
Bạn có thể đọc bài viết này nếu bạn chưa biết thêm code Google Analytics vào WordPress.
Bước 1: Thêm code tích hợp Core Web Vitals vào file functions.php của child theme
Bạn copy đoạn code sau và thêm nó vào file functions.php của child theme (đọc hướng dẫn tạo child theme cho WordPress tại đây).
// Core Web Vitals Report
add_action ('wp_body_open', 'core_web_vitals_report');
function core_web_vitals_report(){ ?>
<script type="module">
import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';
function sendToGoogleAnalytics({name, delta, id}) {
// Assumes the global `gtag()` function exists, see:
// https://developers.google.com/analytics/devguides/collection/gtagjs
gtag('event', name, {
event_category: 'Web Vitals',
// 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).
value: Math.round(name === 'CLS' ? delta * 1000 : delta),
// 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).
event_label: id,
// Use a non-interaction event to avoid affecting bounce rate.
non_interaction: true,
});
}
getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);
</script>
<?php }Bước 2: Truy cập Web Vitals Report và kết nối với website mà bạn muốn đo lường Core Web Vitals trong Google Analytics
Tại thời điểm viết bài này, Google Analytics vẫn chưa được cập nhật để tự động báo cáo 3 chỉ số FCP, FID và CLS.
Vì vậy, chúng ta sẽ dùng một web app miễn phí trong Github tên là Web Vitals Report để hiển thị 3 chỉ số theo dạng biểu đồ dễ nhìn và đẹp mắt.
Một lưu ý nhỏ, sau khi thêm code vào file functions.php ở bước 1, Google Analytics sẽ cần một khoảng thời gian ngắn (ít nhất là 1 ngày) để thu thập và đo lường 3 chỉ số của Core Web Vitals từ các lần tải trang của khách truy cập.
Nếu website của bạn có khách truy cập trong vòng 1 ngày kể từ thời điểm bạn thêm code vào file functions.php, bạn đã sẵn sàng.
Bây giờ bạn chỉ cần truy cập vào trang Web Vitals Report, cho phép Web Vitals Report kết nối với tài khoản Google Analytics và chọn website mà bạn muốn đo lường 3 chỉ số của Core Web Vitals là xong.
Web Vitals Report sẽ sử dụng đoạn code mà bạn đã thêm ở trên để kết nối với Google Analytics, lấy dữ liệu mà Google Analytics thu thập được từ 3 chỉ số của Core Web Vitals và hiển thị nó thành biểu đồ.
Đây là giao diện của trang Web Vitals Report với các lựa chọn mà bạn có thể tùy chỉnh.
Sau khi tùy chỉnh xong các lựa chọn, bạn click vào nút Submit để tạo biểu đồ hiển thị cho FCP, FID và CLS. Nếu bạn đã thực hiện chính xác theo các bước hướng dẫn trên, bạn sẽ thấy báo cáo của 3 chỉ số Core Web Vitals hiện ra ở bên dưới.
Đây là báo cáo của chỉ số LCP được lấy từ Google Analytics.
Tương tự, đây là báo cáo cho chỉ số FID và CLS trong Web Vitals Report.
Như vậy là bạn đã biết cách đo lường 3 chỉ số của Core Web Vitals trong Google Analytics (dữ liệu thực từ các lần tải trang của khách truy cập, field data). Nếu bạn không hiểu bài viết này đang nói gì thì trước tiên hãy đọc bài viết này để biết Core Web Vitals là gì và biết được chỉ số mà Google đề nghị tối ưu cho FCP, FID và CLS.