เผยแพร่: 7 ก.พ. 2023 อัปเดตล่าสุด: 11 เม.ย. 2025
คู่มือนี้จะแนะนำปลายทาง Chrome UX Report (CrUX) History API ซึ่งให้ข้อมูลประสิทธิภาพเว็บเป็นอนุกรมเวลา ข้อมูลนี้จะอัปเดตทุกสัปดาห์และให้คุณดูประวัติย้อนหลังได้ประมาณ 6 เดือน โดยมีจุดข้อมูล 40 จุดที่เว้นระยะห่างกัน 1 สัปดาห์
เมื่อใช้กับการอัปเดตรายวันจากปลายทาง CrUX API เดิม ตอนนี้คุณจะเห็นทั้งข้อมูลล่าสุดและสิ่งที่เกิดขึ้นก่อนหน้านี้ได้อย่างรวดเร็ว ซึ่งทำให้เครื่องมือนี้เป็นเครื่องมือที่มีประสิทธิภาพในการดูการเปลี่ยนแปลงของหน้าเว็บเมื่อเวลาผ่านไป
ลองใช้ API ในหน้านี้
ค้นหา CrUX API รายวัน
สรุปจากบทความก่อนหน้าเกี่ยวกับ CrUX API คุณสามารถดูภาพรวมของข้อมูลภาคสนามสำหรับต้นทางหนึ่งๆ ได้ด้วยวิธีนี้
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" --header 'Content-Type: application/json' --data '{"origin": "https://web.dev"}'
{
"record": {
"key": {
"origin": "https://web.dev"
},
"metrics": {
"largest_contentful_paint": {
"histogram": [{
"start": 0, "end": 2500, "density": 0.9192
}, {
"start": 2500, "end": 4000, "density": 0.0513
}, {
"start": 4000, "density": 0.0294
}],
"percentiles": {
"p75": 1303
}
}
// ...
},
"collectionPeriod": {
"firstDate": { "year": 2022, "month": 12, "day": 27 },
"lastDate": { "year": 2023, "month": 1, "day": 23 }
}
}
}
ภาพรวมนี้ประกอบด้วยค่าความหนาแน่นของฮิสโตแกรมและค่าเปอร์เซ็นไทล์สำหรับระยะเวลาการเก็บรวบรวม 28 วันหนึ่งๆ ซึ่งในกรณีนี้ก็คือตั้งแต่วันที่ 27 ธันวาคม 2022 ถึง 23 มกราคม 2023
ค้นหา CrUX History API
หากต้องการเรียกใช้ปลายทางประวัติ ให้เปลี่ยน queryRecord ใน URL เป็น queryHistoryRecord ในคําสั่ง curl คุณใช้คีย์ API ของ CruX เดียวกันกับการเรียกก่อนหน้านี้ได้
collectionPeriodCount ระบุจํานวนรายการอนุกรมเวลาที่จะแสดง สูงสุด 40 รายการ หากไม่ได้ระบุไว้ ระบบจะใช้ 25 เป็นค่าเริ่มต้น
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=$API_KEY" \
--header 'Content-Type: application/json' \
--data '{"origin": "https://web.dev", "collectionPeriodCount": 40}'
รูปร่างโดยรวมของคำตอบจะคล้ายกัน แต่มีข้อมูลมากกว่ามาก ตอนนี้อนุกรมเวลาของฟิลด์ที่มีค่าเปอร์เซ็นต์ไทล์ 75 (p75) และค่าความหนาแน่นของฮิสโตแกรมจะแสดงแทนจุดข้อมูลเดียว
{
"record": {
"key": {
"origin": "https://web.dev"
},
"metrics": {
"largest_contentful_paint": {
"histogramTimeseries": [{
"start": 0, "end": 2500, "densities": [
0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187
]
}, {
"start": 2500, "end": 4000, "densities": [
0.0521, 0.0513, 0.0518, 0.0518, 0.0526, 0.0527
]
}, {
"start": 4000, "densities": [
0.0288, 0.0282, 0.0286, 0.0285, 0.0290, 0.0285
]
}
],
"percentilesTimeseries": {
"p75s": [
1362, 1352, 1344, 1356, 1366, 1377
]
}
}
// ...
},
"collectionPeriods": [{
"firstDate": { "year": 2022, "month": 7, "day": 10 },
"lastDate": { "year": 2022, "month": 8, "day": 6 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 17 },
"lastDate": { "year": 2022, "month": 8, "day": 13 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 24 },
"lastDate": { "year": 2022, "month": 8, "day": 20 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 31 },
"lastDate": { "year": 2022, "month": 8, "day": 27 }
}, {
"firstDate": { "year": 2022, "month": 8, "day": 7 },
"lastDate": { "year": 2022, "month": 9, "day": 3 }
}, {
"firstDate": { "year": 2022, "month": 8, "day": 14 },
"lastDate": { "year": 2022, "month": 9, "day": 10 }
}
]
}
}
ในตัวอย่างนี้ อนุกรมเวลา densities สำหรับกลุ่ม 0-2500 มิลลิวินาทีของเมตริก Largest Contentful Paint (LCP) คือ [0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187]. ความหนาแน่นแต่ละรายการเหล่านี้สังเกตได้ในระหว่างรายการ collectionPeriods ที่เกี่ยวข้อง เช่น ความหนาแน่นที่ 5 ซึ่งเท่ากับ 0.9183 คือความหนาแน่นของระยะเวลาการเก็บรวบรวมที่ 5 ซึ่งสิ้นสุดในวันที่ 3 กันยายน 2022 และ 0.9187 คือความหนาแน่นของระยะเวลาที่สิ้นสุดในสัปดาห์หลังจากนั้น
กล่าวคือ การตีความรายการอนุกรมเวลาล่าสุดในตัวอย่างสําหรับ https://web.dev พบว่าตั้งแต่วันที่ 14 สิงหาคม 2022 ถึง 10 กันยายน 2022 การโหลดหน้าเว็บ 91.87% มี LCP น้อยกว่า 2,500 มิลลิวินาที 5.27% มีค่าระหว่าง 2,500-4,000 มิลลิวินาที และ 2.85% มีค่ามากกว่า 4,000 มิลลิวินาที
ในทํานองเดียวกัน ก็มีอนุกรมเวลาสําหรับค่า p75: LCP p75 สําหรับวันที่ 14 สิงหาคม 2022 ถึง 10 กันยายน 2022 คือ 1377 ซึ่งหมายความว่าในระยะเวลาการเก็บรวบรวมนี้ ประสบการณ์ของผู้ใช้ 75% มี LCP น้อยกว่า 1377 มิลลิวินาที และประสบการณ์ของผู้ใช้ 25% มี LCP มากกว่า 1377 มิลลิวินาที
แม้ว่าตัวอย่างจะแสดงเฉพาะรายการอนุกรมเวลาและระยะเวลาการเก็บรวบรวม 6 รายการ แต่การตอบกลับจาก API จะแสดงรายการอนุกรมเวลา 25 รายการโดยค่าเริ่มต้นและสูงสุด 40 รายการเมื่อระบุ "collectionPeriodCount": 40 ในคำขอ เนื่องจากวันที่สิ้นสุดของระยะเวลาการเก็บรวบรวมแต่ละระยะเวลาเหล่านี้คือวันเสาร์ที่ห่างกัน 7 วัน โดยมี "collectionPeriodCount": 40 ครอบคลุม 10 เดือน
ในการตอบกลับแต่ละรายการ ความยาวของอนุกรมเวลาสำหรับความหนาแน่นของกล่องฮิสโตแกรมและค่า p75 จะเหมือนกับความยาวของอาร์เรย์ในฟิลด์ collectionPeriods ทุกประการ นั่นคือมีการจับคู่แบบ 1: 1 ตามดัชนีในอาร์เรย์เหล่านี้
ข้อมูลระดับหน้าการค้นหา
นอกจากข้อมูลระดับต้นทางแล้ว CrUX History API ยังอนุญาตให้เข้าถึงข้อมูลย้อนหลังระดับหน้าเว็บได้ด้วย แม้ว่าก่อนหน้านี้จะมีข้อมูลระดับแหล่งที่มาโดยใช้ชุดข้อมูล CrUX ใน BigQuery (หรือใช้แดชบอร์ด CrUX) แต่ข้อมูลย้อนหลังระดับหน้าเว็บจะพร้อมใช้งานก็ต่อเมื่อเว็บไซต์รวบรวมและจัดเก็บข้อมูลเองเท่านั้น ตอนนี้ API ใหม่นี้ปลดล็อกข้อมูลระดับหน้าเว็บที่ผ่านมาแล้ว
คุณสามารถค้นหาข้อมูลระดับหน้าเว็บในลักษณะเดียวกันได้ โดยใช้ url แทน origin ในเพย์โหลด
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=$API_KEY" \
--header 'Content-Type: application/json' \
--data '{"url": "https://web.dev/blog/"}'
ข้อมูลย้อนหลังระดับหน้าเว็บ (และระดับต้นทาง) อยู่ภายใต้ข้อกําหนดของการได้รับสิทธิ์เดียวกันกับ CrUX ที่เหลือ ดังนั้นหน้าเว็บบางหน้าจึงอาจมีบันทึกย้อนหลังที่ไม่สมบูรณ์ ในกรณีเหล่านี้ ข้อมูลที่ "ขาดหายไป" จะแสดงด้วย "NaN" สำหรับความหนาแน่น histogramTimeseries และ null สำหรับ percentilesTimeseries สาเหตุที่ต่างกันคือความหนาแน่นของฮิสโตแกรมจะเป็นตัวเลขเสมอ ส่วนเปอร์เซ็นต์ส่วนต่างๆ อาจเป็นตัวเลขหรือสตริงก็ได้ (CLS ใช้สตริง แม้ว่าจะดูเหมือนตัวเลขก็ตาม)
แสดงข้อมูลเป็นภาพ
วิธีที่ง่ายที่สุดในการทำให้ข้อมูลเป็นภาพคือผ่าน CrUX Vis ซึ่งเป็นเครื่องมือที่สร้างมาเพื่อแสดงให้เห็นถึงประสิทธิภาพของ CrUX History API โดยเฉพาะ อ่านเพิ่มเติมในเอกสารประกอบของ CrUX Vis
หากต้องการสร้างแผนภูมิที่คล้ายกันด้วยตนเอง เราได้สร้าง Colab ตัวอย่างไว้ให้ Colab หรือ "Colaboratory" ให้คุณเขียนและเรียกใช้ Python จากในเบราว์เซอร์ได้ CrUX History API Colab (แหล่งที่มา) ใช้ Python เพื่อเรียก API และสร้างแผนภูมิข้อมูล
Colab นี้ช่วยให้คุณสร้างแผนภูมิ p75, แผนภูมิ 3 กล่อง, รับข้อมูลในรูปแบบตาราง และดูคู่คําขอและการตอบกลับสําหรับ CrUX API ได้โดยกรอกแบบฟอร์มสั้นๆ คุณไม่จำเป็นต้องเป็นนักเขียนโค้ดเพื่อใช้ฟีเจอร์นี้ แต่คุณดูโค้ด Python และแก้ไขให้กลายเป็นสิ่งที่น่าสนใจได้อย่างแน่นอน โปรดเพลิดเพลินและแสดงความคิดเห็นเกี่ยวกับสิ่งที่พบ
แน่นอนว่าคุณใช้ Colab หรือ Python ไม่ได้เพียงอย่างเดียว และนี่เป็นเพียงตัวอย่างวิธีใช้ API ใหม่นี้ เนื่องจากเป็นปลายทาง HTTP ที่อิงตาม JSON คุณจึงค้นหา API จากเทคโนโลยีใดก็ได้
บทสรุป
ก่อนที่จะมีการเปิดตัวปลายทาง CrUX History API เจ้าของเว็บไซต์มีข้อมูลย้อนหลังที่ได้จาก CrUX ได้จำกัด ข้อมูลระดับต้นทางรายเดือนมีให้ใช้งานโดยใช้ BigQuery และหน้าแดชบอร์ด CrUX แต่ไม่มีข้อมูลรายสัปดาห์หรือข้อมูลย้อนหลังระดับหน้าเว็บ เจ้าของเว็บไซต์สามารถบันทึกข้อมูลนี้ด้วยตนเองได้โดยใช้ API รายวัน แต่มักพบว่าจําเป็นต้องใช้หลังจากเมตริกถดถอย
เราหวังว่าการเปิดตัว CrUX History API นี้จะช่วยให้เจ้าของเว็บไซต์เข้าใจเมตริกของเว็บไซต์ที่เปลี่ยนแปลงไปได้ดียิ่งขึ้น รวมถึงใช้เป็นเครื่องมือในการวินิจฉัยเมื่อเกิดปัญหา หากคุณใช้ API ใหม่ เรายินดีรับฟังความคิดเห็นของคุณที่ กลุ่ม Google สำหรับรายงาน UX ของ Chrome (การสนทนา)
ขอขอบคุณ
รูปภาพหลักโดย Dave Herring ใน Unsplash