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

Katie Hempenius

หากต้องการติดตาม Codelab นี้ ให้เปิดกลิทช์นี้ในแท็บที่ 2

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

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

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

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

ดาวน์โหลด lazysizes.min.js และเพิ่มในกลิทช์นี้แล้ว วิธีรวมไว้ในหน้า

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

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

หมายเหตุ: ระบบได้เพิ่มไฟล์ lazysizes.min.js ลงในโปรเจ็กต์นี้แล้ว จึงไม่จำเป็นต้องเพิ่มไฟล์แยกต่างหาก สคริปต์ที่คุณเพิ่งเพิ่มสามารถใช้สคริปต์นี้ได้

แบบ 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

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

ดูของจริง

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

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

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

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

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

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

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

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