Lazy Loading คืออะไร และจะปรับปรุงประสบการณ์ผู้ใช้ได้อย่างไร

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

การศึกษาพบว่าทุกๆ วินาทีที่เว็บไซต์ของคุณใช้ในการโหลด โอกาสในการเปลี่ยนผู้เยี่ยมชมให้เป็นลูกค้าจะลดลง ตามข้อมูลของ Portent โอกาสในการแปลงคือ 40% ในหนึ่งวินาทีของการโหลด ในขณะที่ลดลงเหลือ 34% ในครั้งถัดไป และ 29% ในสามวินาที คุณอาจสงสัยว่า “แล้ววิธีแก้ปัญหาล่ะ?”

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

ในบทความนี้ เราจะมาสำรวจ Lazy Loading ว่าทำไมจึงควรใช้ และเปรียบเทียบประสิทธิภาพกับวิธีอื่นๆ ได้อย่างไร มาเข้าเรื่องกันเถอะ!

สารบัญ

• Lazy Loading คืออะไร?
• ความสำคัญของการโหลดแบบ Lazy Loading
• การโหลดอย่างกระตือรือร้นกับการโหลดแบบขี้เกียจ
• การโหลดแบบ Lazy Loading ทำงานอย่างไร
• การดำเนินการโหลดแบบขี้เกียจ

Lazy Loading คืออะไร?

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

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

แทนที่จะรอให้ทุกอย่างโหลด คุณสามารถดูสิ่งที่อยู่บนหน้าจอได้ทันที

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

ความสำคัญของ Lazy Loading

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

เพิ่มประสิทธิภาพการทำงาน

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

ลดแบนด์วิธและโหลดเซิร์ฟเวอร์

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

ปรับปรุง SEO

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

Eager กำลังโหลดคืออะไร?

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

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

แม้ว่าจะใช้งานง่าย แต่การโหลดที่กระตือรือร้นมีความเกี่ยวข้องน้อยลงเนื่องจากปัจจัยหลายประการ ได้แก่:

ขนาดหน้าเว็บที่เพิ่มขึ้น

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

ผลกระทบเชิงลบต่อประสิทธิภาพการทำงาน

เวลาในการโหลดหน้าเว็บที่นานขึ้นอาจส่งผลเสียต่อ การวัดประสิทธิภาพของเว็บไซต์ ที่สำคัญ เช่น First Contentful Paint (FCP) และ Largest Contentful Paint (LCP) สิ่งเหล่านี้เป็นกุญแจสำคัญสำหรับ SEO และประสบการณ์ผู้ใช้

การเพิ่มขึ้นของผู้ใช้มือถือ

ด้วยการใช้งานเบราว์เซอร์บนมือถือจำนวนมาก การทำให้สิ่งต่าง ๆ โหลดเร็วเป็นพิเศษตั้งแต่เริ่มต้นจึงกลายเป็นเรื่องสำคัญ

การโหลดอย่างกระตือรือร้นกับการโหลดแบบขี้เกียจ

นี่คือการเปรียบเทียบโดยย่อของ Eager Loading และ Lazy Loading:

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

Lazy Loading ทำงานอย่างไร

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

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

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

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

การใช้งาน Lazy Loading

ในส่วนนี้ เราจะแสดงวิธีต่างๆ ในการใช้งาน Lazy Loading บนเว็บไซต์ของคุณ

วิธีที่ 1 – การใช้งาน Lazy Loading ด้วยตนเอง

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

ในการดำเนินการนี้ คุณจะใช้ HTML และ JavaScript เป็นส่วนใหญ่ ก่อนที่คุณจะเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณมีสิทธิ์เข้าถึงไฟล์ธีมของไซต์ WordPress ของคุณและรู้สึกมั่นใจที่จะแก้ไข HTML และ JavaScript

นี่คือคำแนะนำโดยละเอียดเพื่อช่วยเหลือคุณตลอดกระบวนการ:

ขั้นตอนที่ 1 : สำรองข้อมูลเว็บไซต์ของคุณ

สำรองข้อมูลไซต์ WordPress ของคุณทุกครั้งก่อนทำการเปลี่ยนแปลงไฟล์ธีมเพื่อหลีกเลี่ยงการสูญเสียข้อมูล หากคุณทำผิดพลาด

ขั้นตอนที่ 2 : แก้ไข ไฟล์ Functions.php ของธีม

• เข้าถึงไฟล์ของเว็บไซต์ WordPress ของคุณ (โดยใช้ไคลเอนต์ FTP หรือตัวจัดการไฟล์ในแผงควบคุมโฮสติ้งของคุณ)
• ไปที่ /wp-content/themes/your-theme/ และค้นหา ไฟล์ function.php
• เปิด Functions.php เพื่อแก้ไข

ขั้นตอนที่ 3 : เพิ่มสคริปต์ Lazy Loading

ใน Functions.php ให้เพิ่มฟังก์ชันเพื่อจัดคิวไฟล์ JavaScript สำหรับ Lazy Loading นี่คือตัวอย่างพื้นฐาน:

ฟังก์ชั่น add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

