Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยชน์

lazy-load-คืออะไร
lazy-load-คืออะไร

Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยชน์



Lazy Load คือคำเรียกของการจัดการกับทรัพยากร ( Resource ) บนเว็บไซต์เพื่อเพิ่มศักยภาพการทำงานของเว็บไซต์และลดการใช้งานหน่วยความจำเครื่อง client และ การโหลดข้อมูลจากฝั่ง server แบบใช้เท่าทีจำเป็นต้องใช้งานเท่านั้น เพื่อให้เว็บไซต์สามารถเข้าสู่หน้าเว็บในโหมดการใช้งานปกติได้เร็วขึ้น ตัวอย่างเช่น เมื่อเราต้องพัฒนาเว็บไซต์ที่มี Banner

Slide และในสไลด์นั้นมีไอเทมที่ต้องโหลดขึ้นมาแสดงจำนวน 4 รูป แต่ละรูปมีขนาด 1024×600 Pixel ประมาณขนาดของรูประมาณ 1MB เว็บไซต์ต้องเสียเวลาโหลดข้อมูลของทั้ง 4 รูปในหน้าเดียวรวมแล้วถึง 4MB ถ้าต้องรวมการโหลดกับ element อื่น ๆ ในหน้าเว็บไซต์นั้นอีก ทั้งข้อความ ไอคอน ไฟล์ css และไฟล์ js ก็จะยิ่งทำให้เว็บไซต์ใช้เวลาในการประมวลผลข้อมูลแบบเสร็จสิ้นทั้งหมดนานเกินไป

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

วิธีใช้งาน lazy load กับรูปภาพ

การใช้งาน lazy load เราสามารถใช้งานได้แบบง่าย ๆ แบบไม่ต้องพึงพา jquery plugin เลยก็ได้นะครับ การใช้งานคือ เมื่อเราสร้างแท็ก img ขึ้นมา แทนที่เราจะใส่ path ของรูปลงไปใน src attribute ให้เปลี่ยนเป็นปล่อยสร้างและสร้าง custom attribute ขึ้นมาเก็บค่าของรูปแทน ตัวอย่างเช่น

  • กำหนดค่าเริ่มต้น img element
  • <img src="images/logo.png"/>

    ให้เราเปลี่ยนเป็น custom attribute แบบนี้ครับ

    <img class="lazy" data-src="images/logo.png"/>

    จากโค๊ด html ด้านบน เราได้สร้าง img element ขึ้นมา แต่ไม่ใช้งาน src attribute เพราะทำให้รูปโหลดทันที เปลี่ยนไปเป็นเก็บรูปไว้ใน data-src เพื่อไว้ใช้งานในภายหลัง และได้สร้าง class ชื่อว่า lazy เพื่อไว้ให้ jquery สั่งงานในภายหลัง

  • สั่งให้โหลดรูปเมื่อจำเป็นเท่านั้น
  • เราได้ตั้งค่าต่าง ๆ ให้กับ img element แล้ว เมื่อถึงจังหวะที่ต้องการให้โหลดรูปมาแสดงเราก็สามารถใช้ jQuery สั่งให้โหลดได้ด้วยคำสั่งดังนี้

    var imgTag = $("img.lazy");
    var imgPath = imgTag.attr("data-src");
    imgTag.attr("src",imgPath);


ทดลองใช้งาน jquery.lazyload.js ร่วมกับ bxSlider.js

  • ดาวน์โหลด bxSlider.js
  • bxSlider.js เป็น jquery plugin ไว้สำหรับทำสไลด์แบบ responsive ซึ่งท่านสามารถดาวน์โหลดได้ที่เว็บไซต์หลักของ plugin เลยคือ bxslider.com

  • ดาวน์โหลด jquery.lazyload.js
  • jquery.lazyload.js เป็น jquery plugin ไว้สำหรับทำ lazy load โดยเฉพาะ ซึ่งท่านสามารถดาวน์โหลดได้ที่เว็บไซต์ github ตามลิงค์นี้ครับ https://github.com/tuupola/jquery_lazyload

  • ใส่ lazy คลาสใน img element
  • การตั้งค่า img element เพื่อใช้งาน jquery.lazyload.js ไม่ได้มีอะไรแตกต่างไปจากการใช้งานปกติ เพียงแต่ต้องตั้งชื่อ custom attribute ให้ตรงกับตัว plugin นั่นคือเปลี่ยนจาก data-src เป็น data-original จะเขียนโค๊ดได้ดังนี้

    <img class="lazy" data-original="images/logo.png"/>
  • สั่งให้ lazy ทำงานเมื่อ bxSlider.js ทำงานในหน้านั้น ๆ
  • var Config = {
    	pager:false,
    	infiniteLoop: false,
    	hideControlOnEnd: true,
    	onSlideAfter: function($slideElement, oldIndex, newIndex){
    		$("img.lazy").lazyload(); // สั่งให้โหลด img element ที่มี lazy คลาสทุก ๆ ครั้งที่ bxslider เปลี่ยนหน้าเสร็จ
        }
    };
    var slider = $(".bxslider").bxSlider(Config); // กำหนด class และใช้งานตั้งค่าของ bxslider
    $("img.lazy").lazyload(); // เริ่มทำงานสำหรับหน้าแรกของ bxslider



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

Lazy Load สำหรับ WordPress

สำหรับ wordpress นั้นจะมี lazy load plugin ให้เลือกใช้งานอยู่หลายตัวท่านสามารถค้นหาในเมนู plugin และทดสอบติดตั้งเองได้เลย ตัวอย่าง plugin https://th.wordpress.org/plugins/lazy-load/