วิธี Lazy โหลดรูปภาพโดยใช้ HTML และ JavaScript
ในโลกดิจิทัลที่เปลี่ยนแปลงอย่างรวดเร็วในปัจจุบัน การมีเว็บไซต์ที่มีประสิทธิภาพสูงถือเป็นสิ่งสำคัญ สิ่งสำคัญประการหนึ่งคือการทำให้รูปภาพของคุณโหลดได้อย่างมีประสิทธิภาพ ผู้ใช้คาดหวังประสบการณ์การท่องเว็บที่ราบรื่นและรวดเร็ว และบทความนี้จะแสดงวิธีดำเนินการดังกล่าวให้คุณทราบ
เจาะลึกแนวความคิดของการโหลดรูปภาพที่มีประสิทธิภาพ หรือที่เรียกว่าการโหลดแบบ Lazy Loading และค้นพบการใช้งานโดยใช้ HTML และ JavaScript ร่วมกับ Intersection Observer API
Lazy Loading คืออะไร?
การโหลดแบบ Lazy Loading เป็นเทคนิคการปรับให้เหมาะสมที่จะเลื่อนการโหลดองค์ประกอบภาพ โดยเฉพาะรูปภาพ ออกไป จนกว่าจะจำเป็นสำหรับการแสดงผล ตรงกันข้ามกับการโหลดภาพทั้งหมดล่วงหน้าเมื่อหน้าเว็บมาถึง วิธีการนี้จะเลือกดึงภาพซึ่งปัจจุบันอยู่ในบริเวณใกล้เคียงหรือขอบเขตการมองเห็นของผู้ดู ด้วยการเพิ่มประสิทธิภาพเว็บไซต์ จะช่วยลดเวลาที่ต้องใช้ในการเริ่มต้นและประหยัดความสามารถในการถ่ายโอนข้อมูลเครือข่าย
เหตุใดจึงต้องใช้ Lazy Loading?
แท้จริงแล้ว มีเหตุผลโน้มน้าวใจหลายประการสำหรับการรวมการโหลดเนื้อหาภาพแบบ Lazy Loading บนแพลตฟอร์มเว็บ ซึ่งรวมถึงแต่ไม่จำกัดเพียง:
การใช้เทคนิคการโหลดแบบ Lazy Loading สามารถเพิ่มประสิทธิภาพการทำงานของหน้าเว็บได้อย่างมาก โดยการเลื่อนการโหลดภาพออกไปจนกว่าจะจำเป็นสำหรับการดู วิธีการนี้ไม่เพียงแต่ช่วยลดเวลาในการโหลดหน้าแรกเท่านั้น แต่ยังช่วยให้ผู้ใช้เริ่มโต้ตอบกับเว็บไซต์ได้รวดเร็วยิ่งขึ้น ซึ่งท้ายที่สุดแล้วส่งผลให้ประสบการณ์ผู้ใช้โดยรวมดีขึ้น
เว็บไซต์รักษาระดับการตอบสนองในระดับสูงโดยการโหลดรูปภาพแบบไดนามิกในขณะที่ผู้ใช้เลื่อนดู ซึ่งจะช่วยขจัดความล่าช้าหรือความล่าช้าในการเลื่อนและการนำทางที่อาจเป็นผลมาจากการรอให้เนื้อหาทั้งหมดโหลดเต็มที่ล่วงหน้า วิธีการนี้ช่วยให้สามารถโต้ตอบกับเนื้อหาของไซต์ได้อย่างราบรื่นในขณะที่ยังคงประสิทธิภาพโดยรวมไว้
การโหลดแบบ Lazy Loading เป็นเทคนิคการออกแบบเว็บไซต์ที่เกี่ยวข้องกับการเลื่อนการโหลดเนื้อหาที่ไม่จำเป็นออกไปจนกว่าจะจำเป็น ซึ่งจะช่วยลดเวลาในการโหลดครั้งแรกของหน้าเว็บ ด้วยการอนุรักษ์แบนด์วิธด้วยวิธีนี้ เว็บไซต์จะได้รับการปรับให้เหมาะสมยิ่งขึ้นสำหรับอุปกรณ์มือถือและบุคคลที่มีการเชื่อมต่ออินเทอร์เน็ตช้ากว่า ผลที่ได้คือ การโหลดแบบ Lazy Loading สามารถลดการใช้ข้อมูลโดยรวมของไซต์ได้อย่างมาก และท้ายที่สุดก็มอบประสบการณ์ที่เป็นมิตรต่อผู้ใช้มากขึ้นสำหรับผู้เยี่ยมชม
การเพิ่มประสิทธิภาพสำหรับการจัดอันดับเครื่องมือค้นหาเป็นสิ่งสำคัญในภูมิทัศน์ดิจิทัลในปัจจุบัน และสิ่งสำคัญประการหนึ่งที่มีบทบาทสำคัญในเรื่องนี้ก็คือประสิทธิภาพของเว็บไซต์ โดยเฉพาะอย่างยิ่ง เครื่องมือค้นหาเช่น Google คำนึงถึงปัจจัยต่างๆ เช่น ความเร็วของหน้า เพื่อพิจารณาว่าเว็บไซต์ใดจะแสดงอย่างเด่นชัดในหน้าผลลัพธ์ ในบริบทนี้ การโหลดแบบ Lazy Loading แสดงให้เห็นว่าส่งผลดีต่อประสิทธิภาพของ SEO เนื่องจากความสามารถในการเพิ่มเวลาในการโหลด ซึ่งท้ายที่สุดจะนำไปสู่ประสบการณ์ผู้ใช้ที่ดีขึ้นและการจัดอันดับเครื่องมือค้นหาโดยรวมที่ดีขึ้น
จากข้อดีที่กล่าวมาข้างต้น ให้ฉันอธิบายขั้นตอนการใช้งานการโหลดแบบ Lazy Loading ในเว็บแอปพลิเคชันของคุณ
การใช้งาน Lazy Loading: มาร์กอัป HTML
ในการเริ่มต้นกระบวนการ จำเป็นต้องแก้ไขมาร์กอัป HTML โดยรวมแอตทริบิวต์"loading=‘lazy’“ไว้ภายในแท็กของรูปภาพ
<body>
<main>
<section>
<img src="./image-one-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-two-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-three-high.jpg" alt="" loading="lazy" />
</section>
</main>
</body>
แอตทริบิวต์การโหลดที่ใช้ในบริบทของมาร์กอัป HTML ทำหน้าที่ควบคุมพฤติกรรมการโหลดขององค์ประกอบต่างๆ ที่แสดงบนหน้าเว็บ ด้วยการระบุ"loading=‘lazy’“ภายในแท็ก img เบราว์เซอร์จะได้รับคำสั่งให้ชะลอการได้มาของทรัพยากรที่เกี่ยวข้องจนกว่าจะถึงเวลาที่จำเป็นสำหรับการเรนเดอร์หรือการประมวลผลเพิ่มเติม
ปัจจุบันหน้าเว็บมีการจัดวางดังนี้
การใช้งาน Lazy Loading: การใช้งาน JavaScript
หากต้องการเพิ่มประสิทธิภาพการทำงานของเทคนิคการโหลดแบบ Lazy Loading ให้ลองใช้ Intersection Observer API เครื่องมืออันทรงพลังนี้ช่วยให้สามารถตรวจสอบองค์ประกอบต่างๆ ขณะที่เข้าหรือออกจากวิวพอร์ตของผู้ใช้ ทำให้มีวิธีการโหลดเนื้อหาที่แม่นยำและมีประสิทธิภาพมากขึ้น
เหตุผลเบื้องหลังในการใช้ Intersection Observer ที่เกี่ยวข้องกับการโหลดรูปภาพแบบ Lazy Loading นั้นค่อนข้างตรงไปตรงมา เมื่อหน้าเว็บโหลดครั้งแรก ระบบจะดึงข้อมูลรูปภาพในเวอร์ชันที่มีความละเอียดลดลง แทนที่จะเป็นรูปภาพที่มีความละเอียดสูงทั้งหมดที่ผู้ใช้ไม่สามารถมองเห็นได้ในทันที
เมื่อภาพขนาดย่อความละเอียดต่ำปรากฏขึ้นภายในพื้นที่แสดงผลของเบราว์เซอร์ JavaScript จะแทนที่ด้วยภาพขนาดย่อที่มีรายละเอียดมากขึ้นและมีความคมชัดสูง เพื่อใช้งานฟังก์ชันนี้ คุณจะต้องทำการปรับเปลี่ยนโค้ด HTML ของคุณ
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-one-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-one-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-two-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-two-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-three-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-three-high.jpg"
/>
</section>
องค์ประกอบภาพหลักบนหน้าเว็บนี้คือการนำเสนอที่มีความละเอียดต่ำ ในขณะที่การนำเสนอคุณภาพที่เหนือกว่าทำหน้าที่เป็นแหล่งข้อมูลเสริม ด้วยเหตุนี้ ไซต์จึงนำเสนอตัวเองในลักษณะที่รวมเอาทั้งรูปภาพคุณภาพต่ำและความคมชัดสูงไปพร้อมๆ กัน
ในการเริ่มต้น ให้เลือกองค์ประกอบภาพที่จะโหลดอย่างเกียจคร้านเพื่อประสบการณ์ผู้ใช้ที่มีประสิทธิภาพมากขึ้น:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
หลังจากนั้นให้สร้างวัตถุIntersectionObserver
const observer = new IntersectionObserver();
แท้จริงแล้ว เราจะจัดเตรียมอาร์เรย์ที่ประกอบด้วยคอลเลกชันของวัตถุ IntersectionObserverEntry ซึ่งห่อหุ้มข้อมูลเกี่ยวกับองค์ประกอบที่ได้รับการตรวจสอบตลอดจนจุดตัดกับขอบเขตการมองเห็น ควบคู่ไปกับอินสแตนซ์ IntersectionObserver ที่ทำหน้าที่เป็นเครื่องมือสังเกตการณ์ของเรา
const observer = new IntersectionObserver((lazyImages, observer) => { });
ต่อไป เราจะตรวจสอบหาจุดตัดและแทนที่รูปภาพคุณภาพต่ำด้วยเวอร์ชันคุณภาพสูงกว่าเมื่อองค์ประกอบที่เกี่ยวข้องมาสัมผัสกัน
const observer = new IntersectionObserver((lazyImages, observer) => {
lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
lazyImage.src = lazyImage.dataset.src; // Swap the image source
observer.unobserve(lazyImage); // Stop observing this image
}
});
});
สุดท้าย เริ่มต้นการสังเกตสำหรับแต่ละองค์ประกอบ
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
แน่นอนว่าด้วยการใช้ JavaScript คุณได้ดำเนินการตามกลยุทธ์การโหลดแบบ Lazy Loading ได้สำเร็จ
เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ
ข้อควรพิจารณาในการโหลดแบบ Lazy
เพื่อใช้งานการโหลดแบบ Lazy Loading ในเว็บแอปพลิเคชันได้อย่างมีประสิทธิภาพ จำเป็นต้องคำนึงถึงปัจจัยสำคัญหลายประการ ซึ่งรวมถึงการพิจารณาว่าจะโหลดข้อมูลอย่างไรและเมื่อใด ตลอดจนพิจารณาว่าส่วนประกอบใดที่ควรโหลดแบบ Lazy Load นอกจากนี้ จะต้องพิจารณาอย่างรอบคอบถึงผลกระทบของการโหลดแบบ Lazy Loading ต่อประสิทธิภาพและประสบการณ์ผู้ใช้ โดยเฉพาะอย่างยิ่งในเรื่องเวลาแฝงของเครือข่ายและแบนด์วิดท์ที่มีอยู่ สิ่งสำคัญคือต้องตรวจสอบให้แน่ใจว่าเนื้อหาที่โหลดแบบ Lazy ยังคงสามารถทำงานได้อย่างอิสระเมื่อโหลดแล้ว โดยไม่ต้องอาศัยทรัพยากรอื่นที่ยังไม่ได้ดึงข้อมูล สุดท้ายนี้ ต้องมีกลไกการจัดการข้อผิดพลาดที่เหมาะสมเพื่อจัดการกับปัญหาที่อาจเกิดขึ้นระหว่างกระบวนการโหลดแบบ Lazy Loading
เพื่อเพิ่มความสามารถในการเข้าถึง จำเป็นต้องใส่คำอธิบายทางเลือกของรูปภาพผ่านการใช้แอตทริบิวต์"alt"ข้อความเพิ่มเติมนี้เป็นที่รู้จักในชื่อการอ้างอิงแบบอาศัยผู้ใช้โปรแกรมอ่านหน้าจอ ช่วยให้ผู้ที่มีความบกพร่องทางการมองเห็นสามารถเข้าใจความหมายจากเนื้อหาที่นำเสนอภายในรูปภาพได้
⭐ ความเข้ากันได้ของเบราว์เซอร์: ก่อนที่จะใช้งานการโหลดแบบ Lazy Loading ให้ยืนยันความเข้ากันได้กับเบราว์เซอร์ต่างๆ เบราว์เซอร์บางประเภทไม่ได้ขยายการรองรับคุณสมบัตินี้ ในบางกรณี การรวมโพลีฟิลอาจกลายเป็นสิ่งจำเป็น โดยเฉพาะอย่างยิ่งสำหรับเบราว์เซอร์รุ่นเก่า เครื่องมือเช่น CanIUse เป็นทรัพยากรอันมีค่าสำหรับการประเมินความเข้ากันได้ของเบราว์เซอร์
ความสำคัญของการดำเนินการประเมินกลไกการโหลดแบบ Lazy Loading ที่ครอบคลุมทุกด้าน ซึ่งครอบคลุมอุปกรณ์และขนาดจอแสดงผลที่หลากหลาย ไม่สามารถกล่าวเกินจริงได้
การปรับปรุงความเร็วเว็บไซต์และประสบการณ์ผู้ใช้
การรวมการโหลดรูปภาพในเว็บไซต์เป็นวิธีที่มีประสิทธิภาพในการเพิ่มประสิทธิภาพและมอบประสบการณ์ผู้ใช้ที่ดีขึ้น ด้วยการลดเวลาในการโหลดและอำนวยความสะดวกในการนำทางที่ราบรื่น วิธีการนี้จึงสอดคล้องกับความคาดหวังของผู้ชมที่ฉลาดในปัจจุบันซึ่งให้ความสำคัญกับความรวดเร็วและการโต้ตอบที่ราบรื่น
แท้จริงแล้วการใช้แนวทางนี้ไม่เพียงแต่เพิ่มประสิทธิภาพกลไกค้นหาเท่านั้น แต่ยังช่วยประหยัดการใช้แบนด์วิธอีกด้วย ดังนั้นคุณจะรออะไรอยู่? เริ่มปรับปรุงเว็บไซต์ของคุณในคราวเดียวโดยใช้กลยุทธ์ที่เป็นมิตรต่อผู้ใช้แต่ทรงพลังนี้