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

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

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

קובצי מקור של סרטון

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

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

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

אחת הדרכים לדחוס קובצי וידאו היא באמצעות FFmpeg:

ffmpeg -i input.mov output.webm

הפקודה הקודמת, למרות שהיא בסיסית ככל שהיא כשמשתמשים ב-FFmpeg, לוקחת את קובץ input.mov ויוצר קובץ output.webm באמצעות ה-FFmpeg שמוגדר כברירת מחדל אפשרויות. הפקודה הקודמת מפיקה קובץ וידאו קטן יותר שפועל בכל לדפדפנים מודרניים. שינוי של הסרטון או אפשרויות האודיו ב-FFmpeg עשוי לגרום עוזרות לכם להקטין עוד יותר את גודל הקובץ של הסרטון. לדוגמה, אם באמצעות רכיב <video> כדי להחליף קובץ GIF, עליך להסיר את טראק האודיו:

ffmpeg -i input.mov -an output.webm

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

רכיבי קודק כמו 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> שבהם יש המשתמש מפעיל הפעלה, כנראה שאתם לא רוצים שהסרטון יתחיל בהורדת הסרטון. עד שהמשתמש יבצע אינטראקציה איתו.

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

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

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

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

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

הטמעות

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

בהתחשב במציאות, הטמעות סרטונים של צד שלישי יכולות להשפיע באופן משמעותי על הדף או של ביצועים. לפי הארכיון של HTTP, מערכת YouTube מטמיעה את ה-thread הראשי למשך יותר מ-1.7 שניות עבור האתר החציוני. חסימת ה-thread הראשי של פרקי זמן ארוכים הם בעיה חמורה של חוויית המשתמש, שעלולה להשפיע Interaction to Next Paint (INP). עם זאת, אתם עלולים להיתקל בסכנה על ידי לא טעינת ההטמעה מיד במהלך הטעינה הראשונית של הדף, ובמקום זאת ליצור placeholder להטמעה שיוחלף בהטמעת הסרטון עצמו. כשהמשתמש מקיים אינטראקציה איתו.

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

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

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

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