วิธีใช้ Browser Developer Tools ตรวจเว็บ WordPress ช้า

Browser Developer Tools เป็นเครื่องมือในเบราว์เซอร์ที่ช่วยตรวจว่าเว็บไซต์ WordPress โหลดไฟล์อะไร ใช้เวลารอนานตรงไหน และมีข้อผิดพลาดใดเกิดขึ้นบ้าง เหมาะสำหรับวิเคราะห์เบื้องต้นก่อนปรับปลั๊กอิน ธีม แคช หรือโฮสติ้ง

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

❶ เปิด Developer Tools และเตรียมหน้าที่จะตรวจ

เปิดหน้าเว็บ WordPress ที่มีปัญหา เช่น หน้าแรก หน้าบทความ หรือหน้าร้านค้า แล้วเปิด Developer Tools ใน Chrome หรือเบราว์เซอร์ที่ใช้ Chromium

① วิธีเปิดบนคอมพิวเตอร์

• Windows หรือ Linux: กด F12 หรือ Ctrl + Shift + I
• macOS: กด Option + Command + I
• หรือคลิกขวาบนหน้าเว็บ แล้วเลือกตรวจสอบ (Inspect)

ตำแหน่งเมนูอาจต่างกันเล็กน้อยตามเบราว์เซอร์และเวอร์ชัน เมื่อเปิดแล้วจะเห็นแผงเครื่องมือที่มีแท็บ เช่น Network, Performance, Console และ Elements

② เตรียมการทดสอบให้เหมือนกัน

เลือก URL ที่ต้องการตรวจ แล้วเปิด Developer Tools ก่อนโหลดหน้าใหม่ ในแท็บ Network ให้เปิดตัวเลือกปิดแคชระหว่างทดสอบ หากต้องการจำลองการเข้าชมครั้งแรก จากนั้นโหลดหน้าใหม่ด้วยการรีโหลดแบบเต็ม

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

❷ ใช้แท็บ Network หาคำขอที่ช้า

แท็บ Network แสดงรายการไฟล์และคำขอที่หน้าเว็บโหลด เช่น HTML, CSS, JavaScript, รูปภาพ ฟอนต์ และข้อมูลจากบริการภายนอก

① เรียงรายการตามเวลาและขนาด

หลังโหลดหน้าใหม่ ให้ดูคอลัมน์เวลา (Time) และขนาด (Size) แล้วเรียงรายการเพื่อหาไฟล์ที่ใช้เวลานานหรือมีขนาดใหญ่ หากไม่เห็นคอลัมน์ที่ต้องการ ให้คลิกขวาบริเวณหัวตารางเพื่อเลือกแสดงคอลัมน์เพิ่มเติม

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

② ตรวจรายละเอียดคำขอที่ผิดปกติ

คลิกคำขอที่สงสัยเพื่อดูข้อมูลเพิ่มเติม เช่น Headers, Preview, Response และ Timing

• เวลารอการตอบสนองจากเซิร์ฟเวอร์สูง อาจเกี่ยวกับเซิร์ฟเวอร์ ฐานข้อมูล หรือการประมวลผล WordPress
• ไฟล์ขนาดใหญ่ใช้เวลาดาวน์โหลดนาน อาจต้องปรับขนาดหรือบีบอัด
• คำขอที่ล้มเหลวหรือขึ้นสถานะผิดปกติ อาจเกิดจาก URL เสีย การตั้งค่าแคช หรือการเชื่อมต่อกับบริการภายนอก
• ไฟล์เดิมถูกเรียกหลายครั้ง อาจมีการโหลดซ้ำจากธีม ปลั๊กอิน หรือการตั้งค่าที่ทับซ้อนกัน

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

❸ ใช้แท็บ Performance ตรวจการทำงานระหว่างโหลด

แท็บ Performance บันทึกสิ่งที่เกิดขึ้นระหว่างโหลดหน้าและระหว่างใช้งาน ช่วยให้เห็นช่วงที่เบราว์เซอร์ใช้เวลาประมวลผลนาน ไม่ใช่เฉพาะการดาวน์โหลดไฟล์

① บันทึกการโหลดหน้า

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

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

② ตรวจช่วงที่หน้าแสดงผลช้า

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

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

❹ ใช้แท็บ Console ตรวจข้อผิดพลาด

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

① แยกข้อผิดพลาดที่เกี่ยวกับปัญหา

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

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

② ตรวจข้อความเตือนที่เกิดซ้ำ

ข้อความเตือนจำนวนมากอาจทำให้ติดตามปัญหาหลักได้ยาก ให้จดข้อความที่เกิดซ้ำและชื่อไฟล์ไว้ แล้วตรวจทีละรายการ อย่าลบปลั๊กอินเพียงเพราะเห็นชื่อปรากฏใน Console โดยยังไม่ทราบว่าเกี่ยวข้องกับอาการหรือไม่

❺ ใช้ผลตรวจหาสาเหตุและเลือกวิธีแก้

Developer Tools ช่วยชี้จุดที่ควรตรวจต่อ แต่สาเหตุอาจอยู่ในหลายส่วนของเว็บไซต์ ควรจับคู่หลักฐานกับอาการก่อนลงมือเปลี่ยนการตั้งค่า

① แนวทางแปลผลเบื้องต้น

• รอเซิร์ฟเวอร์ตอบสนองนาน: ตรวจโฮสติ้ง แคช และงานที่ WordPress ต้องประมวลผล
• รูปภาพโหลดนาน: ตรวจขนาดไฟล์ รูปแบบภาพ และการโหลดภาพนอกจอ
• สคริปต์ใช้เวลาประมวลผลสูง: ตรวจปลั๊กอิน ธีม และบริการภายนอกที่เพิ่ม JavaScript
• คำขอล้มเหลว: ตรวจ URL สถานะการตอบกลับ และการตั้งค่า CDN หรือปลั๊กอิน
• หน้าโหลดเร็วแต่กดแล้วหน่วง: ตรวจแท็บ Performance ระหว่างใช้งานและสคริปต์ที่ทำงานหลังโหลด

② บันทึกผลก่อนและหลังปรับ

จด URL อุปกรณ์ที่ใช้ทดสอบ เวลาโหลดโดยประมาณ และคำขอที่ผิดปกติไว้ก่อนแก้ไข จากนั้นปรับทีละอย่าง ล้างแคช และทดสอบซ้ำด้วยเงื่อนไขเดิม

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

❻ ข้อจำกัดที่ควรรู้ก่อนสรุปผล

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

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

สรุปคือเริ่มจาก Network เพื่อดูไฟล์และเวลารอ ใช้ Performance เมื่อต้องตรวจการประมวลผล และใช้ Console เพื่ออ่านข้อผิดพลาด จากนั้นปรับทีละจุดและทดสอบซ้ำ แนวทางนี้ช่วยให้ ComSiam หรือผู้ดูแลเว็บไซต์ WordPress ระบุปัญหาได้เป็นระบบขึ้น โดยไม่ต้องเดาสุ่มปิดปลั๊กอินหรือเปลี่ยนการตั้งค่าหลายอย่างพร้อมกัน