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 API PageSpeed Insights (PSI) và Báo cáo trải nghiệm người dùng của Chrome (CrUX).
Cả hai API đều trả về dữ liệu Các chỉ số quan trọng về trang web giống hệt nhau, nhưng mỗi API mang đến các lợi ích riêng biệt. Ngoài dữ liệu CrUX từ trường này, API PSI cũng cung cấp dữ liệu từ Lighthouse, đây là công cụ nguồn mở và tự động của Google nhằm kiểm tra các trang web và đề xuất cách cải thiện trang. API CrUX không cung cấp dữ liệu Lighthouse, vì vậy, mã này sẽ thực thi nhanh hơn.
Bạn nên đo lường Các chỉ số quan trọng về trang web trên 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ố Ngưỡng quan trọng của trang web.
- Kiến thức cơ bản về cách sử dụng dòng lệnh.
Bạn sẽ thực hiện
- Đo lường Các chỉ số quan trọng về trang web của một trang web bằng API PSI.
- Đo lường Các chỉ số quan trọng về trang web của một trang web bằng API CrUX.
Bạn cần có
- Tài khoản Google
- Quyền truy cập vào một dòng lệnh
- Trình chỉnh sửa văn bản do bạn chọn
- Trình duyệt web mà bạn chọn
- URL mà bạn chọn (Lớp học lập trình này sử dụng https://developers.google.com).
2. Đo lường Các chỉ số quan trọng về trang web thông qua API PSI
- Nếu bạn cần dữ liệu hiệu suất cho phiên bản URL dành cho máy tính, hãy chạy lệnh
curlnày để yêu cầu dữ liệu từ API PageSpeed Insights và lưu dữ liệu đó trong tệpresponse.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
Thay thế phần giữ chỗ YOUR_URL bằng URL của bạn.
- Nếu cần dữ liệu về hiệu suất cho phiên bản URL dành cho thiết bị di động, hãy đặt tham số truy vấn
strategythành giá trịmobileở cuối chuỗi API trong lệnh được cung cấp trong bước trước đó:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
Thay thế phần giữ chỗ YOUR_URL bằng URL của bạn.
- Trong trình chỉnh sửa văn bản, hãy mở tệp
response.txtrồi tìm thuộc tínhloadingExperience:
Phản hồi.txt
"loadingExperience": {
"id": "https://developers.google.com/",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1714,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.49701860391159164
},
{
"min": 1000,
"max": 3000,
"proportion": 0.40071951025600261
},
{
"min": 3000,
"proportion": 0.10226188583240581
}
],
"category": "AVERAGE"
},
},
Thuộc tính loadingExperience báo cáo thông tin này cho từng Chỉ số quan trọng về trang web dựa trên URL và loại thiết bị được chỉ ra trong yêu cầu API:
- Thuộc tính
percentilecho biết phân vị thứ 75 cho mỗi chỉ số. - Thuộc tính
distributionscho biết tỷ lệ phần trăm lượt xem trang có trải nghiệm tốt, cần cải thiện hoặc ít cho từng chỉ số. - Thuộc tính
categoryphân loại hiệu suất của từng chỉ số là chậm, trung bình hay nhanh.
Nếu nội dung của thuộc tính loadingExperience trống, thì URL đó sẽ không có đủ dữ liệu về hiệu suất. Vấn đề này thường xảy ra khi bạn kiểm tra các trang web có lưu lượng truy cập thấp.
- Tìm thuộc tính
originLoadingExperience:
response.txt
"originLoadingExperience": {
"id": "https://developers.google.com",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1649,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.488838781075378
},
{
"min": 1000,
"max": 3000,
"proportion": 0.42709617576692827
},
{
"min": 3000,
"proportion": 0.084065043157693739
}
],
"category": "AVERAGE"
},
},
Thuộc tính originLoadingExperience báo cáo các trải nghiệm tổng hợp cho toàn bộ nguồn gốc, chứ không chỉ URL. Báo cáo này cung cấp thông tin giống nhau cho mỗi Chỉ số quan trọng về trang web như đã giải thích trong bước trước đó.
3. Đo lường Các chỉ số quan trọng về trang web thông qua API CrUX
Nhận khóa API
- Trong Google Cloud Console, hãy tìm
Chrome UXrồi chọn API báo cáo trải nghiệm người dùng Chrome trong trình đơn thả xuống. - Trên trang API Báo cáo trải nghiệm người dùng Chrome, hãy nhấp vào Bật, sau đó đợi nút Bật để chuyển sang nút Quản lý và chọn Quản lý.
- Trong trình đơn điều hướng, hãy nhấp vào Thông tin xác thực rồi chọn Tạo thông tin xác thực và gt; khóa API rồi sao chép khóa API.
Đưa ra yêu cầu
- Từ dòng lệnh, hãy yêu cầu dữ liệu hiệu suất cho URL của bạn từ API CrUX và lưu dữ liệu đó trong tệp
response.txt:
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'
Thay thế phần giữ chỗ YOUR_API_KEY bằng khóa API của bạn, sau đó thay thế phần giữ chỗ YOUR_URL bằng URL của bạn.
- Trong trình chỉnh sửa văn bản, hãy mở tệp
response.txt:
Phản hồi.txt
{
"record": {
"key": {
"url": "https://developers.google.com/"
},
"metrics": {
"cumulative_layout_shift": {
"histogram": [
{
"start": "0.00",
"end": "0.10",
"density": 0.47784335300590036
},
{
"start": "0.10",
"end": "0.25",
"density": 0.32379713914174157
},
{
"start": "0.25",
"density": 0.19835950785235579
}
],
"percentiles": {
"p75": "0.23"
}
},
}
},
}
Nội dung phản hồi của API CrUX cung cấp thông tin sau cho từng Chỉ số quan trọng về trang web:
- Thuộc tính
histogramcho biết tỷ lệ phần trăm người dùng có trải nghiệm chậm, trung bình hoặc nhanh cho một chỉ số nhất định. - Thuộc tính
percentilescho biết dữ liệu quan sát theo phân vị thứ 75 cho một chỉ số nhất định.
Nếu bạn thấy thông báo lỗi cho biết không tìm thấy dữ liệu thì không có đủ dữ liệu hiệu suất cho URL đã cho. Vấn đề này thường xảy ra khi bạn kiểm tra các trang web có lưu lượng truy cập thấp.
4. Xin chúc mừng
Xin chúc mừng! Bạn đã đo lường Các chỉ số quan trọng về trang web thông qua API PSI và API CrUX.