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

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

อย่างไรก็ตาม รูปภาพไม่ได้เป็นสื่อประเภทเดียวที่มักพบเห็นในเว็บ วิดีโอเป็นสื่ออีกประเภทหนึ่งที่มักใช้ในหน้าเว็บ ก่อนที่จะดูการเพิ่มประสิทธิภาพที่เป็นไปได้บางอย่าง คุณต้องเข้าใจวิธีการทำงานขององค์ประกอบ <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 ย่อมาจาก Constant Rate Factor นี่เป็นการตั้งค่าที่ปรับระดับการบีบอัด โดยยอมรับจำนวนเต็มภายในช่วงที่ระบุ

ตัวแปลงรหัส เช่น H.264 และ VP9 รองรับแฟล็ก -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 ระบุว่า 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> ที่ผู้ใช้เริ่มเล่น คุณอาจไม่ต้องการให้วิดีโอเริ่มดาวน์โหลดจนกว่าผู้ใช้จะโต้ตอบกับวิดีโอนั้น

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

  • การตั้งค่า 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 ระบุว่า YouTube จะฝังเทรดหลักเป็นเวลานานกว่า 1.7 วินาทีสําหรับเว็บไซต์ค่ามัธยฐาน การบล็อกเทรดหลักเป็นระยะเวลานานเป็นปัญหาที่ร้ายแรงของผู้ใช้ซึ่งอาจส่งผลต่อการโต้ตอบกับ Next Paint (INP) ของหน้าเว็บ อย่างไรก็ตาม คุณไม่โหลดวิดีโอที่ฝังได้ทันทีระหว่างการโหลดหน้าเว็บครั้งแรก และสร้างตัวยึดตำแหน่งสำหรับการฝังซึ่งจะแทนที่โดยวิดีโอที่ฝังจริงเมื่อผู้ใช้โต้ตอบกับวิดีโอแทน

วิดีโอสาธิต

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

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

จริง
โปรดลองอีกครั้ง
เท็จ
ถูกต้องแล้ว!

แอตทริบิวต์ poster ขององค์ประกอบ <video> ถือเป็นตัวเลือก LCP

จริง
ถูกต้องแล้ว!
เท็จ
โปรดลองอีกครั้ง

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

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