Lazy Loading คืออะไร? แนวคิดที่ชัดเจน

แนวคิดที่ชัดเจนเกี่ยวกับสิ่งที่ขี้เกียจโหลด วิธีปรับปรุงความเร็วในการโหลดไซต์โดยใช้เทคนิคการโหลดแบบสันหลังยาว ปลั๊กอินรูปภาพแบบ Lazy Loading ที่แนะนำและอื่น ๆ คืออะไร?

Lazy Loading เป็นเทคนิคในการโหลดรูปภาพ วิดีโอ และไฟล์สื่ออื่นๆ เมื่อจำเป็นเท่านั้น (ในกรณีนี้ หน้าจะเลื่อนลงไปที่รูปภาพ)

การโหลดแบบ Lazy ได้รับความนิยมจาก Google Google ได้นำไปใช้ในเว็บไซต์ที่มีการเข้าชมสูงส่วนใหญ่ที่พวกเขาเป็นเจ้าของ

เป็นวิธีที่ยอดเยี่ยมในการปรับปรุงประสิทธิภาพเว็บไซต์ของคุณสำหรับผู้ใช้ของคุณ

นี่เป็นวิธีที่ดีกว่าในการปรับใช้การโหลดทรัพยากรแบบไดนามิกมากกว่าการโหลดล่วงหน้า เนื่องจากมีลักษณะขี้เกียจและโหลดเนื้อหาเมื่อจำเป็นเท่านั้น

เมื่อคุณเลื่อนหน้าลง ไฟล์สื่อจะถูกโหลดและรูปภาพโดยเฉพาะ ซึ่งลดเวลาในการโหลดหน้าแรกลงอย่างมากด้วยการลดจำนวนคำขอสำหรับทรัพยากร HTML, CSS และ JavaScript

โหลดรูปภาพแบบ Lazy Loading ได้เสมอโดยใช้ปลั๊กอินของบุคคลที่สาม แต่จริงๆ แล้วการติดตั้งบนเว็บไซต์ที่มีอยู่นั้นค่อนข้างง่าย หากคุณพอใจกับโค้ด HTML/CSS

เหตุใดฉันจึงควรเพิ่มการโหลดแบบ Lazy Loading ลงในไซต์ของฉัน

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

ด้วยเหตุนี้ จึงเป็นความคิดที่ดีที่จะโหลดเฉพาะสิ่งที่คุณต้องการในตอนแรก แล้วจึงโหลดทรัพยากรเพิ่มเติมในภายหลังเมื่อจำเป็น

การโหลดแบบ Lazy Loading ยังช่วยลดปริมาณงานที่เบราว์เซอร์ต้องทำในขณะโหลดหน้าเว็บอีกด้วย ในที่สุดนี้หมายความว่าคุณจะได้รับการโหลดหน้าเว็บที่เร็วขึ้นสำหรับผู้ใช้

คุณสามารถใช้การโหลดแบบ Lazy Loading บนเว็บไซต์ของคุณได้หลายวิธี เช่นเดียวกับเทคนิคอื่นๆ มีข้อดีและข้อเสียที่เกี่ยวข้องกับแต่ละวิธี

จะเพิ่มการโหลดแบบ Lazy Loading ในไซต์ WordPress ได้อย่างไร?

คุณสามารถเพิ่มการโหลดแบบ Lazy Loading ลงในเว็บไซต์ใดๆ ก็ได้ด้วยการเพิ่มโค้ด CSS และ JavaScript แบบง่ายๆ สิ่งที่คุณต้องมีก็คือการติดแท็ก HTML เล็กน้อยเช่นกัน

แต่ในบทความนี้ ฉันจะพูดถึงเฉพาะปลั๊กอินการโหลดแบบขี้เกียจของ WordPress ที่ให้คุณเพลิดเพลินไปกับข้อดีของการโหลดรูปภาพแบบ Lazy Loading บนไซต์ WordPress

จะเพิ่มการโหลดแบบ Lazy Loading โดยใช้ Plugin ได้อย่างไร?

มีปลั๊กอิน WordPress มากมายที่จะเพิ่มฟังก์ชันการโหลดแบบ Lazy Loading ให้กับเว็บไซต์ของคุณโดยอัตโนมัติในคลิกเดียว

หากคุณต้องการเพิ่มเวลาในการโหลดไซต์โดยรวม ฉันจะแนะนำปลั๊กอินเพิ่มประสิทธิภาพความเร็วของ Permatters ปลั๊กอินนี้จะเพิ่มประสิทธิภาพเว็บไซต์ของคุณเพื่อประสบการณ์การใช้งานและประสิทธิภาพที่ดีขึ้น นอกจากนี้ยังมีคุณสมบัติเพิ่มเติมบางอย่าง เช่น การโหลดแบบ Lazy Loading, การบีบอัด gzip เป็นต้น...

