เว็บไซต์

Lazy Load คืออะไร? เทคนิคโหลดภาพและวิดีโอแบบประหยัดทรัพยากรสำหรับเว็บไซต์ไทย

  • 25 ใช้เวลาอ่านไม่กี่นาที
Lazy Load คืออะไร? เทคนิคโหลดภาพและวิดีโอแบบประหยัดทรัพยากรสำหรับเว็บไซต์ไทย

Lazy Load หรือ "โหลดแบบขี้เกียจ" คือเทคนิคการปรับปรุงความเร็วเว็บไซต์โดยเน้นให้สื่อหนักๆ อย่างภาพ วิดีโอ iframe หรือ widget ต่างๆ ถูกโหลดเฉพาะเมื่อผู้ใช้งานเลื่อนมาถึงจุดนั้น แทนที่จะโหลดทุกอย่างพร้อมกันตั้งแต่เปิดหน้าแรก ผลลัพธ์คือข้อมูลที่ดาวน์โหลดในครั้งแรกลดลง หน้าตาเว็บไซต์ปรากฏเร็วขึ้น ลดการใช้ทรัพยากรเซิร์ฟเวอร์และแบนด์วิดธ์ และเมื่อใช้ถูกวิธีจะช่วยทั้ง SEO, ประสบการณ์ผู้ใช้ และคะแนน Core Web Vitals ได้อย่างชัดเจน

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

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

Lazy Load คืออะไร?

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

ตัวอย่างเช่น บล็อก 2500 คำที่มีภาพ infographic อยู่ท้ายสุด หากภาพนี้ขนาด 600 KB ไม่ควรโหลดพร้อมกับหน้าแรก Lazy Load จะช่วยลดข้อมูลที่โหลดไป 600 KB ทันที แนวคิดนี้ใช้ได้กับ iframe วิดีโอ, Google Maps, Gallery สินค้า และคอมเมนต์ plugin ด้วย

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

Lazy Load ทำงานอย่างไร?

หลักการของ Lazy Load คือ เมื่อหน้าเว็บโหลด เบราว์เซอร์หรือ JavaScript จะตรวจสอบว่ามีอะไรในหน้าจอที่ควรโหลดทันทีบ้าง ส่วนที่อยู่ข้างล่างจะยังไม่โหลด เมื่อผู้ใช้เลื่อนถึงจุดนั้น ค่อยดึงไฟล์มาแสดง

ปัจจุบันมี 2 วิธีหลัก คือ การใช้ Native Lazy Load (รองรับโดยเบราว์เซอร์) กับการใช้ JavaScript โดย HTML สามารถกำหนด loading=lazy ใน tag ภาพ ส่วน JavaScript นิยมใช้ Intersection Observer API เพื่อจับว่าผู้ใช้เลื่อนถึงจุดไหนแล้ว

วิธี Native Lazy Load

Native Lazy Load เป็นวิธีที่เรียบง่ายและดูแลน้อย เบราว์เซอร์รุ่นใหม่รองรับ loading=lazy สำหรับ img และ iframe โดยไม่ต้องเพิ่ม library หรือ script เหมาะสำหรับเว็บบล็อก เว็บบริษัท หรือหน้าเอกสารที่เน้นเนื้อหา

แต่หากเว็บไซต์มี animation, background image, gallery ที่ซับซ้อน หรือ video player แบบ custom อาจต้องใช้ JavaScript ควบคุมเพื่อความยืดหยุ่น จุดสำคัญคือเลือกใช้ใหสมดุลระหว่างความง่ายกับการควบคุม

Lazy Load ด้วย JavaScript

JavaScript Lazy Load เหมาะกับเว็บดีไซน์พิเศษหรือ component ซับซ้อน เช่น โหลดภาพก่อนถึงจุด 300px, แสดงภาพ preview ก่อนแล้วค่อยโหลดภาพจริง หรือสร้าง player วิดีโอเมื่อผู้ใช้คลิกเท่านั้น

