1. ก่อนเริ่มต้น
ใน Codelab นี้ คุณจะได้เรียนรู้วิธีวัด Core Web Vitals ของหน้าเว็บด้วย PageSpeed Insights API และ CrUX API
API ทั้ง 2 รายการจะแสดงข้อมูล Core Web Vitals ที่เหมือนกัน แต่ API แต่ละรายการก็มีประโยชน์ที่แตกต่างกัน นอกจากข้อมูล CrUX จากฟิลด์แล้ว PageSpeed Insights API ยังให้ข้อมูลจาก Lighthouse ซึ่งเป็นเครื่องมืออัตโนมัติแบบโอเพนซอร์สของ Google ที่ตรวจสอบหน้าเว็บและแนะนำวิธีปรับปรุงหน้าเว็บ CrUX API ไม่ได้ให้ข้อมูล Lighthouse จึงทำงานได้เร็วกว่า
Google ขอแนะนําให้คุณวัด Core Web Vitals ในอุปกรณ์เคลื่อนที่และเดสก์ท็อป Core Web Vitals ประกอบด้วยเมตริก 3 รายการต่อไปนี้ ซึ่งใช้ได้กับหน้าเว็บทั้งหมดและให้ข้อมูลเชิงลึกที่สำคัญเกี่ยวกับประสบการณ์ของผู้ใช้
- Largest Contentful Paint (LCP) วัดประสิทธิภาพการโหลดและควรเกิดขึ้นภายใน 2.5 วินาทีหลังจากที่หน้าเว็บเริ่มโหลด
- First Input Delay (FID) วัดการโต้ตอบและควรเกิดขึ้นภายใน 100 มิลลิวินาที
- Cumulative Layout Shift (CLS) วัดความเสถียรของภาพและควรอยู่ภายใน 0.1
ข้อกำหนดเบื้องต้น
- บทความเกี่ยวกับ Web Vitals
- ความรู้พื้นฐานเกี่ยวกับบรรทัดคำสั่ง
- บทความการกำหนดเกณฑ์เมตริกของ Core Web Vitals
สิ่งที่คุณจะได้เรียนรู้
- วัด Core Web Vitals ของหน้าเว็บด้วย PageSpeed Insights API
- วัด Core Web Vitals ของหน้าเว็บด้วย CrUX API
สิ่งที่คุณต้องมี
- บัญชี Google
- สิทธิ์เข้าถึงบรรทัดคำสั่ง
- โปรแกรมแก้ไขข้อความที่คุณเลือก
- เว็บเบราว์เซอร์ที่คุณเลือก
- URL ที่คุณเลือก (Codelab นี้ใช้ https://developers.google.com)
2. วัด Core Web Vitals ด้วย PageSpeed Insights API
- หากต้องการข้อมูลประสิทธิภาพสำหรับ URL เวอร์ชันเดสก์ท็อป ให้ขอข้อมูลจาก PageSpeed Insights API และบันทึกไว้ในไฟล์
response.txt
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
แทนที่ตัวยึดตำแหน่ง YOUR_URL ด้วย URL ของคุณ
ที่ส่วนท้ายของสตริง API คุณจะเห็นว่าพารามิเตอร์การค้นหา strategy ตั้งค่าเป็นค่า desktop ซึ่งระบุคำขอข้อมูลเดสก์ท็อป
- หากต้องการข้อมูลประสิทธิภาพสำหรับ URL เวอร์ชันอุปกรณ์เคลื่อนที่ ให้ขอข้อมูลจาก PageSpeed Insights API และบันทึกไว้ในไฟล์
response.txt
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
แทนที่ตัวยึดตำแหน่ง YOUR_URL ด้วย URL ของคุณ
ที่ส่วนท้ายของสตริง API คุณจะเห็นว่าพารามิเตอร์การค้นหา strategy ตั้งค่าเป็นค่า mobile ซึ่งระบุคำขอสำหรับข้อมูลบนอุปกรณ์เคลื่อนที่
- ในโปรแกรมแก้ไขข้อความ ให้เปิดไฟล์
response.txtแล้วค้นหาพร็อพเพอร์ตี้loadingExperience
response.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ในเครื่องมือแก้ไขข้อความ
response.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 สำหรับเมตริกที่กําหนด
หากเห็นข้อความแสดงข้อผิดพลาดที่ระบุว่าไม่พบข้อมูล แสดงว่า URL ที่ระบุมีข้อมูลประสิทธิภาพไม่เพียงพอ ปัญหานี้มักเกิดขึ้นเมื่อคุณทดสอบหน้าเว็บที่มีการเข้าชมต่ำ
4. ขอแสดงความยินดี
ยินดีด้วย คุณวัด Core Web Vitals ของหน้าเว็บด้วย PageSpeed Insights API และ CrUX API