Lazy Loading
เมื่อพูดถึงการใช้แพลตฟอร์มออนไลน์เช่นเว็บไซต์ ความเร็วในการโหลดและการเพิ่มประสิทธิภาพกลายเป็นสิ่งจำเป็น โดยผู้ใช้เรียกร้องความเร็วและการตอบสนองมากขึ้นเรื่อยๆ
ด้วยเหตุนี้ รูปแบบการออกแบบหน้าที่รู้จักในชื่อ lazy loadingกำลังได้รับความสำคัญมากขึ้นเรื่อยๆ แต่ lazy loading (deferred loading) คืออะไรกันแน่
นั่นคือสิ่งที่เราจะพูดถึงด้านล่าง
Lazy Loading คืออะไร
โดยเฉพาะ lazy loadingคือเทคนิค รูปแบบการออกแบบโปรแกรมที่นำไปใช้กับเว็บไซต์ ที่องค์ประกอบและทรัพยากรไม่โหลดทั้งหมดแต่ดำเนินการตามความต้องการ**ตามการใช้ของผู้ใช้ ผลิต "การโหลดที่เลื่อนออก" ของเนื้อหา
ด้วยวิธีนี้ ทรัพยากรถูกเพิ่มประสิทธิภาพและเนื้อหาเช่นข้อความ วิดีโอ รูปภาพ และวัสดุอื่นโหลดเฉพาะเมื่อต้องการปรับปรุงความเร็ว การใช้หน่วยความจำและการประมวลผล การตอบสนอง และเวลาโหลด สิ่งนี้ขัดแย้งกับการโหลดเต็มที่เว็บไซต์หรือหน้าโหลดทั้งหมด แม้ว่าผู้ใช้จะไม่ใช้ทุกองค์ประกอบ
ข้อได้เปรียบทั่วไปของ lazy loading
เนื่องจากจุดประสงค์หลักของ lazy loading คือเพิ่มประสิทธิภาพการโหลดขององค์ประกอบเฉพาะเมื่อใช้ มีข้อได้เปรียบหลายอย่างที่สามารถสรุปเป็น
- ความเร็วในการแสดงองค์ประกอบหลักของเว็บไซต์
- การปรับปรุงที่สำคัญในประสบการณ์ผู้ใช้บนเว็บไซต์ (UX)
- ประสิทธิภาพที่ปรับปรุงบนอุปกรณ์ mobileโดยเฉพาะเมื่อมีทรัพยากรการเชื่อมต่อเครือข่ายจำกัด การมี Lazy Loading ทำงานจะอนุญาตให้ท่องเว็บบนหน้าที่ภายใต้เงื่อนไขความครอบคลุมที่ไม่ดีนี้ ไม่เป็นไปได้
- การเพิ่มประสิทธิภาพโดยรวมและทั้งหมดของทรัพยากรเช่น CPU, RAM และแบตเตอรี่บนอุปกรณ์ mobile
- การเพิ่ม dwell timeบนหน้าของเรา โดยไม่มีปัญหาการโหลด แปลทางอ้อมเป็นการปรับปรุงการจัดอันดับ
- การลด bounce rate
เช่นเดียวกัน แนวทางการเขียนโปรแกรม lazy loading มีข้อได้เปรียบและความใหม่จากมุมมองที่เป็นเทคนิคมากกว่า เช่น
- Lazy loading เข้ากันได้เต็มที่กับ JS framework เช่น React และ Angular รวมถึงแพลตฟอร์ม CMS เช่น WordPress ในความเป็นจริง เพิ่งมีรายงานว่า lazy loading สำหรับรูปภาพจะรวมโดยเริ่มต้นใน WordPress เวอร์ชัน 5.5
- ขอบคุณ API IntersectionObserverไม่ซ่อนรูปภาพจากเครื่องมือค้นหา
- การรองรับประเภทเนื้อหาหลายตัวเช่นรูปภาพและทรัพยากรคลาส responsive
- อนุญาตให้รูปภาพเว็บไซต์ index ซึ่งจำเป็นสำหรับ SEO
- เป็นทรัพยากร SEO Friendly 100% เนื่องจากปรับปรุงจุดสำคัญหลายตัวใน SEO โดยตรงและโดยอ้อม
วิธีดำเนินการ lazy loading ใน WordPress
หากเรามีเว็บไซต์บน WordPress เราควรรู้ว่าเรามีข้อได้เปรียบใหญ่เนื่องจากมีทางออกหลายตัวในการดำเนินการ lazy loading บนหน้าของเราเพื่อให้โหลดเร็วขึ้น ภาพหน้าจอด้านล่างนี้แสดงทางออกบางตัวที่เรามีในที่เก็บปลั๊กอิน
มุมมองของปลั๊กอิน WordPress ที่โดดเด่นที่สุดสำหรับการดำเนินการ lazy loading
ในการดำเนินการนี้ เรามีหลายตัวเลือก
- เลือกปลั๊กอิน lazy loading เฉพาะเช่น "Lazy loader", "a3 lazy load"...
- เลือกปลั๊กอินการเพิ่มประสิทธิภาพเว็บเช่น "WP Rocket" ซึ่งมีตัวเลือกนี้รวมโดยเริ่มต้นพร้อมการปรับปรุงอื่นแล้ว
ด้าน SEO ที่เกี่ยวข้องกับ Lazy Loading
เรารู้แล้วภารกิจหลักของการโหลดที่เลื่อนออกและข้อได้เปรียบสำคัญ และวิธีที่ส่งผลต่อการปรับปรุงประสิทธิภาพหน้า UX และ SEO ของเรา
ตอนนี้ ต้องใช้การโหลดที่เลื่อนออกอย่างชาญฉลาดเพื่อให้ได้ประโยชน์สูงสุด เนื่องจากหากใช้ไม่เหมาะสมอาจทำให้เกิดผลตรงกันข้าม
ตัวอย่าง lazy loading ใช้ cache เพื่อปรับปรุงความเร็วดังนั้นหากเก็บเนื้อหามากเกินไปที่นั่น อาจเกิดความล่าช้าหรือข้อผิดพลาดหากดำเนินการไม่ถูกต้อง แม้ป้องกันไม่ให้ Google index หน้าและองค์ประกอบ ซึ่งสามารถมีผลร้ายแรงต่อการจัดอันดับเว็บไซต์ เคล็ดลับบางตัวคือ
- เพิ่มประสิทธิภาพ cache และใช้อย่างชาญฉลาด
- ใช้ Google Search Console ตรวจสอบเนื้อหาที่ Google crawl บนเว็บไซต์
- เพิ่มข้อความ ALT เพื่อทำให้แต่ละรูปภาพ indexable โดย Google
- ใช้ API IntersectionObserverเสมอ
- เพิ่ม attribute loadingให้ iframeหรือเนื้อหาฝังจากหน้าหรือแหล่งอื่น ขอบคุณฟังก์ชัน Blink LazyLoadของเบราว์เซอร์ Chrome ใช้กับรูปภาพ ภาพถ่าย วิดีโอ ข้อความ และเนื้อหาอื่น
Lazy loading และ UX
เมื่อพูดถึงเว็บไซต์ ทั้งการเพิ่มประสิทธิภาพทางเทคนิคและทั่วไปเพื่อเสนอประสบการณ์ผู้ใช้ที่ดี (UX) จำเป็น เกี่ยวกับเวลาโหลด การตอบสนอง การใช้ทรัพยากร และพฤติกรรมทั่วไป หากเว็บไซต์ตอบสนองไม่มาก bounce rate จะสูง และหากเสนอประสบการณ์ผู้ใช้ที่ไม่ดี จะส่งผลต่อผู้เข้าชม การมองเห็น และแม้แต่ SEO
ด้วยการโหลดที่เลื่อนออก เป้าหมายคือปรับปรุง UX ของเว็บไซต์อย่างน่าทึ่งในขั้นเดียว โดยโหลดเนื้อหาอย่างค่อยเป็นค่อยไปและเมื่อผู้ใช้ต้องการขณะเลื่อนหน้า ไม่ว่าจะเป็นรูปภาพหรือข้อความ ซึ่งเพิ่มประสิทธิภาพการใช้ทรัพยากรเทียบกับการโหลดทั้งแพลตฟอร์ม อาจแสดงองค์ประกอบที่ไม่สำคัญสำหรับผู้ใช้
Native lazy loading (HTML) ใน Chrome
แสดงให้เห็นความสำคัญที่ Google ให้ UX ตั้งแต่ปี 2020 และเริ่มจากเวอร์ชัน 75 ของเบราว์เซอร์ Chromeเป็นไปได้ที่จะเพิ่ม native lazy loadingให้แท็กหน้า HTML และเนื้อหามัลติมีเดียเช่นภาพถ่าย วิดีโอ และอื่นๆ
ด้วยวิธีนี้ โดยเพิ่ม attribute lazy loading HTML โดยอัตโนมัติ เบราว์เซอร์ Chrome เข้าใจว่าเนื้อหาหน้าจะโหลดตามการนำทางของผู้ใช้และไม่ใช่ทั้งหมดในครั้งเดียว ปรับปรุงความเร็วและการตอบสนอง ในการใช้ attribute loadingที่มีค่า lazyถูกเพิ่มในแต่ละแท็กของทรัพยากรทางสายตาและมัลติมีเดีย รวมถึง iframe
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> ทรัพยากรนี้สามารถใช้ทั้งในรูปภาพที่แสดงส่วนใหญ่ของข้อมูลที่เบราว์เซอร์ต้องดาวน์โหลด และใน iframeจำไว้ว่าเราใช้สิ่งเหล่านี้ฝังทรัพยากรภายนอกในเว็บไซต์
สำคัญที่จะเน้นการใช้ใน iframe เนื่องจากสามารถแสดงจุดโหลดวิกฤตบนเว็บไซต์
ด้านลบ native lazy loading เข้ากันได้เฉพาะ Chrome แม้การใช้สามารถดำเนินการในเบราว์เซอร์อื่นผ่าน library ที่เข้ากัน ในกรณีไม่มีการสนับสนุนเช่นที่เกิดใน Mozilla Firefox
การใช้ Lazy loading
ดังที่เราพูดถึง lazy loading มุ่งเน้นการเลื่อนการโหลดขององค์ประกอบบนหน้าเพื่อเพิ่มประสิทธิภาพการตอบสนอง ในแง่นี้ การใช้ที่ให้เครื่องมือมุ่งเน้นทรัพยากรทางสายตาทั้งหมดแม้เน้นที่รูปภาพ วิดีโอ และiframe ที่สามารถรวมเอกสารและไฟล์อื่น ทั้งหมดผ่านการแก้ไขแท็กและการรวม attribute loadingที่มีค่า lazyเพิ่มประสิทธิภาพความเร็วทั่วไปของเว็บไซต์แม้มีองค์ประกอบหนักหรือเนื้อหามัลติมีเดียขนาดใหญ่
คุณมีคำถามเกี่ยวกับ lazy loading หรือต้องการดำเนินการในโครงการ เราพร้อมให้บริการ
เอกสารและการอ้างอิง:
โดย: David Kaufmann
ในช่วง 10+ ปีที่ผ่านมา ผมหมกมุ่นกับ SEO อย่างสมบูรณ์ — และพูดตรง ๆ ก็ไม่อยากให้เป็นแบบอื่น
อาชีพของผมก้าวขึ้นไปอีกระดับเมื่อทำงานเป็นผู้เชี่ยวชาญ SEO อาวุโสที่ Chess.com — หนึ่งใน 100 เว็บไซต์ที่มีผู้เข้าชมมากที่สุดในอินเทอร์เน็ต การทำงานในระดับนี้สอนสิ่งที่ไม่มีหลักสูตรหรือประกาศนียบัตรใดสอนได้
จากประสบการณ์นี้ ผมก่อตั้ง SEO Alive — เอเจนซีสำหรับแบรนด์ที่จริงจังกับการเติบโตแบบออร์แกนิก และเพราะหาเครื่องมือที่จัดการทั้งโลกคลาสสิกและยุค AI ได้ดีไม่ได้ ผมจึงสร้าง SEOcrawl ขึ้น หากคุณกำลังมองหาพาร์ตเนอร์ SEO มากประสบการณ์ที่รักสาขานี้ — ยินดีพูดคุยครับ!
ค้นพบเนื้อหาเพิ่มเติมของผู้เขียนคนนี้
