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

טעינה מראש של תמונות רספונסיביות

Barry Pollard

Yoav Weiss

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

סקירה כללית של תמונות רספונסיביות

תמיכה בדפדפן

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

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

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

סקירה כללית של טעינה מראש

תמיכה בדפדפן

מקור

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

<link rel="preload" as="image" href="important.png">

`imagesrcset` וגם `imagesizes`

הרכיב <link> משתמש במאפיינים imagesrcset ו-imagesizes כדי לטעון מראש תמונות רספונסיביות. משתמשים בהן לצד <link rel="preload">, עם התחביר srcset ו-sizes שנעשה בו שימוש בתחביר רכיב <img>.

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

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

כדי לעשות את זה, צריך להוסיף את קטעי הקוד הבאים ל-<head> של ה-HTML:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

הפעולה הזו מפעילה בקשה באמצעות אותה לוגיקה של בחירת משאבים, srcset ו-sizes משתמשים.

תרחישים לדוגמה

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

טעינה מראש של תמונות רספונסיביות שהוחדרו באופן דינמי

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

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

לפתיחת ההדגמה של המצגת בכרטיסייה חדשה.
מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את כלי הפיתוח.
לוחצים על הכרטיסייה רשתות.
ברשימה הנפתחת Throttling, בוחרים באפשרות Fast 3G.
משביתים את תיבת הסימון Disable cache.
לטעון מחדש את הדף.

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

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

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

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

טעינה מראש של תמונות רקע באמצעות הגדרת התמונה

אם יש לכם תמונות רקע שונות לדחיסות מסך שונה, ניתן לציין אותם ב-CSS עם התחביר image-set. לאחר מכן הדפדפן יכול ולבחור איזה תצוגה להציג בהתאם DPR

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

הבעיה בתמונות רקע של CSS היא שהדפדפן מגלה אותן רק אחרי ההורדה והעיבוד של כל ה-CSS ב-<head> של הדף.

אפשר לבדוק את הבעיה הזו באתר לדוגמה באמצעות תמונת רקע רספונסיבית.

החלונית 'רשת כלי הפיתוח ל-Chrome' שמוצגת בה מפל עם משאב JPEG שמתחילה בהורדה רק אחרי שירות CSS מסוים. — בדוגמה הזו, הורדת התמונה מתחילה רק אחרי ששירות ה-CSS יורד במלואו, דבר שגורם לעיכוב מיותר בהצגת התמונה.

טעינה מראש של תמונות רספונסיביות מאפשרת לטעון את התמונות האלה מהר יותר.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

אם לא מוסיפים את המאפיין href, אפשר לוודא שדפדפנים לא תומכים ב-imagesrcset ברכיב <link>, אבל תומכים ב-image-set ב- שירות ה-CSS מוריד את המקור הנכון. עם זאת, הם לא יפיקו תועלת מהטעינה מראש במקרה הזה.

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

החלונית 'רשת כלי הפיתוח ל-Chrome' שמציגה מפל עם משאב JPEG שמורידים פרלל אל שירות CSS מסוים. — כאן מתחילים להוריד את התמונה ואת שירות ה-CSS בו-זמנית, וכך התמונה תיטען מהר יותר.

השפעות מעשיות של טעינה מראש של תמונות רספונסיביות

טעינה מראש של תמונות רספונסיביות יכולה להאיץ אותן, אבל בפועל?

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

וזה הניב את התוצאות הבאות ללא טעינה מראש ועבור טעינה מראש של תמונה:

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

השוואה של רצועת תמונות ב-WebPageTest שבה תמונות שנטענו מראש מוצגות כ-1.5 שניות מהר יותר. — התמונות מגיעות מהר יותר משמעותית כשהן נטענות מראש, ומשפרות משמעותית את חוויית המשתמש.

טעינה מראש ו-`<picture>`

קבוצת העבודה בנושא ביצועים באינטרנט דנה בהוספת שווה ערך לטעינה מראש עבור srcset ו-sizes, אבל לא אל <picture> שמטפל ב"כיוון האומנות" תרחיש לדוגמה.

יש עדיין כמה בעיות טכניות שצריך לפתור במהלך הטעינה מראש של <picture>, אבל בינתיים יש פתרונות אפשריים:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

הלוגיקה של בחירת מקור התמונה של הרכיב <picture> עוברת מעל media של רכיבי <source> לפי הסדר, מוצא את הרכיב הראשון תואם ומשתמש במשאב המצורף.

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

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

טעינה מראש ו-`type`

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

באתרים שבהם נעשה שימוש בהתאמת סוגים, מומלץ להימנע מטעינה מראש. במקום זאת, יש סורק הטעינה מראש קולט את התמונות במקום זאת, יש רכיבי <picture> ו-<source>. זו בכל זאת שיטה מומלצת, במיוחד כשמשתמשים בעדיפות אחזור לצורך קביעת סדר עדיפויות את התמונה המתאימה.

ההשפעות על Largest Contentful Paint (LCP)

מכיוון שתמונות יכולות להיות המועמדים מסוג Largest Contentful Paint (LCP), טעינה מראש של הנכסים האלה יכולה לשפר את ה-LCP של האתר.

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