ใช้ DevTools จับต้นตอเว็บช้าใน 5 นาที แบบคนทำเว็บมืออาชีพ

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

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

นาทีที่ 0: ตั้งค่า DevTools ให้เห็นปัญหาชัดที่สุด

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

ขั้นตอนเริ่มต้นมีดังนี้

1. เปิดเว็บไซต์ด้วย Google Chrome
2. กด F12 เพื่อเปิด DevTools
3. ไปที่แท็บ Network
4. ติ๊ก Disable cache ขณะเปิด DevTools อยู่
5. ตั้งค่า Throttling เป็น Fast 3G หรือ Slow 4G

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

นาทีที่ 1-2: ใช้ Network หาให้เจอว่าอะไรโหลดช้า ใหญ่ หรือมากเกินไป

เมื่อพร้อมแล้ว ให้กด Reload หน้าเว็บหนึ่งครั้ง แล้วดูที่แท็บ Network ทันที จุดสำคัญคือการสังเกตแถบ Waterfall เพื่อดูว่าไฟล์หรือคำขอใดใช้เวลานานผิดปกติ

เมื่อคลิกเข้าไปที่ไฟล์ที่โหลดช้า ให้ดูหัวข้อ Timing โดยเฉพาะรายการต่อไปนี้

• Waiting (TTFB): หากใช้เวลานาน แปลว่าเซิร์ฟเวอร์กว่าจะเริ่มตอบกลับช้า อาจเกี่ยวข้องกับ backend, cache หรือ database
• Content Download: หากช่วงนี้ยาว มักแปลว่าไฟล์ใหญ่เกินไป หรือเครือข่ายช้า
• DNS / Initial connection / SSL: หากช้าผิดปกติ อาจมีปัญหาจากหลายโดเมน การเชื่อมต่อ CDN หรือใบรับรอง SSL

นอกจากนี้ยังมีเช็กลิสต์ที่ควรดูอย่างรวดเร็ว ได้แก่

• รูปภาพมีขนาดใหญ่เกินจำเป็นหรือไม่
• มีไฟล์ JS/CSS มากเกินไปหรือไม่
• มีการเรียกไฟล์จากโดเมนภายนอกหลายเจ้าหรือไม่ เช่น ฟอนต์ ตัวติดตาม หรือโฆษณา
• มีไฟล์ที่โหลดไม่สำเร็จ หรือขึ้น 404 หรือไม่

ตัวอย่างเช่น หากพบว่ารูปภาพขนาด 3MB ถูกโหลดก่อนเนื้อหาสำคัญ หน้าเว็บอาจดูเหมือนค้าง วิธีแก้เบื้องต้นคือทำ lazy-load หรือแปลงไฟล์เป็น WebP/AVIF เพื่อลดขนาด

อีกเทคนิคที่มีประโยชน์คือการลองดูมุมมองแบบ Bottom-up หรือ Call tree ซึ่งบางเวอร์ชันอาจอยู่ในแท็บ Performance มากกว่า มุมมองนี้ช่วยให้เห็นว่างานไหนกระทบต่อประสิทธิภาพมากที่สุด

นาทีที่ 3: ใช้ Lighthouse ให้คะแนนเพื่อชี้เป้าปัญหา

หลังจากดู Network แล้ว ขั้นต่อไปคือเปิดแท็บ Lighthouse เพื่อดูตัวชี้วัดสำคัญของหน้าเว็บ

ขั้นตอนคือ

1. ไปที่แท็บ Lighthouse
2. เลือกโหมด Mobile
3. เลือกอย่างน้อยหัวข้อ Performance
4. กด Analyze

สิ่งที่ควรโฟกัสจริงมี 3 ตัวหลัก

• LCP (Largest Contentful Paint): วัดว่าคอนเทนต์หลักแสดงผลช้าแค่ไหน หากค่าสูง มักมาจากรูปใหญ่ ฟอนต์ หรือการเรนเดอร์จากฝั่งเซิร์ฟเวอร์ที่ช้า
• INP (Interaction to Next Paint): วัดความหน่วงเวลาผู้ใช้คลิกหรือพิมพ์ หากสูง มักเกิดจาก JavaScript ทำงานหนักเกินไป
• CLS (Cumulative Layout Shift): วัดความกระโดดของหน้าเว็บ มักเกิดจากรูปภาพไม่มีการกำหนดขนาด หรือมีโฆษณาโหลดแทรกทีหลัง

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

