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

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

ภาพรวม

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

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

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

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

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

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

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

ดูความล่าช้าของ 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

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

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

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

ปรับแต่ง UI

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

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

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

นำเข้าไฟล์บันทึก

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

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

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

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