วิธีนี้มีพลังแต่ต้องระวัง ถ้าโหลด script ขนาดใหญ่เกินไป (เช่น เพิ่ม 80 KB เพื่อประหยัด 20 KB) อาจทำให้เว็บช้าลงแทนที่จะเร็วขึ้น ดังนั้นควรตรวจสอบทั้งขนาดภาพและเวลารันของ JavaScript ด้วย

Lazy Load ใช้กับอะไรบ้าง?

Lazy Load ไม่ได้จำกัดแค่ภาพ img tag แต่ใช้กับหลายองค์ประกอบที่ไม่จำเป็นต้องโหลดตั้งแต่แรก ดังนี้:

  • ภาพและ infographic ในบล็อก
  • ภาพ Gallery สินค้าในหน้ารายละเอียด
  • วิดีโอ YouTube, Vimeo หรือ iframe ที่ฝังเอง
  • Google Maps และแผนที่ฝัง
  • โพสต์หรือ widget โซเชียลมีเดีย
  • คอมเมนต์ plugin หรือ third-party widget
  • ภาพพื้นหลังและ slider

ขอเน้นว่า ภาพหรือเนื้อหาสำคัญที่อยู่ในหน้าจอแรก (เช่น logo, hero image, หัวเรื่องหลัก) ไม่ควรใช้ Lazy Load เพราะจะทำให้ Largest Contentful Paint (LCP) ช้าลงและกระทบคะแนนเว็บ

การใช้ Lazy Load กับภาพ

Lazy Load สำหรับภาพคือวิธีปรับปรุงความเร็วเว็บที่เห็นผลชัดเจน เพราะภาพมักเป็นภาระหลักในเว็บทั่วไป แม้แต่เว็บขนาดกลาง หากไม่ optimize อาจมีภาพรวม 3 MB อยู่ในหน้าเดียว

แต่การ optimize ภาพควรดูหลายด้าน ไม่ใช่แค่ Lazy Load เช่น ขนาดไฟล์, format, ขนาดภาพที่แสดงจริง, compression, caching และ CDN ตัวอย่างเช่น ภาพ 2400px แต่แสดงบนมือถือ 360px ถือว่าใช้ทรัพยากรเกินจำเป็น Lazy Load แค่ช่วยเลื่อนเวลาการโหลด ไม่ได้แก้ปัญหาขนาดไฟล์

ขั้นตอนการใช้ Lazy Load กับภาพ

  • ภาพสำคัญหน้าจอแรก (เช่น hero) ห้ามใช้ Lazy Load
  • ภาพท้ายๆ ในบล็อกหรือหน้าใช้ loading=lazy
  • กำหนด width/height ของภาพเพื่อลด page shift
  • ใช้ format ใหม่อย่าง WebP/AVIF และมี fallback
  • เตรียมภาพ responsive แยกสำหรับมือถือ/เดสก์ท็อป
  • ส่งภาพผ่าน CDN ลด latency
  • ตั้ง caching ที่เหมาะสม

ตัวอย่าง: หน้า Category สินค้ามีภาพ 24 รูป รูปละ 120 KB ถ้าโหลดพร้อมกันคือ 2.88 MB แต่ถ้าหน้าจอแรกเห็นแค่ 6 รูป จะโหลดแค่ 720 KB ที่เหลือโหลดเมื่อเลื่อนลงมา ลดภาระ 2.16 MB ทันที ซึ่งสำคัญมากสำหรับผู้ใช้ 4G

ข้อผิดพลาดที่พบบ่อย

ปัญหาหลักคือใช้ Lazy Load กับภาพทุกภาพโดยไม่แยกประเภท เช่น ภาพ hero หรือภาพใหญ่สุดในหน้าแรก ถ้าใช้ Lazy Load จะทำให้ LCP ช้า อีกปัญหาคือไม่กำหนด width/height ทำให้หน้าเว็บกระโดด (Cumulative Layout Shift) สุดท้ายคือไม่ใส่ alt text ซึ่งสำคัญทั้ง accessibility และ SEO

alt text ควรอธิบายภาพ ไม่ใช่ใส่ keyword ซ้ำๆ เช่น "กราฟเปรียบเทียบความเร็วหลังใช้ Lazy Load" จะช่วยทั้ง Google และผู้ใช้ที่ใช้ screen reader

