ในโค้ดแล็บนี้ เราจะปรับปรุงประสิทธิภาพด้วยการแทนที่ GIF แบบเคลื่อนไหวด้วยวิดีโอ
วัดก่อน
ก่อนอื่นให้วัดประสิทธิภาพของเว็บไซต์ โดยทำดังนี้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทําเครื่องหมายประสิทธิภาพในรายการหมวดหมู่
- คลิกปุ่มสร้างรายงาน
เมื่อดำเนินการเสร็จแล้ว คุณควรเห็นว่า Lighthouse แจ้งว่า GIF เป็นปัญหาในการตรวจสอบ "ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว"
ดาวน์โหลด FFmpeg
คุณสามารถแปลง GIF เป็นวิดีโอได้หลายวิธี โดยคู่มือนี้ใช้ FFmpeg โปรแกรมนี้ติดตั้งอยู่ใน VM ของ Glitch อยู่แล้ว และหากต้องการ คุณสามารถทำตามวิธีการเหล่านี้เพื่อติดตั้งโปรแกรมในเครื่องของคุณเองได้เช่นกัน
เปิดคอนโซล
ตรวจสอบอีกครั้งว่า FFmpeg ติดตั้งและทํางานอยู่
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
- คลิก Terminal (หมายเหตุ: หากปุ่ม Terminal ไม่แสดง คุณอาจต้องใช้ตัวเลือก "เต็มหน้าจอ")
- ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้
which ffmpeg
คุณควรได้รับเส้นทางไฟล์กลับคืนมา
/usr/bin/ffmpeg
เปลี่ยน GIF เป็นวิดีโอ
- ในคอนโซล ให้เรียกใช้
cd images
เพื่อเข้าสู่ไดเรกทอรีรูปภาพ - เรียกใช้
ls
เพื่อดูเนื้อหา
คุณควรเห็นข้อมูลในลักษณะนี้
$ ls
cat-herd.gif
- ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4
ซึ่งจะบอกให้ FFmpeg นำอินพุตที่แสดงด้วย Flag -i
ของไฟล์ cat-herd.gif และแปลงเป็นวิดีโอชื่อ cat-herd.mp4 ซึ่งจะใช้เวลาประมาณ 1 วินาที เมื่อคำสั่งเสร็จสิ้นแล้ว คุณควรจะพิมพ์ ls
อีกครั้งได้ และจะเห็นไฟล์ 2 ไฟล์ดังนี้
$ ls
cat-herd.gif cat-herd.mp4
สร้างวิดีโอ WebM
แม้ว่า MP4 จะใช้มาตั้งแต่ปี 1999 แต่ WebM เพิ่งเปิดตัวครั้งแรกในปี 2010 วิดีโอ WebM มีขนาดเล็กกว่าวิดีโอ MP4 มาก จึงควรสร้างทั้ง 2 รูปแบบ แต่โชคดีที่องค์ประกอบ <video>
ให้คุณเพิ่มแหล่งที่มาได้หลายแหล่ง ดังนั้นหากเบราว์เซอร์ไม่รองรับ WebM ก็จะเปลี่ยนไปใช้ MP4 ได้
- ในคอนโซล ให้เรียกใช้คำสั่งต่อไปนี้
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- หากต้องการตรวจสอบขนาดไฟล์ ให้เรียกใช้คำสั่งต่อไปนี้
ls -lh
คุณควรมี GIF 1 รายการและวิดีโอ 2 รายการ ดังนี้
$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm
โปรดทราบว่า GIF ต้นฉบับมีขนาด 3.7 ล้าน ในขณะที่เวอร์ชัน MP4 มีขนาด 551 KB และเวอร์ชัน WebM มีขนาดเพียง 341 KB ประหยัดไปได้เยอะเลย
อัปเดต HTML เพื่อสร้างเอฟเฟกต์ GIF อีกครั้ง
GIF แบบเคลื่อนไหวมีลักษณะสำคัญ 3 ประการที่วิดีโอต้องจำลองให้ได้
- โดยระบบจะเล่นโดยอัตโนมัติ
- โดยปกติแล้ววิดีโอจะเล่นวนซ้ำอย่างต่อเนื่อง แต่คุณก็ป้องกันไม่ให้เล่นวนซ้ำได้
- ไม่มีการตอบกลับ
แต่คุณสร้างลักษณะการทำงานเหล่านี้อีกครั้งได้โดยใช้องค์ประกอบ <video>
- ในไฟล์
index.html
ให้แทนที่บรรทัดที่มี<img>
ด้วยข้อความต่อไปนี้
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
องค์ประกอบ <video>
ที่ใช้แอตทริบิวต์เหล่านี้จะเล่นโดยอัตโนมัติ เล่นซ้ำแบบไม่สิ้นสุด ไม่มีเสียง และเล่นในบรรทัด (ไม่ใช่แบบเต็มหน้าจอ) ซึ่งเป็นลักษณะการทำงานทั้งหมดที่ GIF แบบเคลื่อนไหวควรมี 🎉
ระบุแหล่งที่มา
ขั้นตอนสุดท้ายคือระบุแหล่งที่มาของวิดีโอ องค์ประกอบ <video>
ต้องมีองค์ประกอบย่อย <source>
อย่างน้อย 1 รายการที่ชี้ไปยังไฟล์วิดีโอต่างๆ ที่เบราว์เซอร์จะเลือกได้ ทั้งนี้ขึ้นอยู่กับการรองรับรูปแบบ
อัปเดต <video>
ด้วยองค์ประกอบ <source>
ที่ลิงก์ไปยังวิดีโอฝูงแมว
<video autoplay loop muted playsinline>
<source src="/images/cat-herd.webm" type="video/webm">
<source src="/images/cat-herd.mp4" type="video/mp4">
</video>
Preview
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
ประสบการณ์การใช้งานควรมีลักษณะเหมือนเดิม จนถึงตอนนี้ทุกอย่างเรียบร้อยดี
ยืนยันด้วย Lighthouse
เมื่อเปิดเว็บไซต์เวอร์ชันที่เผยแพร่อยู่ ให้ทำดังนี้
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บ Lighthouse
- ตรวจสอบว่าได้เลือกช่องทําเครื่องหมายประสิทธิภาพในรายการหมวดหมู่
- คลิกปุ่มสร้างรายงาน
คุณควรเห็นว่าการตรวจสอบ "ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว" ผ่านแล้ว ไชโย 💪