หากคุณต้องการใช้โค้ดสกปรกหรือมีข้อกำหนดล่วงหน้า ฉันจะแนะนำปลั๊กอินอื่นๆ ต่อไปนี้

WP Rocket เป็นหนึ่งในปลั๊กอินแคช WordPress ที่ได้รับความนิยมมากที่สุด นอกจากนี้ยังเป็นปลั๊กอินยอดนิยมสำหรับการโหลดรูปภาพแบบ Lazy Loading จะช่วยลดความเร็วในการโหลดและเพิ่มการดูหน้าเว็บทั้งหมด คุณสามารถอ่าน WP Rocket Review

คุณยังสามารถใช้ปลั๊กอิน Light Speed ​​Cache ซึ่งเป็นปลั๊กอินยอดนิยมอีกตัวหนึ่งในหมู่ผู้ใช้ WordPress ช่วยให้คุณสามารถใช้กฎการแคชขั้นสูงสำหรับเว็บไซต์ของคุณซึ่งช่วยในการปรับปรุงเวลาในการโหลดหน้าเว็บและลดการใช้แบนด์วิธด้วย

นอกจากนี้ ปลั๊กอินด้านบนยังช่วยโหลด iFrames ฉันแนะนำปลั๊กอินเหล่านี้ให้คุณ

การโหลดแบบ Lazy Loading กับการโหลดแบบไดนามิก VS การโหลดล่วงหน้าแบบ JavaScript และการโหลดแบบ Lazy Loading อย่างกระตือรือร้น

ความแตกต่างใหญ่ระหว่างคำทั้งสี่คำคือสิ่งที่เกิดขึ้นเมื่อผู้ใช้เข้าชมไซต์ของคุณเป็นครั้งแรก

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

การโหลดแบบไดนามิก : ด้วยการโหลดแบบไดนามิก คุณจะต้องโหลดทุกอย่างล่วงหน้า แม้ว่าจะไม่จำเป็นก็ตาม ดังนั้นขึ้นอยู่กับจำนวนข้อมูลที่คุณต้องส่ง การทำเช่นนี้อาจเพิ่มเวลาในการโหลดหน้าเว็บได้อย่างมาก แม้ว่าเนื้อหาบางส่วนจะไม่มีใครดูก็ตาม

การโหลดจาวาสคริปต์ล่วงหน้า:

JavaScript Preloading เป็นส่วนสำคัญของกระบวนการโหลดภาพแบบ Lazy Loading อำนวยความสะดวกในการแคชของเบราว์เซอร์โดยส่ง HTML (และ CSS หากคุณใช้โซลูชันตามสไตล์)

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

Eager Lazy Loading : สิ่งนี้คล้ายกับการโหลดแบบ Lazy Loading และคุณจะโหลดทรัพยากรได้ตามต้องการ ความแตกต่างคือเมื่อใช้วิธีการแบบกระตือรือร้น คุณไม่ต้องกังวลว่าตอนนี้จะมองเห็นอะไรหรือไม่ หากโหลดแล้ว ดีและดี – ไม่เช่นนั้นให้โหลดเมื่อจำเป็น

ทำความเข้าใจ Lazy Loading สำหรับ SEO

บางคนมีความกังวลว่าภาพที่โหลดแบบ Lazy Loading จะส่งผลเสียต่อความสามารถของ SEO ในการเข้าถึงเนื้อหา

Google ทำหน้าที่แคชทรัพยากรบนเว็บไซต์ของคุณได้ดีเยี่ยมทุกครั้งที่มีการรวบรวมข้อมูล ดังนั้นหากคุณโหลดองค์ประกอบในลักษณะที่ยังคงเร็วอยู่เรื่อยๆ และไม่เปลี่ยนแปลงบ่อยเกินไป ฉันไม่คิดว่าใครๆ ก็ควรกังวลเกี่ยวกับผลกระทบต่อการค้นหาของพวกเขา อันดับเครื่องยนต์

Lazy Loading และ CDN

มี CDN ที่เป็นประโยชน์ในอุตสาหกรรมที่สามารถช่วยคุณเผยแพร่ไฟล์รูปภาพและสื่อของคุณ บริการเหล่านี้ส่วนใหญ่มอบประสบการณ์การใช้งานที่ยอดเยี่ยมให้กับผู้ใช้โดยใช้ฟังก์ชันการโหลดแบบ Lazy Loading ให้กับคุณ

Cloudflare CDN เป็นหนึ่งในบริการ CDN ที่ฉันต้องการเน้นย้ำ

