วิธีโหลดรูปภาพด้วย Lazy Loading ชิวๆ

Lazy Loading วันนี้กลายมาเป็น feature พื้นฐานของแทบทุก browser ไปแล้ว โดยใช้ Attribuit loading=”lazy“ ง่ายๆ รองรับทุก browser หลักๆ เรียบร้อย สามารถใช้ได้ทั้ง image และ iframe โว้ววว.. หรูหราหมาเห่าไปเลย

Attribute loading คืออะไร?

Attribute loading เป็น attribuit ของ HTML ใช้เพื่อบอก browser ว่าควรโหลด รูปภาพ หรือ iframe แบบไหนดี จะ lazy (โหลดเมื่อใกล้จะเห็น) หรือ eager (โหลดทันที) เพื่อลดการใช้ resource และเพิ่มความเร็วหน้าเว็บ

ประเภทของค่า loading

lazy

โหลด asset เมื่อผู้ใช้ scroll มาใกล้ viewport ช่วยลด LCP และลด data ที่โหลดไม่จำเป็น ที่สำคัญที่สุด คือ ช่วยลดจำนวน blocking requests ในช่วงเริ่มต้นของการโหลดหน้าเว็บได้อย่างมีประสิทธิภาพโครตๆ

eager

โหลดทันทีโดยไม่รอ viewport เหมาะกับรูปภาพ Above the Fold ที่ต้องให้แสดงผลทันที เช่น รูป Logo หลักของเว็บไซต์, Hero image หรือถ้า WordPress ก็จะเป็น Featured Image หรือรูปภาพที่คาดว่าอยู่ในช่วงความสูงของหน้าจอที่ต้องเห็นทันที

ปล. โดยปกติค่า eager จะเป็นค่า default

auto

ปล่อยให้ browser ตัดสินใจเองตามสถานการณ์ ใช้ได้ แต่ไม่แม่นเท่ากำหนดเอง

ใช้งาน loading กับรูปภาพ (img)

ตัวอย่างการใช้

<img src="hero.jpg" loading="eager" alt="ฮีโร่ของฉัน">
<img src="gallery.jpg" loading="lazy" alt="แกลลอรี่ของฉัน">

จุดเด่น

ปรับปรุง Performance โดยเฉพาะในหน้าเว็บที่มีรูปจำนวนมาก ช่วยลดจำนวน blocking requests ในช่วงเริ่มต้นของการโหลดหน้าเว็บ ทำให้คะแนน google page speed สูงขึ้นทันตาเห็น

สิ่งที่ควรระวัง !

รูปบนสุด (Above Fold) หมายถึงรูปที่อยู่ในบริเวณที่อยู่ในความสูงของหน้าจอ ห้ามใช้ lazy เพราะทำให้ LCP ช้า เพราะเราต้องการให้รูปแสดงเลย ไม่ต้องไปใส่ lazy ให้เสียเวลารอ

ใช้งาน loading กับ iframe

ควรใช้กรณีใด

เหมาะกับ YouTube, Google Maps หรือ embed อื่น ๆ ที่หนัก

ประโยชน์

ลด blocking resources และเพิ่มคะแนน Core Web Vitals

ตัวอย่าง

<iframe src="map.html" loading="lazy"></iframe>

Best Practices สำหรับ loading

ควรใช้ lazy เมื่อได?

ให้ใช้กับรูปที่อยู่ล่างหน้าจอ ช่วยลดจำนวน Render-Blocking Requests และทำให้หน้าเว็บโหลดเสร็จเร็วขึ้น

eager ใช้ตอนไหน?

ให้ใช้กับรูปแรก ๆ เท่านั้น เช่น Logo, Hero, Featured Image ด้านบนสุด

หลีกเลี่ยง lazy กับองค์ประกอบสำคัญ

เช่น icon UI, thumbnails ที่ใช้ interaction ทันที เพราะจะทำให้เกิด “UI Delay” ผู้ใช้เห็นวัตถุช้า และส่งผลต่อ UX เพราะถ้ารูปภาพหรือ iframe นั้นจำเป็นต้องใช้ทันที เช่น

เป็นส่วนที่ ผู้ใช้มักต้องใช้งานทันทีที่โหลดหน้าเว็บเสร็จ แต่ถ้ารูปยังไม่โหลดเพราะถูก lazy ไว้:

• ผู้ใช้กดแล้วไม่มีการตอบสนอง
• ปุ่มไม่มีไอคอน ทำให้ผู้ใช้เข้าใจผิดว่า “กดไม่ได้”
• ภาพ thumbnail หาย ส่งผลให้ UX เสีย

จะทำให้ interaction ครั้งแรกมีปัญหาทันที เพราะฉะนั้น ออกแบบและทดสอบก่อนเสมอ

ควรทดสอบกับ Lighthouse / PageSpeed

เพื่อให้รู้ว่ารูปใดควรปรับเป็น eager หรือ lazy ตรงนี้มักจะมีปัญหาแค่ภาพที่อยู่ในโซนหน้าจอ ควรปรับเป็น eager อย่าให้พลาด

ข้อจำกัดของ loading

ไม่ทำงานกับ background-image

background-image CSS ไม่มี lazy loading ให้ใช้เทคนิค Intersection Observer + data-attribute + CSS class น่าจะดีสุดตอนนี้ เพราะเร็ว, เบา, ควบคุมง่าย, ไม่ต้องพึ่ง Library และรองรับ browser แทบทุกรุ่น

ไม่แทนที่การ Optimize รูป

ยังต้องบีบอัด, ใช้ WebP/AVIF, ระบุ width/height ซึ่งก็ดีแล้วเพราะบางเว็บไซต์ต้องนำเสนอรูปภาพที่ความละเอียดและคุณภาพสูง

บาง browser รุ่นเก่าไม่รองรับ

ปัจจุบันรองรับเกือบทั้งหมด ยกเว้นรุ่นเก่ากว่า Chrome 76 ตรงนี้ไม่ต้องไปสนใจ ลุยของเราโลด..

สรุป

ควรใช้ lazy เป็น default ?

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

ใช้ eager เฉพาะรูปที่จำเป็นต้องเห็นทันที

ตรงนี้ต้องปรับแต่งอย่างพิถีพิถันเพราะส่งผลต่อ LCP โดยตรง ทำให้พ่น LCP ออกมาเร็วๆ ยิ่งเร็วยิ่งดี ผู้เข้าชมสมัยนี้ใจร้อน.. ร้อนกว่าไฟเอ้อ..