הגיע הזמן לבצע טעינה מדורגת של מסגרות iframe מחוץ למסך!

Addy Osmani
Addy Osmani
X GitHub

תמיכה בדפדפן

  • 77
  • 79
  • 121
  • 16.4

טעינה מדורגת של רכיבי <iframe> מונעת טעינה של iframes מחוץ למסך עד שהמשתמש גולל בקרבתם. המצב הזה חוסך בנתונים, מזרז את הטעינה של חלקים אחרים בדף ומצמצם את השימוש בזיכרון.

כמו בטעינה מדורגת של תמונות, צריך להשתמש במאפיין loading כדי לציין לדפדפן שאתם רוצים לטעון iframe באופן הדרגתי.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

ההדגמה הזו של <iframe loading=lazy> מציגה הטמעות סרטונים בטעינה מדורגת:

למה iframes בטעינה מדורגת?

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

חיסכון בנתונים כתוצאה משימוש בטעינה מדורגת של iframe עבור iframe. בדוגמה הזו, טעינה נמרצת מושכת 3MB, ואילו טעינה עצלה לא מושכת את הקוד עד שהמשתמש גולל ומקרב ל-iframe.
טעינה יזומה של iframes מחוץ למסך תגרום לכך שהמשתמשים יבזבזו נתונים על ידי הורדת אלמנטים שהם אף פעם לא יראו.

ממחקר שנעשה ב-Chrome לגבי טעינה אוטומטית של iframes שאינם מהמסך של משתמשי חוסך הנתונים (Data Saver), התבצעה טעינה הדרגתית של מסגרות iframe. השיפור הזה עשוי להוביל לחיסכון של 2-3% בנתונים בחציון של 1-2%, בחציון של 1-2% ושיפור של עיכוב הקלט הראשון (FID) בשיעור של 2%.

גם טעינה מדורגת של רכיבי iframe מחוץ למסך יכולה לשפר את המהירות שבה נטען רכיב התוכן הכי גדול (LCP) בדף. מאחר שמסגרות iframe בדרך כלל זקוקים לכמות משמעותית של רוחב פס כדי לטעון את כל משאבי המשנה שלהם, מסגרות iframe מחוץ למסך בזמן טעינה עצלה יכולות לצמצם את התחרות על רוחב הפס במכשירים בהגבלת הרשת, ולהשאיר רוחב פס גדול יותר לטעינת משאבים שתורמים ל-LCP בדף.

איך פועלת טעינה מדורגת מובנית של מסגרות iframe?

המאפיין loading מאפשר לדפדפן לדחות את הטעינה של תמונות ו-iframes מחוץ למסך עד שהמשתמשים גוללים לידם. ב-loading יש תמיכה בשני ערכים:

  • lazy: מועמד טוב לטעינה מדורגת.
  • eager: לא מתאים לטעינה מדורגת. טעינה מיידית.

השימוש במאפיין loading במסגרות iframe פועל באופן הבא:

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

אם לא מציינים את המאפיין, יש אותה השפעה כמו טעינה מפורשת של המשאב.

אם אתם צריכים ליצור מסגרות iframe דינמית באמצעות JavaScript, גם ההגדרה iframe.loading = 'lazy' ברכיב הזה נתמכת:

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

איך הטמעות iframe פופולריות לטעינה מדורגת משפיעות על חוויית המשתמש?

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

YouTube

טעינה מדורגת של הטמעות סרטונים ב-YouTube חוסכת כ-500KB בטעינת הדף הראשונית:

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>
חברת Chrome.com השיגה הפחתה של 10 שניות במדד &#39;זמן עד לאינטראקטיביות&#39; על ידי טעינה מדורגת של מסגרות iframe מחוץ למסך עבור הטמעת הסרטונים ב-YouTube.
Chrome.com הפחית את ערך ה-TTI ב-10 שניות לאחר טעינה מדורגת של הטמעות של YouTube מהמסך.

אינסטגרם

הטמעות של Instagram מספקות חסימה של תגי עיצוב וסקריפט שמחדיר iframe לדף. הטעינה האיטית של ה-iframe מונעת את הצורך לטעון את כל הסקריפט שנדרש להטמעה, ויכולה לחסוך כ-100KB בטעינה הראשונית. ההטמעות האלה מוצגות בדרך כלל מתחת לאזור התצוגה ברוב המאמרים, ולכן זו אפשרות סבירה לטעינה מדורגת של iframe.

Spotify

הטמעות של Spotify בטעינה מדורגת יכולות לחסוך 514KB בטעינה הראשונית.

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

יישומי הפלאגין חברתיים של Facebook

יישומי פלאגין חברתיים של Facebook מאפשרים למפתחים להטמיע תוכן מ-Facebook בדפי האינטרנט שלהם. הפופולרי ביותר מביניהן הוא הפלאגין 'אהבתי', לחצן שמראה כמה משתמשים סימנו את הדף כ'אהבתי'. כברירת מחדל, הטמעת הפלאגין 'לייק' בדף אינטרנט באמצעות Facebook JSSDK מושכת כ-215KB של משאבים, 197KB שמתוכם הם JavaScript. הפלאגין מופיע בדרך כלל בסוף המאמר או לקראת סוף הדף, לכן טעינת אותו באופן מושך כשהוא לא מופיע במסך עשויה להיות לא אופטימלית.

לחצן &#39;לייק&#39; ב-Facebook
פלאגין הלייק של Facebook.

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

טעינה מדורגת של iframe עבור דפדפנים שונים

תוכל להחיל באתר שלך טעינה מדורגת של iframe כשיפור הדרגתי. דפדפנים שתומכים ב-loading=lazy במסגרות iframe טוענים באופן הדרגתי את ה-iframe, ודפדפנים שלא תומכים במאפיין loading מתעלמים ממנו באופן בטוח.

אפשר גם לבצע טעינה מדורגת של מסגרות iframe מחוץ למסך באמצעות ספריית ה-JavaScript lazysizes. מומלץ לעשות זאת אם:

  • נדרשים יותר ערכי סף בהתאמה אישית לטעינה מדורגת מאשר מוצרים סטנדרטיים של טעינה עצלה
  • רוצים להציע למשתמשים חוויית טעינה מדורגת של iframe עקבית בדפדפנים שונים.
<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

השתמש בתבנית הבאה כדי לזהות טעינה עצלה ולאחזר גודלים עצלנים כאשר הם לא זמינים:

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

האם יש חריגים לטעינה מדורגת של iframe מחוץ למסך?

בניסוי מוקדם של ניסוי עם טעינה מדורגת של מסגרות iframe באופן אוטומטי עבור משתמשי Data Saver ב-Chrome, הייתה חריגה למסגרות iframe נסתרות, לעיתים קרובות משמשות לצורכי תקשורת או ניתוח נתונים. הטעינה שלהם נמנעה באופן מדורג, והם תמיד נטענו כדי למנוע פריצה של התכונות האלה.

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

משאבים

לקבלת רעיונות נוספים לטעינה מדורגת, ניתן לעיין באוסף התמונות והסרטונים של web.dev.

בזכות הביקורות שלהם: דום פארולינו, סקוט ליטל, הוסייין ג'ירד, סיימון פייטר, קייס באסק, ג'ו מדלי וסטויאן סטפנוב.