ใช้แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพเพื่อรับข้อมูลเชิงลึกที่นําไปใช้ได้จริงและอิงตามกรณีการใช้งานเกี่ยวกับประสิทธิภาพของเว็บไซต์
ภาพรวม
แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพช่วยให้คุณทำสิ่งต่อไปนี้ได้
- บันทึกและวัดประสิทธิภาพการโหลดหน้าเว็บ
- ดูเมตริกประสิทธิภาพของ Web Vitals
- ดูกิจกรรมในเครือข่าย
- จำลองความเร็วของ CPU และเครือข่ายที่ช้าลง
- นำเข้าและส่งออกไฟล์บันทึก
เหตุใดจึงต้องมีแผงใหม่
แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพใหม่เป็นการทดลองเพื่อแก้ปัญหา 3 ประการที่นักพัฒนาแอปพบเมื่อใช้แผงประสิทธิภาพที่มีอยู่
- ข้อมูลมากเกินไป UI ที่ออกแบบใหม่ช่วยให้แผงข้อมูลเชิงลึกด้านประสิทธิภาพจัดระเบียบข้อมูลและแสดงเฉพาะข้อมูลที่เกี่ยวข้อง
- แยกความแตกต่างระหว่างกรณีการใช้งานได้ยาก แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพรองรับการวิเคราะห์ตามกรณีการใช้งาน ปัจจุบันรองรับเฉพาะกรณีการใช้งานการโหลดหน้าเว็บ และจะเพิ่มกรณีการใช้งานอื่นๆ ในอนาคตตามความคิดเห็นของคุณ เช่น การโต้ตอบ
- ต้องมีความเชี่ยวชาญอย่างลึกซึ้งเกี่ยวกับวิธีการทำงานของเบราว์เซอร์จึงจะใช้งานได้อย่างมีประสิทธิภาพ แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพจะไฮไลต์ข้อมูลเชิงลึกที่สำคัญในบานหน้าต่างข้อมูลเชิงลึก พร้อมความคิดเห็นที่นำไปใช้ได้จริงเกี่ยวกับวิธีแก้ไขปัญหา
บทนำ
บทแนะนำนี้จะสอนวิธีวัดและทำความเข้าใจประสิทธิภาพการโหลดหน้าเว็บด้วยแผงข้อมูลเชิงลึกด้านประสิทธิภาพ อ่านต่อหรือดูวิดีโอเวอร์ชันของบทแนะนำนี้ที่ด้านบน
เปิดแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
คลิกตัวเลือกเพิ่มเติม > เครื่องมือเพิ่มเติม > ข้อมูลเชิงลึกด้านประสิทธิภาพ
หรือใช้เมนูคำสั่งเพื่อเปิดแผงข้อมูลเชิงลึกด้านประสิทธิภาพ
บันทึกประสิทธิภาพ
แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพสามารถบันทึกประสิทธิภาพทั่วไปและประสิทธิภาพที่ขับเคลื่อนด้วยกรณีการใช้งาน (เช่น การโหลดหน้าเว็บ)
- เปิดหน้าเดโมนี้ในแท็บใหม่ แล้วเปิดแผงข้อมูลเชิงลึกด้านประสิทธิภาพในหน้าดังกล่าว
คุณสามารถควบคุมเครือข่ายและ CPU ขณะบันทึกได้ สำหรับบทแนะนำนี้ ให้เลือกปิดใช้แคชและตั้งค่า CPU เป็นช้าลง 4 เท่าในเมนูแบบเลื่อนลง
คลิก วัดการโหลดหน้าเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเมตริกประสิทธิภาพขณะที่หน้าเว็บโหลดซ้ำ แล้วหยุดการบันทึกโดยอัตโนมัติ 2-3 วินาทีหลังจากที่หน้าเว็บโหลดเสร็จ
เล่นการบันทึกประสิทธิภาพอีกครั้ง
ใช้ตัวควบคุมที่ด้านล่างเพื่อควบคุมการเล่นซ้ำของการบันทึก
ตัวอย่างวิธีการทำมีดังนี้
- คลิก Play เพื่อเล่นการบันทึก
- คลิก Pause เพื่อหยุดการเล่นซ้ำชั่วคราว
- ปรับความเร็วในการเล่นด้วยเมนูแบบเลื่อนลง
- คลิก สลับการแสดงตัวอย่างภาพเพื่อแสดงหรือซ่อนการแสดงตัวอย่างภาพ
ไปยังส่วนต่างๆ ของการบันทึกประสิทธิภาพ
เครื่องมือสำหรับนักพัฒนาเว็บจะซูมออกโดยอัตโนมัติเพื่อแสดงไทม์ไลน์การบันทึกทั้งหมด คุณไปยังส่วนต่างๆ ของการบันทึกได้ด้วยการซูมและเลื่อนไทม์ไลน์
หากต้องการซูมและเลื่อนไทม์ไลน์ไปทางซ้ายและขวา ให้ใช้ปุ่มนำทางที่เกี่ยวข้อง
- คลิกไทม์ไลน์เพื่อย้ายส่วนหัวของตัวควบคุมการเล่นเพื่อดูเฟรมที่ต้องการ
- คลิกตัวควบคุม ซูมเข้าและ ซูมออกที่ด้านล่างเพื่อซูม ในกรณีนี้ คุณจะซูมตามหัวอ่าน
- ลากแถบเลื่อนแนวนอนที่ด้านล่างเพื่อเลื่อนไทม์ไลน์ไปทางซ้ายและขวา
หรือจะใช้แป้นพิมพ์ลัดก็ได้ คลิกปุ่ม เพื่อดูทางลัด
เมื่อใช้แป้นพิมพ์ลัด คุณจะซูมตามเคอร์เซอร์เมาส์
ดูข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ
ดูรายการข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพในบานหน้าต่างข้อมูลเชิงลึก ระบุและแก้ไขปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้น
วางเมาส์เหนือข้อมูลเชิงลึกแต่ละรายการเพื่อไฮไลต์ข้อมูลเหล่านั้นในแทร็กหลัก
คลิกข้อมูลเชิงลึก เช่น คำขอที่บล็อกการแสดงผล เพื่อเปิดในแผงรายละเอียด หากต้องการทำความเข้าใจปัญหาเพิ่มเติม ให้ดูส่วนไฟล์ ปัญหา วิธีแก้ไข และอื่นๆ
ดูเมตริกประสิทธิภาพของ 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 เป็นหน้าต่างที่ใหญ่ที่สุด โดยอิงตามสีพื้นหลังและระดับ
คลิกภาพหน้าจอเพื่อดูรายละเอียดการเปลี่ยนเลย์เอาต์ ระบุสาเหตุต้นตอที่เป็นไปได้ และองค์ประกอบที่ได้รับผลกระทบ
ในตัวอย่างนี้ สาเหตุต้นตอที่เป็นไปได้คือสื่อที่ไม่มีขนาด ดูวิธีแก้ไขได้ที่เพิ่มประสิทธิภาพการเปลี่ยนแปลงเลย์เอาต์สะสม
ทําความเข้าใจคะแนนการเปลี่ยนเลย์เอาต์
หากต้องการทำความเข้าใจวิธีคำนวณคะแนน ให้ใช้ส่วนกรอบเวลาในแผงรายละเอียด หน้าต่างจะแสดงกรอบเวลาเซสชันที่การเปลี่ยนเลย์เอาต์ปัจจุบันเป็นของ
หากทั้งหน้าเว็บมีการเปลี่ยนเลย์เอาต์ คะแนนสูงสุดของการเปลี่ยนเลย์เอาต์แต่ละครั้งคือ 1 ในตัวอย่างของเรา การเปลี่ยนเลย์เอาต์ครั้งแรกได้คะแนน 0.15 การเปลี่ยนเลย์เอาต์ครั้งที่ 2 ได้คะแนน 0.041
คะแนนรวมสำหรับกรอบเวลาเซสชันนี้คือ 0.19 CLS ต้องได้รับการปรับปรุงตามเกณฑ์ สีพื้นหลังของหน้าต่างเซสชันจะแสดงสีเดียวกัน
กราฟพื้นหลังของกรอบเวลาเซสชันจะเพิ่มขึ้นเมื่อเวลาผ่านไป คะแนนสะสมของการเปลี่ยนแปลงเลย์เอาต์แสดงถึงการเพิ่มขึ้น ณ จุดนั้น
ดูกิจกรรมเครือข่าย
ดูกิจกรรมเครือข่ายในแทร็กเครือข่าย คุณขยายแทร็กเครือข่ายเพื่อดูกิจกรรมเครือข่ายทั้งหมดและคลิกแต่ละรายการเพื่อดูรายละเอียดได้
ดูกิจกรรมของโปรแกรมแสดงผล
ดูกิจกรรมการแสดงผลในแทร็ก Renderer คุณขยายแต่ละโปรแกรมแสดงผลเพื่อดูกิจกรรมและคลิกแต่ละรายการเพื่อดูรายละเอียดได้
ดูกิจกรรมของ GPU
ดูกิจกรรมของ GPU ในแทร็ก GPU ระบบจะซ่อนแทร็ก GPU ไว้โดยค่าเริ่มต้น หากต้องการเปิดใช้ ให้เลือก GPU ในการตั้งค่า
ดูระยะเวลาของผู้ใช้
หากต้องการดูมาตรวัดประสิทธิภาพที่กำหนดเอง คุณสามารถใช้การจับเวลาของผู้ใช้และแสดงภาพการจับเวลาด้วยแทร็กการจับเวลา ดูข้อมูลเพิ่มเติมได้ที่ User Timing API
ดูหน้าการสาธิตนี้ซึ่งคำนวณเวลาที่ผ่านไปของการโหลดข้อความ
วิธีดูเวลาของผู้ใช้
- ทำเครื่องหมายสถานที่ในแอปพลิเคชันด้วย
performance.mark() - วัดเวลาที่ผ่านไประหว่างเครื่องหมายด้วย
performance.measure() - บันทึกประสิทธิภาพ
- ดูการวัดในแทร็กเวลา หากไม่เห็นแทร็ก ให้ตรวจสอบการจับเวลาของผู้ใช้ในการตั้งค่า
- หากต้องการดูรายละเอียด ให้คลิกเวลาในแทร็ก
ปรับแต่ง UI
หากต้องการปรับแต่งไทม์ไลน์และแทร็ก ให้คลิกไอคอน การตั้งค่าของแผง แล้วเลือกตัวเลือกที่ต้องการ
ส่งออกไฟล์บันทึก
หากต้องการบันทึกการบันทึก ให้คลิกส่งออก
นำเข้าไฟล์บันทึก
หากต้องการโหลดการบันทึก ให้เลือกนำเข้า
ลบไฟล์บันทึก
หากต้องการลบไฟล์บันทึกเสียง ให้ทําดังนี้
- คลิก ลบ กล่องโต้ตอบการยืนยันจะเปิดขึ้น
- ในกล่องโต้ตอบ ให้คลิกลบเพื่อยืนยันการลบ