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

אדי אוסמאני

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

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

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

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

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

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

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

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

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

המאפיין loading מאפשר לדפדפן לדחות טעינה של תמונות ומסגרות iframe מחוץ למסך עד שהמשתמשים גוללים בקרבת מקום. ב-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 מחוץ למסך הייתה ברירת המחדל לטעינה מדורגת, האתר ייראה בערך כך:

הטמעות של סרטוני 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>

אנקדוטה: כשעברנו להטמעות של YouTube בטעינה מדורגת ב-Chrome.com, חסכנו 10 שניות מהמהירות שבה הדפים שלנו יוכלו להיות אינטראקטיביים במכשירים ניידים. פתחתי באג פנימי ב-YouTube כדי לדון בהוספת loading=lazy לקוד ההטמעה שלו.

הטמעות Instagram שנטענות באופן איטי (חיסכון של כ-100KB gzip בטעינה הראשונית):

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

הטמעות של 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>

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

מקרה לדוגמה: טעינה מדורגת של יישומי הפלאגין החברתיות של Facebook

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

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

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

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

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

• דורשים יותר ערכי סף בהתאמה אישית לטעינה מדורגת בהשוואה למה שמוצע כרגע בטעינה עצלה סטנדרטית
• רוצים להציע למשתמשים חוויית טעינה עצלה של 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>

האם יש מקרים שבהם iframes מחוץ למסך עם loading=lazy עדיין נטענים?

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

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

סיכום

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

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