ความกังวลที่เพิ่มมากขึ้นได้เกิดขึ้นในชุมชนนักพัฒนาเว็บ นักพัฒนายุคใหม่จำนวนมาก โดยเฉพาะผู้ที่ใช้ React และเฟรมเวิร์กยุคใหม่อื่นๆ ขาดความรู้พื้นฐานเกี่ยวกับรูปแบบไฟล์รูปภาพและการปรับแต่ง ช่องว่างของความรู้นี้นำไปสู่เว็บไซต์ที่ช้าลงอย่างมีนัยสำคัญและประสบการณ์ผู้ใช้ที่แย่
ศิลปะการปรับแต่งรูปภาพที่สูญหาย
การอภิปรายเผยให้เห็นแนวโน้มที่น่าเป็นห่วงที่นักพัฒนาเลือกใช้ PNG สำหรับรูปภาพทั้งหมดโดยไม่คิด โดยเชื่อว่าจะให้ผลลัพธ์ที่คมชัดกว่า อย่างไรก็ตาม วิธีการนี้มักส่งผลให้ขนาดไฟล์ใหญ่กว่าที่จำเป็นถึง 3-5 เท่า รูปภาพฮีโร่ของพระอาทิตย์ตกที่อาจมีขนาดเพียง 160KB ในรูปแบบ JPEG อาจพองตัวเป็น 2.5MB ในรูปแบบ PNG โดยที่คุณภาพที่มองเห็นได้แทบไม่แตกต่างกันสำหรับผู้ใช้
ชุมชนชี้ให้เห็นว่าเรื่องนี้ไม่เคยเป็นเช่นนี้มาก่อน นักพัฒนาที่เรียนรู้ฝีมือในยุค jQuery เข้าใจแนวคิดเหล่านี้โดยธรรมชาติ เพราะข้อจำกัดของแบนด์วิดท์ทำให้การปรับแต่งเป็นสิ่งจำเป็น การเชื่อมต่ออินเทอร์เน็ตความเร็วสูงในปัจจุบันได้ขจัดลูปการตอบสนองทันทีนั้น ทำให้แนวปฏิบัติที่ไม่มีประสิทธิภาพยังคงอยู่โดยไม่มีใครสังเกต
ตัวอย่างผลกระทบของขนาดไฟล์:
- ภาพพระอาทิตย์ตก PNG : 2.5MB
- ภาพเดียวกันในรูปแบบ JPEG : 160KB (ลดขนาดได้ 94%)
- PNG ที่มีข้อความ: 77KB
- SVG เทียบเท่า: 2KB (ลดขนาดได้ 97%)
- Favicon ICO : 32KB แบบไม่บีบอัด, 4.3KB แบบบีบอัด
การศึกษาที่เน้นเฟรมเวิร์กขาดพื้นฐาน
สาเหตุรากฐานดูเหมือนจะมาจากวิธีการสอนการพัฒนาเว็บยุคใหม่ บทเรียน React และ bootcamp เน้นหนักไปที่แนวคิด JavaScript สถาปัตยกรรมคอมโพเนนต์ และการจัดการสถานะ โดยถือว่าการปรับแต่งรูปภาพเป็นความรับผิดชอบของคนอื่น สิ่งนี้สร้างนักพัฒนาที่สามารถสร้างแอปพลิเคชันที่ซับซ้อนได้ แต่พลาดพื้นฐานของเว็บที่สำคัญ
React ถูกใช้เป็นไม้เท้าสำหรับการพัฒนาเว็บในปัจจุบัน ความจำเป็นของมันไม่ได้รับการพิจารณาสำหรับการแก้ปัญหา แต่ถูกสันนิษฐานว่าจำเป็นโดยอิงจากการเรียนรู้แบบท่องจำ
ช่องว่างทางการศึกษานี้กลายเป็นปัญหาเพราะนักพัฒนา React มักเป็นผู้ตัดสินใจเกี่ยวกับการใช้งานรูปภาพที่ส่งผลกระทบโดยตรงต่อประสิทธิภาพแอปพลิเคชันและประสบการณ์ผู้ใช้
แนวทางการเลือกรูปแบบไฟล์รูปภาพ:
- JPEG: เหมาะสำหรับภาพถ่ายและรูปภาพที่ซับซ้อนซึ่งมีสีสันและการไล่สีเยอะ
- PNG: เหมาะสำหรับโลโก้ ไอคอน กราฟิกเรียบง่าย และรูปภาพที่ต้องการความโปร่งใส
- SVG: เหมาะสำหรับกราฟิกที่ปรับขนาดได้เช่นไอคอนและภาพประกอบเรียบง่าย (โดยทั่วไปมีขนาด 2KB หรือน้อยกว่า)
- WebP: มีขนาดเล็กกว่า JPEG/PNG ที่เทียบเท่ากัน 25-35% แต่ต้องการการสนับสนุนเครื่องมือที่ดีกว่า
ผลกระทบต่อประสิทธิภาพในโลกจริง
ผลกระทบต่อประสิทธิภาพขยายไปเกินกว่าเวลาดาวน์โหลด ไฟล์ที่ใหญ่กว่าต้องการพลังการประมวลผลมากกว่าในการถอดรหัสและแสดงผล สร้างประสบการณ์ที่ช้าแม้ในการเชื่อมต่อที่เร็ว ผู้ใช้สังเกตเห็นความแตกต่างเหล่านี้ แม้ว่าพวกเขาจะไม่สามารถอธิบายได้ว่าทำไมเว็บไซต์หนึ่งถึงรู้สึกช้ากว่าอีกเว็บไซต์หนึ่ง
การอภิปรายของชุมชนสัมผัสถึงคำถามว่าการปรับแต่งนี้ควรจะทำโดยอัตโนมัติผ่านเครื่องมือหรือไม่ แม้ว่าจะมีเครื่องมือบางอย่างอยู่ นักพัฒนาที่มีประสบการณ์สังเกตว่าการตรวจสอบด้วยตาอย่างรวดเร็วตามกฎง่ายๆ สามารถบรรลุผลประโยชน์จากการปรับแต่ง 90% โดยไม่ต้องใช้เวลาในการตั้งค่าเลย
การเรียกร้องให้มีการเรียนรู้ที่สมดุล
การอภิปรายเน้นคำถามที่กว้างขึ้นเกี่ยวกับสิ่งที่นักพัฒนาเว็บยุคใหม่ควรรู้ ในขณะที่บางคนโต้แย้งว่าบทเรียน React ไม่ควรครอบคลุมพื้นฐานของเว็บทุกอย่าง คนอื่นๆ ยืนยันว่าการปรับแต่งประสิทธิภาพสำคัญเกินกว่าที่จะมองข้าม ฉันทามติดูเหมือนจะเป็นว่านักพัฒนาต้องการทั้งความเชี่ยวชาญเฟรมเวิร์กและความรู้พื้นฐานของเว็บเพื่อสร้างแอปพลิเคชันที่มีประสิทธิภาพอย่างแท้จริง
วิธีแก้ปัญหาอาจอยู่ที่การตระหนักว่าการพัฒนาเว็บยุคใหม่ต้องการความสมดุลระหว่างทักษะเฉพาะเฟรมเวิร์กและหลักการปรับแต่งเว็บที่เหนือกาลเวลา เมื่อความเร็วอินเทอร์เน็ตเพิ่มขึ้นต่อไป การล่อลวงให้มองข้ามพื้นฐานเหล่านี้จะเพิ่มมากขึ้นเท่านั้น ทำให้การศึกษาอย่างมีสติเกี่ยวกับการปรับแต่งประสิทธิภาพสำคัญมากกว่าที่เคย