Next.js Image Optimization: ใช้ <Image /> ให้เว็บโหลดไวและ LCP ดีขึ้น

Next.js มีฟีเจอร์ Image Optimization ที่ออกแบบมาเพื่อช่วยให้รูปภาพบนเว็บโหลดได้เร็วขึ้น โดยใช้คอมโพเนนต์ <Image /> แทน <img> แบบปกติ จุดเด่นของฟีเจอร์นี้คือช่วยจัดการเรื่องรูปแบบไฟล์ ขนาดการแสดงผล และพฤติกรรมการโหลดภาพให้เหมาะกับการใช้งานบนเว็บสมัยใหม่มากขึ้น

ในงานจริง ปัญหาที่พบบ่อยคือการใช้รูปขนาดใหญ่เกินความจำเป็น ทำให้หน้าเว็บโหลดช้า โดยเฉพาะภาพสำคัญที่อยู่ด้านบนสุดของหน้าอย่าง hero image หรือภาพแรกที่ผู้ใช้มองเห็นทันที ซึ่งมักส่งผลโดยตรงต่อค่า LCP (Largest Contentful Paint)

ทำไมรูปภาพถึงมีผลต่อความเร็วเว็บ

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

ผลกระทบที่เห็นชัดมีหลายด้าน เช่น

• เวลาการโหลดหน้าแรกนานขึ้น
• ค่า LCP แย่ลง
• ผู้ใช้รู้สึกว่าเว็บตอบสนองช้า
• layout ของหน้าเว็บกระโดดเมื่อรูปเพิ่งโหลดเสร็จ

ในหน้าเว็บที่มีภาพหลักเด่นชัด เช่น banner หรือ hero section ภาพนั้นมักกลายเป็นองค์ประกอบหลักที่ใช้วัด LCP ดังนั้นการจัดการภาพให้เหมาะสมจึงไม่ใช่แค่เรื่องความสวยงาม แต่เป็นเรื่อง performance โดยตรง

<Image /> ช่วยอะไรได้บ้าง

คอมโพเนนต์ <Image /> ของ Next.js ช่วยให้การแสดงผลรูปภาพมีประสิทธิภาพมากขึ้นในหลายด้าน เช่น

• รองรับ responsive image เพื่อส่งรูปที่เหมาะกับขนาดหน้าจอ
• รองรับ lazy loading สำหรับรูปที่ยังไม่อยู่ในจอ
• ช่วยกำหนดขนาดภาพอย่างชัดเจน
• ปรับ optimize format ให้เหมาะกับเบราว์เซอร์

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

อย่างไรก็ตาม การใช้ <Image /> ไม่ได้แปลว่าเว็บจะเร็วขึ้นแบบอัตโนมัติทุกกรณี ถ้าภาพต้นฉบับมีขนาดใหญ่เกินไป หรือเลือก composition ของภาพไม่เหมาะสม ฟีเจอร์ optimization ก็ช่วยได้เพียงบางส่วนเท่านั้น

เรื่องสำคัญที่ห้ามมองข้าม: width, height และ layout

หนึ่งในข้อผิดพลาดที่พบบ่อยคือไม่ได้กำหนด width และ height ของรูป หรือไม่ได้วาง layout ของพื้นที่รูปให้ชัดเจนตั้งแต่แรก ผลที่ตามมาคือเมื่อรูปโหลดเสร็จ หน้าเว็บจะเกิดอาการกระโดด ซึ่งส่งผลเสียต่อประสบการณ์ใช้งานและอาจกระทบต่อ Core Web Vitals ได้

แนวทางที่ควรทำคือ

• กำหนด width และ height ให้ชัดเจนเมื่อเป็นไปได้
• หรือใช้ layout ที่กำหนดสัดส่วนพื้นที่ของรูปไว้ล่วงหน้า
• ตรวจสอบว่าพื้นที่ของ hero image ถูกจองไว้ก่อนรูปโหลดจริง