การใช้ Lazy Load กับวิดีโอ

วิดีโอหนักกว่าภาพมาก โดยเฉพาะ iframe YouTube/Vimeo ไม่ใช่แค่ไฟล์วิดีโอ แต่ยังรวม player script, tracking และ resource อื่นๆ หากฝังวิดีโอ 3 ตัวในหน้าเดียว แม้ผู้ใช้จะไม่ดูเลย ก็ยังโหลด resource third-party จำนวนมาก

วิธีที่ดีที่สุดคือแสดงภาพปกวิดีโอแทน iframe ก่อน เมื่อผู้ใช้คลิก play ค่อยสร้าง iframe และโหลดวิดีโอ วิธีนี้เหมาะกับคอร์ส, หน้าสินค้า และบล็อกที่มีวิดีโอฝัง

แนวทางปฏิบัติ Lazy Load วิดีโอ

  • แสดงภาพปกแทนวิดีโอทันที
  • ใช้ภาพปกแบบ WebP ที่ขนาดเหมาะสม
  • สร้าง iframe เมื่อผู้ใช้คลิกเท่านั้น
  • ถ้ามีหลายวิดีโอ โหลดเฉพาะที่ใกล้จะปรากฏ
  • ถ้ามี autoplay ควรคำนึงถึง mobile data และ UX
  • กำหนด aspect ratio หรือขนาดวิดีโอให้คงที่

ตัวอย่าง: หน้าเรียนออนไลน์มีวิดีโอ 5 ตัว iframe ละ 500 KB ถ้าโหลดพร้อมกันคือ 2.5 MB หากใช้ภาพปกขนาด 40 KB แทน จะโหลดแค่ 200 KB เมื่อผู้ใช้คลิกค่อยโหลดวิดีโอจริง

Lazy Load กับ SEO

Lazy Load ไม่ได้เพิ่มอันดับ SEO โดยตรง แต่ส่งผลทางอ้อมผ่านความเร็ว, UX, การ crawl ของ bot และ Core Web Vitals Google ให้คะแนนเว็บที่โหลดเร็วและใช้งานลื่น ดังนั้น Lazy Load เป็นส่วนหนึ่งของเทคนิค SEO

จุดสำคัญคือ bot ต้องเห็นเนื้อหาที่ Lazy Load ได้ หากภาพหรือเนื้อหาสำคัญโหลดผ่าน JavaScript ที่ซับซ้อนเกินไป อาจถูก crawl ไม่ครบ ดังนั้นเนื้อหาหลักควรอยู่ใน HTML ส่วน Lazy Load ควรแค่จัดการเวลาการโหลด

SEO สำหรับภาพควรดูชื่อไฟล์, alt text, context, structured data และ sitemap หากมีคลังภาพใหญ่ควรใช้ image sitemap เพื่อให้ bot หาเจอได้ง่าย สำหรับ SEO ด้านเทคนิคควรใช้ SSL (ใบรับรอง SSL) เพื่อความปลอดภัยและ compatibility

ผลกระทบต่อ Core Web Vitals

Lazy Load ถ้าใช้ถูกจะช่วยคะแนน Core Web Vitals แต่ถ้าใช้ผิดจะทำให้แย่ลง ดังนั้นต้องวัดผลแต่ละหน้า เครื่องมือที่ใช้ได้คือ Google PageSpeed Insights, Lighthouse, Chrome DevTools และข้อมูลจริงจากผู้ใช้

ผลกระทบต่อ Core Web Vitals
Metric ผลของ Lazy Load สิ่งที่ต้องระวัง
LCP ลด resource ที่ไม่จำเป็น ทำให้ดีขึ้น ถ้า hero image ใช้ Lazy Load จะทำให้ LCP ช้า
CLS ถ้าจองพื้นที่ไว้ หน้าไม่กระโดด ถ้าไม่มี width/height หรือ aspect ratio หน้าอาจกระโดด
INP โหลดน้อยลง ทำให้ UX ดีขึ้น Script Lazy Load ใหญ่เกินไปทำให้ interaction ช้า
TTFB ผลกระทบโดยตรงน้อย ถ้า server ช้า Lazy Load ก็ช่วยไม่พอ

