การใช้รายงาน UX ของ Chrome ใน PageSpeed Insights

PageSpeed Insights (PSI) เป็นเครื่องมือสำหรับนักพัฒนาเว็บเพื่อทําความเข้าใจประสิทธิภาพของหน้าเว็บและวิธีปรับปรุง โดยใช้ Lighthouse ในการตรวจสอบหน้าเว็บและระบุโอกาสในการปรับปรุงประสิทธิภาพ และยังผสานรวมกับรายงาน UX ของ Chrome (CrUX) เพื่อแสดงประสบการณ์รวมของผู้ใช้จริงกับหน้าเว็บและต้นทาง ในคู่มือนี้ คุณจะได้เรียนรู้วิธีใช้ PSI เพื่อดึงข้อมูลเชิงลึกจาก CrUX และทำความเข้าใจประสบการณ์ของผู้ใช้ให้ดียิ่งขึ้น

ข้อมูลฟิลด์จาก CrUX ใน PageSpeed Insights

การอ่านข้อมูล

เริ่มต้นใช้งานโดยไปที่ https://pagespeed.web.dev/ แล้วป้อน URL ของหน้าเว็บที่ต้องการทดสอบ แล้วคลิกวิเคราะห์

ป้อน URL เพื่อเริ่มต้นใช้งาน PageSpeed Insights

หลังจากผ่านไปสักครู่ จะมีการตรวจสอบ Lighthouse และคุณจะเห็นส่วนต่างๆ ที่มีข้อมูลจาก CrUX ("ดูสิ่งที่ผู้ใช้จริงพบ") และ Lighthouse ("วิเคราะห์ปัญหาด้านประสิทธิภาพ") CrUX เป็นชุดประสบการณ์ของผู้ใช้จริงจากการทำงานจริง ขณะที่ Lighthouse เป็นการทดสอบที่มีการควบคุมในห้องทดลอง

ข้อมูลฟิลด์จาก CrUX ใน PageSpeed Insights

ในส่วนประสบการณ์ของผู้ใช้จริง ระบบจะจัดกลุ่มเมตริกตาม Core Web Vitals และเมตริกอื่นๆ ที่โดดเด่น เมตริก Core Web Vitals ทั้ง 3 ประเภทจะมีดังนี้ ได้แก่ Largest Contentful Paint (LCP), First Input Delay (FID) และ Cumulative Layout Shift ตามมาด้วยเมตริกสำคัญอื่นๆ ได้แก่ First Contentful Paint (FCP), Interaction to Next Paint (INP) และ Time to First Byte (TTFB)

Core Web Vitals

  • LCP จะวัดเวลาจนกว่าหน้าเว็บจะแสดงสิ่งที่น่าจะเป็นเนื้อหาหลักของหน้า เช่น รูปภาพหลักหรือส่วนหัว
  • INP จะวัดเวลาในการตอบสนองของการโต้ตอบทั้งหมดที่ผู้ใช้ทำกับหน้าเว็บ และรายงานค่าเดียวซึ่งการโต้ตอบทั้งหมด (หรือเกือบทั้งหมด) ต่ำกว่า
  • CLS วัดระดับความไม่เสถียรของเลย์เอาต์ในหน้าเว็บเนื่องจากมีการเปลี่ยนแปลงต่างๆ เช่น การแทรกเนื้อหาที่โหลดแบบไม่พร้อมกัน

เมตริกอื่นๆ ที่โดดเด่น

  • FCP จะวัดเวลาจนกว่าหน้าเว็บจะแสดงสิ่งที่อยู่เบื้องหน้า เช่น ข้อความหรือโลโก้
  • TTFB เป็นเมตริกทดลองที่วัดเวลาระหว่างคำขอทรัพยากรและเวลาที่ไบต์แรกของการตอบกลับเริ่มมาถึง
  • FID ซึ่งปัจจุบันเลิกใช้งานแล้วและแทนที่ด้วย INP จะวัดการโต้ตอบของหน้าเว็บ ตั้งแต่การโต้ตอบแรกของผู้ใช้ไปจนถึงเวลาที่หน้าเว็บตอบสนอง

เกณฑ์เมตริก

ตารางนี้อธิบายวิธีการจัดหมวดหมู่ค่าของเมตริกเหล่านี้เป็น "ดี" "ต้องปรับปรุง" หรือ "แย่"

