Lazy Loading: การเพิ่มประสิทธิภาพเว็บไซต์ด้วยการโหลดรูปภาพและคอมโพเนนต์

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

Lazy Loading คืออะไร?

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

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

ทำไมต้องใช้ Lazy Loading?

Lazy Loading มีประโยชน์ที่สำคัญหลายประการ:

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

การทำ Lazy Loading กับรูปภาพ

รูปภาพมักเป็นเนื้อหาที่มีขนาดใหญ่ที่สุดบนเว็บไซต์ ทำให้เป็นตัวเลือกอันดับต้นๆ สำหรับการทำ Lazy Loading ต่อไปนี้คือวิธีการนำ Lazy Loading ไปใช้กับรูปภาพ:

Native Lazy Loading

เบราว์เซอร์สมัยใหม่ (Chrome, Firefox, Safari และ Edge) รองรับ Native Lazy Loading โดยใช้แอตทริบิวต์ loading นี่เป็นวิธีที่ง่ายและมีประสิทธิภาพที่สุดในการทำ Lazy Load กับรูปภาพ

หากต้องการเปิดใช้งาน Native Lazy Loading เพียงแค่เพิ่มแอตทริบิวต์ loading="lazy" ลงในแท็ก <img> ของคุณ:

<img src="image.jpg" alt="My Image" loading="lazy">

แอตทริบิวต์ loading สามารถมีได้ 3 ค่า:

• lazy: ชะลอการโหลดรูปภาพจนกว่าจะเข้าใกล้ขอบเขตการมองเห็น
• eager: โหลดรูปภาพทันที โดยไม่คำนึงถึงตำแหน่งบนหน้า (นี่คือพฤติกรรมเริ่มต้นหากไม่มีแอตทริบิวต์นี้)
• auto: ให้เบราว์เซอร์ตัดสินใจว่าจะทำ Lazy Load กับรูปภาพหรือไม่

ตัวอย่าง:

<img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">

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

การทำ Lazy Loading ด้วย JavaScript

สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ Native Lazy Loading คุณสามารถใช้ไลบรารี JavaScript หรือเขียนสคริปต์ของคุณเองได้ นี่คือตัวอย่างพื้นฐานโดยใช้ Intersection Observer API:

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

คำอธิบาย:

1. เราเลือกองค์ประกอบ <img> ทั้งหมดที่มีแอตทริบิวต์ data-src
2. เราสร้างอินสแตนซ์ IntersectionObserver ใหม่ ฟังก์ชัน callback จะถูกเรียกใช้งานเมื่อองค์ประกอบที่สังเกตการณ์เข้าหรือออกจากขอบเขตการมองเห็น
3. ภายในฟังก์ชัน callback เราจะวนซ้ำผ่าน entries (องค์ประกอบที่ตัดกับขอบเขตการมองเห็น)
4. หากองค์ประกอบกำลังตัดกับขอบเขต (entry.isIntersecting เป็น true) เราจะตั้งค่าแอตทริบิวต์ src ของรูปภาพเป็นค่าของแอตทริบิวต์ data-src
5. จากนั้นเราจะลบแอตทริบิวต์ data-src และหยุดสังเกตการณ์รูปภาพนั้น เนื่องจากไม่จำเป็นอีกต่อไป
6. สุดท้าย เราจะสังเกตการณ์แต่ละรูปภาพโดยใช้ observer.observe(img)

โครงสร้าง HTML:

<img data-src="image.jpg" alt="My Image">

สังเกตว่า URL ของรูปภาพจริงถูกวางไว้ในแอตทริบิวต์ data-src แทนที่จะเป็นแอตทริบิวต์ src ซึ่งจะช่วยป้องกันไม่ให้เบราว์เซอร์โหลดรูปภาพทันที

การใช้ไลบรารี Lazy Loading

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

• Lozad.js: ไลบรารี Lazy Loading ที่มีขนาดเล็กและไม่มี dependency
• yall.js: Yet Another Lazy Loader. ไลบรารี Lazy Loading สมัยใหม่ที่ใช้ Intersection Observer
• React Lazy Load: คอมโพเนนต์ React สำหรับการทำ Lazy Loading กับรูปภาพและคอมโพเนนต์อื่นๆ

โดยทั่วไปแล้ว ไลบรารีเหล่านี้จะมี API ที่เรียบง่ายสำหรับการเริ่มต้นใช้งาน Lazy Loading และมีคุณสมบัติเพิ่มเติม เช่น รูปภาพสำรอง (placeholder) และเอฟเฟกต์การเปลี่ยนภาพ

