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