בקודלאב הזה תלמדו איך לשפר את הביצועים על ידי החלפת קובץ GIF מונפש בסרטון.
קודם מדידה
קודם כול, בודקים את ביצועי האתר:
- כדי לראות תצוגה מקדימה של האתר, מקישים על הצגת האפליקציה. לאחר מכן מקישים על מסך מלא
. - מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שהתיבה ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת הדוח.
בסיום, ה-GIF אמור להופיע בתור בעיה בבדיקת Lighthouse בנושא 'שימוש בפורמטים של וידאו לתוכן מונפש'.
הורדת FFmpeg
יש כמה דרכים להמיר קובצי GIF לסרטונים. במדריך הזה נעשה שימוש ב-FFmpeg. הוא כבר מותקן במכונה הווירטואלית של Glitch, ואפשר גם לפעול לפי ההוראות האלה כדי להתקין אותו במחשב המקומי.
פתיחת מסוף Cloud
בודקים שוב ש-FFmpeg מותקן ופועל:
- לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.
- לוחצים על 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 לקחת את הקלט, שמסומן בדגל -i, של הקובץ cat-herd.gif ולהמיר אותו לסרטון בשם cat-herd.mp4. הפעולה הזו אמורה להימשך שנייה. בסיום הפקודה, תוכלו להקליד ls שוב ולהציג שני קבצים:
$ ls
cat-herd.gif cat-herd.mp4
יצירת סרטוני WebM
קובצי MP4 קיימים מאז 1999, אבל קובצי WebM הם חדשים יחסית, והם הושקו לראשונה בשנת 2010. סרטוני WebM יכולים להיות קטנים בהרבה מסרטוני MP4, לכן מומלץ ליצור את שניהם. למרבה המזל, הרכיב <video> מאפשר להוסיף כמה מקורות, כך שאם דפדפן לא תומך ב-WebM, הוא יוכל לעבור ל-MP4.
- מריצים את הפקודה הבאה במסוף:
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
- כדי לבדוק את גודל הקבצים, מריצים את הפקודה:
ls -lh
צריך להעלות קובץ GIF אחד ושני סרטונים:
$ 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.7MB, בעוד שגודל קובץ ה-MP4 הוא 551KB וגודל קובץ ה-WebM הוא רק 341KB. זה חיסכון עצום!
עדכון ה-HTML כדי ליצור מחדש את אפקט ה-GIF
לקובצי GIF מונפשים יש שלושה מאפיינים עיקריים שסרטונים צריכים לחקות:
- הם מושמעים באופן אוטומטי.
- הם חוזרים על עצמם בלי הפסקה (בדרך כלל, אבל אפשר למנוע את החזרה על עצמם).
- הם שקטים.
למרבה המזל, אפשר ליצור מחדש את ההתנהגויות האלה באמצעות הרכיב <video>.
- בקובץ
index.html, מחליפים את השורה עם<img>ב:
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>
רכיב <video> עם המאפיינים האלה יופעל באופן אוטומטי, יופעל בלופ ללא הגבלת זמן, לא יושמע בו אודיו והוא יוצג בתוך הדף (כלומר, לא במסך מלא). כל ההתנהגויות האלה צפויות בקובצי GIF מונפשים. 🎉
ציון המקורות
כל מה שנותר לעשות הוא לציין את מקורות הווידאו. הרכיב <video> מחייב רכיב צאצא אחד לפחות מסוג <source> שמצביע על קובצי וידאו שונים שהדפדפן יכול לבחור מביניהם, בהתאם לתמיכה בפורמטים.
מעדכנים את <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>
תצוגה מקדימה
- כדי לראות תצוגה מקדימה של האתר, מקישים על הצגת האפליקציה. לאחר מכן מקישים על מסך מלא
.
חוויית השימוש אמורה להיראות זהה. עד עכשיו, הכול טוב ויפה.
אימות באמצעות Lighthouse
כשהאתר הפעיל פתוח:
- מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שהתיבה ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת הדוח.
עכשיו הבדיקה 'שימוש בפורמטים של סרטונים לתוכן מונפש' אמורה לעבור. נהדר! 💪