การทำ Lazy Loading กับคอมโพเนนต์

Lazy Loading ไม่ได้มีไว้สำหรับรูปภาพเท่านั้น แต่ยังสามารถนำไปใช้กับคอมโพเนนต์ได้ด้วย โดยเฉพาะในเฟรมเวิร์ก JavaScript สมัยใหม่ เช่น React, Angular และ Vue ซึ่งมีประโยชน์อย่างยิ่งสำหรับแอปพลิเคชันหน้าเดียว (SPAs) ขนาดใหญ่ที่มีคอมโพเนนต์จำนวนมาก

การทำ Lazy Loading ใน React

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

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

คำอธิบาย:

1. เราใช้ React.lazy() เพื่อนำเข้า MyComponent แบบไดนามิก ฟังก์ชัน import() จะคืนค่า promise ที่จะ resolve เป็นโมดูลของคอมโพเนนต์
2. เราครอบ MyComponent ด้วยคอมโพเนนต์ <Suspense> คอมโพเนนต์ Suspense ช่วยให้คุณสามารถแสดง UI สำรอง (ในกรณีนี้คือ "Loading...") ในขณะที่คอมโพเนนต์กำลังถูกโหลด

การทำ Lazy Loading ใน Angular

Angular รองรับการทำ Lazy Loading กับโมดูลโดยใช้คุณสมบัติ loadChildren ในการกำหนดค่า routing

const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];

คำอธิบาย:

1. เรากำหนด route สำหรับพาธ my-module
2. เราใช้คุณสมบัติ loadChildren เพื่อระบุว่า MyModuleModule ควรถูกโหลดแบบ Lazy ฟังก์ชัน import() จะนำเข้าโมดูลแบบไดนามิก
3. เมธอด then() ถูกใช้เพื่อเข้าถึงโมดูลและคืนค่าคลาส MyModuleModule

การทำ Lazy Loading ใน Vue.js

Vue.js รองรับการทำ Lazy Loading กับคอมโพเนนต์โดยใช้การนำเข้าแบบไดนามิกและแท็ก component

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>

คำอธิบาย:

1. เราใช้แท็ก <component> พร้อมกับแอตทริบิวต์ :is เพื่อเรนเดอร์คอมโพเนนต์แบบไดนามิก
2. ใน mounted lifecycle hook เราใช้ฟังก์ชัน import() เพื่อนำเข้า MyComponent.vue แบบไดนามิก
3. จากนั้นเราตั้งค่า data property dynamicComponent เป็น default export ของโมดูล

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Lazy Loading

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

• ใช้ Native Lazy Loading เมื่อเป็นไปได้: หากกลุ่มเป้าหมายของคุณใช้เบราว์เซอร์ที่ทันสมัย ให้ใช้แอตทริบิวต์ loading แบบเนทีฟสำหรับรูปภาพและ iframes
• เลือกไลบรารีที่เหมาะสม: หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่าหรือต้องการคุณสมบัติเพิ่มเติม ให้เลือกไลบรารี Lazy Loading ที่มีการดูแลรักษาที่ดีและมีขนาดเล็ก
• ใช้ Placeholder: จัดเตรียมรูปภาพหรือองค์ประกอบ UI สำรอง (placeholder) เพื่อป้องกันไม่ให้เนื้อหาขยับในขณะที่ทรัพยากรกำลังโหลด ซึ่งจะช่วยปรับปรุงประสบการณ์ของผู้ใช้และลดความไม่เสถียรของเลย์เอาต์ ใช้รูปภาพ placeholder ที่มีขนาดเล็กมาก (ขนาดต่ำ KB) หรือแม้แต่บล็อกสีทึบที่เข้ากับสีเฉลี่ยของรูปภาพที่จะโหลดในที่สุด
• ปรับปรุงประสิทธิภาพของรูปภาพ: ก่อนที่จะนำ Lazy Loading ไปใช้ ควรปรับปรุงประสิทธิภาพของรูปภาพโดยการบีบอัดและใช้รูปแบบไฟล์ที่เหมาะสม (เช่น WebP, JPEG, PNG)
• ทดสอบอย่างละเอียด: ทดสอบการใช้งาน Lazy Loading ของคุณในเบราว์เซอร์ อุปกรณ์ และสภาพเครือข่ายต่างๆ เพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้อง ให้ความสนใจกับผู้ใช้บนอุปกรณ์ระดับล่าง (มักเป็นโทรศัพท์รุ่นเก่า) เพื่อให้แน่ใจว่ารูปภาพไม่ใช้เวลาโหลดนานเกินไป
• พิจารณาเนื้อหาแรกเห็น (Above the Fold): สำหรับองค์ประกอบที่อยู่เหนือขอบเขตการมองเห็นเริ่มต้น (visible on the initial page load) ควรหลีกเลี่ยงการทำ Lazy Loading องค์ประกอบเหล่านี้ควรถูกโหลดทันที (eagerly) เพื่อให้แน่ใจว่าการเรนเดอร์ครั้งแรกเป็นไปอย่างรวดเร็ว
• จัดลำดับความสำคัญของทรัพยากรที่สำคัญ: ระบุทรัพยากรที่จำเป็นสำหรับประสบการณ์ผู้ใช้เริ่มต้นและโหลดทันที ซึ่งอาจรวมถึงโลโก้ของเว็บไซต์ องค์ประกอบการนำทาง และเนื้อหาหลักของหน้า
• ตรวจสอบประสิทธิภาพ: ใช้เครื่องมือตรวจสอบประสิทธิภาพเพื่อติดตามผลกระทบของ Lazy Loading ต่อประสิทธิภาพของเว็บไซต์ของคุณ ซึ่งจะช่วยให้คุณระบุปัญหาและปรับปรุงการใช้งานของคุณได้ เครื่องมือฟรีที่ยอดเยี่ยมสำหรับการวัดประสิทธิภาพของเว็บไซต์คือ PageSpeed Insights ของ Google และ WebPageTest