ข้อสำคัญสำหรับ LCP: ภาพใหญ่ในหน้าจอแรกไม่ควรใช้ Lazy Load ควรใช้ preload, fetch priority หรือ caching ที่เหมาะสม ส่วนเนื้อหาข้างล่างเหมาะกับ Lazy Load

เปรียบเทียบ Lazy Load, Eager Load และ Preload

การ optimize performance ต้องจัดการ resource ให้เหมาะสม บางอย่างควรโหลดทันที บางอย่างควรเลื่อนเวลา หรือบางอย่างต้องเตรียมล่วงหน้า ตารางนี้สรุปแนวทาง

เปรียบเทียบ Lazy Load, Eager Load และ Preload
วิธี ใช้เมื่อไหร่ ข้อดี ความเสี่ยง
Lazy Load ภาพ/วิดีโอ/iframe ที่ไม่อยู่ในหน้าจอแรก ลดข้อมูลที่โหลด ประหยัด data ถ้าใช้กับเนื้อหาสำคัญจะช้า
Eager Load logo, hero image, UI สำคัญ เนื้อหาสำคัญโหลดทันที ถ้าใช้กับทุกอย่างเว็บจะหนัก
Preload font, LCP image, CSS สำคัญ ส่งสัญญาณ prioritized ให้ browser ถ้าเลือก resource ผิดจะเสียแบนด์วิดธ์

สรุป: ถ้าเนื้อหาอยู่ในหน้าจอแรกใช้ eager load หรือ preload ถ้าไม่อยู่ใช้ Lazy Load แต่ควรทดสอบก่อนเปลี่ยนจริง โดยเฉพาะในหน้า home, product detail, campaign ที่สำคัญต่อรายได้

การใช้ Lazy Load ใน WordPress

WordPress เวอร์ชันใหม่รองรับ Lazy Load สำหรับภาพโดย default คุณอาจไม่ต้องติดตั้ง plugin เพิ่ม แต่ผลลัพธ์ขึ้นกับ theme, page builder และ plugin ที่ใช้ โดยเฉพาะ slider, gallery, portfolio และ product listing ควรตรวจสอบให้ละเอียด

แนวทางที่ดีคือ วัด performance ก่อน, ตรวจสอบ Lazy Load ของ theme, ถ้าจำเป็นค่อยติดตั้ง plugin เพื่อปรับภาพ, แปลง WebP, CDN หรือ critical CSS หลีกเลี่ยงการใช้ plugin ซ้ำซ้อน เพราะอาจเกิด double Lazy Load หรือ JavaScript conflict

สำหรับ WooCommerce ควรให้ภาพ product card ในหน้าจอแรกโหลดเร็ว ส่วน product ข้างล่างใช้ Lazy Load ผู้ใช้ต้องไม่สะดุดเมื่อใส่สินค้าในตะกร้า ในเว็บ e-commerce performance ส่งผลตรงต่อ conversion ดังนั้นควรใช้ server ที่ดี เช่น โฮสติ้ง WordPress หรือ เซิร์ฟเวอร์ VPS ในเว็บที่มี traffic สูง

เช็คลิสต์สำหรับเว็บเขียนเอง (Custom Software)

สำหรับ Laravel, Node.js, React, Vue, Next.js หรือ PHP framework การจัดการ Lazy Load จะยืดหยุ่นกว่า แต่ framework ไม่ใช่ตัวรับประกัน performance ต้องดูการ render, server-side rendering, hydration, CDN และการจัดการภาพร่วมกัน

เช็คลิสต์ทีละขั้นตอน

  • ลิสต์ภาพ, วิดีโอ, iframe ทั้งหมดในหน้า
  • ระบุเนื้อหาสำคัญในหน้าจอแรก
  • ไม่ใช้ Lazy Load กับเนื้อหาสำคัญ
  • ภาพข้างล่างใช้ native Lazy Load
  • background image ใช้ JavaScript หรือ CSS class ในการโหลด
  • วิดีโอใช้ภาพปกและโหลดเมื่อคลิก
  • กำหนด aspect ratio และขนาดภาพ
  • ทดสอบด้วย Lighthouse และอุปกรณ์จริง
  • เปรียบเทียบขนาดโหลดครั้งแรกบน mobile
  • ตรวจสอบว่า bot render เนื้อหาได้

