วิธีการโหลดรูปภาพและวิดีโอใน WordPress (และแทนที่ iFrames บน YouTube ด้วยภาพตัวอย่าง) เพื่อผลลัพธ์ GTmetrix ที่ดียิ่งขึ้น

อะไรคือวิธีที่ดีที่สุด ภาพและวิดีโอที่ขี้เกียจโหลด ใน WordPress?


ขึ้นอยู่กับว่าคุณใช้ปลั๊กอินแคชที่รองรับการโหลดขี้เกียจอยู่แล้ว (WP Rocket, W3 Total Cache, Swift, LiteSpeed ​​Cache) หากปลั๊กอินแคชของคุณรองรับการโหลดภาพและวิดีโอที่ขี้เกียจวิธีที่ดีที่สุดคือใช้เพื่อหลีกเลี่ยงการติดตั้งปลั๊กอินเสริม แต่ถ้าปลั๊กอินแคชของคุณไม่รองรับการโหลดแบบขี้เกียจฉันขอแนะนำให้ใช้ปลั๊กอิน (โดยเฉพาะ WP Rocket) มิฉะนั้นฉันจะแสดงรายการปลั๊กอินการโหลดแบบขี้เกียจทางเลือกด้านล่างคุณสามารถติดตั้งทีละรายการ.

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

การแทนที่ iframe บน YouTube ด้วยภาพตัวอย่างคืออะไร?
หากคุณฝังวิดีโอลงในเว็บไซต์ WordPress ของคุณจะโหลดเฉพาะ “โปรแกรมเล่น YouTube ที่อ้วน” เท่านั้นเมื่อมีคนคลิกปุ่มเล่น อีกนัยหนึ่งสิ่งที่โหลดในตอนแรกคือภาพตัวอย่าง.

หากคุณขี้เกียจโหลดรูปภาพและวิดีโอ?
ฉันไม่ขี้เกียจโหลดภาพเพราะการโหลดภาพอย่างต่อเนื่องในขณะที่คุณเลื่อนหน้าลงอาจทำให้ผู้ใช้เกิดความรำคาญ อย่างไรก็ตามรูปภาพทั้งหมดของฉันได้รับการปรับให้เหมาะสมเป็น 100% ใน GTmetrix ฉันขี้เกียจโหลดวิดีโอและแทนที่ iframe ด้วยภาพตัวอย่าง เนื่องจากแต่ละวิดีโอที่ฝังอาจใช้เวลาโหลด 2 วินาที (หนักกว่าภาพ) ประโยชน์ของการโหลดวิดีโอที่ขี้เกียจจึงมีความสำคัญ.

1. WP Rocket

WP Rocket เป็นตัวเลือกอันดับ 1 ของฉันสำหรับการโหลดขี้เกียจและเป็นปลั๊กอินแค # 1 ในโพล Facebook.

เนื่องจากมีการโหลดในตัวอย่างเกียจคร้านหมายความว่าคุณไม่จำเป็นต้องติดตั้งปลั๊กอินเพิ่มเติม นั่นคือประโยชน์ทั้งหมดของ WP Rocket; มันมาพร้อมกับคุณสมบัติมากกว่าปลั๊กอินแคชอื่น ๆ (ส่งผลให้โหลดเร็วขึ้นและคะแนน GTmetrix) แต่มีปลั๊กอินน้อยกว่าในเว็บไซต์ของคุณ WP Rocket มีมากมาย เอกสารเกี่ยวกับการโหลดขี้เกียจ และกำหนดการตั้งค่า WP Rocket.

จรวด WP

วิธีการเปิดใช้งาน Lazy Load ใน WP Rocket
หากต้องการเปิดใช้งานการโหลดขี้เกียจใน WP Rocket ให้ไปที่การตั้งค่า > จรวด WP > สื่อ > LazyLoad. คุณสามารถเปิดใช้งานสำหรับรูปภาพ iframes และวิดีโอและแทนที่ YouTube iframe ด้วยภาพตัวอย่าง.

Lazy Load Images WP Rocket

2. เครื่องมือเพิ่มประสิทธิภาพ SG

โรคติดต่อระหว่างประเทศ แนะนำการโหลดแบบขี้เกียจในการอัปเดตครั้งใหญ่ของพวกเขา เครื่องมือเพิ่มประสิทธิภาพ SG.

