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