การโหลดแบบ Lazy Loading คือวิธีการรอโหลดทรัพยากรจนกว่าจะจำเป็นต้องใช้ แทนที่จะโหลดล่วงหน้า ซึ่งจะช่วยปรับปรุงประสิทธิภาพได้โดยการลดจำนวนทรัพยากรที่ต้องโหลดและแยกวิเคราะห์ในการโหลดหน้าเว็บเริ่มต้น
รูปภาพที่ไม่ได้อยู่ในหน้าจอระหว่างการโหลดหน้าเว็บเริ่มต้นเป็นตัวเลือกที่เหมาะกับเทคนิคนี้ เหนือสิ่งอื่นใด Lazysize ทำให้กลยุทธ์นี้เป็นกลยุทธ์ที่นำไปใช้ได้ง่าย
เพิ่มสคริปต์แบบ 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