Cloudflare เป็นเครือข่ายการจัดส่งเนื้อหาที่ให้บริการ CDN ฟรีและจ่ายเงินสำหรับผู้ใช้บัญชีทั้งหมด นอกจากนี้ยังเพิ่มประสิทธิภาพเว็บไซต์ของคุณและปรับปรุงความปลอดภัยด้วยการใช้กลยุทธ์ขั้นสูงบางอย่าง เช่น การเพิ่มประสิทธิภาพความเร็วหน้าเว็บ, HTTP/2 และอื่นๆ อีกมากมาย นอกจากนี้ยังช่วยให้คุณขี้เกียจโหลดรูปภาพเว็บไซต์และไฟล์สื่อของคุณ

lazy Loading In Desktop หรือ Mobile: ส่งผลต่อ Google SEO อย่างไร?

การโหลดแบบ Lazy เกิดขึ้นบนเดสก์ท็อปมาเป็นเวลานาน เป็นคุณลักษณะที่มีอยู่ในเบราว์เซอร์หลักส่วนใหญ่ แต่มีคุณลักษณะบางอย่าง เช่น การโหลดล่วงหน้าและการโหลดบางส่วน ซึ่งไม่สามารถใช้ได้กับทุกเบราว์เซอร์

สำหรับอุปกรณ์พกพา การโหลดแบบ Lazy Loading เป็นสิ่งที่คุณต้องใส่ใจ

สิ่งสำคัญคือคุณต้องคิดว่ามันเป็นปัจจัยในการจัดอันดับ SEO เพราะตอนนี้ Google ให้ความสำคัญกับการโหลดรูปภาพแบบ Lazy Loading บนอุปกรณ์มือถือ

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

ขี้เกียจโหลดภาพในขนาดต่างๆ

อีกเหตุผลหนึ่งที่คุณควรเน้นไปที่การโหลดรูปภาพแบบ Lazy Loading เนื่องมาจากการใช้งานมือถือที่เพิ่มขึ้น

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

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

Frameworks ใดที่ใช้ในการโหลดแบบ Lazy Load?

มีตัวเลือกสองสามอย่างสำหรับคุณ:

1. Picturefill (โดยค่าเริ่มต้น)

Picturefill เป็นสคริปต์ที่มีฟังก์ชันการโหลดแบบ Lazy Loading สำหรับรูปภาพของคุณ ไลบรารี JavaScript แบบไลท์เวทนี้จะทำงานกับเบราว์เซอร์หลักๆ เกือบทั้งหมด และยังตอบสนองอีกด้วย ดังนั้นมันจะเปลี่ยนพฤติกรรมขึ้นอยู่กับประเภทของอุปกรณ์ที่คุณใช้

2. LazyLoadJS (โดยค่าเริ่มต้น)

LazyLoadJS เป็นสคริปต์ที่มีฟังก์ชันการโหลดแบบ Lazy Loading สำหรับรูปภาพของคุณ และมีน้ำหนักเบามากและใช้งานได้กับเบราว์เซอร์หลักๆ ทั้งหมด ดังนั้นคุณจึงไม่ต้องกังวลกับปัญหาใด ๆ เมื่อใช้งาน

นอกจากนี้ยังมีคุณสมบัติหลายคิวเพื่อปรับปรุงประสิทธิภาพโดยรวมของเว็บไซต์ของคุณและใช้งานง่ายมาก – นักพัฒนาทุกระดับจะไม่มีปัญหาในการใช้งาน

3. LoadCSS (โดยค่าเริ่มต้น)

LoadCSS เป็นสคริปต์ที่มีฟังก์ชันการโหลดแบบ Lazy Loading สำหรับสไตล์ชีตของคุณ ซึ่งแตกต่างจากไลบรารีอื่นๆ ที่ใช้งานได้กับไฟล์รูปภาพหรือวิดีโอเท่านั้น สิ่งนี้จะโหลด HTML และ JavaScript ล่วงหน้าด้วย

4. SlimerJS (ไม่พร้อมใช้งาน)

SlimerJS เป็นสคริปต์ที่มีฟังก์ชันการโหลดแบบ Lazy Loading สำหรับรูปภาพของคุณ และไม่ได้ใช้ไลบรารี JavaScript ใดๆ แต่มี API ของตัวเองซึ่งคุณสามารถใช้กำหนดค่าวิธีการทำงานของ Image Lazy Load ได้

นอกจากนี้ยังมีน้ำหนักเบาและรวดเร็วมาก ดังนั้นจะไม่ส่งผลกระทบต่อประสิทธิภาพเว็บไซต์ของคุณแต่อย่างใด

ขี้เกียจโหลดทำงานในภาพพื้นหลังหรือไม่?

ใช่ มันจะทำงานในภาพพื้นหลัง

บทสรุป

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

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