เกี่ยวกับ Codelab นี้
1 ข้อควรทราบก่อนที่จะเริ่มต้น
ใน Codelab นี้ คุณเรียนรู้วิธีวัด Core Web Vitals ของหน้าเว็บด้วย PageSpeed Insights (PSI) API และ Chrome UX Report (CrUX) API
API ทั้ง 2 ตัวจะแสดงข้อมูล Core Web Vitals เดียวกัน แต่ API แต่ละรายการจะได้รับประโยชน์แตกต่างกัน นอกจากข้อมูล CrUX จากช่องแล้ว PSI API ยังให้ข้อมูลจาก Lighthouse ซึ่งเป็นเครื่องมือโอเพนซอร์สแบบอัตโนมัติของ Google ที่จะตรวจสอบหน้าเว็บและแนะนําวิธีปรับปรุงหน้าเว็บ CrUX API ไม่ได้ให้ข้อมูล Lighthouse จึงจะทํางานได้เร็วขึ้น
Google ขอแนะนําให้คุณวัด Core Web Vitals ทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อป Core Web Vitals มีเมตริก 3 รายการต่อไปนี้ ซึ่งจะใช้กับหน้าเว็บทุกหน้า และให้ข้อมูลเชิงลึกที่สําคัญเกี่ยวกับประสบการณ์ของผู้ใช้
- การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) วัดประสิทธิภาพในการโหลดและควรเกิดขึ้นภายใน 2.5 วินาทีหลังจากที่หน้าเว็บเริ่มโหลด
- ความล่าช้าของอินพุตแรก (FID) วัดการโต้ตอบและควรเกิดขึ้นภายใน 100 มิลลิวินาที
- Cumulative Layout Shift (CLS) วัดความเสถียรภาพและควรอยู่ภายใน 0.1
สิ่งที่ต้องมีก่อน
- บทความ Web Vitals
- การระบุบทความเกณฑ์เมตริก Core Web Vitals
- ความรู้เกี่ยวกับพื้นฐานในการใช้บรรทัดคําสั่ง
สิ่งที่คุณจะทํา
- วัด Core Web Vitals ของหน้าเว็บด้วย PSI API
- วัด Core Web Vitals ของหน้าเว็บด้วย CrUX API
สิ่งที่ต้องมี
- บัญชี Google
- สิทธิ์เข้าถึงบรรทัดคําสั่ง
- เครื่องมือแก้ไขข้อความที่ต้องการ
- เว็บเบราว์เซอร์ที่คุณเลือก
- URL ที่คุณเลือก (Codelab นี้ใช้ https://developers.google.com)
2 วัด Core Web Vitals ด้วย PSI API
- หากต้องการข้อมูลประสิทธิภาพของ URL เวอร์ชันเดสก์ท็อป ให้เรียกใช้คําสั่ง
curlนี้เพื่อขอข้อมูลจาก PageSpeed Insights API และบันทึกไว้ในไฟล์response.txt
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
แทนที่ตัวยึดตําแหน่ง YOUR_URL ด้วย URL ของคุณ
- หากต้องการข้อมูลประสิทธิภาพของ URL เวอร์ชันอุปกรณ์เคลื่อนที่ ให้ตั้งค่าพารามิเตอร์การค้นหา
strategyเป็นค่าmobileในตอนท้ายของสตริง API ในคําสั่งที่ให้ไว้ในขั้นตอนก่อนหน้า ดังนี้
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
แทนที่ตัวยึดตําแหน่ง YOUR_URL ด้วย URL ของคุณ
- เปิดไฟล์
response.txtในเครื่องมือแก้ไขข้อความแล้วค้นหาพร็อพเพอร์ตี้loadingExperience
การตอบกลับ.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"
},
},
พร็อพเพอร์ตี้ loadingExperience จะรายงานข้อมูลนี้สําหรับ Core Web Vitals แต่ละรายการตาม URL และประเภทอุปกรณ์ที่ระบุในคําขอ API
- พร็อพเพอร์ตี้
percentileระบุเปอร์เซ็นไทล์ที่ 75 สําหรับเมตริกแต่ละรายการ - พร็อพเพอร์ตี้
distributionsระบุเปอร์เซ็นต์ของการดูหน้าเว็บที่มีประสบการณ์ดี ต้องปรับปรุง หรือแย่สําหรับแต่ละเมตริก - พร็อพเพอร์ตี้
categoryจะจัดประเภทประสิทธิภาพของเมตริกแต่ละรายการอย่างช้า ปานกลาง หรือเร็ว
หากไม่มีเนื้อหาในพร็อพเพอร์ตี้ loadingExperience แสดงว่า URL มีข้อมูลประสิทธิภาพไม่เพียงพอ ปัญหานี้มักเกิดขึ้นเมื่อทดสอบหน้าเว็บที่มีการเข้าชมต่ํา
- ค้นหาพร็อพเพอร์ตี้
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"
},
},
พร็อพเพอร์ตี้ originLoadingExperience จะรายงานประสบการณ์โดยรวมสําหรับต้นทางทั้งหมด ไม่ใช่แค่ URL เท่านั้น โดยจะให้ข้อมูลเดียวกันสําหรับ Core Web Vitals แต่ละรายการตามที่อธิบายไว้ในขั้นตอนก่อนหน้า
3 วัด Core Web Vitals ด้วย CrUX API
ดาวน์โหลดคีย์ API
- ใน Google Cloud Console ให้ค้นหา
Chrome UXแล้วเลือก Chrome UX Report API ในเมนูแบบเลื่อนลง - ในหน้า Chrome UX Report API ให้คลิกเปิดใช้ จากนั้นรอให้ปุ่มเปิดใช้เปลี่ยนเป็นปุ่มจัดการ จากนั้นเลือกจัดการ
- ในเมนูการนําทาง ให้คลิกข้อมูลเข้าสู่ระบบ จากนั้นเลือกสร้างข้อมูลเข้าสู่ระบบ > คีย์ API แล้วคัดลอกคีย์ API
ส่งคําขอ
- ขอข้อมูลประสิทธิภาพจาก URL ของ CrUX API จากบรรทัดคําสั่งของคุณ และบันทึกในไฟล์
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"}'
แทนที่ตัวยึดตําแหน่ง YOUR_API_KEY ด้วยคีย์ API ของคุณ และแทนที่ตัวยึดตําแหน่ง YOUR_URL ด้วย URL ของคุณ
- เปิดไฟล์
response.txtในเครื่องมือแก้ไขข้อความ ดังนี้
การตอบกลับ.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"
}
},
}
},
}
การตอบสนองของ CrUX API ให้ข้อมูลนี้สําหรับ Core Web Vitals แต่ละรายการมีดังนี้
- พร็อพเพอร์ตี้
histogramระบุเปอร์เซ็นต์ของผู้ใช้ที่ได้รับประสบการณ์ที่ช้า เฉลี่ย หรือเร็วสําหรับเมตริกหนึ่งๆ - พร็อพเพอร์ตี้
percentilesบ่งชี้ถึงการสังเกตเปอร์เซ็นไทล์ที่ 75 สําหรับเมตริกที่ระบุ
หากคุณเห็นข้อความแสดงข้อผิดพลาดที่ระบุว่าไม่พบข้อมูล #&39 แสดงว่ามีข้อมูลประสิทธิภาพไม่เพียงพอสําหรับ URL ที่ระบุ ปัญหานี้มักเกิดขึ้นเมื่อทดสอบหน้าเว็บที่มีการเข้าชมต่ํา