שיפור זמן הטעינה של Embedded Videos עם Lite YouTube

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

שימוש בחשבון היוטיוב שלכם הוא דרך נוחה להוסיף וידאו לאתר ולהשתמש ברוחב הפס שלהם. לצערנו, הטמעה (Embedding) של סרטוני יוטיוב מאיטה את טעינת העמוד משמעותית.

במדריך זה תלמדו שיטה (אחת מיני רבות) לשפר את זמן הטעינה של סרטוני יוטיוב באופן משמעותי, כך שזמן טעינת העמוד יהיה מהיר יותר וציוני ה-Core Web Vitals של אותו עמוד בו מוטמע הסרטון ישתפרו גם כן.

הספרייה Lite YouTube Embed

הספרייה Lite YouTube Embed שכתב Paul Irish הידוע, שמה דגש מיוחד על ביצועים ויזואלים. ה-Custom Element מרנדר סרטוני יוטיוב בדיוק כמו יוטיוב אך הרבה יותר מהר (מוערך בפי 224 מהר יותר).

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

הנה ההבדלים לפי Google PageSpeed Insights:

והנה ההבדלים לפי webpagetest.org:

כפי שאתם רואים, קיים שיפור משמעותי ובמיוחד בנתון Total Blocking Time.

שימוש בסיסי ב-lite-youtube

כדי להשתמש ב-Custom Element של הספרייה עליכם לעשות מספר דברים:

• להוסיף את ה-stylesheet לאתר או לאפליקציה.
• להוסיף את הסקריפט.
• להשתמש בתגית lite-youtube באמצעות HTML או JavaScript.

<!-- Include the CSS & JS (direct from the package or bundled) -->
<link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" />

<script src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>

<!-- Use the element. You may use it before the lite-yt-embed JS is executed. -->
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>

הערת פרטיות – lite-youtube משתמש ב-youtube-nocookie.com במקום youtube.com לטובת פרטיות משתמש הקצה.

פרמטרים של הנגן – Custom Player Parameters

יוטיוב תומכת במגוון פרמטרים של הנגן כדי לשלוט בהתנהגות ובמראה ה-iFrame. ניתן ליישם אותם עם lite-youtube באמצעות התכונה params.

<!-- Example: video player without controls, starting at 10s, ending at 30s,
     with modest branding and JS API enabled -->
<lite-youtube videoid="ogfYd705cRs" params="controls=0&start=10&end=30&modestbranding=2&rel=0&enablejsapi=1"></lite-youtube>

שימו לב כי lite-youtube משתמש ב-autoplay=1 כברירת מחדל. ראו את תיעוד הפרמטרים של יוטיוב לרשימה המלאה.

הטמעת הספרייה lite-youtube בוורדפרס

אם אתם מכירים את הדרך להוסיף קבצי JavaScript ו-CSS לאתר WordPress, הקוד הבא אמור להיראות מוכר. הוסיפו אותו לקובץ functions.php של תבנית הבת:

function savvy_add_scripts_styles() {
    wp_register_script( 'lite_yt_script', get_stylesheet_directory_uri() . '/js/lite-yt-embed.js', array(), '1.1' );
    wp_enqueue_script( 'lite_yt_script' );

    wp_register_style( 'lite_yt_css', get_stylesheet_directory_uri() . '/css/lite-yt-embed.css', array(), '1.1' );
    wp_enqueue_style( 'lite_yt_css' );
}

add_action( 'wp_enqueue_scripts', 'savvy_add_scripts_styles' );

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

<lite-youtube videoid="XXXXXX" params="controls=0&amp;modestbranding=2&amp;rel=0&amp;enablejsapi=1"></lite-youtube>

החליפו את XXXXXX במזהה (ID) של סרטון היוטיוב שאתם מעוניינים להטמיע. הנה סרטון המוטמע עם lite-youtube:

שאלות נפוצות

שאלות נפוצות בנושא שיפור ביצועי הטמעת סרטוני יוטיוב:

סיכום

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

מעבר לכך, ישנם תוספים כמו WP-Rocket למשל שיכולים לבצע Lazy Loading ל-iFrames. ניתן גם להשתמש בטכניקות טעינה עצלה ל-JavaScript באופן רחב יותר באתר לתוצאות טובות אף יותר.

עוד מידע על הספרייה, שימוש ב-Custom Poster Image והשוואות נוספות של ביצועים תמצאו בעמוד ה-GitHub של הספרייה.