ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ: รับข้อมูลเชิงลึกที่นำไปใช้ได้จริงเกี่ยวกับประสิทธิภาพของเว็บไซต์

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

ภาพรวม

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

• บันทึกและวัดประสิทธิภาพการโหลดหน้าเว็บ
• ดูเมตริกประสิทธิภาพของ Web Vitals
• ดูกิจกรรมในเครือข่าย
• จำลองความเร็วของ CPU และเครือข่ายที่ช้ากว่า
• นำเข้าและส่งออกไฟล์บันทึกเสียง

เหตุผลที่ต้องมีแผงใหม่

แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพใหม่เป็นการทดสอบเพื่อแก้ไขปัญหา 3 ประการของนักพัฒนาซอฟต์แวร์เมื่อใช้งานแผงประสิทธิภาพที่มีอยู่

• ข้อมูลมากเกินไป แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพที่ออกแบบใหม่จะปรับปรุงข้อมูลและแสดงเฉพาะข้อมูลที่เกี่ยวข้อง
• แยกความแตกต่างระหว่างกรณีการใช้งานต่างๆ ได้ยาก แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพรองรับการวิเคราะห์ตามกรณีการใช้งาน ขณะนี้รองรับเฉพาะ Use Case การโหลดหน้าเว็บเท่านั้น และจะเพิ่มฟีเจอร์อื่นๆ ในอนาคตตามความคิดเห็นของคุณ เช่น การโต้ตอบ
• ต้องใช้ความเชี่ยวชาญอย่างลึกซึ้งเกี่ยวกับการใช้งานเบราว์เซอร์เพื่อให้ใช้งานได้อย่างมีประสิทธิภาพ แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพจะไฮไลต์ข้อมูลเชิงลึกที่สําคัญในแผงข้อมูลเชิงลึก พร้อมความคิดเห็นที่นําไปใช้ได้จริงเกี่ยวกับวิธีแก้ไขปัญหา

บทนำ

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

เปิดแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ

2. คลิกตัวเลือกเพิ่มเติม more_vert > เครื่องมือเพิ่มเติม > ข้อมูลเชิงลึกด้านประสิทธิภาพ

   

   หรือใช้เมนูคำสั่งเพื่อเปิดแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพก็ได้

   

บันทึกประสิทธิภาพ

แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพสามารถบันทึกประสิทธิภาพทั่วไปและประสิทธิภาพที่ขับเคลื่อนโดย Use Case (เช่น การโหลดหน้าเว็บ)

1. เปิดหน้าสาธิตนี้ในแท็บใหม่ และเปิดแผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพในหน้านั้น

2. คุณควบคุมเครือข่ายและ CPU ขณะบันทึกได้ ในบทแนะนํานี้ ให้เลือกปิดใช้แคชและตั้งค่า CPU เป็นช้าลง 4 เท่าในเมนูแบบเลื่อนลง

   

3. คลิกrefresh วัดการโหลดหน้าเว็บ เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเมตริกประสิทธิภาพขณะที่หน้าเว็บโหลดซ้ำ จากนั้นจะหยุดการบันทึกโดยอัตโนมัติ 2-3 วินาทีหลังจากที่หน้าเว็บโหลดเสร็จ

   

เล่นไฟล์บันทึกประสิทธิภาพซ้ำ

ใช้ตัวควบคุมที่ด้านล่างเพื่อควบคุมการเล่นซ้ำของไฟล์บันทึก

ดังตัวอย่างต่อไปนี้

• คลิก play_arrow เล่น เพื่อเล่นวิดีโอการประชุม
• คลิก pause หยุดชั่วคราว เพื่อหยุดเล่นซ้ำชั่วคราว
• ปรับความเร็วในการเล่นด้วยเมนูแบบเลื่อนลง
• คลิก preview สลับการแสดงตัวอย่างภาพเพื่อแสดงหรือซ่อนตัวอย่างภาพ

ไปยังส่วนต่างๆ ของไฟล์บันทึกประสิทธิภาพ

เครื่องมือสำหรับนักพัฒนาเว็บจะซูมออกโดยอัตโนมัติเพื่อแสดงไทม์ไลน์การบันทึกทั้งหมด คุณสามารถไปยังส่วนต่างๆ ของไฟล์บันทึกเสียงด้วยการซูมและเลื่อนไทม์ไลน์

หากต้องการซูมและเลื่อนไทม์ไลน์ไปทางซ้ายและขวา ให้ใช้ปุ่มการนำทางที่เกี่ยวข้องดังต่อไปนี้

