เนื้อหาบทเรียน
หน้าหลักโมดูล 4: Debugging & Code Reviewบทเรียน 4.4

Performance Optimization

ให้ Claude วิเคราะห์และปรับ performance ของโค้ด ตั้งแต่ลด re-render, แก้ N+1 query, จนถึงลดขนาด bundle

0%
ความคืบหน้าคอร์ส
4.4 · Debugging & Code Review

Performance Optimization

บทเรียนแบบอ่าน

เมื่อเรียนจบบทนี้ คุณจะ…

  • ระบุจุดที่ทำให้โค้ดทำงานช้าได้
  • ใช้ Claude วิเคราะห์และปรับปรุงประสิทธิภาพโค้ด
  • วัดผลการปรับปรุงประสิทธิภาพโค้ด

ทำไมโปรแกรมต้อง 'เร็ว'?

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

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

ความเร็วคือประสบการณ์ที่ดีของผู้ใช้ และประสิทธิภาพที่ดีของธุรกิจ

จุดที่โปรแกรมมักจะ 'อืด' มีตรงไหนบ้าง?

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

โดยทั่วไปแล้ว จุดที่โปรแกรมมักจะทำงานช้า สามารถแบ่งได้เป็น 3 ส่วนหลัก ๆ ครับ:

1. **ฐานข้อมูล (Database):** ลองนึกภาพว่าเรากำลังหาข้อมูลในหนังสือเล่มใหญ่ ถ้าหนังสือเล่มนั้นไม่มี 'สารบัญ' (Index) เราก็ต้องพลิกหาทีละหน้า ซึ่งช้ามากใช่ไหมครับ? หรือถ้าเราต้องไป 'ซื้อของทีละชิ้นหลาย ๆ ครั้ง' (N+1 query) แทนที่จะซื้อทีเดียวหลาย ๆ อย่าง ก็จะเสียเวลามากกว่า นี่คือปัญหาที่ฐานข้อมูลมักเจอครับ

2. **หน้าบ้าน (Frontend):** คือส่วนที่เราเห็นบนหน้าจอครับ ถ้าหน้าจอของเรามีการ 'อัปเดตตัวเองบ่อยเกินไป' (re-render เกินจำเป็น) ทั้งที่ข้อมูลไม่ได้เปลี่ยน หรือ 'ไฟล์โปรแกรมที่ต้องโหลดมีขนาดใหญ่มาก' (bundle ใหญ่) ก็จะทำให้หน้าเว็บโหลดช้าลง เหมือนกับการต้องเปิด-ปิดไฟหลายรอบโดยไม่จำเป็น หรือต้องโหลดเกมขนาดใหญ่ที่ใช้เวลานาน

3. **หลังบ้าน (Backend):** คือส่วนที่ทำงานอยู่เบื้องหลังครับ ถ้าเซิร์ฟเวอร์ของเรา 'มัวแต่รอข้อมูล' (blocking I/O) จากที่อื่นนาน ๆ หรือ 'ไม่จำข้อมูลที่เคยใช้แล้ว' (ไม่ cache) ทำให้ต้องไปหาใหม่ทุกครั้ง ก็จะทำให้การตอบสนองช้าลง เหมือนพนักงานที่ต้องรอเอกสารจากอีกโต๊ะนานๆ หรือลืมว่าเคยจดเบอร์โทรศัพท์ไปแล้ว

การรู้จุดอ่อนช่วยให้เราแก้ไขได้ตรงจุด

ให้ Claude เป็นนักสืบหา 'จุดคอขวด' ให้เรา

บางครั้งเราอาจจะไม่รู้ชัด ๆ ว่าโปรแกรมช้าตรงไหน หรือทำไมถึงช้า ไม่ต้องกังวลครับ! Claude สามารถเป็น 'นักสืบ' ที่เก่งกาจช่วยเราวิเคราะห์หา 'จุดคอขวด' (bottleneck) เหล่านี้ได้ เพียงแค่เราบอกมันว่า 'ส่วนไหน' ที่เรารู้สึกว่ามีปัญหา

