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

Sofia Emelianova

Kayce Basques

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

ไฮไลต์พื้นที่ที่ทาสีใหม่ด้วยการกะพริบสี

เมื่อเปิดใช้ตัวเลือกนี้ Chrome จะแสดงหน้าจอเป็นสีเขียวเมื่อมีการทาสีใหม่เกิดขึ้น

วิธีดูพื้นที่ที่กำลังทาสีใหม่

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

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

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

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

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

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

1. เปิดแท็บการแสดงผล แล้วตรวจสอบบริเวณที่มีการเปลี่ยนเลย์เอาต์

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

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

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

วิธีเปิดใช้เส้นขอบของเลเยอร์

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

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

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

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

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

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

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

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

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

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

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

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 วินาทีนับจากเวลาที่หน้าเว็บเริ่มโหลดเป็นครั้งแรก
• Interaction to Next Paint (INP): วัดการโต้ตอบ เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี หน้าเว็บควรมี INP ไม่เกิน 200 มิลลิวินาที
• Cumulative Layout Shift (CLS): วัดความเสถียรของภาพ หน้าเว็บควรมี CLS เป็น 0.1 หรือน้อยกว่านั้นเพื่อมอบประสบการณ์การใช้งานที่ดีให้แก่ผู้ใช้

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