HTML lazy loading — โหลด resource เมื่อใกล้จะเห็น

loading="lazy" บน <img> และ <iframe> ให้ browser โหลดเมื่อ element ใกล้จะเข้า viewport — ลด initial page weight ได้มาก

<!-- img lazy load — browser handle intersection เอง -->
<img src="photo.jpg" alt="ภาพ" loading="lazy" width="800" height="600">

<!-- iframe lazy load — สำหรับ embed ที่ไม่ต้องโหลดทันที -->
<iframe src="https://youtube.com/embed/xxx" loading="lazy"></iframe>

ข้อควรระวัง:

<!-- ห้ามใส่ lazy กับ LCP image (above-the-fold) -->
<img src="hero.jpg" alt="Hero" loading="eager">  <!-- ✅ โหลดทันที -->

<!-- ต้องระบุ width/height เสมอ กัน layout shift -->
<img src="photo.jpg" alt="" loading="lazy" width="400" height="300">

fetchpriority="high" บน LCP image บังคับให้ browser prioritize การโหลด — ใช้คู่กับ loading="eager" สำหรับ hero image เพื่อ improve LCP score