เมื่อเบราว์เซอร์รู้ขนาดพื้นที่ของรูปตั้งแต่ต้น ก็จะสามารถจัดวางหน้าเว็บได้เสถียรกว่าเดิม และลดปัญหา content shifting ได้มาก

การใช้ priority กับภาพสำคัญต่อ LCP

สำหรับรูปที่อยู่บนจอแรกและเป็นองค์ประกอบสำคัญของหน้า เช่น hero image ควรพิจารณาใช้ priority เพื่อบอก Next.js ว่ารูปนี้ควรถูกโหลดก่อน เพราะมีผลโดยตรงต่อการแสดงผลที่ผู้ใช้รับรู้

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

หลักคิดง่าย ๆ คือ

• รูปที่ผู้ใช้เห็นทันทีและมีผลต่อ LCP ควรโหลดก่อน
• รูปประกอบที่อยู่ด้านล่างควรปล่อยให้โหลดตามลำดับที่เหมาะสม
• ใช้ priority เฉพาะกับรูปที่สำคัญจริงเท่านั้น

กรณีใช้รูปจากภายนอก: ตั้งค่า remotePatterns ให้ถูกต้อง

ถ้าโปรเจกต์มีการโหลดรูปจาก domain ภายนอก เช่น CMS หรือ CDN จำเป็นต้องตั้งค่า images.remotePatterns ใน next.config.js ให้ถูกก่อน ไม่เช่นนั้น Next.js จะไม่สามารถจัดการภาพเหล่านั้นได้ตามที่ต้องการ

นอกจากเรื่องการอนุญาต domain แล้ว ควรคิดต่อในเชิงระบบด้วย เช่น

• แหล่งภาพรองรับ cache ดีหรือไม่
• มีการส่งไฟล์ใน format ที่เหมาะสมหรือไม่
• ขนาดภาพต้นฉบับใหญ่เกินความจำเป็นหรือเปล่า
• โครงสร้าง URL ของภาพเอื้อต่อการจัดการในระยะยาวหรือไม่

หากใช้รูปจาก CMS หรือ CDN ภายนอก การวางแผนตั้งแต่ต้นจะช่วยลดปัญหาด้าน performance ได้มากกว่ามาแก้ภายหลัง

ใช้ <Image /> อย่างมีประสิทธิภาพในงานจริง

การใช้งาน <Image /> ให้ได้ผลดี ไม่ควรมองแค่การเปลี่ยนแท็กจาก <img> เป็น <Image /> เท่านั้น แต่ควรดูภาพรวมของกระบวนการจัดการรูปทั้งหมดร่วมกัน

แนวทางเชิงปฏิบัติที่ควรเช็กเสมอมี 3 ข้อหลักคือ

1. รูปสำคัญต้องโหลดก่อน โดยเฉพาะภาพที่อยู่ด้านบนสุดของหน้า
2. ขนาดและ layout ของรูปต้องชัดเจน เพื่อไม่ให้หน้าเว็บกระโดด
3. รูปที่ไม่สำคัญไม่ควรแย่ง bandwidth ในช่วงโหลดหน้าแรก

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

สรุป

Next.js Image Optimization เป็นฟีเจอร์ที่มีประโยชน์มากสำหรับการปรับปรุง performance ของเว็บ โดยเฉพาะเมื่อใช้ <Image /> อย่างเข้าใจหลักการ ทั้งเรื่อง responsive image, lazy loading, การกำหนดขนาดภาพ และการเลือกภาพสำคัญให้โหลดก่อน

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

ถ้าจำหลักง่าย ๆ ได้ 3 อย่าง ได้แก่ รูปสำคัญโหลดก่อน, layout ไม่กระโดด, และรูปไม่สำคัญไม่แย่ง bandwidth ก็ถือว่าใช้ <Image /> ได้อย่างถูกทางและช่วยลดปัญหา performance บนเว็บ Next.js ได้มากแล้ว