AI สร้างธีม WordPress ให้ผม แต่แล้วมันก็ทำประสิทธิภาพพัง

ผมเป็นผู้เชี่ยวชาญด้าน SEO และผมชอบทดสอบเครื่องมือใหม่ๆ

เมื่อเร็วๆ นี้ ผมได้ลองให้ AI สร้างธีม WordPress แบบกำหนดเองขึ้นมาใหม่ตั้งแต่ต้น โดยผมอธิบายเลย์เอาต์และจัดเตรียมเนื้อหาไว้ให้

ในตอนแรก ผลลัพธ์ดูดีมาก เว็บไซต์ได้คะแนน Lighthouse เต็ม 100/100 ทั้งบนมือถือและเดสก์ท็อป ส่วนโค้ดก็ดูสะอาดตา

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

ปัญหามันอยู่ที่แอตทริบิวต์ (attribute) ของรูปภาพเพียงตัวเดียว ความผิดพลาดนี้แสดงให้เห็นว่าทำไมคุณถึงต้องตรวจสอบโค้ดที่ AI เขียน

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

รายงานบนมือถือชี้ไปที่รูปภาพหนึ่งในเส้นทาง Largest Contentful Paint (LCP) ซึ่งเป็นภาพสกรีนช็อตจากเกมเก่าเกมหนึ่ง

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

AI เขียนโค้ดนี้: Aladdin

โค้ดนี้ถูกต้องตามหลักการ แต่ตรรกะผิดพลาด AI ทึกทักเอาเองว่ารูปภาพแรกในโค้ดคือรูปภาพหลัก (hero image) มันขาดความเข้าใจด้านการมองเห็น (visual awareness) ทำให้เบราว์เซอร์บนมือถือต้องดาวน์โหลดรูปภาพที่มองไม่เห็นในทันที

ผมจึงเปลี่ยนโค้ดเป็น: Aladdin

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

ผมล้างแคชทิ้ง แล้วคะแนนบนมือถือก็กลับมาเป็น 100 อีกครั้ง

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

หากคุณใช้ AI ในการสร้างคอมโพเนนต์ (components) ให้ปฏิบัติตามขั้นตอนเหล่านี้:

  • ตรวจสอบ fetchpriority และ loading="lazy" โดยเทียบกับเลย์เอาต์จริง อย่าเชื่อถือเพียงแค่ลำดับของโค้ด
  • มองหารูปภาพที่ถูกซ่อนอยู่ใต้ตารางหรือสไลเดอร์ (sliders)
  • แยกการทดสอบของคุณให้ชัดเจน ล้างแคชทุกครั้งก่อนทำการทดสอบ อย่าตรวจสอบโค้ดที่ยังเป็นเวอร์ชันเก่า (stale code)

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

Source: https://dev.to/serdiniakos/an-ai-built-my-wordpress-theme-then-i-found-the-performance-bugs-it-left-behind-59hg

Optional learning community: https://t.me/GyaanSetuAi