דף זה תורגם על ידי Cloud Translation API.

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

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

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

טעינה מדורגת של מסגרות iframe שלא מופיעות במסך יכולה גם לשפר את התצוגה Contentful Paint (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 של הפרסום בטעינה מדורגת יכולות להניב היתרונות.

YouTube

טעינת קוד ה-embed של סרטוני 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 שניות ב-Time to Interactive באמצעות טעינה מדורגת של מסגרות iframe שלא מוצגות במסך כחלק מהטמעת הסרטון ב-YouTube. — ב-Chrome.com קיצרו את זמן הטעינה הראשונית ב-10 שניות באמצעות טעינת פריטים מוטמעים של YouTube מחוץ למסך באיטרציה.

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

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

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

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

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

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

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

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

משאבים

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

תודה ל-Dom Farolino,‏ Scott Little,‏ Houssein Djirdeh,‏ Simon Pieters,‏ Kayce Basques,‏ Joe Medley ו-Stoyan Stefanov על הביקורות שלהם.