วิธีที่มีประสิทธิภาพที่สุดในการฝังวิดีโอบน WordPress

เผยแพร่แล้ว: 2024-03-04

สารบัญ
WordPress พร้อมวิดีโอ: การทดสอบ Core Web Vital
คุณต้องแก้ไขปัญหานี้อย่างไร?
สรุป

อ่า คุณจำสมัยที่การเชื่อมต่อผ่านสายโทรศัพท์และ Edge (2G) เป็นเรื่องหรูหรา และการดูวิดีโอบน YouTube ดูเหมือนจะทดสอบความอดทนของเราหรือไม่

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

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

นำเสนอสถานการณ์การใช้วิดีโอบนเว็บไซต์

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

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

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

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

มันไม่ใช่ข้อความที่ประดิษฐ์ขึ้น เราต้องการปล่อยให้ตัวเลขและผลลัพธ์บอกความจริง


WordPress พร้อมวิดีโอ: การทดสอบ Core Web Vital

มาดูการทดสอบและผลลัพธ์กันดีกว่าโดยไม่ต้องลากหรือคุยโม้อีกต่อไป

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

ผลลัพธ์มีดังนี้:

image 8 The Most Efficient Method To Embed Videos On WordPress
  • คุณจะเห็นว่าคะแนนเป็น 100 % พร้อมสัญญาณสีเขียว และตัวชี้วัดทั้งหมดแสดงการตอบรับเชิงบวกสำหรับทั้งอุปกรณ์เคลื่อนที่และเดสก์ท็อป

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

image 9 The Most Efficient Method To Embed Videos On WordPress
  • สำหรับวิดีโอเดียว คะแนนลดลงเหลือ 65% และเมตริกอื่นๆ ทั้งหมดก็เป็นไปตามนั้น ลดลงอย่างมากถึง 35% ซึ่งเป็นแนวโน้มที่อาจแย่ลงหากมีการเพิ่มวิดีโอเพิ่มเติม

ตอนนี้คุณอาจกำลังคิดว่าอะไรคือวิธีแก้ปัญหา?


คุณต้องแก้ไขปัญหานี้อย่างไร?

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

1. เลือกแพลตฟอร์มการโฮสต์วิดีโอที่มีชื่อเสียง

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

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

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

2. ฝังวิดีโอ YouTube โดยไม่มีคุกกี้

คุณอาจแปลกใจที่รู้ว่านอกเหนือจากการฝัง YouTube แบบมาตรฐานแล้ว ยังมีเวอร์ชันพิเศษที่เรียกว่า youtube-nocookie.com อีกด้วย

การฝังวิดีโอ YouTube จากเวอร์ชันมาตรฐานจะมีองค์ประกอบที่ไม่ต้องการอื่นๆ มากมาย เช่น คุกกี้ สคริปต์ ฯลฯ ซึ่งไม่จำเป็น ดังนั้น เพื่อให้มีประสิทธิภาพมากขึ้น YouTube จึงเปิดตัวเวอร์ชัน youtube-nocookie.com ซึ่งเบากว่าและไม่ส่งผลต่อคะแนนความเร็วหน้าเว็บของคุณมากนัก

นี่คือข้อเท็จจริงที่น่าสนใจเกี่ยวกับ Youtube-nocookie.com

  • เป็นโดเมนทางเลือกสำหรับการฝังวิดีโอ YouTube
  • โดเมนนี้ใช้เพื่อฝังวิดีโอโดยไม่ต้องตั้งค่าคุกกี้เพื่อการติดตาม
  • การฝัง YouTube ตามปกติ (youtube.com) อาจตั้งค่าคุกกี้บนเบราว์เซอร์ของผู้ดู
  • โดเมน “youtube-nocookie.com” ให้บริการโปรแกรมเล่นแบบฝังโดยไม่ต้องตั้งค่าคุกกี้ใดๆ
  • มีประโยชน์สำหรับเว็บไซต์ที่ให้ความสำคัญกับความเป็นส่วนตัวของผู้ใช้และมีเป้าหมายที่จะลดการใช้คุกกี้ให้เหลือน้อยที่สุด
  • การใช้ “youtube-nocookie.com” ช่วยให้มั่นใจได้ว่าวิดีโอที่ฝังไว้จะไม่มีส่วนช่วยในการติดตามผู้เยี่ยมชมเว็บไซต์โดยไม่จำเป็น

สิ่งที่คุณต้องทำก็แค่แก้ไข URL ของวิดีโอ YouTube โดยแทนที่ “youtube.com” ด้วย “youtube-nocookie.com” เท่านี้ก็พร้อมใช้งานแล้ว

3. ใช้ปลั๊กอิน LazyLoad

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

นี่คือสิ่งที่เกิดขึ้น:

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

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


อ่าน: 22 วิธีที่ดีที่สุดในการเพิ่มประสิทธิภาพ WordPress


4.เทคนิคซุ้ม

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

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

เพื่อการอ้างอิงและความเข้าใจที่ดีขึ้น นี่คือตัวอย่าง

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

Lazy Load by WP Rocket

หากวิธีไลท์บ็อกซ์นี้ไม่เหมาะกับคุณ ให้ใช้ปลั๊กอิน WordPress ยอดนิยมชื่อ ” ปลั๊กอิน LazyLoad “ ทำงานร่วมกับ oEmbed และแทนที่วิดีโอ YouTube และ Vimeo ที่ฝังไว้ด้วยภาพตัวอย่างที่คลิกได้


สรุป

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

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