HTML Academy · บทเรียน

การโหลดรูปภาพแบบขี้เกียจ loading=lazy

เลื่อนการโหลดรูปภาพนอกหน้าจอด้วยแอตทริบิวต์ loading แบบเนทีฟ

การโหลดรูปภาพแบบขี้เกียจ loading=lazy เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

แอตทริบิวต์ loading

<img loading="lazy" src="..."> แจ้งให้เบราว์เซอร์เลื่อนการดาวน์โหลดรูปภาพออกไปจนกว่ารูปภาพจะใกล้เข้าสู่วิวพอร์ต การรองรับแบบเนทีฟในเบราว์เซอร์สมัยใหม่ทั้งหมดทำให้วิธีนี้เป็นการเพิ่มประสิทธิภาพที่ง่ายที่สุดสำหรับหน้าที่มีรูปภาพจำนวนมาก

การกำหนดคำว่า "ใกล้วิวพอร์ต"

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

เมื่อใดไม่ควรใช้การโหลดเมื่อจำเป็น

อย่ากำหนด loading="lazy" ให้รูปภาพที่อยู่ในส่วนที่มองเห็นโดยไม่ต้องเลื่อน หรือรูปภาพที่เป็นตัวเลือกของ LCP (การวาดเนื้อหาขนาดใหญ่ที่สุด) การเลื่อนการโหลดจะทำให้องค์ประกอบภาพที่สำคัญที่สุดปรากฏช้าลง ซึ่งส่งผลเสียทั้งต่อความเร็วที่ผู้ใช้รับรู้และตัวชี้วัดประสบการณ์การใช้งานเว็บหลัก

ต้องระบุความกว้างและความสูง

เพื่อให้การโหลดเมื่อจำเป็นมีประสิทธิภาพ โปรดระบุ width และ height ให้กับ <img> อย่างชัดเจน (หรือใช้ CSS aspect-ratio) หากไม่มีมิติของรูปภาพ เบราว์เซอร์จะไม่สามารถกันพื้นที่ไว้ได้ การเลื่อนหน้าจะทำให้เค้าโครงจัดเรียงใหม่ และหลักการประมาณค่าของการโหลดเมื่อจำเป็นจะทำงานผิดพลาด

<img loading="lazy" src="cat.jpg" width="800" height="600" alt="A cat">

การโหลด iframe เมื่อจำเป็น

แอตทริบิวต์เดียวกันนี้ใช้กับ <iframe> ได้ <iframe loading="lazy"> จะเลื่อนการโหลดแผนที่ วิดีโอ และเนื้อหาฝังจากโซเชียลที่อยู่ถัดจากส่วนที่มองเห็นโดยไม่ต้องเลื่อนออกไป ซึ่งแต่ละอย่างอาจดึง JavaScript จากบุคคลที่สามหลายเมกะไบต์ในการดูแต่ละครั้ง

eager เป็นค่าเริ่มต้น

ค่าเริ่มต้นคือ loading="eager" (โหลดทันที) และแทบไม่จำเป็นต้องเขียนระบุอย่างชัดเจน การกำหนด eager ให้รูปภาพในส่วนที่มองเห็นโดยไม่ต้องเลื่อนอาจมีประโยชน์ในฐานะเอกสารประกอบ เพื่อสื่อให้ผู้ตรวจสอบทราบว่าการเลือก eager เป็นความตั้งใจ

ใช้ร่วมกับ srcset

การโหลดเมื่อจำเป็นทำงานร่วมกับรูปภาพแบบปรับตามหน้าจอได้อย่างลงตัว เบราว์เซอร์ยังคงเลือกตัวเลือกที่เหมาะสมจาก srcset เพียงแต่เลื่อนการดาวน์โหลดออกไป ไม่จำเป็นต้องประสานงานเพิ่มเติมระหว่าง loading="lazy" กับ srcset

<img
  loading="lazy"
  srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"
  sizes="(min-width: 768px) 800px, 100vw"
  src="img-800.jpg"
  alt="Hero"
  width="800" height="600"
>

คำใบ้การถอดรหัส

ใช้การโหลดเมื่อจำเป็นร่วมกับ decoding="async" เพื่อให้เบราว์เซอร์ถอดรหัสรูปภาพนอกเธรดหลัก วิธีนี้ช่วยป้องกันไม่ให้การรับข้อมูลถูกบล็อกระหว่างการเลื่อน เมื่อรูปภาพจำนวนมากมาถึงพร้อมกันหลังจากเลื่อนหน้าอย่างต่อเนื่องเป็นเวลานาน

รูปภาพพื้นหลัง

ไม่สามารถโหลด CSS background-image เมื่อจำเป็นได้โดยตรง สำหรับพื้นหลังหลักในส่วนที่มองเห็นโดยไม่ต้องเลื่อน เรื่องนี้ไม่เป็นปัญหา แต่สำหรับพื้นหลังที่อยู่ถัดจากส่วนนั้น ให้ใช้ IntersectionObserver เพื่อสลับไปใช้ URL เมื่อองค์ประกอบเข้าใกล้วิวพอร์ต

พฤติกรรมเมื่อพิมพ์

เมื่อพิมพ์หน้าเว็บ เบราว์เซอร์จะโหลดรูปภาพทุกภาพทันทีโดยไม่คำนึงถึง loading="lazy" เพื่อให้เอกสารที่พิมพ์ออกมาครบถ้วน คุณไม่จำเป็นต้องกำหนดกรณีพิเศษสำหรับรูปภาพที่โหลดเมื่อจำเป็นในสไตล์ชีตสำหรับการพิมพ์

การวัดปริมาณที่ประหยัดได้

การตรวจสอบ "Defer offscreen images" ของ Lighthouse จะแสดงรายการรูปภาพทุกภาพที่ควรใช้ loading="lazy" การกรองในแผงเครือข่ายด้วย "Img" ร่วมกับมุมมอง "Waterfall" จะแสดงการโหลดที่ทยอยเกิดขึ้นจากการโหลดเมื่อจำเป็น โดยคำขอเริ่มต้นจะลดลงอย่างมากในแกลเลอรีรูปภาพ

ตรวจสอบความรู้

เหตุใดการกำหนด loading="lazy" ให้รูปภาพหลักที่อยู่ด้านบนสุดของหน้าจึงเป็นผลเสีย

สรุป

การใช้ loading="lazy" กับองค์ประกอบ <img> และ <iframe> ที่อยู่นอกวิวพอร์ตเป็นการเพิ่มประสิทธิภาพด้วยแอตทริบิวต์เดียว ควรใช้ร่วมกับ width/height ที่ระบุอย่างชัดเจน (เพื่อกันพื้นที่ไว้), srcset (เพื่อรองรับหน้าจอหลายขนาด) และ decoding="async" (เพื่อให้การเลื่อนราบรื่น) อย่าใช้กับรูปภาพ LCP หรือสิ่งใดก็ตามที่มองเห็นได้ในวิวพอร์ตเริ่มต้น

คำถามที่พบบ่อย

บทเรียน “การโหลดรูปภาพแบบขี้เกียจ loading=lazy” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การโหลดรูปภาพแบบขี้เกียจ loading=lazy” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การโหลดรูปภาพแบบขี้เกียจ loading=lazy”

เลื่อนการโหลดรูปภาพนอกหน้าจอด้วยแอตทริบิวต์ loading แบบเนทีฟ คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การโหลดรูปภาพแบบขี้เกียจ loading=lazy” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy