עיכוב פריסת Javascript לסרטוני YouTube

עיכוב פריסת Javascript, במילים אחרות Defer parsing of Javascript, היא אחת מההודעות שאתם מקבלים כאשר בודקים את מהירות האתר בכלים כמו GTmetrix ו-Pingdom.

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

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

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

ההערה העיקרית הייתה Defer Parsing of Javascript כאשר שלושה מאותם סקריפטים שהוצגו כבעיתיים היו סקריפטים של youtube.com. הנה ההערה שקיבלתי ב GTmetrix:

הסקריפטים של youtube.com שאתם רואים בתמונה זו עכבו את הטעינה של העמוד. כלומר רק לאחר שאלו נטענו (ושימו לב כי אלו סקריפטים כבדים) שאר העמוד המשיך להטען.

כיצד לעכב פריסת Javascript לסרטוני יוטיוב?

בואו נסביר כיצד לפתור הערה זו. כאשר אתם מטמיעים וידאו בוורדפרס על ידי העתקת כתובת (URL) הוידאו מ-YouTube או Vimeo, וורדפרס מייצרת <iframe> עבור אותו וידאו.

זהו בעצם אותו <iframe> שתקבלו אם תעתיקו את קוד ה-embed ישירות מיוטיוב.

אז במקום להשתמש בכתובת ה URL בכדי להטמיע את הוידאו, גשו ליוטיוב והעתיקו את קוד ה embed בצורה הבאה:

• תחת הוידאו לחצו על ״שתף״.
• לחצו על ״הטמע״ שיופיע מתחתיו.
• בצעו שינויים באפשרויות ההטמעה אם יש צורך.
• העתיקו את קוד ה embed המתחיל ב …iframe width>

לאחר מכן גשו לאתר שלכם והדביקו את קוד ה <iframe> היכן שאתם מעוניינים להציג את הוידאו. השלב הבא יהיה לשנות מעט קוד זה:

• מצאו את החלק …src="https://www.youtube.com ושנו את src ל data-src.
• הוסיפו פרמטר ריק בשם ""=src. זה בסופו של דבר יכיל את הכתובת הנמצאית בפרמטר data-src שזה עתה הוספנו.

בסופו של דבר קוד ה <iframe> שלכם ייראה בסגנון הבא:

<iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/123456789" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="border:0"></iframe>

נגרום לוידאו להטען לאחר שהעמוד נטען בעזרת Javascript

ה <iframe> שכרגע יצרנו לא יטען את הוידאו כראוי. נוסיף מעט Javascript על מנת לטעון אותו רק לאחר שהעמוד נטען במלואו.

function init() {
  const iframes = document.querySelectorAll('iframe[data-src]');
  iframes.forEach((iframe) => {
    iframe.setAttribute('src', iframe.getAttribute('data-src'));
  });
}
window.addEventListener('load', init);

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

שימו לב להבדלים בתוצאות של GTmetrix לפני ואחרי השימוש בטכניקה זו.

אם אינכם יודעים כיצד להוסיף Javascript לאתר, תנו מבט בפוסט הוספת נכסים (קבצי Javascript ו- CSS) בוורדפרס.

לפני עיכוב פריסת Javascript לוידאו:

לאחר עיכוב פריסת Javascript לוידאו:

שימו לב כי הציון, מספר הקריאות לשרת, כמו גם גודל העמוד השתפרו בצורה משמעותית. הציון תחת Defer parsing of Javascript קפץ מ F ל A ואותן הערות שהצגנו בתחילת הפוסט עבור סעיף זה נעלמו.

שיקולים נוספים

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

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

עוד דרך לשיפור זמן הטעינה של וידאו יוטיוב המוטמע באתר שלכם היא תבנית ה-Facade, המוסברת בפוסט שיפור זמן הטעינה של Embedded Videos עם Lite YouTube.

אם סרטוני היוטיוב באתר שלכם אינם רספונסיביים, תנו מבט בפוסט המסביר כיצד להפוך סרטון YouTube לרספונסיבי בוורדפרס.

תכונת loading="lazy" המובנית

דפדפנים מודרניים תומכים בתכונת loading="lazy" מובנית עבור iframes. הוספת תכונה זו אומרת לדפדפן לדחות את טעינת ה-iframe עד שהוא קרוב לחלון התצוגה:

<iframe src="https://www.youtube.com/embed/123456789" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="border:0"></iframe>

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

תבנית ה-Facade – חלופה מודרנית

הגישה היעילה ביותר להטמעת יוטיוב היא תבנית ה-Facade. במקום לטעון את נגן היוטיוב המלא, מוצג placeholder קל משקל (רק תמונת התצוגה המקדימה של הסרטון) והנגן בפועל נטען רק כשהמשתמש לוחץ על Play.

זה מה שספריות כמו lite-youtube-embed עושות. הן נטענות מהר פי 224 בערך מהטמעות יוטיוב רגילות מכיוון שהטעינה הראשונית היא רק תמונה סטטית ומעט CSS.

כלי Lighthouse של גוגל ממליץ ספציפית על גישה זו תחת הביקורת "Lazy load third-party resources with facades". למדריך יישום מפורט, ראו את הפוסט שלנו על שיפור זמן הטעינה של Embedded Videos עם Lite YouTube.

השפעה על Core Web Vitals

הטמעת יוטיוב רגילה טוענת מספר סקריפטים, גליונות סגנון ומשאבים נוספים גם כשהמשתמש לעולם לא מפעיל את הסרטון. זה משפיע ישירות על Core Web Vitals:

• LCP (Largest Contentful Paint) – הסקריפטים של יוטיוב חוסמים את ה-Main Thread ומעכבים את הרינדור של אלמנט התוכן הגדול ביותר.
• INP (Interaction to Next Paint) – ה-JavaScript הנוסף מגדיל את עומס ה-Main Thread, מה שהופך את העמוד לפחות מגיב לאינטראקציות המשתמש.
• משקל העמוד – הטמעת יוטיוב בודדת מוסיפה כ-800KB לגודל העמוד.

דחיית ההטמעה או החלפתה ב-Facade מבטלת עומס זה לחלוטין עד שהמשתמש באמת צריך את הסרטון.

שאלות נפוצות

שאלות נפוצות בנושא עיכוב JavaScript של יוטיוב:

סיכום

עיכוב JavaScript לסרטוני יוטיוב חיוני לשמירה על ביצועי עמוד טובים. הגישה הפשוטה ביותר היא טכניקת data-src בשילוב עם loading="lazy", שדוחה את הטעינה עד שהעמוד מוכן.

לביצועים מקסימליים, מומלצת תבנית ה-Facade באמצעות ספריות כמו lite-youtube-embed, שטוענת רק תמונת תצוגה מקדימה סטטית עד שהמשתמש לוחץ על Play. בכל שיטה שתבחרו, ההשפעה על Core Web Vitals משמעותית – הפחתת משקל העמוד במאות קילובייטים ושחרור ה-Main Thread לרינדור מהיר יותר.