במודול הקודם למדתם כמה טכניקות ביצועים שקשורות לתמונות, שהן סוג משאב נפוץ באינטרנט שיכול לצרוך רוחב פס משמעותי אם לא מתחשבים בהן ולוקחים בחשבון את נקודת המבט של המשתמש.
עם זאת, תמונות הן לא סוג המדיה היחיד הנפוץ באינטרנט. סרטונים הם
סוג מדיה פופולרי נוסף שבו משתמשים לעיתים קרובות בדפי אינטרנט. לפני שבוחנים כמה מהאופטימיזציות האפשריות, חשוב להבין קודם איך פועל הרכיב <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, 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 Overer 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 להטמעה, שיוחלף בהטמעת הסרטון בפועל כשהמשתמש יקיים איתו אינטראקציה.
הדגמות וידאו
בוחנים את הידע
הסדר של רכיבי <source> בתוך רכיב הורה מסוג <video> לא קובע
איזה משאב וידאו יורד בסופו של דבר.
המאפיין poster של האלמנט <video>
נחשב למועמד LCP.
השלב הבא: אופטימיזציה של גופני אינטרנט
השלב הבא בסקירה שלנו בנושא אופטימיזציה של סוגים מסוימים של משאבים הוא גופנים. בדרך כלל מייחסים חשיבות לאופטימיזציה של הגופנים באתר, אבל יכולה להיות לה השפעה משמעותית על מהירות הטעינה הכוללת של האתר ועל מדדים כמו LCP ו-Cumulative Layout Shift (CLS).