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