จากประสบการณ์ เว็บเนื้อหาควรโหลดครั้งแรกไม่เกิน 1-1.5 MB หากเกิน 5 MB จะเสี่ยงสำหรับผู้ใช้มือถือ Lazy Load จึงเป็นเครื่องมือสำคัญในการควบคุมภาระ

โฮสติ้งมีผลต่อ Lazy Load อย่างไร?

แม้ Lazy Load ทำงานฝั่ง client แต่ performance ขึ้นกับโฮสติ้งโดยตรง ถ้า server ช้า ภาพหรือวิดีโอที่ Lazy Load ก็ยังโหลดช้าเมื่อเลื่อนถึงจุดนั้น โดยเฉพาะเว็บ portfolio, ข่าว, อสังหา และ e-commerce ที่มีภาพเยอะ

โฮสติ้งที่ดีควรมี TTFB ต่ำ, disk เร็ว, PHP หรือ runtime อัปเดต, รองรับ HTTP/2 หรือ HTTP/3, compression และ uptime สูง ในขณะที่ Lazy Load ลดข้อมูล initial load ฝั่ง server ต้องมี caching และ CDN เพื่อส่ง resource ที่เหลือได้รวดเร็ว ดังนั้น performance ไม่ใช่แค่เรื่อง theme หรือ plugin แต่ต้องทำงานร่วมกันทั้ง infrastructure, software และ content

บน Hostragons ควรเลือก package ที่เหมาะ, ตั้งค่า SSL, caching, image optimization และ Lazy Load พร้อมกัน การตั้งเว็บใหม่ควรดู ซื้อโฮสติ้ง, เชื่อมต่อปลอดภัยที่ ใบรับรอง SSL และบริหารโดเมน การโอนโดเมน

ข้อควรหลีกเลี่ยงเมื่อใช้ Lazy Load

การใช้ Lazy Load ผิดวิธีจะทำให้ UX แย่ ไม่ใช่ดีขึ้น เช่น ถ้า delay ภาพหรือวิดีโอมากเกินไป ผู้ใช้เลื่อนหน้าจะเจอแต่พื้นที่ว่าง ไม่เห็นเนื้อหาทันที ส่งผลให้เว็บดูเหมือนเร็วแต่ใช้งานจริงช้า

  • ห้ามใช้ Lazy Load กับภาพสำคัญหน้าจอแรก
  • อย่าใช้ Lazy Load โดยไม่จองพื้นที่ภาพ
  • อย่าเอาเนื้อหาสำคัญไปซ่อนใน JavaScript
  • อย่าติดตั้ง plugin Lazy Load หลายตัวพร้อมกัน
  • อย่าใช้ placeholder ที่คุณภาพต่ำเกินไปจนเสีย brand
  • อย่าทดสอบแต่ desktop ต้องลอง mobile ด้วย
  • อย่ามองข้าม third-party script เช่น วิดีโอหรือโซเชียล ที่สร้างภาระมาก

เว็บไซต์ข่าวหรือบล็อกที่ใช้ infinite scroll กับ Lazy Load ควรตรวจสอบว่าเมื่อผู้ใช้กด back จะกลับไปที่เดิมได้ ไม่ใช่โหลดเนื้อหาผิดพลาด รายละเอียดเหล่านี้มีผลต่อความพึงพอใจของผู้ใช้จริง

วัดผล Lazy Load อย่างไร?

การใช้ Lazy Load ต้องวัดผล ไม่ใช่แค่ดูว่าหน้าโหลดเร็วขึ้น เครื่องมือที่ใช้ได้ทั้ง lab test และข้อมูลจริง

เครื่องมือที่แนะนำ

  • Google PageSpeed Insights: สำหรับ Core Web Vitals และคำแนะนำ
  • Lighthouse: ตรวจสอบใน developer mode
  • Chrome DevTools Network: ดู resource load timing
  • WebPageTest: ทดสอบหลาย location/network type
  • Search Console: ดู UX ของผู้ใช้จริงและรายงาน page experience