เมตริก | "ดี" | "ต้องการการปรับปรุง" | "แย่" -- | -- | -- | -- LCP | 0–2500ms | 2500–4000ms | 4000 ms+ CLS | 0.00-0.10 | 0.10–0.25 | 0.25+ INP0–2ms |

เมตริก Core Web Vitals เป็นเมตริกที่สำคัญที่สุดและผู้ใช้จริงได้รับประสบการณ์โดยตรง เมตริกอื่นๆ อาจใช้เป็นการวินิจฉัย แต่ผู้ใช้จริงไม่จำเป็นต้องรับรู้ได้ ดังนั้น เมตริกเหล่านี้จึงไม่ได้นำมาใช้ในการประเมิน Core Web Vitals และการมีคุณสมบัติไม่ตรงตามเกณฑ์ "ดี" จะมีความสำคัญก็ต่อเมื่อมีผลเสียต่อ Core Web Vitals เท่านั้น

ประสบการณ์ของผู้ใช้จะแสดงใน PSI ได้ 3 วิธีดังนี้

  • ป้ายกำกับที่สรุปหน้าเว็บว่าผ่านหรือไม่ผ่านการประเมิน Core Web Vitals
  • เปอร์เซ็นไทล์ที่วัดเป็นวินาทีหรือมิลลิวินาที (CLS ไม่มีหน่วย)
  • การกระจายซึ่งแสดงเปอร์เซ็นต์ของประสบการณ์ที่ "ดี" "ต้องปรับปรุง" และ "แย่" พร้อมใช้งานได้โดยคลิกขยายมุมมองที่ด้านขวาบนของส่วนนี้

มุมมองแบบขยายของข้อมูล CrUX ใน PageSpeed Insights

ในภาพหน้าจอด้านบน หน้าเว็บมีป้ายกำกับว่า "ผ่าน" การประเมิน Core Web Vitals คุณต้องจัดหมวดหมู่เปอร์เซ็นไทล์เป็น "ดี" ใน Core Web Vitals ทั้ง 3 รายการจึงจะสอบผ่าน มิเช่นนั้น การประเมินจะปรากฏเป็น "ไม่ผ่าน" บางหน้าอาจมีข้อมูล INP ไม่เพียงพอ ในกรณีนี้ หน้าเว็บจะได้รับการประเมินจากเมตริก Core Web Vitals อีก 2 รายการ

เปอร์เซ็นต์ไทล์ที่แสดงของเมตริกทั้งหมดจะสอดคล้องกับเปอร์เซ็นไทล์ที่ 75 ในสถิติ เปอร์เซ็นไทล์คือการวัดที่ระบุค่าด้านล่างซึ่งมาจากเปอร์เซ็นต์ของตัวอย่าง ตัวอย่างเช่น ภาพหน้าจอด้านบนแสดงให้เห็นว่าเปอร์เซ็นไทล์ที่ 75 ของ FID คือ 13 มิลลิวินาที ซึ่งหมายความว่า 75% ของการใช้งาน FID เร็วกว่า 13 มิลลิวินาที ค่าเหล่านี้เป็นรหัสสีตามตารางเกณฑ์ด้านบน โดยค่า "ดี" เป็นสีเขียว ค่า "ต้องปรับปรุง" คือสีส้ม และค่า "ช้า" จะเป็นสีแดง

สุดท้าย การกระจายของเมตริกแต่ละรายการแสดงให้เห็นโดยใช้การจัดกลุ่ม "ดี" "ต้องปรับปรุง" และ "แย่" เช่น ประสบการณ์ LCP ในหน้านี้อยู่ในระดับ "ดี" (น้อยกว่า 2.5 วินาที) 90% ของเวลาทั้งหมด FID มีสถานะ "ช้า" (อย่างน้อย 300 มิลลิวินาที) 1% ของเวลาทั้งหมด การกระจายเหล่านี้แสดงถึงประสบการณ์ของผู้ใช้ทั้งหมดในหน้าเว็บ และรูปร่างของกราฟเหล่านี้บ่งบอกถึงแนวโน้มที่จะ "ดี" หรือ "แย่"

สรุปประสิทธิภาพของต้นทาง

