ในโมดูลก่อนหน้า คุณได้เรียนรู้เทคนิคด้านประสิทธิภาพบางอย่างที่เกี่ยวข้องกับ รูปภาพ ซึ่งเป็นประเภททรัพยากรที่ใช้กันอย่างแพร่หลายบนเว็บและอาจใช้ แบนด์วิดท์จำนวนมากหากไม่ระมัดระวังในการเพิ่มประสิทธิภาพและพิจารณา วิวพอร์ตของผู้ใช้
อย่างไรก็ตาม รูปภาพไม่ใช่สื่อประเภทเดียวที่พบได้ทั่วไปบนเว็บ วิดีโอเป็น
สื่ออีกประเภทหนึ่งที่ได้รับความนิยมและมักใช้ในหน้าเว็บ ก่อนที่จะดูการเพิ่มประสิทธิภาพที่เป็นไปได้บางอย่าง คุณควรทำความเข้าใจวิธีการทำงานขององค์ประกอบ <video>
ก่อน
ไฟล์ต้นฉบับของวิดีโอ
เมื่อทำงานกับไฟล์สื่อ ไฟล์ที่คุณเห็นในระบบปฏิบัติการ
(.mp4, .webm และอื่นๆ) จะเรียกว่าคอนเทนเนอร์ คอนเทนเนอร์มีสตรีมอย่างน้อย 1 รายการ ในกรณีส่วนใหญ่ สตรีมนี้จะเป็นสตรีมวิดีโอและเสียง
คุณสามารถบีบอัดแต่ละสตรีมโดยใช้ตัวแปลงรหัสได้ เช่น video.webm อาจเป็น
คอนเทนเนอร์ WebM ที่มีสตรีมวิดีโอที่บีบอัดโดยใช้ VP9 และสตรีมเสียง
ที่บีบอัดโดยใช้ Vorbis
การทำความเข้าใจความแตกต่างระหว่างคอนเทนเนอร์กับตัวแปลงรหัสมีประโยชน์เนื่องจาก ช่วยให้คุณบีบอัดไฟล์สื่อโดยใช้แบนด์วิดท์น้อยลงอย่างมาก ซึ่งจะส่งผลให้เวลาในการโหลดหน้าเว็บโดยรวมลดลง รวมถึงอาจปรับปรุง Largest Contentful Paint (LCP) ของหน้าเว็บ ซึ่งเป็นเมตริกที่เน้นผู้ใช้เป็นหลักและ เป็นหนึ่งใน 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 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 อาจเป็นตัวยึดตำแหน่งรูปภาพคุณภาพต่ำ เช่น เฟรมแรกของวิดีโอ เมื่อวิดีโอปรากฏใน Viewport เบราว์เซอร์จะเริ่ม
ดาวน์โหลดวิดีโอ ซึ่งจะช่วยปรับปรุงเวลาในการโหลดเนื้อหาภายใน
วิวพอร์ตเริ่มต้น ข้อเสียคือเมื่อใช้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 Archive การฝัง YouTube จะบล็อกเทรดหลัก นานกว่า 1.7 วินาทีสำหรับเว็บไซต์ค่ามัธยฐาน การบล็อกเทรดหลักเป็นเวลานานเป็นปัญหาด้านประสบการณ์ของผู้ใช้ที่ร้ายแรงซึ่งอาจส่งผลต่อ Interaction to Next Paint (INP) ของหน้าเว็บ อย่างไรก็ตาม คุณสามารถประนีประนอมได้โดยไม่โหลดการฝังทันทีในระหว่างการโหลดหน้าเว็บครั้งแรก และแทนที่จะทำเช่นนั้น ให้ สร้างตัวยึดตำแหน่งสำหรับการฝังซึ่งจะแทนที่ด้วยวิดีโอฝังจริง เมื่อผู้ใช้โต้ตอบกับวิดีโอ
วิดีโอสาธิต
ทดสอบความรู้ของคุณ
ลำดับขององค์ประกอบ <source> ภายในองค์ประกอบ <video> ระดับบนสุดไม่ได้กำหนดว่าระบบจะดาวน์โหลดทรัพยากรวิดีโอใดในท้ายที่สุด
ระบบจะถือว่าแอตทริบิวต์ poster ขององค์ประกอบ <video>
เป็นองค์ประกอบ LCP ที่มีสิทธิ์
ถัดไป: เพิ่มประสิทธิภาพแบบอักษรบนเว็บ
ถัดไปในการครอบคลุมเรื่องการเพิ่มประสิทธิภาพทรัพยากรบางประเภทคือแบบอักษร การเพิ่มประสิทธิภาพแบบอักษรของเว็บไซต์เป็นสิ่งที่มักถูกมองข้าม แต่ก็อาจส่งผลอย่างมากต่อความเร็วในการโหลดโดยรวมของเว็บไซต์ รวมถึงเมตริกต่างๆ เช่น LCP และ Cumulative Layout Shift (CLS)