ค้นพบปัญหาเกี่ยวกับประสิทธิภาพการแสดงผล

Sofia Emelianova

Kayce Basques

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

ไฮไลต์บริเวณที่ทาสีใหม่ด้วยการกะพริบแฟลช

เมื่อเปิดตัวเลือกนี้ Chrome จะกะพริบเป็นสีเขียวของหน้าจอทุกครั้งที่ทำการวาดใหม่

วิธีดูพื้นที่ที่มีการทาสีใหม่

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

หากในอีกหน้าหนึ่ง คุณเห็นทั้งหน้าจอกะพริบเป็นสีเขียวหรือบางพื้นที่ของหน้าจอที่คุณคิดว่าไม่ควรทาสี ลองพิจารณาตรวจสอบเพิ่มเติม

ไฮไลต์บริเวณที่มีการเปลี่ยนเลย์เอาต์

การเปลี่ยนเลย์เอาต์ทำให้เกิดการทำซ้ำที่ไม่คาดคิด ซึ่งไม่เพียงแต่จะก่อให้เกิดความรำคาญ แต่ยังเป็นอันตรายด้วย

Screencast ที่แสดงให้เห็นว่าความไม่เสถียรของเลย์เอาต์ส่งผลเสียต่อผู้ใช้อย่างไร

วิธีดูตำแหน่งและช่วงเวลาของการเปลี่ยนเลย์เอาต์ในหน้าเว็บ

1. เปิดแท็บการแสดงผล แล้วเลือกภูมิภาคของเลย์เอาต์

2. รีเฟรชหน้าเว็บ บริเวณที่มีการเปลี่ยนเลย์เอาต์จะไฮไลต์เป็นสีม่วงเป็นเวลาสั้นๆ

ดูเลเยอร์และชิ้นส่วนที่มีเส้นขอบของเลเยอร์

ใช้เส้นขอบเลเยอร์เพื่อดูการวางซ้อนของเส้นขอบเลเยอร์และไทล์ที่ด้านบนของหน้า

หากต้องการเปิดใช้งานเส้นขอบของเลเยอร์ ให้ทำดังนี้

1. เปิดแท็บการแสดงผล และเลือกเส้นขอบของเลเยอร์
2. สังเกตเส้นขอบของเลเยอร์เป็นสีส้มและมะกอกและชิ้นส่วนเป็นสีน้ำเงิน

ดูความคิดเห็นใน debug_colors.cc สำหรับคำอธิบายเกี่ยวกับรหัสสี

ดูเฟรมต่อวินาทีแบบเรียลไทม์พร้อมสถิติการแสดงผลเฟรม

สถิติการแสดงผลเฟรมคือการวางซ้อนที่ปรากฏที่มุมขวาบนของวิวพอร์ต

วิธีเปิดสถิติการแสดงผลเฟรม

1. เปิดแท็บการแสดงผล และเปิดใช้ช่องทำเครื่องหมายสถิติการแสดงเฟรม
2. สังเกตสถิติที่มุมขวาบนของหน้าเว็บ

การวางซ้อนสถิติการแสดงผลเฟรมจะแสดงข้อมูลต่อไปนี้

• ค่าประมาณแบบเรียลไทม์ของเฟรมต่อวินาทีขณะหน้าเว็บทำงาน
• ไทม์ไลน์ของเฟรมเป็นพล็อตที่มีเฟรม 3 ประเภท ดังนี้
  • แสดงผลเฟรมสำเร็จแล้ว (เส้นสีน้ำเงิน)
  • เฟรมที่นำเสนอบางส่วน (เส้นสีเหลือง)
  • ลดเฟรม (เส้นสีแดง)
• สถานะของแรสเตอร์ GPU: เปิดหรือปิด โปรดดูข้อมูลเพิ่มเติมที่วิธีรับการแรสเตอร์ GPU
• การใช้งานหน่วยความจำ GPU: จำนวนที่ใช้และหน่วยความจำสูงสุด MB

ระบุปัญหาด้านประสิทธิภาพการเลื่อน

ใช้ปัญหาเกี่ยวกับประสิทธิภาพในการเลื่อนเพื่อระบุองค์ประกอบของหน้าเว็บที่มี Listener เหตุการณ์ที่เกี่ยวข้องกับการเลื่อนซึ่งอาจเป็นอันตรายต่อประสิทธิภาพของหน้าเว็บ

วิธีดูองค์ประกอบที่อาจมีปัญหา

1. เปิดแท็บการแสดงผล และดูปัญหาเกี่ยวกับประสิทธิภาพในการเลื่อน
2. สังเกตองค์ประกอบที่อาจมีปัญหาซึ่งไฮไลต์ไว้

ดู Core Web Vitals

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

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

• Largest Contentful Paint (LCP): วัดประสิทธิภาพของการโหลด เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี LCP ควรเกิดขึ้นภายใน 2.5 วินาทีนับจากที่หน้าเว็บเริ่มโหลดเป็นครั้งแรก
• การโต้ตอบกับ Next Paint (INP): วัดการโต้ตอบ เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี หน้าเว็บควรมี INP อยู่ที่ 200 มิลลิวินาทีหรือน้อยกว่า
• Cumulative Layout Shift (CLS): วัดความเสถียรของภาพ หน้าเว็บควรมี CLS เท่ากับ 0.1. หรือน้อยกว่าเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี

ใช้ส่วนขยาย Web Vitals ใน Chrome เพื่อดูค่า Core Web Vitals ของหน้าเว็บ