จะติดตั้ง Lazy Loading สำหรับรูปภาพและ iFrame อย่างไรให้ไม่กระทบต่อ SEO?
วิธีที่ปลอดภัยที่สุดคือการใช้ Native HTML Attribute `loading="lazy"` วิธีนี้ช่วยให้เบราว์เซอร์จัดการการโหลดข้อมูลที่ล่าช้าได้อย่างเหมาะสม โดยที่ Search Engine อย่าง Googlebot ยังคงสามารถเห็น URL ของรูปภาพและจัดเก็บดัชนี (Index) ได้อย่างถูกต้อง ควรหลีกเลี่ยงการใช้ JavaScript Lazy Loading ที่ซับซ้อนเกินไปซึ่งอาจบดบังเนื้อหาจาก Crawler
Lazy Loading คือเทคนิคการเพิ่มประสิทธิภาพเว็บที่ช่วยชะลอการโหลดทรัพยากรที่ไม่จำเป็นเร่งด่วน (เช่น รูปภาพหรือ iFrame) จนกว่าจะถึงเวลาที่ต้องใช้จริง โดยปกติคือเมื่อผู้ใช้เลื่อนหน้าจอมาถึงจุดนั้น วิธีนี้ช่วยให้หน้าเว็บโหลดเริ่มต้นได้เร็วขึ้นมากและประหยัดข้อมูลอินเทอร์เน็ต ในมุม SEO สิ่งที่ต้องระวังคือ Search Engine จะยังค้นหาและจัดเก็บเนื้อหาที่ 'Lazy' นั้นได้หรือไม่ ในอดีตการใช้ JavaScript ทำ Lazy Loading มักจะซ่อน URL จาก Bot แต่ปัจจุบันแนวทางปฏิบัติที่ดีที่สุดคือการใช้ 'Native Lazy Loading' โดยการเพิ่ม Attribute `loading="lazy"` ในแท็ก `<img>` และ `<iframe>` ซึ่งเบราว์เซอร์สมัยใหม่รองรับและเป็นมิตรกับ SEO 100% เพราะ Googlebot ยังคงมองเห็น Attribute `src` ได้ตามปกติ หากจำเป็นต้องใช้ Library ของ JavaScript เพื่อรองรับเบราว์เซอร์รุ่นเก่า ต้องมั่นใจว่าใช้ Intersection Observer API และมี `<noscript>` เป็นแผนสำรอง และที่สำคัญที่สุดคือ **ห้าม** ทำ Lazy Loading กับรูปภาพที่อยู่ 'Above the fold' (ส่วนที่เห็นทันทีเมื่อเข้าเว็บ) เช่น โลโก้ หรือ Hero Image เพราะจะส่งผลเสียต่อคะแนน Largest Contentful Paint (LCP) ของคุณ
คู่มือแบบ Step-by-Step
ระบุเนื้อหาที่อยู่ต่ำกว่าขอบหน้าจอ
คัดเลือกรูปภาพและ iFrame ที่ไม่ได้แสดงผลทันทีในตอนที่หน้าเว็บเริ่มโหลด
เพิ่ม Attribute การโหลด
ใส่ `loading="lazy"` ลงใน HTML Tags ของรูปภาพและ iFrame ทั้งหมดที่อยู่ต่ำกว่าขอบหน้าจอ
ยกเว้น Hero Media
ตรวจสอบให้แน่ใจว่ารูปภาพหลัก (Hero Image) และเนื้อหาด้านบนสุดของหน้าต้อง 'ไม่' ถูกทำ Lazy Loading
กำหนดขนาดรูปภาพ
ใส่ Attribute ความกว้าง (Width) และความสูง (Height) เสมอ เพื่อป้องกันปัญหา Layout Shift ขณะที่รูปภาพค่อยๆ โหลดขึ้นมา
ทดสอบการจัดทำดัชนี
ใช้เครื่องมือ GSC URL Inspection เพื่อยืนยันว่า Google ยังคง 'มองเห็น' รูปภาพที่ทำ Lazy Loading ของคุณอยู่
Pro Tips
- ใช้ Lazy Loading ร่วมกับ Attribute 'decoding="async"' เพื่อประสิทธิภาพที่ดียิ่งขึ้น
- ใช้รูปภาพตัวอย่างคุณภาพต่ำ (LQIP) หรือบล็อกสีพื้นฐานเพื่อสร้างประสบการณ์ที่ดีระหว่างรอโหลด
- ทดสอบการทำ Lazy Loading บนมือถือเป็นพิเศษ เนื่องจาก 'รอยพับ' ของหน้าจอมือถือจะสูงกว่าบนคอมพิวเตอร์
- ตรวจสอบว่า Lazy Loading ไม่ไปรบกวนการแสดงผลในหน้า Print Stylesheets
pSeoMatic ช่วยคุณได้อย่างไร
ระบบตรวจสอบของ pSeoMatic จะช่วยเช็คการติดตั้ง Lazy Loading ทั่วทั้งไซต์ของคุณ เราจะช่วยระบุ 'LCP Images' ที่ถูกตั้งค่า Lazy Loading ผิดพลาด (ซึ่งทำให้คะแนนความเร็วของคุณแย่ลง) และค้นหาไฟล์สื่อขนาดใหญ่ด้านล่างหน้าเว็บที่ยังไม่ได้ทำ Lazy Loading เพื่อให้มั่นใจว่าเว็บของคุณทั้งเร็วและ Google เก็บข้อมูลได้ครบถ้วน
ลองใช้ pSeoMatic ฟรีคำถามที่เกี่ยวข้อง
Google สามารถเก็บ Index รูปภาพที่เป็น Lazy Loading ได้ไหม?
ได้ครับ หากคุณใช้ Native `loading="lazy"` หรือวิธี JavaScript ที่เป็นมิตรกับ SEO Googlebot จะสามารถเก็บข้อมูลได้ปกติ
Lazy Loading ช่วยเพิ่มคะแนน PageSpeed ได้จริงไหม?
ช่วยได้มากครับ เพราะมันช่วยลดน้ำหนักของหน้าเว็บในตอนเริ่มต้น และทำให้เว็บพร้อมตอบสนองผู้ใช้ (TTI) ได้เร็วขึ้น
ควรทำ Lazy Loading ที่โลโก้ไหม?
ไม่แนะนำครับ เพราะโลโก้มักจะอยู่ส่วนบนสุดของหน้าเว็บและควรแสดงผลให้เร็วที่สุด
คู่มือที่เกี่ยวข้อง
พร้อมที่จะลงมือทำแล้วหรือยัง?
pSeoMatic สร้างหน้าเว็บที่ปรับแต่ง SEO นับพันจากข้อมูลของคุณ