אתגרי שיפור טעינת וידאו באתרי אינטרנט
הבעיה של וידאו שמונע טעינת דף יעילה
שיפור טעינת וידאו הוא נושא ידוע ומוכר. וידאו הוא אחד המרכיבים הכבדים ביותר בטעינת דפים באינטרנט, ולעיתים קרובות הוא מונע מהדף להיטען במהירות מספקת. כאשר הווידאו נכלל כחלק מהטעינה הראשונית של הדף, הוא יכול להגדיל את זמן הטעינה הכולל ולפגוע בחוויית המשתמש. כתוצאה מכך, מבקרים באתר עשויים לעזוב לפני שהדף נטען במלואו, מה שמוביל להפסד משמעותי במעורבות המשתמשים ובהמרות. בעיה זו הופכת לחמורה עוד יותר במובייל, שבו משאבי הרשת מוגבלים יותר והמשתמשים מצפים לטעינה מהירה ונוחה.
מה עשינו עד כה לשיפור טעינת וידאו
עד כה, הדרך העיקרית לשפר ביצועי וידאו באתרי אינטרנט הייתה באמצעות שירותי סטרימינג כמו יוטיוב או אמזון, או על ידי הורדת המשקל, האורך או האיכות של קובץ הווידאו. גם לאחרונה הופיעו פתרונות מתקדמים עם בינה מלאכותית שמאפשרים להוריד פיקסלים מבלי לפגוע באיכות, אך מדובר בטכנולוגיות יקרות ולא תמיד ישימות לכל אתר. הפתרונות הקיימים אינם מתאימים לכל מקרה, וגורמים לאובדן חוויית המשתמש או להוצאות גדולות על טכנולוגיות מתקדמות.
חוסר היעילות בטעינת וידאו למכשירים שונים
טכניקות טעינת וידאו רבות סובלות מחוסר יעילות כאשר מדובר בהצגת וידאו לדסקטופ ולמובייל. במקרים רבים, אותו וידאו נטען גם במכשירי מובייל, למרות שגודלו וכבדותו מתאימים יותר לדסקטופ בלבד, מה שגורם לבזבוז רוחב פס וזמן טעינה יקר במובייל. במקרים גרועים אף יותר, ישנם אתרים שטוענים שתי גרסאות שונות של וידאו – אחת לדסקטופ ואחת למובייל – ואז מסתירים אחת מהן בעזרת Media Query, כך שבפועל נטענים שני הווידאויים במקביל. גישה זו מגדילה משמעותית את צריכת המשאבים ופוגעת בביצועים, במיוחד במובייל, בו כל מילה ברוחב פס היא קריטית לחוויית המשתמש.
הטכניקה לשיפור טעינת וידאו מורכבת משלושה גישות מרכזיות:
- שימוש בפורמט והגודל הנכון לכל גודל מסך: פורמט webm עבור מחשבים שולחניים ופורמט mp4 עבור מכשירים ניידים, מאחר ו-iOS לא תומך בפורמט webm.
- יצירה של אלמנט וידאו ללא src: כך הווידאו לא נטען כלל בתחילת התהליך. במקום זאת, הקישור של הווידאו נשמר במאפיין מותאם אישית (custom attribute).
- יצירה של ה src לאחר מספר שניות שנקבעות מראש בסיום הטעינה המלאה של הדף: סקריפט JavaScript לוקח את הקישור מהמאפיין המותאם והופך אותו לערך של src, כך שהווידאו מתחיל להיטען רק לאחר שהדף נטען במלואו. שיטה זו מבטיחה שזמן הטעינה הראשוני של הדף יהיה מהיר יותר ומשפרת את חוויית המשתמש.
שלב א' – המירו לפורמט והגדלים הנכונים (כולל התמונות)
- גרסת הדסקטופ – המירו את הקובץ שלכם לפורמט webm, הורידו את הקובץ והעלו לתיקיית המדיה. אנחנו משתמשים בכלי הזה.
- גרסת המובייל – צמצמו את גודל הוידאו המקורי לגודל שהמובייל דורש ולא יותר. למשל אם מדובר על וידאו ברחוב מלא אז צמצמו את הרוחב מ- 1920 ל 800 (פיקסלים) והעלו לתיקיית המדיה. אנחנו משתמשים בכלי הזה.
- הכינו תמונות פוסטר – אלו התמונות שיטענו בזמן שהוידאו בהשהייה. עשו צילום מסך לפריים הראשון של 2 הוידאויים ושמרו כתמונות והעלו לתיקיית המדיה. לכל וידאו תמונה אחרת בהתאמה (למשל אם מדובר בוידאו ברוחב מלא אז 1920px ו 800px בהתאמה)
שלב ב' – הוסיפו את הקוד את זה לקובץ הפונקציות או לתוסף snippets:
/*video maker*/
function video_maker_shortcode($atts) {
$atts = shortcode_atts(array(
'controls' => 'yes',
'desktop-version' => ",
'mobile-version' => ",
'poster-desktop' => ",
'poster-mobile' => ",
), $atts);
$desktop_url = $atts['desktop-version'];
$mobile_url = $atts['mobile-version'];
$controls = $atts['controls'] == 'yes' ? 'controls' : ";
$poster_desktop = $atts['poster-desktop'];
$poster_mobile = $atts['poster-mobile'];
$poster = wp_is_mobile() ? $poster_mobile : $poster_desktop;
$video_url = wp_is_mobile() ? $mobile_url : $desktop_url;
$output = '<div class="video-wrapper" style="display: flex;">';
$output .= '<video class="video-player" '.$controls.' autoplay muted playsinline loop poster="'.$poster.'" data-source="'.$video_url.'"></video>';
$output .= '</div>';
$output .= '<script>
window.onload = function() {
setTimeout(function() {
var videoElement = document.querySelector(".video-player");
var videoSource = videoElement.getAttribute("data-source");
videoElement.src = videoSource;
}, 400); // Adjust the delay as needed
};
</script>';
return $output;
}
שלב ג' – שימו את השורטקוד במקום בו תרצו שהוידאו ייטען
זוכרים שהעלתם לתיקיית המדיה 2 וידאויים ו- 2 תמונות? שימו את ה URL שלהם במקומות המתאימים בשורטקוד.
controls="no"
desktop-version="/video-desktop.webm"
mobile-version="/video-mobile.mp4"
poster-desktop="/poster-desktop.jpg"
poster-mobile="/poster-mobile.jpg"
]
אז איך בעצם שיפרנו את טעינת הוידאו?
- השתמשנו בפורמט הווידאו הנכון (webm לדסקטופ ו-mp4 למובייל).
- יצרנו עם שורטקוד אלמנט וידאו ללא src שמונע טעינה של הוידאו בזמן טעינת הדף (זה בעצם מתנהג כאילו אין וידאו).
- טענו את הווידאו רק לאחר השהייה מבוקרת באמצעות JavaScript.
טכניקה זו מקטינה את זמן הטעינה הראשוני של הדף, משפרת את השימוש במשאבים, ומבטיחה חוויית משתמש טובה יותר במובייל ובדסקטופ.
אתרים לדוגמא שהשתמשנו בהם בטכניקה הזאת
באתרים שונים אנחנו משנים את האופן בה הפונקציה עובדת ומוסיפים לה רבדים שונים בהתאמה אישית לצרכים. גם אתם יכולים לשחק איתה כאוות נפשכם. לדוגמא, לשים את השורטקוד ב hero של דף הבית ולתת לו מיקום אבסולוטי באמצעות CSS. לאחר מכן, להגדיר לו 100% גובה ורוחב ובכך שישמש כוידאו רקע כמו באתר הזה noahclinics.com השמיים הם הגבול אם אתם יצירתיים מספיק.
אפילו יצרנו סליידר לחלק העליון של דף הבית עם 3 סרטוני וידאו שכל אחד מהם באורך של דקה (שזה אמור להיות מאוד כבד). הטעינה החכמה מונעת מהסליידר לעכב את טעינת הדף וכך האתר המהמם הזה scpg.tv נטען במהירות.
השימוש הכי טוב לדעתנו בטעינה חכמה ושיפור טעינת וידאו הוא כאשר יש המון וידאויים בדף אחד והם גם כבדים, כמו למשל באתר הזה liron-david.com. אם תכנסו לדף הפרויקטים ותחפשו את הפרויקט של אל על, תגלו עם לא מעט וידאויים כבדים במשקל כולל של 100MB אשר יש להם אפס השפעה על זמן הטעינה.
רוצים גם אתר שנעשה על ידי מומחים שיודעים איך לשפר את הטעינה ולעצב ברמה גבוהה? אנחנו מכירים טכניקות מתקדמות כמו שהסברנו במאמר על טעינת וידאו יעילה, ומשתמשים בפתרונות שמבטיחים ביצועים מעולים וחוויית משתמש יוצאת דופן. צרו איתנו קשר ונבנה עבורכם אתר שירשים כל מבקר.
