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