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