อ่าน Performance Recording ใน Chrome DevTools เพื่อหาเว็บกระตุก

ภาพรวม

Performance Recording คือการอัด trace การทำงานของเว็บ เพื่อดูว่าเวลาหมดไปกับอะไรบ้าง 🎥

เราเปิด DevTools แท็บ Performance แล้วกด Record จากนั้น reload หน้าเว็บหรือทำ action ที่รู้สึกว่าช้า

ผลลัพธ์จะเป็น timeline ที่เห็นทั้งการโหลดไฟล์ การรัน script การคำนวณ layout การ paint และงานบน main thread

ถ้าเว็บค้างตอนคลิก อาจเห็น JavaScript task ยาว ๆ ถ้า scroll กระตุก อาจเห็น layout หรือ paint หนักเกินไป

การอัด trace เหมาะกับปัญหาที่ Lighthouse หรือ Network อย่างเดียวตอบไม่ได้ เช่น กดปุ่มแล้วหน่วง animation กระตุก หรือ render ช้า

สิ่งที่ควรดูคือ Main Thread, Long Tasks, Frames และช่วงเวลาที่ user รู้สึกช้า

แนะนำให้ record สั้น ๆ เฉพาะ action ที่มีปัญหา ไม่ต้องอัดยาวเกินไป เพราะจะอ่านยาก

หลังแก้แล้วให้ record ซ้ำเพื่อเทียบก่อน/หลัง ไม่ใช่ดูจากความรู้สึกอย่างเดียว

สรุปคือ Performance Recording คือวิธีเห็นการทำงานข้างในของเว็บแบบละเอียด ช่วยให้แก้ปัญหา render/script ได้ตรงจุด 🔬

Performance Recording ช่วยให้เห็นสิ่งที่ Network Tab มองไม่เห็น เช่น layout calculation, paint, scripting และ long task บน main thread

เวลาบันทึก trace ควรทำ scenario ให้ชัด เช่น reload หน้าแรก หรือกดปุ่มที่รู้สึกหน่วงหนึ่งครั้ง เพื่อให้ trace อ่านง่าย

หลัง record ให้มองหาช่วงสีแดงหรือ task ยาว ๆ ก่อน เพราะมักเป็นจุดที่ user รู้สึกว่าเว็บค้างหรือ interaction ไม่ตอบสนอง

การใช้ trace ดี ๆ จะช่วยให้การ optimize มีหลักฐาน เช่นลด function หนัก แยก component หรือเลื่อนงานที่ไม่จำเป็นออกจากช่วงแรก

แนวทางนำไปใช้

• นำแนวคิดจากโพสต์นี้ไปทดลองกับงานจริงของคุณ
• แยกเป็นขั้นตอนเล็ก ๆ แล้วทำทีละส่วน
• บันทึกผลลัพธ์และสิ่งที่เรียนรู้เพื่อต่อยอด

สรุป

อัด trace แล้ววิเคราะห์ main thread, long task, scripting, style, layout และ paint เพื่อระบุช่วงที่ใช้เวลาจริงและแก้ performance อย่างมีหลักฐาน