ควรดู 3 ค่า: ขนาดโหลดครั้งแรก, LCP, page shift ตัวอย่าง หากก่อนปรับ mobile โหลด 4.2 MB LCP 4.8s หลังใช้ Lazy Load และ optimize เหลือ 1.6 MB LCP 2.7s ถือเป็น improvement แต่ถ้า LCP กลับช้า (เช่น 6s) อาจเกิดจากภาพสำคัญถูก Lazy Load ผิดพลาด

สรุปแนวทาง Lazy Load ที่ดีที่สุด

Lazy Load ที่ดีไม่ใช่แค่เลื่อนเวลาโหลดทุกอย่าง แต่ต้องโหลด resource ที่เหมาะสมตามความจำเป็น ภาพและเนื้อหาสำคัญในหน้าจอแรกต้องมาเร็ว ภาพ/วิดีโอ/widget ต่อไปให้โหลดตามการใช้งานของผู้ใช้

  • หน้าจอแรกคือ critical zone ต้องไม่มีดีเลย์
  • ภาพต้องทั้ง Lazy Load และ compress format ดี
  • วิดีโอใช้ภาพปกแทน iframe ก่อน
  • จองพื้นที่ให้ media ทุกชิ้นลด CLS
  • ตรวจ plugin conflict ใน WordPress
  • เว็บเขียนเองผสม native กับ JavaScript ตามความจำเป็น
  • ทดสอบด้วย PageSpeed, DevTools และอุปกรณ์จริงหลังเปลี่ยนทุกครั้ง

Lazy Load จะได้ผลดีที่สุดเมื่อใช้ร่วมกับโฮสติ้งดี, ภาพ optimize, SSL ที่ปลอดภัย และโค้ดสะอาด ไม่ใช่เวทมนตร์ แต่เป็นส่วนสำคัญของเว็บที่ทันสมัย

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

Lazy Load มีผลเสียต่อ SEO หรือไม่?

ไม่ ถ้าใช้ถูก Lazy Load จะช่วย SEO โดยเพิ่มความเร็วและ UX แต่ถ้าเนื้อหาสำคัญถูกซ่อนใน JavaScript หรือภาพหลักหน้าจอแรกใช้ Lazy Load จะกระทบ SEO ได้

ควรใช้ Lazy Load กับภาพทุกภาพไหม?

ไม่ ภาพ logo, hero หรือภาพหลักที่เป็น LCP ไม่ควรใช้ Lazy Load ควรใช้กับภาพ blog ด้านล่าง, gallery หรือ infographic เท่านั้น

Lazy Load กับวิดีโอควรทำอย่างไร?

วิธีง่ายคือแสดงภาพปกก่อน สร้าง iframe เมื่อผู้ใช้คลิก play เท่านั้น ลด resource third-party และเพิ่มความเร็วหน้าเว็บ

WordPress ต้องใช้ plugin Lazy Load หรือไม่?

WordPress เวอร์ชันใหม่รองรับ Lazy Load สำหรับภาพอยู่แล้ว แต่ถ้าต้องการ WebP, delay iframe, CDN หรือ gallery ที่ advance ควรเลือก plugin คุณภาพและไม่ใช้ซ้ำซ้อน

Lazy Load ช่วยเพิ่มความเร็วเว็บมากแค่ไหน?

ขึ้นกับจำนวนภาพ/วิดีโอ ถ้าเว็บหนัก media จะลดข้อมูล initial load ได้ 30-70% แต่ควรวัดผลหลังเปลี่ยนด้วย PageSpeed, Lighthouse และทดสอบอุปกรณ์จริง

สรุปและขั้นตอนต่อไป

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

แชร์บทความนี้:
Ayşe Aksoy

ที่ปรึกษาการออกแบบเว็บไซต์

มีประสบการณ์มากกว่า 15 ปีในการออกแบบเว็บไซต์ที่สร้างสรรค์และเน้นผู้ใช้ มุ่งเน้นโครงการที่ผสานการออกแบบภาพและการใช้งาน

บทความทั้งหมด →