วิธีที่ดีที่สุดในการปรับแต่ง Lazy Loading ของคุณเองสำหรับเว็บไซต์

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

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

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

คุณสามารถปรับแต่ง Lazy Loading สำหรับเว็บไซต์ของคุณได้สองวิธี - ใช้คุณสมบัติพื้นหลัง CSS หรือใช้แท็ก <img> อย่างไรก็ตาม วิธีการแท็ก <img> เป็นเรื่องปกติของทั้งสองวิธี เนื่องจากเทคนิคนี้ใช้งานง่าย

<img> คุณสมบัติแท็ก:

เข็มหมุด

เมื่อใช้แท็ก <img> เบราว์เซอร์จะใช้แอตทริบิวต์ src เพื่อทริกเกอร์การโหลดรูปภาพ ไม่สำคัญว่าจะเป็นภาพที่ 1 หรือภาพที่ 100 ในโค้ดของคุณ หากเบราว์เซอร์ได้รับแอตทริบิวต์ src จะทริกเกอร์การโหลดรูปภาพ ดังนั้นหากต้องการโหลดรูปภาพเหล่านี้ ให้เพิ่ม URL รูปภาพไปยังแอตทริบิวต์อื่นที่ไม่ใช่ src ตัวอย่างเช่น หากคุณวาง URL รูปภาพในแอตทริบิวต์ data-src เบราว์เซอร์จะไม่ทริกเกอร์การโหลดรูปภาพเนื่องจากแอตทริบิวต์ src ว่างเปล่า

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

1. การใช้เหตุการณ์ JavaScript:

เข็มหมุด

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

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

หากรูปภาพเข้าสู่วิวพอร์ต เราจะนำ URL ของรูปภาพจากแอตทริบิวต์ data-src และใส่ไว้ในแอตทริบิวต์ src ที่ทริกเกอร์การโหลดรูปภาพ จากนั้นเราต้องลบคลาสที่ขี้เกียจออกจากรูปภาพเนื่องจากคลาสนี้ทำให้รูปภาพโหลดอย่างเกียจคร้าน เมื่อโหลดรูปภาพทั้งหมดแล้ว ตัวฟังเหตุการณ์จะถูกลบออก

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

2. การใช้ API ผู้สังเกตการณ์ทางแยก:

เข็มหมุด

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

อันดับแรก เราต้องแนบผู้สังเกตการณ์กับรูปภาพทั้งหมดที่ต้องการการโหลดแบบ Lazy Loading เมื่อ API ตรวจพบว่ารูปภาพได้เข้าสู่วิวพอร์ตแล้ว API จะเลือก URL จาก data-src และใส่ลงในแอตทริบิวต์ src โดยใช้วิธี 'isIntersecting' เพื่อทริกเกอร์การโหลดรูปภาพ หลังจากนั้นคลาสขี้เกียจจะถูกลบออกพร้อมกับการลบผู้สังเกต

Intersection Observer API ทำงานได้อย่างรวดเร็วโดยไม่ทำให้เว็บไซต์ดูเฉื่อยเมื่อเลื่อนเมื่อเทียบกับการใช้เหตุการณ์ JavaScript ด้วยเทคนิคการฟังเหตุการณ์ เราต้องเพิ่มระยะหมดเวลาที่เพิ่มการหน่วงเวลาเล็กน้อย อย่างไรก็ตาม Intersection Observer API ไม่รองรับเบราว์เซอร์ทั้งหมด ดังนั้นผู้ฟังเหตุการณ์จึงกลายเป็นตัวเลือกยอดนิยมสำหรับผู้ใช้

คุณสมบัติพื้นหลัง CSS:

เข็มหมุด

สำหรับการโหลดรูปภาพพื้นหลัง CSS เบราว์เซอร์จะต้องสร้าง CSS Object Model (CSSOM) พร้อมกับ Document Object Model (DOM) เพื่อตัดสินใจว่าสไตล์ CSS จะนำไปใช้กับ DOM ที่มีอยู่ในเอกสารที่มีอยู่หรือไม่ หากกฎ CSS ใช้ไม่ได้กับองค์ประกอบ เบราว์เซอร์จะไม่โหลดภาพพื้นหลัง

ด้วยเทคนิคนี้ เราใช้คุณสมบัติ CSS ของ background-image เมื่อองค์ประกอบมาที่วิวพอร์ต มีองค์ประกอบที่มี ID bg-image (ภาพพื้นหลัง) ใน CSS เมื่อเพิ่มคลาส lazy ลงในรูปภาพแล้ว ในเทคนิค CSS เราจะแทนที่คุณสมบัติ bg-image และทำให้ไม่มีคุณสมบัติดังกล่าว

การเพิ่มคลาส .lazy ให้กับ #bg-image เป็นที่ต้องการใน CSS มากกว่าการใช้ #bg-image เพียงอย่างเดียว เริ่มแรก เบราว์เซอร์ใช้ background-image: none กับองค์ประกอบ เมื่อเราเลื่อนดูหน้าเว็บ ผู้ฟังเหตุการณ์หรือผู้สังเกตการณ์ทางแยกจะตรวจพบภาพที่อยู่ในวิวพอร์ตและลบคลาส .lazy สิ่งนี้ใช้ไม่ได้ในเทคนิค CSS เนื่องจากคุณสมบัติ bg-image ถูกนำไปใช้กับองค์ประกอบที่ทริกเกอร์การโหลดภาพพื้นหลัง

ดังนั้น ต่อไปนี้คือสองวิธีที่คุณสามารถปรับแต่งเว็บไซต์โหลดแบบ Lazy Loading ของคุณเองได้ เทคนิคทั้งสองนี้ให้ผลลัพธ์ที่ยอดเยี่ยม อย่างไรก็ตาม หากคุณต้องการเทคนิคที่ตรงไปตรงมา คุณควรไปที่แท็ก <img> มีปลั๊กอินมากมายสำหรับผู้ใช้ WordPress เพื่อปรับแต่งภาพที่โหลดแบบสันหลังยาวบนเว็บไซต์ WordPress ของพวกเขาเช่นกัน การเพิ่มประสิทธิภาพรูปภาพสำหรับเว็บไซต์ WordPress ของคุณโดยใช้ปลั๊กอินเหล่านี้ พร้อมกับการโหลดแบบ Lazy Loading จะช่วยปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณ มอบประสบการณ์ที่ดียิ่งขึ้น และช่วย SEO ด้วยเช่นกัน