แน่นอนว่าคุณต้องเป็นลูกค้าของ SiteGround เพื่อใช้งานปลั๊กอินนี้ (ซึ่งฉันจะทำเพื่อแชร์โฮสติ้งเพราะพวกเขาได้รับการจัดอันดับเป็นโฮสต์ # 1 ในโพล Facebook มากกว่า 20 รายการ) SG Optimizer เปรียบได้กับ WP Rocket แต่ไม่ได้มีคุณสมบัติเกือบเท่ากัน ดังนั้นหากคุณใช้ SiteGround สำหรับโฮสต์ของคุณฉันจะยังคงชอบ WP Rocket มากกว่า SG Optimizer ของพวกเขา.

เครื่องมือเพิ่มประสิทธิภาพ SiteGround SG

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

SG Optimizer Lazy Loading

3. W3 Total Cache

หากคุณใช้แคชรวมของ W3 อยู่แล้วพวกเขาก็จะมี ตัวเลือกการโหลดขี้เกียจ.

W3 Total Cache ถูกพิจารณาว่าถูกยกเลิกในบางครั้ง แต่ผู้พัฒนาได้เริ่มต้นเพื่อรักษาปลั๊กอินของเขา ฉันมีบทช่วยสอนมากมายสำหรับการกำหนดการตั้งค่า W3 Total Cache.

ปลั๊กอินแคชรวมของ W3

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

W3 Total Cache Lazy Loading

4. Litespeed Cache

แคชของ Litepseed ขี้เกียจโหลด จะทำงานเช่นกัน (Litespeed เป็นปลั๊กอินแคชที่ผ่านการตรวจสอบเป็นอย่างดี).

ปลั๊กอินแคช LiteSpeed

วิธีการเปิดใช้งาน Lazy Load ใน LiteSpeed ​​Cache
หากต้องการเปิดใช้งานการโหลดใน LiteSpeed ​​Cache ให้ไปที่ LiteSpeed ​​Cache > การตั้งค่า > สื่อ > การตั้งค่าสื่อ. ที่นี่คุณสามารถเปิดใช้งานภาพโหลดที่ขี้เกียจ, iframes, ไม่รวมรูปภาพ, ร้องขอการปรับให้เหมาะสมโดยอัตโนมัติผ่านงาน cron, รวมถึงไลบรารี Javascript แบบอินไลน์, และสลับการตั้งค่าอื่น ๆ.

วิดีโอโหลดรูปภาพขี้เกียจ Litespeed แคช

5. ประสิทธิภาพที่รวดเร็ว

ประสิทธิภาพการทำงานที่รวดเร็ว เป็นอีกหนึ่งปลั๊กอินแคชที่รองรับการโหลดขี้เกียจ Swift ได้รับการวิจารณ์ที่ดีในกลุ่ม Facebook WordPress Speed ​​Up แต่ความเห็นในหน้าปลั๊กอินของ WordPress นั้นมีเพียงประมาณ 4 ดาวเท่านั้น ฉันยังไม่ได้ลองใช้ Swift Performance ฉันมีความสุขอย่างสมบูรณ์กับ WP Rocket.

ปลั๊กอิน Swift Performance Lite

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

Lazy Load Images ประสิทธิภาพที่รวดเร็ว

6. ลดขนาดอัตโนมัติ

การเพิ่มประสิทธิภาพอัตโนมัติมักใช้กับโฮสต์เช่น GoDaddy และ WP Engine ซึ่งมีระบบแคชในตัวและ ปลั๊กอินแคชบัญชีดำ. ในกรณีนี้ (เนื่องจากคุณต้องการดูแลการเพิ่มประสิทธิภาพความเร็วอื่น ๆ ) การเพิ่มประสิทธิภาพอัตโนมัติมักเป็นปลั๊กอินแบบไปสู่ หนึ่งในคุณสมบัติมากมายคือ ขี้เกียจโหลด, แต่มันยังช่วยให้คุณเพิ่มประสิทธิภาพ HTML, CSS, JavaScript และ Google Fonts.

ปลั๊กอินลดขนาดอัตโนมัติ

วิธีการเปิดใช้งาน Lazy Load In Autoptimize
หากต้องการเปิดใช้งานการโหลดในการย่อขนาดอัตโนมัติให้ไปที่การตั้งค่า > ภาพ > รูปภาพโหลดขี้เกียจ คุณยังมีตัวเลือกในการใช้ CDN ของ ShortPixel สำหรับการปรับภาพให้ดีที่สุด (นี่คือปลั๊กอินที่ฉันใช้).

Lazy Load Images ปรับขนาดอัตโนมัติ

7. Smush

Smush เป็นปลั๊กอินเสริมประสิทธิภาพของภาพที่ รองรับการโหลดขี้เกียจ. ได้รับการพัฒนาโดย WPMU แต่ฉันใช้ ShortPixel สำหรับการบีบอัดแบบไม่สูญเสียข้อมูลเนื่องจากเป็นการใช้งานเพียงอย่างเดียวที่ทำให้ภาพของฉันเป็น 100% ใน GTmetrix (และฉันได้ทดสอบปลั๊กอินปรับแต่งภาพจำนวนมาก).

ปลั๊กอิน Smush

วิธีการเปิดใช้งาน Lazy Load In Smush
หากต้องการเปิดใช้งานการโหลดใน Smush ให้ไปที่ Smush > แผงควบคุม > โหลดขี้เกียจ คุณสามารถเลือกประเภทไฟล์ที่คุณต้องการให้โหลดแบบสันหลังยาว (.jpeg, png, .gif, .svg, iframe) และคุณต้องการเปิดใช้งานสำหรับเนื้อหาวิดเจ็ตรูปย่อ Gravatars หรือไม่ มันยังมีการตั้งค่าภาพเคลื่อนไหวที่ขี้เกียจ.

Smush Lazy Load

8. Lazy Load โดย WP Rocket

โหลดขี้เกียจโดย WP Rocket ดีถ้าคุณไม่ได้ใช้ WP Rocket แต่ต้องการขี้เกียจโหลดภาพ.

ปลั๊กอินโหลดขี้เกียจ

วิธีการเปิดใช้งานการโหลด Lazy ในการโหลด Lazy โดย WP Rocket
ไปที่การตั้งค่า > LazyLoad คุณมีตัวเลือกในการโหลดรูปภาพที่ขี้เกียจ iframes & วิดีโอและแทนที่วิดีโอ YouTube ด้วยภาพขนาดย่อ ไม่มีการตั้งค่ามากมายที่จะกำหนดค่า โดยส่วนตัวฉันหวังว่าจะมีมากขึ้น บางทีนั่นอาจเป็นสาเหตุว่าทำไมปลั๊กอินสำหรับโหลดแบบสันหลังยาวนี้ไม่มีรีวิวที่ดีที่สุด.

โหลดขี้เกียจโดย WP Rocket

9. A3 Lazy Load

A3 Lazy Load รองรับการโหลดทั้งภาพและวิดีโออย่างขี้เกียจ.

a3 Lazy Load Plugin

วิธีการเปิดใช้งานการโหลด Lazy ในการโหลด Lazy A3
หากต้องการเปิดใช้งานการโหลดใน A3 Lazy Load ให้ไปที่การตั้งค่า > A3 Lazy Load คุณสามารถกำหนดการตั้งค่าสำหรับการโหลดภาพที่ขี้เกียจ, วิดีโอ, iframe, Gravatars และเลือกพื้นที่ของเว็บไซต์ที่คุณต้องการให้การโหลดแบบขี้เกียจใช้ (รวมถึงมือถือ) นอกจากนี้ยังมีตัวเลือกเพื่อเปิดใช้งานเอฟเฟ็กต์การโหลดแบบขี้เกียจสีพื้นหลังการโหลดและตัวเลือกเพื่อยกเว้น URL และประเภทโพสต์.

a3 การตั้งค่า Lazy Load

10. BJ Lazy Load

BJ Lazy Load ดูเหมือนจะไม่ได้รับการดูแลอย่างดีดังนั้นฉันอาจจะใช้ปลั๊กอินอื่น.

ปลั๊กอิน BJ Lazy Load

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

การตั้งค่าการโหลด BJ Lazy

11. Lazy Load สำหรับรูปภาพ

โหลดขี้เกียจสำหรับรูปภาพ เป็นสิ่งที่ดีถ้าคุณต้องการทำเพื่อภาพเท่านั้น.

ปลั๊กอิน Lazy Load สำหรับรูปภาพ

วิธีการเปิดใช้งาน Lazy Load In สำหรับรูปภาพ
ไม่มีการตั้งค่าที่จะกำหนดค่าในปลั๊กอิน Lazy Load For Images (อัตโนมัติ).

12. Lazy Load สำหรับวิดีโอ

โหลดขี้เกียจสำหรับวิดีโอ แทนที่วิดีโอแบบฝังด้วยรูปภาพตัวอย่างที่คลิกได้.

Lazy Load สำหรับปลั๊กอินวิดีโอ

วิธีการเปิดใช้งาน Lazy Load ใน Lazy Load สำหรับวิดีโอ
หากต้องการเปิดใช้งานการโหลดใน Lazy Load For Videos ให้ไปที่การตั้งค่า > โหลดขี้เกียจสำหรับวิดีโอ เลือกเพื่อโหลด CSS / JS เฉพาะเมื่อจำเป็นปรับแต่งปุ่มเล่นและใช้ CSS ที่กำหนดเอง.

Lazy Load สำหรับปลั๊กอินวิดีโอ

13. โหลดขี้เกียจสำหรับความคิดเห็น

คุณสามารถขี้เกียจโหลดความคิดเห็นโดยใช้ โหลดขี้เกียจสำหรับความคิดเห็น เสียบเข้าไป.

วิธีนี้จะช่วยให้คำขอ HTTPs น้อยลงหากคุณมีความคิดเห็นจำนวนมากในบล็อกของคุณโดยเฉพาะอย่างยิ่งเนื่องจาก Gravatars อาจใช้เวลานานในการโหลดระหว่างคำขอของบุคคลที่สามทั้งหมด.

โหลดขี้เกียจสำหรับปลั๊กอินความคิดเห็น

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

โหลดความคิดเห็นขี้เกียจ

14. WP YouTube Lyte

WP YouTube Lyte เป็นหนึ่งในปลั๊กอินที่ฉันชอบ (และได้รับการตรวจสอบมากที่สุด) สำหรับการโหลดวิดีโอที่ขี้เกียจ มันถูกสร้างขึ้นโดยทีมงานที่ Autoptimize ซึ่งมีแนวโน้มที่จะมีความคิดเห็นปลั๊กอินที่ดีทั่ว.

ปลั๊กอิน WP YouTube Lyte

วิธีการเปิดใช้งาน Lazy Load ใน WP YouTube Lyte
หากต้องการเปิดใช้งานการโหลดใน WP YouTube Lyte ให้ไปที่การตั้งค่า > WP YouTube Lyte คว้าของคุณ รหัส YouTube API และป้อนลงในการเติมอัตโนมัติ เลือกขนาดเครื่องเล่นของคุณไม่ว่าจะรวมลิงก์ตำแหน่งผู้เล่นบังคับ HD ทำหน้าที่เป็นลิงก์ / iframes ปกติของ YouTube และเพิ่ม microdata การแคชภาพขนาดเล็กในเครื่องมักจะสามารถแก้ไขข้อผิดพลาด GTmetrix เมื่อทำการฝังวิดีโอ YouTube.

รูปขนาดย่อของ YouTube GTmetrix

การตั้งค่า YouTube Lyte

ยังต้องการความช่วยเหลือ?

ฉันมีวิดีโอที่ยอดเยี่ยมเกี่ยวกับการเพิ่มประสิทธิภาพความเร็ว WordPress:

ฉันยังมีแบบฝึกหัดสำหรับการปรับภาพให้เหมาะสมการกำหนดค่า WP Rocket ลดเวลาตอบสนองของเซิร์ฟเวอร์และอีกมากมาย ฉันสามารถรับคะแนน GTmetrix ได้ 100% (หรือใกล้เคียง) ในเกือบทุกโพสต์ของฉันโดยใช้เคล็ดลับเหล่านี้ หากคุณมีคำถามอย่าลังเลที่จะส่งความคิดเห็น – ยินดีที่จะช่วย!

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

&# x2705; ปลั๊กอินตัวใดที่ดีที่สุดสำหรับการโหลดภาพที่ขี้เกียจ?

หากคุณใช้ปลั๊กอินแคชที่รองรับการโหลดขี้เกียจอยู่แล้ว (เช่น WP Rocket, SG Optimizer, W3TC, Swift, LiteSpeed) คุณควรลองทำสิ่งนี้ก่อน มิฉะนั้นการเพิ่มขนาดอัตโนมัติหรือปลั๊กอิน Lazy Load โดย WP Rocket เป็นปลั๊กอินการโหลดแบบสันหลังยาวที่ดี.

&# x2705; สิ่งที่เกี่ยวกับการโหลดวิดีโอขี้เกียจ?

WP Rocket และปลั๊กอินแคชอื่น ๆ ให้คุณโหลดวิดีโออย่างขี้เกียจและแทนที่ iframe ของ YouTube ด้วยภาพตัวอย่าง มิฉะนั้น WP YouTube Lyte จะทำงาน.

&# x2705; การโหลดที่ขี้เกียจจะส่งผลกระทบต่อประสบการณ์ของผู้ใช้?

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

&# x2705; การโหลดขี้เกียจทำอะไร?

การโหลดที่ขี้เกียจจะเพิ่มความเร็วในการโหลดครั้งแรกด้วยการรอโหลดภาพและวิดีโอจนกว่าผู้ใช้จะเลื่อนหน้าลงและเห็นจริง.

&# x2705; วิธียกเลิกการโหลดขี้เกียจในบางหน้า?

ปลั๊กอินส่วนใหญ่ให้คุณทำสิ่งนี้ ตัวอย่างเช่นหากคุณใช้ WP Rocket และคุณแก้ไขหน้าหรือโพสต์คุณจะเห็นตัวเลือกในแดชบอร์ดของคุณเพื่อปิดการใช้งาน (หรือเปิดใช้งาน) การโหลดขี้เกียจบนเนื้อหาเฉพาะนั้น.

ไชโย,
ทอม

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map