การโหลดแบบ 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 ลงในรูปภาพนอกหน้าจอหรือไม่
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายประสิทธิภาพในรายการหมวดหมู่แล้ว
- คลิกปุ่มสร้างรายงาน
- ตรวจสอบว่าผ่านการตรวจสอบเลื่อนรูปภาพนอกหน้าจอแล้ว
สำเร็จ! คุณใช้ขนาด Lazysize เพื่อโหลดรูปภาพในหน้าเว็บของคุณแบบ Lazy Loading