ขี้เกียจโหลดวิดีโอบน WordPress

ต้องการ Lazy Load Video บน WordPress หรือไม่?

สื่อเป็นกลยุทธ์ที่สร้างผลกระทบในการทำให้เนื้อหาของคุณน่าตื่นเต้น

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

ข้อเสียเพียงอย่างเดียวคือไฟล์สื่อมีขนาดใหญ่และใช้เวลาในการโหลดนานกว่าข้อความ

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

Lazy Loading ในโลกคืออะไร?

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

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

กระบวนการนี้มีประสิทธิภาพอย่างมากในการเร่งเวลา Onload ของ URL ในเว็บไซต์ของคุณ

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

โปรดดูคำอธิบายด้านล่างว่าแต่ละข้อแตกต่างกันอย่างไร

เวลาออนโหลดคืออะไร?

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

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

อย่างไรก็ตาม ข้อบกพร่องสำคัญประการหนึ่งที่พบกับ Onload Time คือองค์ประกอบบางอย่างของการโหลดหน้าเว็บอาจไม่สามารถทำให้ทันเวลาก่อนที่เหตุการณ์ทริกเกอร์จะเริ่มทำงาน เช่น ไฟล์ Javascript ภาพหมุน หรือฟังก์ชัน/เนื้อหาถูกตั้งค่าให้หน่วงเวลา ดังนั้น โหลดในลำดับเฉพาะ

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

เวลาที่โหลดเต็มที่คืออะไร?

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

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

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

คุณควบคุมเวลาในการโหลดได้อย่างเต็มที่หรือไม่?

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

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

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

WordPress Speed ​​Optimization สิ่งที่คุณสามารถควบคุมได้

1. สภาพแวดล้อมการโฮสต์
2. อัพเดตซอฟต์แวร์
3. ธีมที่ใช้งาน
4. ปลั๊กอินที่ใช้งานอยู่
5. การเพิ่มประสิทธิภาพของเนื้อหา

กลับไปที่ Lazy Load Video บน WordPress

ดังนั้นในรายการด้านบนเกี่ยวกับการเพิ่มประสิทธิภาพความเร็วของ WordPress สิ่งที่คุณควบคุมได้ในรายการสุดท้ายคือการปรับเนื้อหาให้เหมาะสม

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

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

การทดลองเริ่มต้นที่นี่

เราดำเนินการต่อไปและสร้างการติดตั้ง WordPress เริ่มต้นและภายในนั้นเพื่อแยกหน้า

หน้าหนึ่งมีวิดีโอ YouTube แบบฝังซึ่งฝังโดยใช้ตัวเลือกการฝังแกนหลักของ WordPress โดยเพียงแค่วางลิงก์ไปยังวิดีโอ YouTube ในตัวแก้ไข Gutenberg ซึ่งจะสร้างวิดีโอ YouTube ที่ฝังไว้บนหน้า

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

ดูด้านล่างที่ความแตกต่างที่ส่ายไปมาระหว่างสองขั้นตอนในการแสดงวิดีโอในเนื้อหา WordPress ของคุณ

ตัวอย่างหน้าวิดีโอที่ฝังตัว

ภาพด้านล่างคือการทดสอบการแสดงภาพความเร็วที่ถ่ายที่ GTmetrix ของหน้าเว็บที่มีการฝังวิดีโอ YouTube แบบเดิม

โปรดใส่ใจกับเวลาโหลดและเวลาโหลดเต็มที่ด้านล่าง

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

ตัวอย่างหน้าวิดีโอโหลดแบบขี้เกียจ

ภาพด้านล่างคือการทดสอบการแสดงภาพความเร็วที่ถ่ายที่ GTmetrix ของหน้าเว็บที่มีวิดีโอฝังตัวโหลดแบบ Lazy Loading

โปรดใส่ใจกับเวลาโหลดและเวลาโหลดเต็มที่ด้านล่าง นี่เป็นเวลาน้อยกว่า 1 วินาทีสำหรับเวลาในการโหลดและเปรียบเทียบกับ 1 วินาทีสำหรับวิดีโอที่ฝังแบบเดิม

เวลาที่โหลดเต็มที่ยังน้อยกว่า 1 วินาทีเมื่อเทียบกับเวลาที่โหลดเต็มที่นานกว่า 3 วินาทีของวิดีโอที่ฝังตัวแบบเดิม

คุณสามารถเห็นน้ำตกทดสอบความเร็วด้านล่างว่ามีคำขอน้อยกว่า 21 คำขอที่ถูกเรียกเมื่อหน้าเว็บกำลังโหลดเนื่องจากเราขี้เกียจโหลดวิดีโอที่ฝังไว้

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

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

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

ตอนนี้คุณรู้แล้วว่า Lazy Load Video บน WordPress นั้นดี… อะไรต่อไป?

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

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

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

1. Swift Performance Pro
2. WP Rocket

ปลั๊กอินทำให้ไม่ขี้เกียจโหลดวิดีโอบน WordPress

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

ปลั๊กอิน WordPress แบบขี้เกียจเหล่านี้สำหรับวิดีโอมักจะรวมเข้ากับ YouTube และ Vimeo เท่านั้น มีโซลูชันโฮสติ้งวิดีโออื่น ๆ อีกมากมายที่คุณอาจใช้อยู่

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

เครื่องมือสุดเจ๋งฟรีสำหรับการโหลดวิดีโอบน WordPress

มีเครื่องมือออนไลน์สุดเจ๋งที่ใช้งานง่ายและฟรี ซึ่งคุณสามารถใช้ URL ที่เปิดใช้งาน iFrame และตั้งค่าข้อมูลโค้ดที่จะโหลดแบบ Lazy Loading ได้

ค่าผ่านทางนี้เรียกว่า IFRAMELY และสามารถใช้ได้ฟรีที่ https://iframely.com/embed

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

แค่ปิดท้าย

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

หากคุณมีคำถามใด ๆ เกี่ยวกับสิ่งที่กล่าวถึงที่นี่ โปรดแสดงความคิดเห็นด้านล่าง