นาทีที่ 4-5: ใช้ Performance หา JavaScript หรือ Rendering ที่บล็อกหน้า

หากหน้าเว็บดูเหมือนโหลดเสร็จแล้วแต่ยังคลิกไม่ได้ หรือมีอาการหน่วง ให้ไปต่อที่แท็บ Performance

วิธีใช้งานมีดังนี้

1. ไปที่แท็บ Performance
2. กด Record
3. Reload หน้าเว็บ
4. กดหยุดการบันทึก

สิ่งที่มือใหม่สามารถดูและจับต้นตอได้ทันทีคือ

• Main thread: หากมีแท่งสีเหลืองยาวจำนวนมาก แปลว่า JavaScript กำลังทำงานหนัก
• Long task: งานที่ใช้เวลานานเกินประมาณ 50ms มักทำให้การคลิกหรือการเลื่อนหน้าหน่วง
• Layout / Recalculate Style: หากเกิดบ่อย แปลว่าหน้าเว็บมีการเปลี่ยน DOM หรือสไตล์ถี่เกินไป

อีกเทคนิคที่ช่วยประหยัดเวลาคือใช้ Ctrl+F ในหน้า Performance แล้วค้นหาคำว่า long task หรือชื่อไฟล์ .js เพื่อกระโดดไปยังจุดที่หนักที่สุดได้ทันที

แพตเทิร์นปัญหาที่เจอบ่อย และวิธีแก้แบบเร็ว

เมื่อเริ่มวิเคราะห์บ่อยขึ้น จะพบว่าปัญหาหลายแบบเกิดซ้ำเดิม และสามารถแก้ได้อย่างมีแบบแผน

• JavaScript ก้อนเดียวใหญ่มาก: แยก bundle, ใช้ code-splitting และโหลดเฉพาะส่วนที่จำเป็นในแต่ละหน้า
• ใช้ไลบรารีหนักเกินความจำเป็น: เปลี่ยนเป็น utility ขนาดเล็ก หรือ import เฉพาะฟังก์ชันที่ต้องใช้
• Layout กระโดดหรือกระพริบ: กำหนด width และ height ให้รูปภาพ หรือใช้ aspect-ratio ใน CSS
• ฟอนต์ทำให้หน้าเว็บรอนาน: ใช้ font-display: swap และ preconnect ไปยังโดเมนฟอนต์
• Third-party script ช้า: เลื่อนการโหลดหลังผู้ใช้เริ่มโต้ตอบ หรือโหลดเฉพาะเมื่อจำเป็นจริง

วิธีคิดแบบจำง่าย: ใช้ 3 แท็บให้ถูกหน้าที่

หากต้องการจำแบบสั้นที่สุด ให้แยกหน้าที่ของแต่ละแท็บออกจากกันชัดเจน

• Network ใช้หาไฟล์หรือคำขอที่ผิดปกติ
• Lighthouse ใช้ดูตัวชี้วัดเพื่อชี้เป้า
• Performance ใช้หาช่วงเวลาที่ JavaScript หรือการเรนเดอร์บล็อกหน้าเว็บ

สรุป

การใช้ Chrome DevTools เพื่อตรวจสอบเว็บช้าไม่จำเป็นต้องใช้เวลานานเสมอไป หากรู้ว่าจะดูอะไรในแต่ละแท็บ ภายในเวลาเพียง 5 นาที คุณสามารถระบุได้ว่าเว็บช้าเพราะไฟล์ใหญ่ คำขอมากเกินไป เซิร์ฟเวอร์ตอบช้า หรือ JavaScript บล็อกการทำงานของหน้า

เมื่อใช้งานครบทั้ง Network, Lighthouse และ Performance คุณจะไม่ต้องเดาอีกต่อไปว่าเว็บช้าเพราะอะไร แต่จะมีหลักฐานชัดเจนพอที่จะพาไปสู่การแก้ปัญหาได้อย่างตรงจุดและมีประสิทธิภาพ