โค้ดนี้จะถือว่าคุณมีไฟล์ JavaScript ชื่อ lazy-load.js ใน โฟลเดอร์ js ภายในไดเร็กทอรีธีมของคุณ

ขั้นตอนที่ 4 : สร้างไฟล์ JavaScript

• สร้างไฟล์ใหม่ชื่อ lazy-load.js ใน โฟลเดอร์ js ของไดเร็กทอรีธีมของคุณ
• เพิ่ม JavaScript เพื่อจัดการกับ Lazy Loading นี่คือตัวอย่างพื้นฐานที่ใช้ IntersectionObserver :

document.addEventListener("DOMContentLoaded", ฟังก์ชั่น() {

ให้lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

ถ้า (“IntersectionObserver” ในหน้าต่าง) {

ให้lazyImageObserver = IntersectionObserver ใหม่ (ฟังก์ชัน (รายการ ผู้สังเกตการณ์) {

รายการ forEach (ฟังก์ชัน (รายการ) {

ถ้า (รายการ isIntersecting) {

ให้lazyImage = entry.target;

lazyImage.src = lazyImage.dataset.src;

lazyImage.classList.remove("ขี้เกียจ");

lazyImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach (ฟังก์ชั่น (lazyImage) {

lazyImageObserver.observe (lazyImage);

});

}

});

ขั้นตอนที่ 5 : อัปเดตแท็กรูปภาพของคุณใน WordPress

แก้ไขแท็กรูปภาพของคุณเพื่อรองรับ Lazy Loading ในเทมเพลต PHP ของคุณหรือในโพสต์/เพจโดยตรง ให้เปลี่ยนแท็กรูปภาพของคุณดังนี้:

<img class=”lazy” src=”placeholder-image.jpg” data-src=”Original-image.jpg” alt=”คำอธิบายรูปภาพ”>

แทนที่ placeholder-image.jpg ด้วยรูปภาพความละเอียดต่ำหรือกราฟิกสำหรับการโหลด และแทนที่ original-image.jpg ด้วย URL รูปภาพจริง

เคล็ดลับจากผู้เชี่ยวชาญ: ใช้ตัวยึดตำแหน่งที่ตอบสนองสำหรับรูปภาพที่โหลดแบบ Lazy Load เพื่อให้แน่ใจว่าเค้าโครงยังคงมีเสถียรภาพ

ขั้นตอนที่ 6 : ทดสอบการเปลี่ยนแปลงของคุณ

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

หมายเหตุ

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

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

วิธีที่ 2 – การใช้ปลั๊กอิน WordPress เพื่อใช้งาน Lazy Loading

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

มีวิธีที่ง่ายและสะดวกในการตั้งค่ารูปภาพ, iframe และวิดีโอของคุณให้เป็นการโหลดแบบ Lazy Load คุณลักษณะ Lazy Load ในตัวจะชะลอการโหลดทรัพยากรบนเว็บโดยอัตโนมัติจนกว่าจะมองเห็นได้ ส่งผลให้เวลาในการโหลดหน้าเว็บเร็วขึ้นอย่างมาก อย่างไรก็ตาม นี่เป็นคุณสมบัติพิเศษของ WP-Optimize

หากต้องการเปิดใช้งานคุณลักษณะนี้:

• เปิด แท็บWP-Optimize > รูปภาพ จากแดชบอร์ดผู้ดูแลระบบ WordPress ของคุณ
• เปิด แท็บย่อย Lazy Load Images
• จากที่นี่ คุณสามารถเปิดใช้งาน Lazy Loading สำหรับทั้งรูปภาพและวิดีโอ/Iframes

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

ก่อนและหลัง

เราทดสอบความเร็วของเว็บไซต์ตัวอย่างก่อนและหลังการใช้งาน Lazy Load เว็บไซต์ค่อนข้างเร็วอยู่แล้ว โดยใช้ เวลาโหลด First Contentful Paint (FCP) อยู่ที่ 1.5 วินาทีตามข้อมูลของ GTMetrix

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

พร้อมที่จะเร่งความเร็วในการโหลดเพจของคุณแล้วหรือยัง?

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

นอกจากนี้เรายังให้คำแนะนำที่เป็นประโยชน์เกี่ยวกับวิธีใช้ Lazy Loading ใน WordPress อีกด้วย เราครอบคลุมทุกอย่างตั้งแต่การทำโค้ดด้วยตัวเองไปจนถึงการใช้ปลั๊กอินเช่น WP-Optimize

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

คำถามที่พบบ่อย

Lazy Loading ดีหรือไม่ดี?

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

Lazy Loading ใน UI คืออะไร

การโหลดแบบ Lazy ใน UI หมายถึงการโหลดองค์ประกอบภาพ เช่น รูปภาพและวิดีโอเฉพาะเมื่ออยู่ใน (หรืออยู่ใกล้) วิวพอร์ตของผู้ใช้เท่านั้น

Lazy Loading ส่งผลต่อ SEO หรือไม่?

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

คุณควรขี้เกียจโหลดภาพทั้งหมดหรือไม่?

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

Lazy Loading มีปัญหาอะไรบ้าง?

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