โหลดรูปภาพนอกหน้าจอแบบ Lazysize

Katie Hempenius

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

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

เพิ่มสคริปต์แบบ Lazysizes ลงในหน้าเว็บ

• คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้

ดาวน์โหลดและเพิ่ม lazysizes.min.js ไปยังภาพแตกนี้แล้ว วิธีใส่ไว้ในหน้าเว็บมีดังนี้

• เพิ่มแท็ก <script> ต่อไปนี้ใน index.html:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

ขนาด Lazysize จะโหลดรูปภาพอย่างชาญฉลาดเมื่อผู้ใช้เลื่อนดูหน้าเว็บ และจัดลำดับความสำคัญของรูปภาพที่ผู้ใช้จะได้พบเร็วๆ นี้

ระบุรูปภาพสำหรับการโหลดแบบ Lazy Loading

• เพิ่มคลาส lazyload ลงในรูปภาพที่ควรจะโหลดแบบ Lazy Loading นอกจากนี้ ให้เปลี่ยนแอตทริบิวต์ src เป็น data-src

ตัวอย่างเช่น การเปลี่ยนแปลงของ flower3.png จะมีลักษณะดังนี้

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

สำหรับตัวอย่างนี้ ให้ลองโหลดแบบ Lazy Loading flower3.png, flower4.jpg และ flower5.jpg

ดูของจริง

เท่านี้ก็เรียบร้อย หากต้องการดูการทำงานของการเปลี่ยนแปลงดังกล่าว ให้ทำตามขั้นตอนต่อไปนี้

• หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ

• เปิดคอนโซลและค้นหารูปภาพที่เพิ่งเพิ่ม ชั้นเรียนของผู้ใช้ควรเปลี่ยนจาก lazyload เป็น lazyloaded เมื่อคุณเลื่อนหน้าเว็บลง

• ดูแผงเครือข่ายเพื่อดูการโหลดไฟล์ภาพทีละรายการขณะที่เลื่อนหน้าเว็บลง

ยืนยันโดยใช้ Lighthouse

สุดท้าย คุณควรใช้ Lighthouse เพื่อยืนยันการเปลี่ยนแปลงเหล่านี้ การตรวจสอบประสิทธิภาพ "เลื่อนรูปภาพนอกหน้าจอ" ของ Lighthouse จะระบุว่าคุณลืมเพิ่มการโหลดแบบ Lazy Loading ลงในรูปภาพนอกหน้าจอหรือไม่

1. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ
2. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกแท็บ Lighthouse
4. ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่แล้ว
5. คลิกปุ่มสร้างรายงาน
6. ตรวจสอบว่าผ่านการตรวจสอบเลื่อนรูปภาพนอกหน้าจอแล้ว

สำเร็จ! คุณใช้ขนาด Lazysize เพื่อโหลดรูปภาพในหน้าเว็บของคุณแบบ Lazy Loading