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

Addy Osmani

Barry Pollard

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

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

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

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

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

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

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

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

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

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

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

השימוש במאפיין loading ב-iframes פועל באופן הבא:

<!-- 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 פופולריות משפיעה על חוויית המשתמש?

אם הופכים iframes שנטענים בהדרגה לברירת המחדל, האתרים יהיו הרבה יותר רספונסיביים. בדוגמאות הבאות מתוארות שיפורים ונתונים שקשורים לזמן עד האינטראקציה (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>

Instagram

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

.

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

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

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

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

בנוסף, ניתן לבצע טעינה מדורגת של iframes מחוץ למסך באמצעות התכונה lazysizes. ספריית JavaScript:

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

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