คุณต้องการเรียนรู้วิธีใช้งานการโหลดแบบ Lazy Loading ใน WordPress หรือไม่?
หากเว็บไซต์ WordPress ของคุณต้องอาศัยเนื้อหาที่เป็นภาพเป็นหลัก คุณอาจต้องเพิ่มฟังก์ชัน Lazy Loading เข้าไป คุณลักษณะ WordPress นี้ช่วยปรับปรุงความเร็วและประสิทธิภาพของหน้าเว็บไซต์ ทำให้จำเป็นสำหรับความพยายาม SEO ของคุณ
บทความนี้จะสำรวจว่า Lazy Loading ทำงานอย่างไร รวมถึงข้อดีและข้อเสีย คุณจะได้เรียนรู้วิธีใช้งานบนเว็บไซต์ของคุณและวิธีเพิ่มประสิทธิภาพการใช้งานเพื่อผลลัพธ์ที่ดีที่สุด
โดยไม่ต้องกังวลใจอีกต่อไป เราขอเชิญคุณปรึกษารายการ ธีม WordPress. แต่ก่อนหน้านี้หากคุณไม่เคยติดตั้ง WordPress ให้ค้นพบ วิธีการติดตั้งขั้นตอน 7 บล็อก WordPress et วิธีการหาติดตั้งและเปิดใช้งานธีมเวิร์ดเพรสบนบล็อกของคุณ
จากนั้นกลับไปที่สาเหตุที่เราอยู่ที่นี่
Lazy Loading คืออะไร?
เป็นคุณลักษณะที่ช่วยให้เว็บไซต์สามารถโหลดเฉพาะภาพที่ผู้ใช้มองเห็นได้ ช่วยให้เว็บไซต์รักษาความเร็วในการโหลดที่รวดเร็วโดยไม่อัปโหลดภาพนอกวิวพอร์ต
WordPress Lazy Loading ทำงานอย่างไร?
เมื่อผู้ใช้เยี่ยมชมเว็บไซต์ WordPress เบราว์เซอร์จะดาวน์โหลดภาพทั้งหมดบนหน้าเว็บพร้อมกัน สำหรับหน้าที่มีรูปภาพความละเอียดสูงจำนวนมาก กระบวนการนี้สามารถลดเวลาในการโหลดได้อย่างมาก ซึ่งอาจส่งผลเสียต่อประสิทธิภาพของเว็บไซต์ของคุณ
การเพิ่ม Lazy Loading ลงในเว็บไซต์ของคุณจะแจ้งให้ดาวน์โหลดเฉพาะภาพที่มองเห็นได้บนหน้าจอของผู้ใช้เท่านั้น ไฟล์สื่อที่เหลือจะถูกแทนที่ด้วยภาพที่พักและโหลดก็ต่อเมื่อผู้ใช้เลื่อนหน้าเว็บลงเท่านั้น
ข้อดีและข้อเสียของ WordPress Lazy Loading
หากคุณยังคงสงสัยว่าควรใช้การโหลดรูปภาพแบบ Lazy Loading ใน WordPress หรือไม่ นี่คือข้อดีและข้อเสียของคุณลักษณะนี้:
Avantages:
- ลดการใช้แบนด์วิธ ลดต้นทุนการโฮสต์
- ปรับปรุงความเร็วของเว็บไซต์ซึ่งจะช่วยปรับปรุงประสบการณ์การท่องเว็บของผู้เยี่ยมชม
- ปรับปรุงประสบการณ์มือถือ
- ช่วยเพิ่มความพยายาม SEOการเพิ่มอันดับเว็บไซต์ของคุณในเครื่องมือค้นหา
เทียบกับ:
- ทำให้เกิดการบัฟเฟอร์เนื้อหา ซึ่งส่งผลต่อความเร็วในการโหลด
- ชะลอการเลื่อนอย่างรวดเร็ว
วิธีเพิ่ม Lazy Loading ให้กับเว็บไซต์ WordPress ของคุณ: 3 วิธี
มีสามวิธีในการปรับใช้การโหลดแบบ Lazy Loading บนเว็บไซต์ WordPress ของคุณ เราขอแนะนำให้คุณเลือกวิธีการที่เหมาะสมกับสถานการณ์ของคุณมากที่สุด
1. อัปเกรดเป็น WordPress 5.4 หรือสูงกว่า
WordPress 5.4 และใหม่กว่ารองรับการโหลดแบบ Lazy Loading เป็นค่าเริ่มต้น กำลังอัปเดต WordPress . ของคุณ เวอร์ชันล่าสุดจะรองรับการโหลดแบบ Lazy Loading โดยอัตโนมัติ
แม้ว่านี่จะเป็นวิธีที่ง่ายที่สุด แต่ก็ไม่อนุญาตให้คุณกำหนดค่ารูปภาพที่จะโหลดอย่างเกียจคร้าน ดังนั้น เว็บไซต์ของคุณอาจใช้คุณลักษณะนี้ในทางที่ผิด ซึ่งแสดงให้เห็นข้อเสียดังกล่าว
ปัจจัยที่ต้องพิจารณาอีกประการหนึ่งคือลักษณะที่แตกต่างกันของคุณลักษณะ Lazy Loading ใน WordPress แต่ละเวอร์ชัน เมื่อเร็วๆ นี้ WordPress ได้เปิดตัว WordPress เวอร์ชันใหม่ซึ่งใช้การปรับปรุงเพื่อแก้ไขปัญหาคะแนนเนื้อหาในวงกว้างที่ไม่ดีจากเวอร์ชันเก่า
ซึ่งหมายความว่าเว็บไซต์ที่ทำงานบน WordPress เวอร์ชันเก่าจะไม่ได้รับประโยชน์เช่นเดียวกับเว็บไซต์ที่ใช้ WordPress 5.9 ซึ่งเป็นเวอร์ชันล่าสุด
2. เปิดใช้งานการโหลดแบบเนทีฟแบบเนทีฟผ่านเบราว์เซอร์
เบราว์เซอร์ยอดนิยม เช่น Chrome, Firefox และ Opera รองรับการโหลดแบบ Lazy Loading คุณเพียงแค่ต้องเพิ่มแอตทริบิวต์ ไปยังรูปภาพและวิดีโอเป้าหมายเพื่อเปิดใช้งานโดยอัตโนมัติ
ในการโหลดแบบ Lazy Loading ของ WordPress แอตทริบิวต์การโหลดรองรับสามค่าเหล่านี้:
- รถยนต์ : ทริกเกอร์การโหลดแบบ Lazy Loading ตามค่าเริ่มต้น ซึ่งเทียบเท่ากับการไม่รวมแอตทริบิวต์การโหลด
- สันหลังยาว : กระจายการโหลดทรัพยากรจนกว่าจะถึงระยะทางที่กำหนดจากวิวพอร์ต
- กระตือรือร้น : โหลดทรัพยากรทั้งหมดทันทีที่โหลดหน้าโดยไม่คำนึงถึงตำแหน่ง
นี่คือตัวอย่างการใช้งาน:
<img src=”nom-image.png” loading=”lazy” alt=”alt attribute” width=”800″ height=”411″>วิธีนี้เหมาะสำหรับการโหลดภาพบางภาพแบบเกียจคร้าน ทำให้แต่ละภาพมีแอตทริบิวต์การโหลดที่กำหนดเมื่อปรากฏในวิวพอร์ต อย่างไรก็ตาม การโหลดรูปภาพแต่ละรูปแบบ Lazy Loading อาจใช้เวลาสักครู่ โดยเฉพาะอย่างยิ่งหากเว็บไซต์ของคุณมีไฟล์สื่อจำนวนมาก
3. ติดตั้งปลั๊กอิน WordPress
เนื่องจากเบราว์เซอร์บางตัวไม่รองรับการโหลดแบบ Lazy Loading สำหรับรูปภาพและวิดีโอ วิธีที่สองจึงอาจไม่ทำงานตลอดเวลา คุณสามารถบรรเทาปัญหานี้ได้ โดยการติดตั้งปลั๊กอิน Lazy Loading WordPress. วิธีนี้ช่วยให้คุณควบคุมรูปภาพที่จะโหลดแบบเกียจคร้านได้มากขึ้นโดยไม่ต้องเข้ารหัส
นี่คือ ปลั๊กอิน WordPress ที่ดีที่สุด ของ Lazy Loading ให้เลือก เข้าถึงได้จากไดเร็กทอรีของ ปลั๊กอิน WordPress.
ปรับปรุงความเร็วในการโหลดเว็บไซต์ของคุณ
ข้อดีอย่างหนึ่งของปลั๊กอิน WordPress นี้คือรองรับรูปภาพทุกประเภทรวมถึง AVIF ปลั๊กอิน WordPress โหลดขี้เกียจ freemium นี้ให้การเพิ่มประสิทธิภาพและการอัปเดต ขนาดของภาพ เพื่อปรับให้เข้ากับอุปกรณ์ของผู้เยี่ยมชมทำให้มั่นใจ ประสบการณ์ผู้ใช้ เหมาะสมที่สุด
เมื่อตรวจพบเครือข่ายที่ช้ากว่า ปลั๊กอิน WordPress นี้จะให้ตัวเลือกแก่คุณในการลดคุณภาพของภาพ นอกจากนี้ คุณสามารถประหยัดพื้นที่จัดเก็บโดยจัดเก็บรูปภาพในไลบรารีคลาวด์ของปลั๊กอิน WordPress นี้
ปลั๊กอินฟรีนี้ช่วยให้คุณปรับแต่งภาพได้มากถึง 5 ครั้งต่อเดือน การซื้อแผน Pro จะทำให้คุณสามารถโหลดรูปภาพแบบ Lazy Loading สำหรับผู้เยี่ยมชมที่ใช้งานรายเดือน 000 รายและอีกมากมาย รูปภาพสำหรับทั้งสองแผนให้บริการผ่าน AWS Cloudfront CDN
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
Smush
Smush เป็นปลั๊กอินเพิ่มประสิทธิภาพรูปภาพยอดนิยมที่รองรับการโหลดแบบ Lazy Loading มันเข้ากันได้กับ ธีม WordPress ปลั๊กอินตัวสร้างเพจและไลบรารีสื่อยอดนิยม นอกจากนี้ยังช่วยให้คุณสามารถบันทึกการตั้งค่าปลั๊กอินในการกำหนดค่าได้ไม่จำกัดและใช้งานได้ด้วยการคลิกเพียงไม่กี่ครั้ง
คุณสมบัติที่มีประโยชน์อื่น ๆ คือการตรวจจับขนาดภาพที่ไม่ถูกต้อง รองรับ Multisite และเครื่องมือบีบอัดภาพ การอัปเกรดเป็น Smush Pro ช่วยให้คุณปรับแต่งภาพขนาดใหญ่ได้โดยไม่มีข้อจำกัดด้านขนาด บันทึกภาพต้นฉบับ และเข้าถึงปลั๊กอิน WPMU Pro อื่นๆ ราคาเริ่มต้นที่ 5 $ / เดือน.
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
a3 Lazy Load
a3 Lazy Load เป็นปลั๊กอินโหลดแบบ Lazy Loading สำหรับมือถือฟรี มันเข้ากันได้อย่างสมบูรณ์กับ WordPress 5.9 และเครื่องมือยอดนิยมมากมายรวมถึงปลั๊กอิน WebP และ AMP
นอกจากฟังก์ชันการโหลดแบบ Lazy Loading พื้นฐานแล้ว a3 Lazy Load ยังให้คุณโหลดวิดีโอแบบ Lazy Loading ได้อีกด้วย ซึ่งรวมถึงวิดีโอที่ฝังอยู่ในหน้า โพสต์ ประเภทโพสต์ที่กำหนดเอง และวิดเจ็ต เอฟเฟกต์การโหลดแบบขี้เกียจและความสามารถในการโหลดสคริปต์จากส่วนหัวหรือส่วนท้ายก็มีให้เช่นกัน
คุณสมบัติเด่นอื่นๆ เช่น การสนับสนุนหลายไซต์ การสนับสนุนภาพ WebP และการโหลด iframe แบบ Lazy - สิ่งนี้ใช้กับ iframes ที่ WordPress core ไม่โหลด เช่น Google Maps และสื่อแบบฝัง
ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง
เคล็ดลับการโหลด WordPress ขี้เกียจ
กุญแจสำคัญในการใช้ประโยชน์จากการโหลดแบบ Lazy Loading ให้ได้มากที่สุดคือการใช้อย่างถูกต้อง ต่อไปนี้คือเคล็ดลับบางประการในการตั้งค่าการโหลดแบบ Lazy Loading บนเว็บไซต์ WordPress ของคุณ:
- อย่าขี้เกียจโหลดภาพส่วนหัว. เนื่องจากรูปภาพที่วางไว้ที่ด้านบนของหน้าจะมองเห็นได้เมื่อโหลด การโหลดแบบ Lazy Loading จึงไม่มีประโยชน์
- เลือกตัวยึดตำแหน่งที่เหมาะสม เราขอแนะนำให้ใช้ภาพสีทึบหรือภาพคุณภาพต่ำเป็นตัวยึดตำแหน่งสำหรับภาพของคุณ
- เพิ่มเวลาบัฟเฟอร์สำหรับการโหลดรูปภาพ วิธีนี้จะทำให้รูปภาพของคุณพร้อมก่อนเข้าสู่วิวพอร์ตของผู้เข้าชม โดยไม่ต้องรอนาน
- กำหนดขนาดของคอนเทนเนอร์รูปภาพ วิธีนี้จะช่วยคุณหลีกเลี่ยงการเปลี่ยนแปลงเค้าโครงกะทันหัน ซึ่งจะทำให้หน้าเว็บของคุณดูเป็นระเบียบเรียบร้อยเมื่อโหลด
- ใช้การโหลดแบบ Lazy Loading บนหน้าที่ยาวเท่านั้น หน้ายาวรวมถึงหน้าที่ต้องหมุนมากกว่าสองครั้งเพื่อไปถึงจุดสิ้นสุดและมีรูปภาพมากกว่าห้าภาพ
การโหลดแบบขี้เกียจใน WordPress ช่วยให้คุณมอบประสบการณ์การท่องเว็บที่ดียิ่งขึ้นแก่ผู้เยี่ยมชม นอกจากการปรับปรุงความเร็วเว็บไซต์แล้ว คุณลักษณะนี้ยังช่วยลดการใช้แบนด์วิดท์ของคุณอีกด้วย ทั้งหมดนี้ช่วยให้การทำ SEO ของคุณมีอันดับที่ดีขึ้นในผลลัพธ์ของเครื่องมือค้นหา
แหล่งข้อมูลอื่น ๆ ที่แนะนำ
นอกจากนี้เรายังขอเชิญคุณให้ศึกษาข้อมูลด้านล่างเพื่อเพิ่มเติมในส่วนที่จับและควบคุมของเว็บไซต์และบล็อกของคุณ
- วิธีการแก้ไขข้อผิดพลาดในการเปลี่ยนเส้นทาง WordPress
- ปลั๊กอินบางเพื่อบูรณาการบริการของ Google ในบล็อกของคุณ
- ปลั๊กอิน WordPress 5 เพื่อแสดงการแจ้งเตือน
- วิธีการสร้างแม่แบบกำหนดเอง WordPress
- ใช้ภูมิหลังที่แตกต่างกัน WordPress
สรุป
บทช่วยสอนนี้แสดงให้คุณเห็นถึงวิธีใช้งาน Lazy Loading บนเว็บไซต์ WordPress ของคุณ เราหวังว่าบทความนี้จะช่วยให้คุณเข้าใจวิธีใช้งานคุณสมบัติการโหลดแบบ Lazy Loading บนเว็บไซต์ WordPress ให้เกิดประโยชน์สูงสุด อย่าลืมใช้ a โฮสติ้ง WordPress คุณภาพสูงเพื่อปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณต่อไป
หากคุณมีข้อสงสัยหรือข้อเสนอแนะโปรดแจ้งให้เราทราบภายใน ความเห็น.
อย่างไรก็ตามคุณยังจะสามารถปรึกษาเราได้ บริการสารสนเทศหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
en ผู้ดูแล แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
