ประสิทธิภาพของวิดีโอ

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

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

ไฟล์แหล่งที่มาของวิดีโอ

เมื่อทำงานกับไฟล์สื่อ ไฟล์ที่คุณรู้จักในระบบปฏิบัติการ (.mp4, .webm และอื่นๆ) เรียกว่าคอนเทนเนอร์ คอนเทนเนอร์มี 1 รายการ สตรีมขึ้นไป ในกรณีส่วนใหญ่ นี่จะเป็นสตรีมวิดีโอและเสียง

คุณบีบอัดแต่ละสตรีมโดยใช้ตัวแปลงรหัสได้ ตัวอย่างเช่น video.webm อาจเป็น คอนเทนเนอร์ WebM ที่มีสตรีมวิดีโอที่บีบอัดโดยใช้ VP9 และเสียง สตรีมที่บีบอัดโดยใช้ Vorbis

การเข้าใจความแตกต่างระหว่างคอนเทนเนอร์และตัวแปลงรหัสนั้นมีประโยชน์ เนื่องจาก จะช่วยให้คุณสามารถบีบอัดไฟล์สื่อโดยใช้แบนด์วิดท์น้อยลงอย่างมาก ซึ่งทำให้เวลาในการโหลดหน้าเว็บโดยรวมลดลง รวมทั้ง Largest Contentful Paint (LCP) ของหน้าเว็บ ซึ่งเป็นเมตริกที่เน้นผู้ใช้เป็นหลัก 1 ใน 3 ของ Core Web Vitals

วิธีหนึ่งในการบีบอัดไฟล์วิดีโอคือการใช้ FFmpeg ดังนี้

ffmpeg -i input.mov output.webm

คำสั่งก่อนหน้าแม้ว่าจะเป็นแบบพื้นฐานเมื่อใช้ FFmpeg จะใช้ input.mov ไฟล์และแสดงผลไฟล์ output.webm โดยใช้ FFmpeg เริ่มต้น ตัวเลือก คำสั่งก่อนหน้าจะแสดงไฟล์วิดีโอขนาดเล็กที่ใช้งานได้ในอุปกรณ์ทุกประเภท เบราว์เซอร์ที่ทันสมัย การปรับแต่งวิดีโอหรือตัวเลือกเสียงที่ FFmpeg นำเสนออาจทำได้ จะช่วยคุณลดขนาดไฟล์ของวิดีโอลงไปอีก ตัวอย่างเช่น หากคุณคือ ใช้องค์ประกอบ <video> เพื่อแทนที่ GIF คุณควรนำแทร็กเสียงออก

ffmpeg -i input.mov -an output.webm

หากต้องการปรับแต่งเพิ่มเติมอีกเล็กน้อย FFmpeg จะเสนอแฟล็ก -crf เมื่อ การบีบอัดวิดีโอโดยไม่ใช้การเข้ารหัสอัตราบิตที่แปรผันได้ -crf ย่อมาจาก ปัจจัยอัตราคงที่ นี่เป็นการตั้งค่าที่ปรับระดับของ โดยจะยอมรับจำนวนเต็มภายในช่วงที่กำหนด

ตัวแปลงรหัส เช่น H.264 และ VP9 รองรับ Flag -crf แต่การใช้งานจะขึ้นอยู่กับ ตัวแปลงรหัสที่คุณใช้อยู่ อ่านข้อมูลเพิ่มเติมได้ที่ปัจจัยอัตราคงที่ของ เข้ารหัสวิดีโอใน H.264 รวมทั้งคุณภาพคงที่เมื่อเข้ารหัสวิดีโอใน VP9

หลายรูปแบบ

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

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

เนื่องจากเบราว์เซอร์สมัยใหม่ทั้งหมดรองรับตัวแปลงรหัส H.264 จึงสามารถใช้ MP4 เป็น เบราว์เซอร์สำรองสำหรับเบราว์เซอร์รุ่นเก่า WebM เวอร์ชันสามารถใช้ตัวแปลงรหัส AV1 ที่ใหม่กว่า ซึ่งยังไม่มีการรองรับในวงกว้าง หรือตัวแปลงรหัส VP9 รุ่นเก่ากว่า รองรับได้ดีกว่า AV1 แต่มักจะบีบอัดได้ไม่ดีเท่ากับ AV1

แอตทริบิวต์ poster

เพิ่มภาพโปสเตอร์ของวิดีโอโดยใช้แอตทริบิวต์ poster ใน <video> ซึ่งบอกผู้ใช้ว่าเนื้อหาวิดีโออาจมีอะไรบ้างก่อนที่จะเล่น เริ่มต้น:

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

เล่นอัตโนมัติ

