1. Trước khi bắt đầu
Trong lớp học lập trình này, bạn sẽ tìm hiểu cách đo lường Các chỉ số quan trọng về trang web thông qua thư viện JavaScript web-vitals.
Bạn nên đo lường Các chỉ số quan trọng về trang web, và các chỉ số này nằm trong tỷ lệ phần trăm 75 của số lượt tải trang được phân đoạn trên các thiết bị di động và máy tính.
Các chỉ số quan trọng về trang web bao gồm 3 chỉ số này, áp dụng cho tất cả các trang web và cung cấp cho bạn thông tin chi tiết quan trọng về trải nghiệm người dùng:
- Thời gian hiển thị nội dung lớn nhất (LCP). Đo lường hiệu suất tải và sẽ xảy ra trong vòng 2,5 giây kể từ khi trang bắt đầu tải.
- Thời gian phản hồi lần tương tác đầu tiên (FID). Đo lường khả năng tương tác và diễn ra trong vòng 100 mili giây.
- Điểm số tổng hợp về mức thay đổi bố cục (CLS). Đo độ ổn định của hình ảnh và giá trị này phải nằm trong khoảng 0,1.
Điều kiện tiên quyết
- Bài viết về Các chỉ số quan trọng về trang web
- Xác định bài viết về các chỉ số quan trọng đối với Các chỉ số quan trọng về trang web
Bạn sẽ thực hiện
- Thêm thư viện
web-vitalsvào trang web. - Đo lường Các chỉ số quan trọng về trang web của Công cụ dành cho nhà phát triển trên Google Chrome.
- Không bắt buộc: Báo cáo Các chỉ số quan trọng về trang web cho Google Analytics.
Bạn cần có
- Trình chỉnh sửa văn bản do bạn chọn, chẳng hạn như Văn bản Sublime hoặc Mã Visual Studio
- Trình duyệt web dựa trên Chromium, chẳng hạn như Google Chrome hoặc Microsoft Edge (Để biết thêm thông tin về lý do bạn cần một trình duyệt web dựa trên Chromium, hãy xem phần Hỗ trợ trình duyệt.)
2. Thêm thư viện quan trọng vào trang web
- Trong trình chỉnh sửa văn bản của bạn, tạo tệp
web-vitals-test.htmlvà sau đó nhập mã HTML này vào tệp:
web-vitals-test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Vitals Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
<p>Text below image</p>
</body>
</html>
Mã này tạo trang web mà bạn sử dụng cho lớp học lập trình này.
- Trong phần tử
<body>của mã HTML sau phần tử<p>thứ hai, hãy nhập tập lệnh mô-đun này rồi lưu tệp:
web-vitals-test.html
<script type="module">
import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
</script>
Tập lệnh mô-đun này tải thư viện web-vitals từ một mạng phân phối nội dung. Bây giờ, tệp của bạn trông giống như đoạn mã này:
web-vitals-test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Vitals Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
<p>Text below image</p>
<script type="module">
import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
</script>
</body>
</html>
Tất cả các trình duyệt hiện đại đều hỗ trợ tập lệnh mô-đun. Loại tập lệnh này phù hợp với mã chỉ sử dụng API mới, chẳng hạn như các tập lệnh bắt buộc để đo lường Các chỉ số quan trọng về trang web. Những trình duyệt không hỗ trợ mô-đun hoặc API Các chỉ số quan trọng về trang web sẽ không cố gắng tải tập lệnh này.
3. Đo lường Các chỉ số quan trọng về trang web của Công cụ dành cho nhà phát triển trên Google Chrome
- Trong trình duyệt web, hãy mở tệp đã lưu.
- Nhấp chuột phải vào trang web rồi nhấp vào Kiểm tra trong hộp thoại.
- Trong ngăn Công cụ cho nhà phát triển Google Chrome, nhấp vào tab Bảng điều khiển, sau đó chọn Cài đặt bảng điều khiển
> Lưu giữ nhật ký. Tùy chọn cài đặt này đảm bảo rằng nhật ký vẫn tồn tại khi bạn làm mới trang web.
- Nhấp vào thẻ Mạng, sau đó nhấp vào mũi tên mở rộng
của trình đơn điều tiết thả xuống rồi chọn 3G chậm. Chế độ cài đặt này mô phỏng một kết nối mạng chậm.
- Quay lại thẻ Bảng điều khiển, sau đó nhấp vào một vị trí bất kỳ trên trang web. LCP và chỉ số FID sẽ in trong thẻ Bảng điều khiển.
- Làm mới trang web. Bạn có thể in chỉ số CLS trong thẻ Console.
- Quay lại thẻ Mạng rồi nhấp vào mũi tên mở rộng của trình đơn điều tiết thả xuống rồi chọn 3G nhanh. Chế độ cài đặt này mô phỏng một kết nối mạng nhanh.
- Quay lại thẻ Bảng điều khiển, sau đó nhấp vào một vị trí bất kỳ trên trang web.Các chỉ số LCP và FID sẽ in lại trên thẻ Bảng điều khiển, nhưng các chỉ số này đã cải thiện từ trước.
- Làm mới trang web. Chỉ số CLS cũng xuất hiện trở lại trong thẻ Console, nhưng đã được cải thiện từ trước.
4. Không bắt buộc: Báo cáo Các chỉ số quan trọng về trang web cho Google Analytics
- Trong tệp
web-vitals-test.htmlsau câu lệnh nhập tập lệnh mô-đun, hãy nhập hàmsendToGoogleAnalytics()này rồi lưu tệp:
web-vitals-test.html
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);
Mã này sẽ gửi các Chỉ số quan trọng về trang web đến Google Analytics, nơi bạn có thể xem các chỉ số này trong báo cáo Sự kiện hàng đầu:
Bây giờ, tệp của bạn trông giống như đoạn mã này:
web-vitals-test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Vitals Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
<p>Text below image</p>
<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>
</body>
</html>
5. Xin chúc mừng
Xin chúc mừng! Bạn đã tìm hiểu cách đo lường và báo cáo Các chỉ số quan trọng về trang web thông qua thư viện web-vitals.