ใช้แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพเพื่อรับข้อมูลเชิงลึกที่นําไปใช้ได้จริงและอิงตามกรณีการใช้งานเกี่ยวกับประสิทธิภาพของเว็บไซต์
ทำไมจึงต้องมีแผงใหม่
แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพใหม่เป็นการทดสอบเพื่อแก้ไขปัญหา 3 ประการของนักพัฒนาซอฟต์แวร์เมื่อใช้งานแผงประสิทธิภาพที่มีอยู่
- ข้อมูลมากเกินไป ด้วย UI ที่ออกแบบใหม่ แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพจะปรับปรุงประสิทธิภาพของข้อมูลและแสดงเฉพาะข้อมูลที่เกี่ยวข้อง
- แยกความแตกต่างระหว่างกรณีการใช้งานต่างๆ ได้ยาก แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพรองรับการวิเคราะห์ตามกรณีการใช้งาน ปัจจุบันฟีเจอร์นี้รองรับเฉพาะกรณีการใช้งานการโหลดหน้าเว็บเท่านั้น และจะมีเพิ่มเติมในอนาคตโดยอิงตามความคิดเห็นของคุณ เช่น การโต้ตอบ
- ต้องใช้ความเชี่ยวชาญอย่างลึกซึ้งเกี่ยวกับการใช้งานเบราว์เซอร์เพื่อให้ใช้งานได้อย่างมีประสิทธิภาพ แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพจะไฮไลต์ข้อมูลเชิงลึกที่สำคัญในแผงข้อมูลเชิงลึก พร้อมด้วยความคิดเห็นที่นำไปใช้ได้จริงเกี่ยวกับวิธีแก้ปัญหา
เกริ่นนำ
บทแนะนํานี้จะสอนวิธีวัดและทำความเข้าใจประสิทธิภาพการโหลดหน้าเว็บด้วยแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ อ่านต่อหรือดูวิดีโอบทแนะนำนี้ในเวอร์ชันวิดีโอด้านบน
เปิดแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ
หรือใช้เมนูคำสั่งเพื่อเปิดแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพก็ได้
บันทึกประสิทธิภาพ
แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพบันทึกประสิทธิภาพโดยทั่วไปและตามกรณีการใช้งาน (เช่น การโหลดหน้าเว็บ) ได้
- เปิดหน้าสาธิตนี้ในแท็บใหม่ และเปิดแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพในหน้าดังกล่าว
คุณควบคุมเครือข่ายและ CPU ขณะบันทึกได้ สำหรับบทแนะนำนี้ ให้เลือกปิดใช้แคช และตั้งค่า CPU เป็นช้าลง 4 เท่าในเมนูแบบเลื่อนลง
คลิก วัดการโหลดหน้าเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเมตริกประสิทธิภาพขณะที่โหลดหน้าเว็บซ้ำ จากนั้นจะหยุดการบันทึกโดยอัตโนมัติ 2-3 วินาทีหลังจากที่หน้าเว็บโหลดเสร็จแล้ว
เล่นการบันทึกการแสดงอีกครั้ง
ใช้ตัวควบคุมที่ด้านล่างเพื่อควบคุมการเล่นซ้ำของไฟล์บันทึกเสียง
ดังตัวอย่างต่อไปนี้
- คลิก เล่น เพื่อเล่นวิดีโอการประชุม
- คลิก หยุดชั่วคราวเพื่อหยุดการเล่นซ้ำชั่วคราว
- ปรับความเร็วในการเล่นด้วยเมนูแบบเลื่อนลง
- คลิก สลับการแสดงตัวอย่างภาพเพื่อแสดงหรือซ่อนตัวอย่างภาพ
ไปยังส่วนต่างๆ ของการบันทึกประสิทธิภาพ
เครื่องมือสำหรับนักพัฒนาเว็บจะซูมออกโดยอัตโนมัติเพื่อแสดงไทม์ไลน์การบันทึกทั้งหมด คุณไปยังส่วนต่างๆ ของการบันทึกได้ด้วยการซูมและเลื่อนไทม์ไลน์
หากต้องการซูมและเลื่อนไทม์ไลน์ไปทางซ้ายและขวา ให้ใช้ปุ่มการนำทางที่เกี่ยวข้องดังนี้
- คลิกไทม์ไลน์เพื่อเลื่อนส่วนหัวของตัวควบคุมการเล่นเพื่อดูเฟรมที่ต้องการ
- คลิกการควบคุม ซูมเข้า และ ซูมออกที่ด้านล่างเพื่อซูม ในกรณีนี้ คุณจะซูมตามส่วนหัวของตัวควบคุมการเล่น
- ลากแถบเลื่อนแนวนอนที่ด้านล่างเพื่อย้ายไทม์ไลน์ไปทางซ้ายและขวา
หรือคุณจะใช้แป้นพิมพ์ลัดก็ได้เช่นกัน คลิกปุ่ม เพื่อดูทางลัด
เมื่อใช้ทางลัด คุณจะซูมตามเคอร์เซอร์เมาส์
ดูข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ
ดูรายการข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพในแผงข้อมูลเชิงลึก ระบุและแก้ไขปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้น
วางเมาส์เหนือข้อมูลเชิงลึกแต่ละรายการเพื่อไฮไลต์ในแทร็กหลัก
คลิกข้อมูลเชิงลึก เช่น คำขอบล็อกการแสดงผล เพื่อเปิดในแผงรายละเอียด หากต้องการทำความเข้าใจปัญหาเพิ่มเติม ให้ดูที่ส่วนไฟล์ ปัญหา วิธีแก้ไข และอื่นๆ
ดูเมตริกประสิทธิภาพของ Web Vitals
Web Vitals เป็นโครงการริเริ่มของ Google ที่ให้คำแนะนำแบบองค์รวมเกี่ยวกับสัญญาณคุณภาพซึ่งจำเป็นต่อการมอบประสบการณ์อันยอดเยี่ยมให้แก่ผู้ใช้บนเว็บ
ดูเมตริกเหล่านี้ได้ในแผงไทม์ไลน์และข้อมูลเชิงลึก
วางเมาส์เหนือข้อมูลเชิงลึกในไทม์ไลน์เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเมตริก
ดูความล่าช้าของ Contentful Paint ที่ใหญ่ที่สุด
Largest Contentful Paint (LCP) เป็นหนึ่งในเมตริกของ Core Web Vitals โดยจะรายงานเวลาแสดงผลของรูปภาพหรือบล็อกข้อความที่ใหญ่ที่สุดซึ่งมองเห็นได้ภายในวิวพอร์ต เมื่อเทียบกับเวลาที่หน้าเว็บเริ่มโหลดเป็นครั้งแรก
คะแนน LCP ที่ดีคือไม่เกิน 2.5 วินาที
หาก Contentful Paint ที่ใหญ่ที่สุดในหน้าเว็บใช้เวลาแสดงผลนานกว่า คุณจะเห็นป้าย LCP ที่มีสี่เหลี่ยมจัตุรัสสีเหลืองหรือสามเหลี่ยมสีแดงในไทม์ไลน์
หากต้องการเปิดแผงรายละเอียด ให้คลิกป้าย LCP บนไทม์ไลน์หรือในแผงข้อมูลเชิงลึกทางด้านขวา คุณจะดูสาเหตุที่เป็นไปได้สำหรับความล่าช้าและคำแนะนำเกี่ยวกับวิธีแก้ไขได้ในแผง
ในตัวอย่างนี้ คำขอจะบล็อกการแสดงผลและคุณใช้สไตล์วิกฤตแบบแทรกในบรรทัดเพื่อแก้ไขได้ ดูข้อมูลเพิ่มเติมได้ที่กำจัดทรัพยากรที่บล็อกการแสดงผล
หากต้องการดูส่วนย่อยของเวลาในการแสดงผล LCP ให้เลื่อนลงไปที่ส่วนรายละเอียด > รายละเอียดการจับเวลา
เวลาการแสดงผล LCP ประกอบด้วยส่วนย่อยต่อไปนี้
| ส่วนย่อย LCP | คำอธิบาย |
|---|---|
| เวลาจนถึงไบต์แรก (TTFB) | ระยะเวลาตั้งแต่ที่ผู้ใช้เริ่มโหลดหน้าเว็บจนถึงเวลาที่เบราว์เซอร์ได้รับไบต์แรกของการตอบกลับเอกสาร HTML |
| ความล่าช้าในการโหลดทรัพยากร | เดลต้าระหว่าง TTFB กับเวลาที่เบราว์เซอร์เริ่มโหลดทรัพยากร LCP |
| เวลาที่ใช้ในการโหลดทรัพยากร | เวลาที่ใช้ในการโหลดทรัพยากร LCP |
| ความล่าช้าในการแสดงผลองค์ประกอบ | เดลต้าระหว่างเวลาที่ทรัพยากร LCP โหลดเสร็จจนกว่าองค์ประกอบ LCP จะแสดงผลโดยสมบูรณ์ |
หากองค์ประกอบ LCP ไม่จำเป็นต้องมีการโหลดทรัพยากรเพื่อแสดงผล ระบบจะละเว้นความล่าช้าและเวลาที่ใช้ในการโหลดทรัพยากร ตัวอย่างเช่น ในกรณีที่องค์ประกอบเป็นโหนดข้อความที่แสดงผลด้วยแบบอักษรของระบบ
ดูกิจกรรมการเปลี่ยนเลย์เอาต์
ดูกิจกรรมการเปลี่ยนเลย์เอาต์ในแทร็กการเปลี่ยนเลย์เอาต์
ระบบจะจัดกลุ่มการเปลี่ยนเลย์เอาต์ในกรอบเวลาเซสชัน ในตัวอย่างนี้มีกรอบเวลาเซสชัน 2 หน้าต่าง กรอบเวลาเซสชันมีช่องว่าง
Cumulative Layout Shift (CLS) เป็นหนึ่งในเมตริก Web Vitals หลัก ใช้แทร็กการเปลี่ยนเลย์เอาต์เพื่อระบุปัญหาที่อาจเกิดขึ้นและสาเหตุของการเปลี่ยนเลย์เอาต์
เริ่มต้นด้วยกรอบเวลาเซสชันที่ใหญ่ที่สุดเสมอเมื่อปรับปรุงเมตริก CLS ในตัวอย่างของเรา หน้าต่างเซสชัน 1 เป็นหน้าต่างที่ใหญ่ที่สุด โดยขึ้นอยู่กับสีและระดับของพื้นหลัง
คลิกภาพหน้าจอเพื่อดูรายละเอียดการเปลี่ยนเลย์เอาต์ ระบุสาเหตุที่เป็นไปได้และองค์ประกอบที่ได้รับผลกระทบ
ในตัวอย่างของเรา สาเหตุที่เป็นไปได้คือสื่อที่ไม่มีขนาด ศึกษาวิธีแก้ไขได้ที่ เพิ่มประสิทธิภาพ Cumulative Layout Shift
ทําความเข้าใจคะแนนการเปลี่ยนแปลงเลย์เอาต์
หากต้องการทำความเข้าใจวิธีคำนวณคะแนน ให้ใช้ส่วนกรอบเวลาในแผงรายละเอียด หน้าต่างจะแสดงกรอบเวลาเซสชันที่มีการเปลี่ยนเลย์เอาต์ปัจจุบัน
หากมีการขยับทั้งหน้า คะแนนสูงสุดของการเปลี่ยนเลย์เอาต์แต่ละครั้งคือ 1 ในตัวอย่างของเรา การเปลี่ยนเลย์เอาต์ครั้งแรกได้คะแนน 0.15 การเปลี่ยนเลย์เอาต์ครั้งที่ 2 ได้คะแนน 0.041
คะแนนรวมสำหรับกรอบเวลาเซสชันนี้คือ 0.19 ต้องปรับปรุงตามเกณฑ์ CLS สีพื้นหลังของหน้าต่างเซสชันจะยังคงเหมือนเดิม
กราฟพื้นหลังของหน้าต่างเซสชันจะเพิ่มขึ้นเมื่อเวลาผ่านไป คะแนนสะสมของการเปลี่ยนเลย์เอาต์จะสะท้อนให้เห็นการเพิ่มขึ้น ณ เวลานั้น
ดูกิจกรรมในเครือข่าย
ดูกิจกรรมในเครือข่ายในแทร็กเครือข่าย คุณสามารถขยายแทร็กเครือข่ายเพื่อดูกิจกรรมของเครือข่ายทั้งหมด จากนั้นคลิกที่แต่ละรายการเพื่อดูรายละเอียด
ดูกิจกรรมของโหมดแสดงภาพ
ดูกิจกรรมการแสดงผลในแทร็กตัวแสดงผล คุณสามารถขยายแต่ละโหมดแสดงภาพเพื่อดูกิจกรรมและคลิกแต่ละรายการเพื่อดูรายละเอียด
ดูกิจกรรม GPU
ดูกิจกรรม GPU ในแทร็ก GPU แทร็ก GPU จะซ่อนอยู่โดยค่าเริ่มต้น หากต้องการเปิดใช้ โปรดเลือก GPU ในการตั้งค่า
ดูระยะเวลาของผู้ใช้
หากต้องการดูการวัดประสิทธิภาพที่กำหนดเอง ให้ใช้ระยะเวลาของผู้ใช้ และแสดงภาพเวลาด้วยแทร็กระยะเวลา ดูข้อมูลเพิ่มเติมได้ที่ UserTiming API
ไปที่หน้าสาธิตนี้ ซึ่งคำนวณเวลาที่ผ่านไปของการโหลดข้อความ
วิธีดูระยะเวลาของผู้ใช้
- ทำเครื่องหมายสถานที่ในแอปพลิเคชันด้วย
performance.mark() - วัดเวลาที่ผ่านไประหว่างเครื่องหมายด้วย
performance.measure() - บันทึกประสิทธิภาพ
- ดูการวัดในแทร็กการจับเวลา หากคุณไม่เห็นแทร็ก ให้ตรวจสอบระยะเวลาของผู้ใช้ในการตั้งค่า
- หากต้องการดูรายละเอียด ให้คลิกระยะเวลาในแทร็ก
ปรับแต่ง UI
หากต้องการปรับแต่งไทม์ไลน์และการติดตาม ให้คลิกไอคอนการตั้งค่า ของแผงและเลือกตัวเลือกที่คุณต้องการ
ส่งออกไฟล์บันทึกเสียง
หากต้องการบันทึกไฟล์บันทึกเสียง ให้คลิกส่งออก
นําเข้าไฟล์บันทึกเสียง
หากต้องการโหลดไฟล์บันทึกเสียง ให้เลือกนำเข้า
ลบไฟล์บันทึกเสียง
หากต้องการลบไฟล์บันทึกเสียง ให้ทําดังนี้
- คลิก ลบ กล่องโต้ตอบการยืนยันจะเปิดขึ้น
- ในกล่องโต้ตอบ ให้คลิกลบเพื่อยืนยันการลบ