ข้อควรพิจารณาด้านความเป็นสากล (Internationalization)

เมื่อนำ Lazy Loading ไปใช้สำหรับผู้ชมทั่วโลก ควรพิจารณาปัจจัยด้านความเป็นสากลเหล่านี้:

• ความเร็วเครือข่ายที่แตกต่างกัน: ผู้ใช้ในภูมิภาคต่างๆ อาจมีความเร็วเครือข่ายที่แตกต่างกันอย่างมาก ควรปรับกลยุทธ์ Lazy Loading ของคุณให้เหมาะกับการเชื่อมต่อที่ช้ากว่า
• ค่าใช้จ่ายด้านข้อมูล: ในบางภูมิภาค ค่าบริการข้อมูลมีราคาสูง Lazy Loading สามารถช่วยลดการใช้ข้อมูลและปรับปรุงประสบการณ์ของผู้ใช้ที่มีแผนข้อมูลจำกัดได้
• ความสามารถของอุปกรณ์: ผู้ใช้ในภูมิภาคต่างๆ อาจใช้อุปกรณ์ที่แตกต่างกันซึ่งมีความสามารถหลากหลาย ควรทดสอบการใช้งาน Lazy Loading ของคุณบนอุปกรณ์หลายประเภทเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้อง
• เครือข่ายการจัดส่งเนื้อหา (CDNs): ใช้ CDN เพื่อส่งมอบเนื้อหาของเว็บไซต์จากเซิร์ฟเวอร์ที่ตั้งอยู่ทั่วโลก ซึ่งจะช่วยปรับปรุงประสิทธิภาพสำหรับผู้ใช้ในภูมิภาคต่างๆ ตัวอย่างเช่น รูปภาพของสถานที่สำคัญในยุโรปควรถูกส่งจาก CDN endpoint ในยุโรปสำหรับผู้ใช้ในสหภาพยุโรป หากเป็นไปได้
• รูปแบบรูปภาพ: พิจารณาใช้รูปแบบรูปภาพสมัยใหม่ เช่น WebP ซึ่งมีการบีบอัดและคุณภาพที่ดีกว่ารูปแบบดั้งเดิมอย่าง JPEG และ PNG อย่างไรก็ตาม โปรดระวังเรื่องความเข้ากันได้ของเบราว์เซอร์ ใช้ fallback ที่เหมาะสมสำหรับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ WebP
• การเข้าถึง (Accessibility): ตรวจสอบให้แน่ใจว่าการใช้งาน Lazy Loading ของคุณสามารถเข้าถึงได้โดยผู้ใช้ที่มีความพิการ จัดเตรียม alt text ที่เหมาะสมสำหรับรูปภาพ และตรวจสอบให้แน่ใจว่าสถานะการโหลดถูกสื่อสารไปยังเทคโนโลยีสิ่งอำนวยความสะดวก

สรุป

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

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