הגיע הזמן לבצע טעינה מדורגת של מסגרות 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 בנושא טעינה איטית אוטומטית של תגי iframe מחוץ למסך למשתמשים עם חיסכון נתונים, טעינת תגי iframe איטית יכולה להוביל לחיסכון נתונים ממוצע של 2-3%, לירידה של 1-2% בזמן הצגת התוכן הראשון בממוצע ולשיפור של 2% בזמן האחזור של הקלט הראשון (FID) ב-95% מהמקרים.

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

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

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

כשרוצים לקבל יותר שליטה בטעינה הדרגתית של iframe

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

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

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

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

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

משאבים

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

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