ב-Codelab הזה, אפשר לשפר את הביצועים על ידי החלפת GIF מונפש וידאו.
מדידה ראשונה
קודם כל צריך למדוד את ביצועי האתר:
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על
מסך מלא
. - מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת דוח.
בסיום, תראו שמערכת Lighthouse סימנה את ה-GIF כ- את הבעיה בסעיף "שימוש בפורמטים של סרטונים לתוכן מונפש" ביקורת.
הורדת FFmpeg
יש כמה דרכים להמיר קובצי GIF לווידאו; במדריך הזה נשתמש FFmpeg. הוא כבר מותקן ב-VM של Glitch, ואם רוצים, אפשר לפעול לפי ההוראות האלה כדי להתקין מקומי מכונה וגם.
פתיחת המסוף
ודאו ש-FFmpeg מותקן ופועל:
- לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
- לוחצים על 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 לקחת את input, שמסומן בדגל -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.7M, וגרסת MP4 היא 551K. גרסת WebM היא 341K בלבד. זה חיסכון ענק!
צריך לעדכן את ה-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) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת דוח.
אמורה להופיע ההודעה 'שימוש בפורמטים של וידאו לתוכן אנימציה' הוא עכשיו עובר! נהדר! 💪