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

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

ทำไมจึงต้องมีแผงใหม่

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

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

เกริ่นนำ

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

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

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

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

   

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

   

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

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

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 วินาที

หาก 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

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

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

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

ปรับแต่ง UI

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

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

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

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

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

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

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

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