วิธีเปิด Lazy Load ใน WordPress และตั้งค่าให้เหมาะสม

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

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

❶ ตรวจสอบก่อนว่าเว็บไซต์เปิด Lazy Load อยู่แล้วหรือไม่

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

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

① ตรวจรายการปลั๊กอินที่เกี่ยวกับภาพและความเร็ว

ดูว่ามีปลั๊กอินแคช ปลั๊กอินบีบอัดภาพ หรือปลั๊กอินเพิ่มประสิทธิภาพที่มีตัวเลือก Lazy Load หรือไม่

② ตรวจการทำงานของธีม

ธีมบางตัวมีตัวเลือกจัดการการโหลดภาพหรือเนื้อหาฝัง ตรวจการตั้งค่าก่อนเพิ่มระบบอีกตัว

❷ เลือกภาพที่ควรใช้ Lazy Load

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

① ใช้กับภาพที่อยู่นอกจอเมื่อเปิดหน้า

ภาพที่ยังมองไม่เห็นเมื่อผู้เข้าชมเพิ่งเปิดหน้าเป็นกลุ่มที่เหมาะสำหรับการโหลดเมื่อเลื่อนเข้าใกล้

② ระวังภาพหลักและภาพที่เห็นทันที

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

③ พิจารณาเนื้อหาฝังแยกต่างหาก

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

❸ วิธีเปิด Lazy Load ใน WordPress

① ใช้ระบบที่ WordPress มีให้ก่อน

WordPress รุ่นปัจจุบันมีการจัดการ Lazy Load สำหรับรูปภาพหลายกรณีโดยอัตโนมัติ ให้ทดสอบหน้าเว็บก่อนติดตั้งปลั๊กอินเสริม และตรวจว่าธีมหรือปลั๊กอินไม่ได้ปิดหรือเปลี่ยนการทำงานนี้

② เปิดผ่านปลั๊กอินเมื่อยังไม่มีหรือจำเป็นต้องตั้งค่าเพิ่ม

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

③ อย่าเปิดฟังก์ชันซ้ำในหลายระบบ

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

❹ ตั้งค่าไม่ให้ภาพสำคัญถูกโหลดช้า

หลังเปิด Lazy Load ให้ตรวจภาพที่ปรากฏบนหน้าจอทันที โดยเฉพาะภาพเด่น ภาพปกบทความ และภาพขนาดใหญ่เหนือเนื้อหา ภาพเหล่านี้ควรเริ่มโหลดพร้อมกับหน้า ไม่ควรรอให้ผู้เข้าชมเลื่อนลงไปใกล้ก่อน

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

❺ ตรวจภาพบนมือถือและคอมพิวเตอร์

การจัดวางภาพอาจต่างกันระหว่างมือถือกับคอมพิวเตอร์ ภาพที่อยู่ด้านล่างบนจอใหญ่ อาจเลื่อนขึ้นมาอยู่ในส่วนแรกของหน้าจอมือถือได้

① ตรวจหน้าเว็บทั้งสองขนาดหน้าจอ

เปิดหน้าเดียวกันบนมือถือและคอมพิวเตอร์ แล้วตรวจว่าภาพที่เห็นทันทีไม่ถูกหน่วง

② เลื่อนผ่านหน้าช้า ๆ

ดูว่าภาพปรากฏทันเวลาก่อนที่ผู้เข้าชมจะอ่านถึงหรือไม่ หากภาพขึ้นช้าเกินไป ให้ปรับระยะเริ่มโหลดหรือยกเว้นภาพนั้นจาก Lazy Load

③ ตรวจภาพจากแคชและการแสดงผล

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

❻ ปัญหาที่อาจเกิดขึ้นหลังเปิด Lazy Load

① ภาพหลักแสดงช้า

ภาพที่อยู่ส่วนบนอาจถูกตั้งให้โหลดแบบหน่วง ตรวจข้อยกเว้นของภาพเด่นและปิด Lazy Load เฉพาะภาพที่จำเป็น

② ภาพไม่ปรากฏเมื่อเลื่อนลง

ตรวจว่าปลั๊กอินแคชหรือการย่อ JavaScript ทำให้สคริปต์ Lazy Load ทำงานผิดหรือไม่ ทดลองปิดตัวเลือกที่เพิ่งเปิดทีละรายการ

③ ภาพกะพริบหรือพื้นที่หน้าเว็บขยับ

กำหนดขนาดหรืออัตราส่วนของภาพให้ชัดเจน เพื่อให้เบราว์เซอร์เตรียมพื้นที่ไว้ก่อนภาพโหลดเสร็จ

④ ภาพแสดงไม่เหมือนกันระหว่างอุปกรณ์

ตรวจการตั้งค่าภาพของธีมและรูปแบบที่ส่งให้มือถือ หากใช้ภาพคนละขนาด ให้ทดสอบแต่ละอุปกรณ์แยกกัน

❼ ขั้นตอนตรวจหลังตั้งค่า

ComSiam แนะนำให้ทำตามลำดับนี้หลังเปิดหรือเปลี่ยนการตั้งค่า

① เปิดหน้าสำคัญที่มีภาพหลายตำแหน่ง

เริ่มจากหน้าแรก บทความ และหน้าสินค้าหรือบริการที่มีผู้เข้าชมมาก

② ตรวจภาพส่วนแรกของหน้า

ยืนยันว่าภาพเด่นและภาพที่มองเห็นทันทีไม่ถูกเลื่อนโหลด

③ เลื่อนตรวจภาพด้านล่าง

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

④ ทดสอบฟังก์ชันของหน้า

ตรวจเมนู แกลเลอรี ภาพสินค้า และเนื้อหาฝังว่าทำงานได้ตามปกติ

⑤ เปรียบเทียบก่อนและหลัง

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

❽ ข้อผิดพลาดที่ควรหลีกเลี่ยง

① คิดว่า Lazy Load ทำให้ทุกหน้าดีขึ้นเสมอ

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

② ติดตั้งหลายปลั๊กอินเพื่อทำงานเดียวกัน

ระบบซ้ำซ้อนอาจทำให้ภาพโหลดผิด ล้างแคชยาก หรือหาต้นเหตุไม่พบเมื่อเกิดปัญหา

③ เปิดใช้งานแล้วไม่ตรวจหน้าเว็บจริง

ผลบนหน้าตั้งค่าอาจดูปกติ แต่ภาพบนมือถือหรือบางหน้าของเว็บไซต์อาจมีปัญหา ควรทดสอบหน้าที่ใช้จริงก่อนใช้งานต่อ

สรุป: หน่วงภาพด้านล่าง แต่ไม่หน่วงภาพสำคัญ

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

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