การให้ข้อมูลที่ชัดเจนกับ Claude จะช่วยให้มันทำงานได้ดีขึ้นครับ เหมือนกับการบอกหมอว่า 'ปวดท้องตรงไหน' หมอก็จะวินิจฉัยได้แม่นยำขึ้น

  1. ระบุปัญหาให้ Claude ฟัง เช่น "หน้านี้โหลดช้ามาก" หรือ
    พิมพ์ Prompt นี้
    ฟังก์ชัน calculateOrderTotal() นี้ใช้เวลานานผิดปกติ
  2. ใช้ Prompt ตัวอย่างนี้
    พิมพ์ Prompt นี้
    หน้านี้/ฟังก์ชัน [ชื่อหน้า/ฟังก์ชัน] ทำงานช้า ช่วยวิเคราะห์หา bottleneck แล้วเสนอวิธีปรับ performance พร้อมอธิบายว่าทำไมถึงช้าและแก้แล้วดีขึ้นยังไง
  3. ถ้าเป็นไปได้ ให้คัดลอกโค้ดส่วนที่คุณสงสัยว่าช้าไปให้ Claude ดูด้วย เพื่อให้มันเข้าใจบริบทและโครงสร้างของโค้ดได้ดียิ่งขึ้น
ยิ่งให้ข้อมูล Claude มากเท่าไหร่ ผลลัพธ์ก็จะยิ่งแม่นยำขึ้นเท่านั้น

Claude แนะนำทางแก้ พร้อมเหตุผลดีๆ

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

ตัวอย่างเช่น ถ้า Claude พบปัญหา N+1 query ในฐานข้อมูล มันอาจจะแนะนำให้ 'รวมการเรียกข้อมูล' (join query) หรือ 'ดึงข้อมูลมาทีเดียว' (eager loading) และจะอธิบายว่าการทำแบบนี้ช่วยลดจำนวนครั้งที่ต้องไปถามฐานข้อมูลลงได้อย่างไร ทำให้ประหยัดเวลาและทรัพยากรมากขึ้น

ตั้งใจอ่านคำอธิบายของ Claude เพื่อเพิ่มความเข้าใจหลักการทำงานของโปรแกรม

'วัดผล' คือหัวใจสำคัญของการปรับปรุง

หลังจากที่เราได้คำแนะนำจาก Claude และนำไปปรับแก้โค้ดแล้ว สิ่งสำคัญที่สุดคือ 'การวัดผล' ครับ! เราจะรู้ได้อย่างไรว่าโปรแกรมของเราเร็วขึ้นจริง ๆ ถ้าเราไม่วัดมัน? มันเหมือนกับการที่เราพยายามลดน้ำหนัก เราก็ต้องชั่งน้ำหนักก่อนและหลัง เพื่อดูว่าได้ผลจริงไหม

Claude สามารถช่วยแนะนำวิธีวัดผลได้ครับ เช่น การใช้ console.time() ใน JavaScript เพื่อจับเวลาการทำงานของฟังก์ชัน หรือการใช้เครื่องมือโปรไฟล์ลิ่ง (profiling tools) ต่าง ๆ การวัดผลด้วยตัวเลขที่ชัดเจน จะช่วยยืนยันว่าความพยายามของเรานั้นไม่เสียเปล่า และทำให้เรามั่นใจว่าโปรแกรมของเราทำงานได้ดีขึ้นจริง ๆ

  1. ก่อนปรับแก้โค้ด ให้ขอให้ Claude แนะนำวิธีวัด 'ความเร็ว' ปัจจุบันของโปรแกรม (เช่น การใส่ timing log หรือใช้เครื่องมือเฉพาะ)
  2. บันทึกค่าความเร็วเริ่มต้นที่วัดได้ เก็บไว้เป็นข้อมูลอ้างอิง
  3. นำคำแนะนำของ Claude ไปปรับแก้โค้ดของคุณ
  4. วัดความเร็วอีกครั้งหลังปรับแก้ ด้วยวิธีเดิมและเครื่องมือเดิม
  5. เปรียบเทียบผลลัพธ์ที่ได้ เพื่อยืนยันว่าโปรแกรมของคุณทำงานได้เร็วขึ้นจริงหรือไม่
อย่าเชื่อแค่ความรู้สึก วัดผลด้วยตัวเลขเสมอ เพื่อให้มั่นใจ 100%
ลองใช้ Prompt นี้กับ Claude
หน้านี้/ฟังก์ชันนี้ทำงานช้า ช่วยวิเคราะห์หา bottleneck แล้วเสนอวิธีปรับ performance พร้อมอธิบายว่าทำไมถึงช้าและแก้แล้วดีขึ้นยังไง
เคล็ดลับ: วัดผลก่อน-หลังเสมอ — ขอให้ Claude บอกวิธีวัด (เช่น ใส่ timing log) เพื่อยืนยันว่าเร็วขึ้นจริง
สรุปบทนี้
  • จุดช้าหลัก: DB query, re-render, bundle
  • ให้ Claude หา bottleneck + เหตุผล
  • วัดผลก่อน-หลังเสมอ