איך עושים DEFER או בשמו הנוסף "LAZY LOAD" לסרטוני יוטיוב באתר?

 

 

להורדת הקובץ יש ללחוץ על הלחצן הימני של העכבר ולשמור בשם, ולאחר מכן לפתוח את הקובץ ב NOTEPAD:

lazy load

שלום לכולם, כאן אריאל

מחברת "וואו – שיווק באינטרנט".

היום אנחנו הולכים ללמוד איך לעשות defer

לסרטונים שהם מוטמעים באתר שלנו.

בעצם מה זה defer, איך זה עוזר לנו?

defer זה בעצם להגיד לדפדפן שלנו

לא לטעון סרטונים במצב שלנו,

או תמונות או כל דבר אחר.

לא לטעון אותם עד שהם יגיעו 

למצב שהגולש רואה אותם פיזית. 

מה זה בעצם עוזר?

זה עוזר בעצם במהירות הדף.

אם הדף שלי יש לו 20 סרטונים מוטמעים

ורובם נמצאים מתחת לגלילה,

זאת אומרת גולש צריך לגלול הרבה 

כדי לראות את הסרטונים האלה.

אז אני בעצם- defer אני נותן את הפקודה,

אני אומר לדף שלי תקשיב,

את הסרטונים שהגולש עדיין לא רואה

אל תטען אותם עדיין עד שהגולש יגיע אליהם.

ואז בעצם הדף שלי הרבה יותר מהיר,

הרבה יותר אפקטיבי.

זה עוזר לחוויית משתמש,

זה עוזר לדירוג האורגני כמובן,

זה עוזר בכללי לביצועים של מהירות וחוויית משתמש.

ככל שהדף עולה במהירות שלו 

כך החווית משתמש משתפרת.

אני אראה לכם דוגמה של איך זה נראה.

יש לי פה דף שכבר הכנתי עם defer.

אני עושה פה 10 ובעצם הסרטונים 

לא נטענים עד שהגולש רואה אותם.

ואני עכשיו, טוב זה פה קצת איטי ספציפית,

לא נכנס מאיזה סיבות אבל פה בעצם 

הסרטונים לא נטענים עד שאני גולל אותם.

עוד פעם, בוא נחפש עוד סרטונים,

עוד סרטון ועוד סרטון.

אנחנו רואים שהפליק הזה הגיע של הטעינה

רק מתי שאני הגעתי לאותו חלק בדף.

וזה ממש עוזר לשפר את זמן טעינת הדף,

זה חוסך המון, המון צרות ומאוד מאוד מומלץ.

איך אנחנו עושים את זה?

אז בעיקרון מסבירים לנו פה מה צריך לעשות.

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

כל סרטון שאני רוצה לשים את ה- iframe שלי באתר

אז עושים פה הטמע. כן? לעשות הטמעה.

מעתיקים, נכון?

ואני אדביק רגע ב- notes רק 

שיהיה לנו ברור איך זה בדיוק נראה.

אז יש לנו פה את זה הקוד.

עכשיו מה שקורה פה יש פה iframe width וכולי,

srt זה ה- source, זאת אומרת 

הוא אומר מאיפה לשאוב את ה- iframe,

מאיפה לשאוב את הקטע של הסרטון.

אז אתה אומר לו פה ה- source,

זה youtube, זה … סלאש 

וזה הכתובת של הדף שלנו.

מה שהוא אומר לנו פה בדף 

לעשות בעצם ב- srt הזה שיש,

הוא אומר פשוט לשים גרשיים ריקים

ולהוסיף עוד פרמטר שנקרא data מינוס srt,

ושמה להדביק את כתובת האתר.

אני אראה לכם בדיוק איך אני עושה את זה פה.

בעצם אז יש לנו פה את ה- srt אז אני עושה רגע,

רק בשביל הנוחות אני אראה לכם בצורה אחרת.

srt אז אני עושה פה עוד סוגריים

אז זה בעצם השתי מירכאות, סליחה, 

לא סוגריים, מירכאות. שתי מירכאות ריקות.

עכשיו מוסיפים פה עוד פרמטר,

data מינוס srt שווה מירכאות.

אני אעשה פה, אשים אותם באותה שורה.

נמחק לי פה משהו, רק שנייה.

data srt. אוקי.

srt שווה מירכאות h.

רגע, בוא נראה למה הוא עושה לי את זה.

אוקי. פשוט המסך היה קצת קטן.

אוקי, data מינוס srt 

שווה מירכאות ht pdf,

youtube סגור מירכאות. 

בעצם זה כל מה שעשיתי.

עכשיו בגלל שהוספתי את הפרמטר data מינוס srt,

אז זה בעצם ייתן לקוד javascript 

שאנחנו עוד מעט נטמיע להבין שלא לטעון את הדף.

בעצם הדף שלנו לא נטען, לא טוען את הסרטון,

וה- javascript יטען את הסרטון 

רק ברגע שהגולש יגיע למקום.

אז מה שאנחנו עושים זה פשוט מדביקים 

את הסרטון youtube שלנו ב- custom html,

כרגע אנחנו ב- instapage,

אני פשוט אביא דוגמה קטנה,

אני לא רציתי יותר מדי להראות בדוגמה פיזית

אז בוא נעשה את זה סתם פה לדוגמה.

נגיד, כי אנחנו לא באמת,

אני לא באמת משתמש בסרטון הזה פה,

אבל זה רק בשביל ההדגמה.

אז נעשה פה את ה- edit, זה הסרטון שלנו.

אז פה יש לנו SRT שווה מירכאות ריקות,

data מינוס srt 

ופה זה בסדר. אוקי, מעולה.

אז עכשיו מה שנשאר לנו לעשות דבר אחרון

זה בעצם לטעון את ה- javascript,

שה- javascript זה ,זה שהולך לטעון 

את הסרטון רק מתי שהגולש יגלול לסרטון בעצמו.

אז זה ה- javascript,

פשוט מעתיקים אותו באזור ה- head,

מומלץ כמה שיותר גבוה ב- head.

אז בוא, יש לנו פה את ה- javascript שלנו,

javascript באזור ה- head ופשוט מדביקים.

זה הקוד שלנו ואז עושים שמור ובעצם מה שזה אמור לעשות זה כמו שבהדגמה שהרגע הראיתי לכם,

שרק כאשר הגולש גולל לאותו מקום, רק אז הסרטון יטען.

יש, מצורף הלינקים, הלינק לקוד javascript

ולקוד של מה שאנחנו צריכים לעשות, של ההדגמות,

הכול מצורף בסרטון למטה.

אני מקווה שנהניתם 

ואנחנו נתראה בסרטון הבא.