PSI ยังมีข้อมูลสรุปประสิทธิภาพของต้นทางด้วย ซึ่งเป็นการรวมประสบการณ์ของผู้ใช้ในทุกหน้าของต้นทาง คุณจะได้รับสถิติเดียวกันสำหรับต้นทางทั้งหมดที่มีอยู่สำหรับแต่ละหน้า ข้อมูลนี้สอดคล้องกับสิ่งที่มีอยู่ใน BigQuery ในขณะที่ประสิทธิภาพระดับหน้าเว็บไม่เปิดให้การค้นหา

ประสิทธิภาพ CrUX ดั้งเดิมใน PageSpeed Insights

ข้อมูลระดับต้นทางบน PSI เทียบกับ BigQuery มีความแตกต่างกันอยู่ 1 ประการ โดยชุดข้อมูลใน BigQuery จะเผยแพร่เดือนละครั้งและรวมข้อมูลจากเดือนก่อนหน้าตามปฏิทิน ตัวอย่างเช่น ชุดข้อมูลปี 202005 จะรวมประสบการณ์ของผู้ใช้ทั้งหมดที่เกิดขึ้นในเดือนพฤษภาคม 2020 ในทางกลับกัน PSI จะรวบรวมข้อมูลใหม่ทุกวันซึ่งรวมช่วง 28 วันก่อนหน้า ดังนั้นผลลัพธ์ที่คุณเห็นในวันนี้จึงอาจต่างออกไปในอนาคต และไม่จําเป็นต้องเหมือนกับที่คุณเห็นในข้อมูลที่รวบรวมมาในเดือนปัจจุบันใน BigQuery

การตอบสนองเมื่อไม่มีข้อมูล URL ใน CrUX

หาก URL ที่คุณป้อนไม่พร้อมใช้งานใน CrUX PageSpeed Insights จะพยายามสำรองข้อมูลระดับต้นทางดังที่แสดงด้านล่าง การคลิกที่ไอคอนข้างปุ่ม URL นี้ที่ปิดใช้งานจะแสดงคำอธิบายเพิ่มเติม

ไม่มีข้อมูล CrUX ระดับ URL ใน PageSpeed Insights ดังนั้นการแสดงข้อมูลต้นทาง

หากข้อมูลระดับต้นทางก็ไม่พร้อมใช้งานใน CrUX เช่นกัน PSI จะแสดงส่วนนี้ไม่ได้ และคุณจะเห็นไม่มีข้อมูล ข้อมูลห้องทดลองจาก Lighthouse ยังพร้อมใช้งานเพื่อให้การประมาณประสิทธิภาพของหน้าเว็บได้

ไม่มีข้อมูล CrUX ใน PageSpeed Insights

คำถามที่พบบ่อย

ฉันจะใช้ PageSpeed Insights แทนเครื่องมืออื่นๆ เมื่อใด

PSI รวมข้อมูลประสบการณ์ของผู้ใช้ในชีวิตจริงของ CrUX เข้ากับการวินิจฉัยประสิทธิภาพจากห้องทดลองของ Lighthouse ซึ่งจะช่วยให้คุณดูความเร็วหน้าเว็บและวิธีทำให้หน้าเว็บโหลดเร็วขึ้นได้ในที่เดียว การรวมข้อมูลภาคสนามใน PSI ในแต่ละวันเป็นที่ที่ยอดเยี่ยมในการตรวจสอบประสิทธิภาพของต้นทางหรือ URL ได้อย่างใกล้ชิดมากกว่าเครื่องมือที่มีการรวบรวมข้อมูลไม่บ่อยนัก

การใช้ PageSpeed Insights มีข้อจำกัดไหม

PSI ให้ข้อมูลรวบรวมรายวันล่าสุดเท่านั้น คุณจึงอาจไม่เห็นแนวโน้มประสิทธิภาพของเว็บไซต์เสมอไป นอกจากนี้ยังมีเมตริกที่ไม่ใช่ค่าสำคัญบางส่วนที่รวมอยู่ในชุดข้อมูล CrUX ที่ไม่แสดงใน PSI

ฉันจะดูข้อมูลเพิ่มเติมเกี่ยวกับ PageSpeed Insights ได้จากที่ใด

ดูข้อมูลเพิ่มเติมได้ในเอกสาร PSI