วิธีตั้งค่า Lazy Load รูปภาพใน WordPress ให้เว็บโหลดเร็วขึ้น

Lazy Load คืออะไร และทำไมต้องสนใจ?

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

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

• หน้าเว็บโหลดเร็วขึ้นอย่างเห็นได้ชัด โดยเฉพาะหน้าที่มีรูปเยอะ
• ประหยัด bandwidth ของ Hosting ลดได้มากถึง 40–60%
• คะแนน Google PageSpeed / Core Web Vitals ดีขึ้น
• ลดการใช้ทรัพยากรเซิร์ฟเวอร์ในชั่วโมงเร่งด่วน

WordPress มี Lazy Load ในตัว — ใช้งานอย่างไร?

ตั้งแต่ WordPress 5.5 เป็นต้นมา WordPress เพิ่มคุณสมบัติ Lazy Load สำหรับรูปภาพไว้ในตัวแล้ว โดยเพิ่ม attribute loading="lazy" ให้กับแท็ก <img> อัตโนมัติ

ไม่ต้องติดตั้ง plugin เพิ่มเติม แค่ตรวจสอบว่าคุณใช้ WordPress 5.5 ขึ้นไป:

1. เข้า WordPress Admin Panel
2. ไปที่ Dashboard → Updates
3. ตรวจสอบว่าใช้ WordPress 5.5 หรือสูงกว่า
4. ถ้าไม่ใช่ ให้กด "Update Now" เพื่ออัปเดต

WordPress จะใส่ loading="lazy" ให้กับรูปภาพที่แทรกผ่าน Block Editor (Gutenberg) และ Media Library โดยอัตโนมัติ

วิธีเปิด Lazy Load ด้วย Plugin (แนะนำสำหรับมือใหม่)

ถ้าต้องการ Lazy Load ที่ครอบคลุมมากกว่า เช่น รูปใน CSS background, iframe YouTube หรือรูปจาก theme ให้ใช้ plugin ดังนี้:

Plugin 1: a3 Lazy Load (ฟรี ใช้งานง่าย)

1. ไปที่ Plugins → Add New
2. ค้นหา "a3 Lazy Load"
3. กด Install Now แล้ว Activate
4. ไปที่ Settings → a3 Lazy Load
5. เปิด Enable Lazy Load for Images
6. เปิด Enable Lazy Load for iframes & Videos (ถ้าต้องการ)
7. กด Save Changes

Plugin 2: Smush (ฟรี + บีบอัดรูปด้วย)

1. ไปที่ Plugins → Add New
2. ค้นหา "Smush"
3. กด Install Now แล้ว Activate
4. ตั้งค่าผ่าน Setup Wizard ที่ปรากฏขึ้น
5. ไปที่ Smush → Lazy Load
6. เปิดสวิตช์ Enable Lazy Load
7. เลือก Spinner หรือ Fade In สำหรับ effect การโหลด
8. กด Save Changes

ตั้งค่า Lazy Load ผ่าน WP Rocket (สำหรับผู้ใช้ Cache Plugin)

ถ้าคุณใช้ WP Rocket อยู่แล้ว ไม่ต้องติดตั้ง plugin เพิ่ม เพราะ WP Rocket มี Lazy Load รวมอยู่ด้วย:

1. ไปที่ Settings → WP Rocket
2. คลิกแท็บ "Media"
3. เปิด "Enable for images" ใต้หัวข้อ LazyLoad
4. เปิด "Enable for iframes and videos" (ถ้าต้องการ)
5. เปิด "Replace YouTube iframe with preview image" เพื่อประหยัด bandwidth มากขึ้น
6. กด Save Changes

เพิ่ม Lazy Load ให้รูป CSS Background (สำหรับผู้กล้า)

รูปภาพที่ใช้เป็น CSS background เช่น background-image: url(...) ใน theme จะไม่ถูก Lazy Load อัตโนมัติ แต่เราสามารถเพิ่มโค้ดต่อไปนี้ใน functions.php ของ Child Theme เพื่อช่วยจัดการได้:

// เพิ่มใน functions.php ของ Child Theme
add_filter('the_content', 'add_lazy_load_to_images');
function add_lazy_load_to_images($content) {
    // เพิ่ม loading="lazy" ให้รูปที่ยังไม่มี
    $content = preg_replace(
        '/<img((?!.*loading=)[^>]*)>/i',
        '<img loading="lazy"$1>',
        $content
    );
    return $content;
}

ตรวจสอบว่า Lazy Load ทำงานถูกต้อง

หลังตั้งค่าแล้ว ให้ตรวจสอบด้วยขั้นตอนเหล่านี้:

