วิธีใช้ Lazy Load เพื่อโหลดรูปภาพใน WordPress

คุณต้องการเรียนรู้วิธีใช้การโหลดแบบสันหลังยาวเพื่อโหลดรูปภาพลงใน WordPress หรือไม่?

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

เว็บไซต์ยอดนิยมที่มีรูปภาพจำนวนมากใช้ Lazy Load to เพิ่มความเร็วและประสิทธิภาพของเว็บไซต์

ในบทความนี้ เราจะแสดงวิธีการโหลดรูปภาพไปยัง WordPress โดยใช้ Lazy Load

ทำไมขี้เกียจโหลดรูปภาพใน WordPress?

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

ไม่มีใครชอบเว็บไซต์ที่ช้า อันที่จริง การศึกษาประสิทธิภาพพบว่าการหน่วงเวลาหนึ่งวินาทีในการโหลดหน้าเว็บส่งผลให้มี Conversion น้อยลง 7% มีการเปิดดูหน้าเว็บน้อยลง 11% และความพึงพอใจของลูกค้าลดลง 16%

เครื่องมือค้นหาเช่น Google ก็ไม่ชอบเว็บไซต์ที่โหลดช้าเช่นกัน นั่นเป็นเหตุผลที่ว่าทำไมเว็บไซต์ที่เร็วกว่าจึงมีอันดับสูงกว่าในผลการค้นหา

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

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

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

การโหลดรูปภาพแบบ Lazy Loading ทำงานอย่างไร

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

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

การโหลดแบบ Lazy Loading อาจเป็นประโยชน์อย่างมากสำหรับบล็อก WordPress ของคุณ

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

การเปิดตัว WordPress 5.5 ได้เพิ่มการโหลดแบบ Lazy Loading เป็นคุณสมบัติเริ่มต้น

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

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

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

วิธีที่ 1 ขี้เกียจโหลดรูปภาพใน WordPress ด้วย WP Rocket

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

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

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

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

วิธีที่ 2 ขี้เกียจโหลดรูปภาพใน WordPress ด้วย Optimole

วิธีนี้ใช้ปลั๊กอินฟรี Optimole. มันเป็นหนึ่งในปลั๊กอินบีบอัดรูปภาพ WordPress ที่ดีที่สุดและช่วยให้คุณเปิดใช้งานการโหลดรูปภาพได้อย่างง่ายดาย

หากคุณมีผู้เยี่ยมชมมากกว่า 5 คนต่อเดือน คุณจะต้อง รุ่นพรีเมี่ยม.

เมื่อเปิดใช้งาน ให้ไปที่ สื่อ » Optimole, จากนั้นลงชื่อสมัครใช้คีย์ API

เพียงคลิกที่ปุ่ม ลงทะเบียนและส่งอีเมลคีย์ APIและจะส่งอีเมลถึงคุณ

จากนั้นป้อนคีย์ API ของคุณและคลิกที่ " เชื่อมต่อกับ OptiMole Service '

หลังจากนั้นคลิกที่แท็บ " การตั้งค่า ".

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

จากนั้นคลิกที่ตัวเลือกเมนู " avanced »และเลือก« Lazyload ».

บนหน้าจอนี้มีการตั้งค่าต่างๆ ที่ให้คุณปรับแต่งวิธีการโหลดรูปภาพของคุณอย่างเกียจคร้าน

ก่อนอื่น คุณสามารถปรับ " ยกเว้นก่อน ของภาพจาก lazyload ". สิ่งนี้จะป้องกันภาพแรกของ .ของคุณ บทความหรือหน้า เพื่อใช้โหลดขี้เกียจ

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

จากนั้นคุณสามารถเปิดใช้งานตัวเลือก " ขนาดรูปภาพ '

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

หลังจากนั้นคุณสามารถเปิดใช้งานการตั้งค่า " เปิดใช้งาน Lazyload สำหรับภาพพื้นหลัง '

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

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

การดำเนินการนี้จะโหลดภาพที่พักแทนวิดีโอ เมื่อคุณคลิกวิดีโอแบบเต็มจะโหลดขึ้น

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

ก่อนออกจากการตั้งค่าปลั๊กอิน อย่าลืมคลิกที่ปุ่ม " บันทึกการเปลี่ยนแปลง '

1 ARMember

อาร์เมมเบอร์เป็น WordPress ปลั๊กอิน การป้องกันเนื้อหา เป็นโซลูชันที่ไม่ซ้ำใครที่อนุญาตให้คุณขายการสมัครสมาชิกบนเว็บไซต์ใด ๆ มีเครื่องมือที่สามารถปกป้องเนื้อหาได้อย่างสมบูรณ์หรือบางส่วน

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

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

นอกจากนี้ยังเป็นข้อมูลอ้างอิงในช่องนี้

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง 

2 การแสดงภาษีตามประเทศสำหรับ WooCommerce

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

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

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

3 Slick Popup Pro

Slick Popup Pro เป็น ส่วนขยายของ WordPress ค่อนข้างง่ายและน้ำหนักเบาที่แปลงรูปแบบใด ๆ ที่สร้างโดยปลั๊กอิน ติดต่อ 7 แบบฟอร์ม ในป๊อปอัป เธอใช้แบบฟอร์มและแปลงเป็นป๊อปอัปที่สวยงามและตอบสนองได้อย่างสมบูรณ์

แบบฟอร์มป๊อปอัปสามารถใช้ประโยชน์ได้หลายอย่าง ได้แก่ แบบฟอร์มการรวบรวมข้อมูลก แบบฟอร์มติดต่อแบบฟอร์มการลงทะเบียนแบบฟอร์มใบเสนอราคาแบบฟอร์มข้อเสนอแนะ / ข้อร้องเรียนและอื่น ๆ

ดาวน์โหลด | สาธิต | เว็บโฮสติ้ง

• วิธีการกำหนดค่า All In One SEO แพค WordPress
• วิธีการปรับปรุงรูปแบบของคุณ WordPress ซื้อใน ThemeForest
• วิธีแสดงลิงก์ WordPress เพื่อออกจากระบบ
• วิธีการกำหนดค่า All In One SEO แพค WordPress

สรุป

Voila! เพียงเท่านี้สำหรับบทช่วยสอนนี้ เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีโหลดรูปภาพใน WordPress อย่างเกียจคร้าน อย่าลังเลที่จะ แบ่งปันกับเพื่อนของคุณบนเครือข่ายโซเชียลที่คุณชื่นชอบ. 

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

แต่ในระหว่างนี้โปรดแจ้งให้เราทราบเกี่ยวกับไฟล์ ความเห็น และข้อเสนอแนะในส่วนเฉพาะ

...