จะดีจริง ๆ เหรอถ้าทำให้รูปภาพ “ขี้เกียจโหลด” … ช่วงไม่กี่ปีที่ผ่านมา การพัฒนาเว็บไซต์ถูกผลักดันอย่างมากด้วย Core Web Vitals และ PageSpeed Insights ของ Google ที่กลายเป็นหนึ่งในปัจจัยที่มีผลต่อการ SEO ในมุมของคนทำเว็บและคนทำ SEO อย่าง Pacy Media จึงต้องหาวิธีที่ทำให้เว็บไซต์โหลดเร็วขึ้น หนึ่งในเทคนิคยอดนิยมคือ Lazy Load หรือที่หลายคนเรียกกันว่า Lazy Loading หรือแปลตรง ๆ ว่าเป็นการทำให้สิ่ง ๆ นั้นมันขี้เกียจโหลดนั่นเอง
การทำให้มันขี้เกียจโหลด หรือ Lazy Load ถูกออกแบบมาเพื่อลดภาระการโหลดของเว็บไซต์ โดยเฉพาะในส่วนของรูปภาพ วิดีโอ และ iframe ทำให้การโหลดหน้าเพจไม่หนักเกินไป ผู้ใช้เปิดเว็บแล้วเห็นคอนเทนต์หลักได้เร็วขึ้น ในขณะที่ข้างหลังของเว็บก็ยังโหลดเฉพาะสิ่งที่จำเป็นตามการใช้งานจริง
Lazy load คืออะไร
Lazy Load คือเทคนิคการโหลดข้อมูลบนเว็บโดยเฉพาะรูปภาพหรือวิดีโอแบบ “เฉพาะเท่าที่จำเป็น” แทนการโหลดทุกอย่างพร้อม ๆ กันตั้งแต่แรก เช่น ถ้าหน้าเพจยาว 5,000px ผู้ใช้เปิดมาเห็นแค่ 800px ด้านบน เว็บก็โหลดเฉพาะสิ่งที่มองเห็นก่อน ส่วนรูปหรือคอนเทนต์ที่อยู่ด้านล่างจะโหลดเมื่อผู้ใช้เลื่อนหน้าจอลงไปเจอ
การทำ Lazy Loading ช่วยลด Initial Load Time, ลด Bandwidth ที่ไม่จำเป็น, และทำให้ First Contentful Paint (FCP) ดีขึ้น ซึ่งเป็นสัญญาณสำคัญของ SEO Performance ที่ Pacy Media ให้ความสำคัญเป็นอย่างมาก
Image Lazy Loading ทำงานยังไง
ใน HTML5 เราสามารถใช้ attribute loading=”lazy” บน ได้เลย เช่น
<img src="pacy.jpg" alt="pacy logo" loading="lazy">จากที่เราลองเช็คดู Browser ส่วนใหญ่รองรับการใช้งานแบบนี้แล้ว ทำให้ Dev ไม่จำเป็นต้องเขียน JavaScript เอง
หรือจะใช้อัปวิดีโอก็ได้ เช่น
<iframe src="short-video.html" loading="lazy"></iframe>Lazy Loading ส่งผลต่อ SEO มากน้อยแค่ไหน
ข้อมูลจาก Google พบว่า Lazy Loading ไม่ทำให้ Indexing เสียหาย ถ้าเอาไปใช้อย่างถูกวิธี และยังช่วยเพิ่มคะแนน Page Experience ด้วย
สาเหตุที่การทำ Lazy Load ช่วยสนับสนุนให้การทำ SEO ดีขึ้น
- ลด Largest Contentful Paint (LCP) ปัจจัยหลักด้าน Core Web Vital
- ช่วยให้ผู้ใช้ไม่ต้องรอโหลดนาน
- ลด Bounce Rate เมื่อหน้าเว็บโหลดเร็วขึ้น
- เพิ่ม Engagement Rate
สิ่งสำคัญคือ ควรใช้ ALT Text บนรูปภาพให้ครบถ้วน เพื่อให้ Google เข้าใจ Context ของรูป และอย่าลืมใส่ Meta Tag ที่เหมาะสมในแต่ละหน้า เพราะ Google ยังอ้างอิงข้อมูลเหล่านี้เพื่อทำความเข้าใจเนื้อหาในหน้าเว็บนั้น ๆ
แชร์เคสการใช้ Lazy Load รูปภาพเพิ่มประสิทธิภาพ SEO
เราได้มีโอกาสทำเว็บ E-Commerce ที่มีสินค้าเกือบ 500 รายการ แต่ละหน้ามีรูปภาพสินค้าหลายภาพ ทั้งด้านบน และด้านล่างในส่วนของ Product Description ทำให้เว็บโหลดช้ามาก PageSpeed บน Mobile ได้ไม่ถึง 20 คะแนน
จากที่เราได้วิเคราะห์ Audit เว็บดูก็พบว่าวิธีการทำ Image Lazy Loading บวกกับการใช้ WebP และ CDN จะช่วยเพิ่มความเร็วในการโหลดได้ แต่อาจจะต้องเข้าไปแก้โค้ดหลังบ้านซึ่งก็เป็นสิ่งที่ทางเราก็สามารถดำเนินการได้
หลังจากได้ลองปรับไปตามแผนพบว่า PageSpeed กระโดดขึ้นมาเกิน 60+ และตัวเลขอื่น ๆ ด้านการโหลดก็ดีขึ้น ที่สำคัญยังทำให้กลยุทธ์ SEO และ Keyword ที่เราวางแผนไว้สามารถทำอันดับได้ดีขึ้น มี Traffic เข้ามามากขึ้น มี Organic Page เพิ่มขึ้น
หากเว็บไซต์ของคุณติดปัญหาเรื่อง Lazy Load ไม่ว่าจะทำเว็บไซต์จาก WordPress หรือแพลตฟอร์มไหนก็แล้วแต่ ก็สามารถปรึกษาเอเจนซี่การตลาดออนไลน์ที่มีบริการครบวงจรอย่าง Pacy Media เพื่อให้เราช่วยนำเสนอวิธีการทำแบบ Best Practice ให้ได้เลย!
แชร์ความรู้นี้บน Social Media