# 1. ดู source code ของหน้าเว็บ (Ctrl+U ใน Chrome)
#    ค้นหาคำว่า loading="lazy" ในแท็ก <img>

# 2. เปิด DevTools (F12) → Network tab
#    รีเฟรชหน้า แล้วกรอง "img"
#    รูปที่อยู่นอกหน้าจอจะไม่ถูกโหลดทันที

# 3. ทดสอบด้วย Google PageSpeed Insights
#    https://pagespeed.web.dev/
#    ดูคะแนน "Defer offscreen images"

# 4. ตรวจสอบ Network ด้วย curl
curl -s https://yoursite.com/your-page/ | grep -o 'loading="lazy"' | wc -l
# ควรแสดงจำนวนรูปที่มี loading="lazy"

# 5. ตรวจสอบด้วย Chrome Lighthouse
#    F12 → Lighthouse → Generate report
#    ดูหัวข้อ "Defer offscreen images"

แก้ปัญหาที่พบบ่อย

Error: "รูปภาพไม่แสดงหรือโหลดช้ามาก"

สาเหตุมักเกิดจาก Lazy Load threshold (ระยะห่าง) ตั้งต่ำเกินไป ทำให้รูปโหลดช้ากว่าที่ผู้ใช้เลื่อนลงมา แก้ไขโดยเพิ่ม threshold ใน plugin settings เป็น 200–400px หรือใน a3 Lazy Load ให้เพิ่มค่า "Threshold" เป็น 300

Error: "รูป Featured Image ไม่ Lazy Load"

Featured Image ที่แสดงในตำแหน่งแรกของหน้าไม่ควร Lazy Load เพราะ Google แนะนำให้รูป Above the Fold โหลดเร็วที่สุด ให้ตั้งค่า Exclude first image ใน plugin หรือเพิ่ม loading="eager" ให้กับ featured image ใน theme

Error: "Lazy Load ทำงานแต่คะแนน PageSpeed ไม่ขึ้น"

อาจมีสาเหตุอื่นที่ฉุดคะแนน เช่น ไฟล์รูปขนาดใหญ่เกิน ไม่มี WebP format หรือ CSS ขนาดใหญ่ ให้ใช้ Smush หรือ ShortPixel บีบอัดรูปเพิ่มเติม และตรวจสอบ Core Web Vitals อื่น ๆ ด้วย

Error: "รูปใน Slider/Carousel ไม่ Lazy Load"

Slider หลายตัว เช่น Slider Revolution หรือ MetaSlider จัดการรูปเองด้วย JavaScript ทำให้ Lazy Load plugin ทั่วไปอาจไม่ทำงาน ให้เปิดการตั้งค่า Lazy Load ภายใน slider plugin นั้นโดยตรงแทน

Error: "ปิด Lazy Load แล้วแต่ยังทำงานอยู่"

WordPress 5.5+ เพิ่ม loading="lazy" โดย default ต้องเพิ่ม filter นี้ใน functions.php ของ Child Theme เพื่อปิด: add_filter('wp_lazy_loading_enabled', '__return_false');

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

Q: Lazy Load กระทบ SEO ไหม?

A: ไม่กระทบ Google Bot ทันสมัยพอที่จะ render JavaScript และเห็นรูปที่ใช้ Lazy Load ได้ อีกทั้งการที่เว็บโหลดเร็วขึ้นยังส่งผลดีต่อ SEO ด้วย แต่ควรหลีกเลี่ยง Lazy Load สำหรับรูปที่อยู่ในส่วน Above the Fold (ส่วนบนสุดที่เห็นก่อนเลื่อน) เพื่อให้ LCP (Largest Contentful Paint) ดีที่สุด

Q: ควรใช้ Lazy Load Built-in ของ WordPress หรือ Plugin?

A: สำหรับเว็บทั่วไปที่รูปอยู่ในเนื้อหา built-in ก็เพียงพอ แต่ถ้าเว็บมีรูปใน CSS background, gallery plugin หรือ slider ควรใช้ plugin เช่น a3 Lazy Load หรือ Smush เพิ่มเติมเพื่อให้ครอบคลุมทุกกรณี

Q: Lazy Load ช่วยประหยัด Bandwidth ได้มากแค่ไหน?

A: ขึ้นอยู่กับพฤติกรรมผู้ใช้ โดยเฉลี่ยผู้เข้าชมเว็บอ่านเนื้อหาได้ประมาณ 60–70% ของหน้า ดังนั้น Lazy Load จะช่วยประหยัด bandwidth จากรูปที่ไม่ถูกมองได้ประมาณ 30–40% ทำให้ค่า hosting และค่า CDN ลดลงตามไปด้วย