ביצועי הסרטון

במודול הקודם למדתם על טכניקות לשיפור הביצועים שקשורות לתמונות. תמונות הן סוג משאב שנמצא בשימוש נרחב באינטרנט, והן יכולות לצרוך רוחב פס משמעותי אם לא מקפידים לבצע אופטימיזציה שלהן ולתת את הדעת על אזור התצוגה של המשתמש.

עם זאת, תמונות הן לא סוג המדיה היחיד שמוצג בדרך כלל באינטרנט. סרטונים הם סוג פופולרי נוסף של מדיה שמשמש לעיתים קרובות בדפי אינטרנט. לפני שמתחילים לבדוק אופטימיזציות אפשריות, חשוב להבין קודם איך <video>האלמנט פועל.

קובצי מקור של סרטונים

כשעובדים עם קובצי מדיה, הקובץ שמזוהה במערכת ההפעלה (.mp4,‏ .webm ועוד) נקרא קונטיינר. מאגר תגים מכיל זרם אחד או יותר. ברוב המקרים, זה יהיה הווידאו וזרם האודיו.

אפשר לדחוס כל זרם באמצעות קודק. לדוגמה, video.webm יכול להיות מאגר WebM שמכיל זרם וידאו דחוס באמצעות VP9, וזרם אודיו דחוס באמצעות Vorbis.

חשוב להבין את ההבדל בין קונטיינרים לבין קודקים, כי כך אפשר לדחוס את קובצי המדיה באמצעות רוחב פס קטן משמעותית, מה שמוביל לזמני טעינה קצרים יותר של הדף, וגם יכול לשפר את המהירות שבה נטען רכיב התוכן הכי גדול (LCP) של הדף, שהוא מדד שמתמקד במשתמש ואחד משלושת 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

אם רוצים לבצע שינויים נוספים, אפשר להשתמש בדגל -crf ב-FFmpeg כשמבצעים דחיסה של סרטונים בלי להשתמש בקידוד עם קצב העברת נתונים משתנה. ‫-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 Archive, ‏ 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 היא placeholder של תמונה באיכות נמוכה, כמו הפריים הראשון של הסרטון. אחרי שהסרטון מופיע באזור התצוגה, הדפדפן מתחיל להוריד אותו. השינוי הזה יכול לשפר את זמני הטעינה של התוכן באזור התצוגה הראשוני. החיסרון הוא שאם משתמשים בתמונה poster בשביל autoplay, המשתמשים מקבלים תמונה שמוצגת רק לזמן קצר עד שהסרטון נטען ומתחיל לפעול.

הפעלה ביוזמת המשתמש

בדרך כלל, הדפדפן מתחיל להוריד קובץ וידאו ברגע שמנתח ה-HTML מגלה את הרכיב <video>. אם יש לכם <video> אלמנטים שבהם המשתמש מפעיל את ההפעלה, כנראה שלא תרצו שההורדה של הסרטון תתחיל עד שהמשתמש יבצע אינטראקציה עם הסרטון.

אפשר להשפיע על מה שמורידים עבור פריטים מסוג סרטונים באמצעות המאפיין preload של הרכיב <video>:

• ההגדרה preload="none" מודיעה לדפדפן שאף אחד מהתכנים של הסרטון לא צריך להיטען מראש.
• ההגדרה preload="metadata" מאחזרת רק מטא-נתונים של הסרטון, כמו משך הסרטון ואולי מידע שטחי אחר.

ההגדרה preload="none" היא כנראה האפשרות המועדפת אם אתם טוענים סרטונים שהמשתמשים צריכים להפעיל כדי לצפות בהם.

כדי לשפר את חוויית המשתמש במקרה כזה, אפשר להוסיף poster תמונה. כך המשתמש מקבל הקשר לגבי נושא הסרטון. בנוסף, אם תמונת הפוסטר היא רכיב ה-LCP, אפשר להגדיל את posterהעדיפות של התמונה<link rel="preload"> באמצעות הרמז <link rel="preload"> יחד עם fetchpriority="high":

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

טעינה מדורגת

מאפיין חדש יחסית שנוסף לביצועי הסרטונים הוא loading=lazy. בדומה לטעינה עצלה של תמונות ברמת הדפדפן ולטעינה עצלה של iframe, המאפיין הזה מאפשר טעינה עצלה של סרטונים בהורדות של poster ושל preload.

אם משתמשים במאפיין poster יחד עם preload="none" או preload="metadata", אפשר למנוע את הורדת הסרטון כברירת מחדל. המאפיין loading=lazy דוחה אפילו את ההורדה של תמונת הפוסטר והמטא-נתונים עד שהסרטון נמצא באזור התצוגה או מתקרב אליו.

הטמעות

בהתחשב בכל המורכבות שקיימת באופטימיזציה של תוכן וידאו ובהצגתו בצורה יעילה, הגיוני לרצות להפחית עומס את הבעיה לשירותי וידאו ייעודיים כמו YouTube או Vimeo. שירותים כאלה מבצעים אופטימיזציה של הצגת הסרטונים, אבל להטמעת סרטון משירות של צד שלישי יכולה להיות השפעה משלה על הביצועים, כי נגני הווידאו המוטמעים יכולים לעיתים קרובות להציג הרבה משאבים נוספים, כמו JavaScript.

בהתחשב במציאות הזו, הטמעות של סרטונים של צד שלישי יכולות להשפיע באופן משמעותי על הביצועים של הדף. על פי HTTP Archive, הטמעות של YouTube חוסמות את ה-main thread למשך יותר מ-1.7 שניות באתר הממוצע. חסימה של ה-thread הראשי למשך תקופות ארוכות היא בעיה חמורה בחוויית המשתמש, שיכולה להשפיע על מהירות התגובה לאינטראקציה באתר (INP). עם זאת, אפשר להגיע לפשרה: לא לטעון את ההטמעה באופן מיידי במהלך טעינת הדף הראשונית, ובמקום זאת ליצור פלייסהולדר להטמעה שמוחלף בהטמעת הווידאו בפועל כשהמשתמש מקיים איתה אינטראקציה.

הדגמות של סרטונים

בוחנים את הידע

השלב הבא: אופטימיזציה של גופני אינטרנט

הנושא הבא בסדרת המאמרים שלנו על אופטימיזציה של סוגים ספציפיים של משאבים הוא גופנים. אופטימיזציה של הגופנים באתר היא פעולה שלעתים קרובות מתעלמים ממנה, אבל היא יכולה להשפיע באופן משמעותי על מהירות הטעינה הכוללת של האתר ועל מדדים כמו LCP ושינוי פריסה מצטבר (CLS).