• คลิกไทม์ไลน์เพื่อย้ายส่วนหัวของตัวควบคุมการเล่นเพื่อดูเฟรมที่ต้องการ
• คลิกการควบคุม zoom_in ซูมเข้า และ zoom_out ซูมออกที่ด้านล่างเพื่อซูม ในกรณีนี้ คุณจะซูมตามส่วนหัวของตัวควบคุมการเล่น
• ลากแถบเลื่อนแนวนอนที่ด้านล่างเพื่อย้ายไทม์ไลน์ไปทางซ้ายและขวา

หรือจะใช้แป้นพิมพ์ลัดก็ได้ คลิกปุ่ม help เพื่อดูแป้นพิมพ์ลัด

เมื่อใช้แป้นพิมพ์ลัด คุณจะซูมตามเคอร์เซอร์เมาส์

ดูข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

ดูรายการข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพในแผงข้อมูลเชิงลึก ระบุและแก้ไขปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้น

วางเมาส์เหนือข้อมูลเชิงลึกแต่ละรายการเพื่อไฮไลต์ในแทร็กหลัก

คลิกข้อมูลเชิงลึก เช่น คำขอที่บล็อกการแสดงผล เพื่อเปิดข้อมูลเชิงลึกนั้นในแผงรายละเอียด หากต้องการทำความเข้าใจปัญหาเพิ่มเติม ให้ดูที่ส่วนไฟล์ ปัญหา วิธีแก้ไข และอื่นๆ

ดูเมตริกประสิทธิภาพของ Web Vitals

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

คุณดูเมตริกเหล่านี้ได้ในแผงไทม์ไลน์และข้อมูลเชิงลึก

วางเมาส์เหนือข้อมูลเชิงลึกในไทม์ไลน์เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเมตริก

ดูความล่าช้าของ Contentful Paint ที่ใหญ่ที่สุด

Largest Contentful Paint (LCP) เป็นหนึ่งในเมตริกของ Core Web Vitals โดยจะรายงานเวลาแสดงผลของรูปภาพหรือบล็อกข้อความที่ใหญ่ที่สุดซึ่งมองเห็นได้ภายในวิวพอร์ต เมื่อเทียบกับเวลาที่หน้าเว็บเริ่มโหลดเป็นครั้งแรก

คะแนน LCP ที่ดีคือ 2.5 วินาทีหรือน้อยกว่า

หากการแสดงผลเนื้อหาขนาดใหญ่ที่สุดในหน้าเว็บใช้เวลาแสดงผลนานกว่า คุณจะเห็นป้าย 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 ในการตั้งค่า

ดูระยะเวลาของผู้ใช้

หากต้องการดูการวัดประสิทธิภาพที่กำหนดเอง คุณสามารถใช้ระยะเวลาของผู้ใช้ และแสดงภาพเวลาด้วยแทร็กระยะเวลา ดูข้อมูลเพิ่มเติมได้ที่ User timer API

ไปที่หน้าสาธิตนี้ ซึ่งคำนวณเวลาที่ผ่านไปของการโหลดข้อความ

วิธีดูระยะเวลาของผู้ใช้

1. ทำเครื่องหมายสถานที่ในแอปพลิเคชันด้วย performance.mark()
2. วัดเวลาผ่านไประหว่างเครื่องหมายด้วย performance.measure()
3. บันทึกประสิทธิภาพ
4. ดูการวัดในแทร็กเวลา หากไม่เห็นแทร็ก ให้ตรวจสอบการกำหนดเวลาของผู้ใช้ในการตั้งค่า
5. หากต้องการดูรายละเอียด ให้คลิกเวลาในแทร็ก

ปรับแต่ง UI

หากต้องการปรับแต่งไทม์ไลน์และการติดตาม ให้คลิกไอคอนการตั้งค่า settings ของแผงและเลือกตัวเลือกที่คุณต้องการ

ส่งออกไฟล์บันทึกเสียง

หากต้องการบันทึกไฟล์บันทึกเสียง ให้คลิกส่งออก download

นําเข้าไฟล์บันทึกเสียง

หากต้องการโหลดไฟล์บันทึกเสียง ให้เลือกนําเข้า publish

ลบไฟล์บันทึกเสียง

หากต้องการลบไฟล์บันทึกเสียง ให้ทําดังนี้

1. คลิก delete ลบ กล่องโต้ตอบการยืนยันจะเปิดขึ้น
2. ในกล่องโต้ตอบ ให้คลิกลบเพื่อยืนยันการลบ