จากข้อมูลของ HTTP Archive 20% ของวิดีโอทั่วทั้งอินเทอร์เน็ตมี autoplay ระบบจะใช้ autoplay เมื่อต้องเล่นวิดีโอ ทันที เช่น เมื่อใช้เป็นพื้นหลังวิดีโอหรือใช้แทนสำหรับ GIF แบบเคลื่อนไหว

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

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

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

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

การเล่นที่เริ่มต้นโดยผู้ใช้

โดยทั่วไป เบราว์เซอร์จะเริ่มดาวน์โหลดไฟล์วิดีโอทันทีที่ HTML โปรแกรมแยกวิเคราะห์ค้นพบองค์ประกอบ <video> หากคุณมีองค์ประกอบ <video> ที่มีองค์ประกอบ ผู้ใช้ เริ่มเล่น คุณอาจไม่ต้องการให้วิดีโอเริ่มการดาวน์โหลด จนกว่าผู้ใช้จะโต้ตอบกับแท็ก

คุณสามารถส่งผลกระทบต่อสิ่งที่ดาวน์โหลดสำหรับทรัพยากรของวิดีโอได้โดยใช้ <video> แอตทริบิวต์ preload ขององค์ประกอบ:

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

การตั้งค่า preload="none" น่าจะเป็นกรณีที่เหมาะที่สุดหากคุณกำลังโหลด วิดีโอที่ผู้ใช้ต้องเริ่มเล่น

คุณปรับปรุงประสบการณ์ของผู้ใช้ในกรณีนี้ได้โดยการเพิ่มรูปภาพ poster ซึ่งจะช่วยให้ผู้ใช้ทราบบริบทเกี่ยวกับเนื้อหาของวิดีโอ นอกจากนี้ หาก ภาพโปสเตอร์คือองค์ประกอบ LCP ของคุณ คุณเพิ่มรูปภาพ poster ลำดับความสำคัญโดยใช้คำแนะนำ <link rel="preload"> ร่วมกับ fetchpriority="high":

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

การฝัง

เมื่อพิจารณาถึงความซับซ้อนทั้งหมดในการเพิ่มประสิทธิภาพและการแสดงเนื้อหาวิดีโออย่างมีประสิทธิภาพ จึงควรกำจัดปัญหานี้ไปยังบริการด้านวิดีโอโดยเฉพาะ ในชื่อ YouTube หรือ Vimeo บริการดังกล่าวช่วยเพิ่มประสิทธิภาพการนำส่งวิดีโอให้คุณ แต่ การฝังวิดีโอจากบริการของบุคคลที่สามจะส่งผลกระทบในแบบของตนเองต่อ เนื่องจากโปรแกรมเล่นวิดีโอแบบฝังมักจะแสดง ทรัพยากรอย่าง JavaScript

ในความเป็นจริงนี้ การฝังวิดีโอของบุคคลที่สามอาจส่งผลกระทบต่อหน้าเว็บอย่างมาก ด้านประสิทธิภาพ เนื่องจาก HTTP Archive การฝัง YouTube จะบล็อกเทรดหลัก นานกว่า 1.7 วินาทีสำหรับเว็บไซต์ค่ามัธยฐาน บล็อกเทรดหลักสำหรับ เป็นระยะเวลานานเป็นปัญหาร้ายแรงเกี่ยวกับประสบการณ์ของผู้ใช้ซึ่งอาจส่งผลกระทบต่อ การโต้ตอบกับ Next Paint (INP) ของหน้าเว็บ อย่างไรก็ตาม คุณอาจประนีประนอม โดยไม่โหลดการฝังทันทีในระหว่างการโหลดหน้าเว็บครั้งแรก และแทนที่ สร้างตัวยึดตำแหน่งสำหรับการฝังซึ่งแทนที่ด้วยการฝังวิดีโอจริง เมื่อผู้ใช้โต้ตอบกับแท็ก

วิดีโอการสาธิต

ทดสอบความรู้ของคุณ

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

จริง
เท็จ

แอตทริบิวต์ poster ขององค์ประกอบ <video> ถือว่าเป็นผู้สมัคร LCP

เท็จ
จริง

ถัดไป: เพิ่มประสิทธิภาพแบบอักษรของเว็บ

หัวข้อถัดไปเกี่ยวกับความครอบคลุมในการเพิ่มประสิทธิภาพทรัพยากรแต่ละประเภทคือแบบอักษร การเพิ่มประสิทธิภาพแบบอักษรของเว็บไซต์เป็นสิ่งที่คนเรามักมองข้าม แต่ มีผลกระทบอย่างมากต่อความเร็วในการโหลดโดยรวมของเว็บไซต์ และเมตริกต่างๆ เช่น LCP และ Cumulative Layout Shift (CLS)