เผยแพร่: 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 ถึง 2, 500 มิลลิวินาทีของเมตริก 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 มิลลิวินาที
ในทำนองเดียวกัน ก็มีอนุกรมเวลาสำหรับค่าเปอร์เซ็นไทล์ที่ 75 ด้วย โดย LCP p75 สำหรับวันที่ 14 สิงหาคม 2022 ถึง 10 กันยายน 2022 คือ 1377 ซึ่งหมายความว่าในช่วงระยะเวลาการรวบรวมข้อมูลนี้ ประสบการณ์ของผู้ใช้ 75% มี LCP น้อยกว่า 1,377 มิลลิวินาที และประสบการณ์ของผู้ใช้ 25% มี LCP มากกว่า 1,377 มิลลิวินาที
แม้ว่าตัวอย่างจะแสดงรายการอนุกรมเวลาและระยะเวลาการรวบรวมเพียง 6 รายการ แต่การตอบกลับจาก API จะแสดงรายการอนุกรมเวลา 25 รายการโดยค่าเริ่มต้น และสูงสุด 40 รายการเมื่อระบุ "collectionPeriodCount": 40 ในคำขอ เนื่องจากวันที่สิ้นสุดของระยะเวลาการเก็บรวบรวมแต่ละช่วงคือวันเสาร์ที่ห่างกัน 7 วัน ดังนั้น "collectionPeriodCount": 40 จึงครอบคลุม 10 เดือน
ในการตอบกลับใดๆ ความยาวของอนุกรมเวลาสำหรับความหนาแน่นของกลุ่มฮิสโทแกรมและสำหรับค่า p75 จะเท่ากับความยาวของอาร์เรย์ในฟิลด์ collectionPeriods อย่างแน่นอน โดยจะมีการจับคู่แบบหนึ่งต่อหนึ่งตามดัชนีในอาร์เรย์เหล่านี้
ค้นหาข้อมูลระดับหน้าเว็บ
นอกจากข้อมูลระดับต้นทางแล้ว CrUX History API ยังอนุญาตให้เข้าถึงข้อมูลระดับหน้าที่ผ่านมาด้วย แม้ว่าข้อมูลระดับต้นทางจะพร้อมใช้งานก่อนหน้านี้โดยใช้ชุดข้อมูล CrUX ใน BigQuery แต่ข้อมูลย้อนหลังระดับหน้าเว็บจะพร้อมใช้งานก็ต่อเมื่อเว็บไซต์รวบรวมและจัดเก็บข้อมูลด้วยตนเองเท่านั้น ตอนนี้ 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 จากภายในเบราว์เซอร์ได้ Colab ของ CrUX History API (แหล่งที่มา) ใช้ Python เพื่อเรียก API และสร้างแผนภูมิข้อมูล
Colab นี้ช่วยให้คุณสร้างแผนภูมิ p75, แผนภูมิ 3 บิน, รับข้อมูลในรูปแบบตาราง และดูคู่คำขอและการตอบกลับสำหรับ CrUX API ได้โดยการกรอกแบบฟอร์มสั้นๆ คุณไม่จำเป็นต้องเป็นโปรแกรมเมอร์เพื่อใช้ฟีเจอร์นี้ แต่คุณสามารถดูโค้ด Python และแก้ไขให้เป็นสิ่งที่น่าทึ่งได้ โปรดเพลิดเพลินและอย่าลังเลที่จะแสดงความคิดเห็นเกี่ยวกับสิ่งที่คุณพบ
แน่นอนว่าคุณไม่ได้จำกัดอยู่แค่ Colab หรือ Python และนี่เป็นเพียงตัวอย่างหนึ่งของวิธีใช้ API ใหม่นี้ API เป็นปลายทาง HTTP ที่อิงตาม JSON จึงสามารถค้นหาได้จากเทคโนโลยีใดก็ได้
บทสรุป
ก่อนที่จะมีการเปิดตัวปลายทาง CrUX History API เจ้าของเว็บไซต์จะได้รับข้อมูลย้อนหลังจาก CrUX อย่างจำกัด ข้อมูลระดับต้นทางรายเดือนพร้อมใช้งานโดยใช้ BigQuery แต่ข้อมูลรายสัปดาห์และข้อมูลย้อนหลังระดับหน้าเว็บไม่พร้อมใช้งาน เจ้าของเว็บไซต์สามารถบันทึกข้อมูลนี้ได้ด้วยตนเองโดยใช้ API รายวัน แต่โดยปกติแล้วความจำเป็นในการใช้ข้อมูลนี้จะพบหลังจากที่เมตริกถดถอยแล้วเท่านั้น
เราหวังว่าการเปิดตัว CrUX History API นี้จะช่วยให้เจ้าของเว็บไซต์เข้าใจเมตริกของเว็บไซต์ที่เปลี่ยนแปลงไปได้ดียิ่งขึ้น และเป็นเครื่องมือวินิจฉัยเมื่อเกิดปัญหา หากคุณใช้ API ใหม่ เรายินดีรับฟังความคิดเห็นที่กลุ่ม Google ของรายงานประสบการณ์ผู้ใช้ของ Chrome (การสนทนา)
คำขอบคุณ
รูปภาพหลักโดย Dave Herring ใน Unsplash