אפשר לטעון מראש תמונות רספונסיביות, וכך התמונות ייטענו הרבה יותר מהר כי הדפדפן יוכל לזהות את התמונה הנכונה מ-srcset לפני שהוא מעבד את התג img.
סקירה כללית של תמונות רספונסיביות
תמיכה בדפדפן
- 73
- 79
- 78
- 17.2
נניח שאתם גולשים באינטרנט במסך ברוחב של 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) כדי לפתוח את כלי הפיתוח. - לוחצים על הכרטיסייה Network.
- ברשימה הנפתחת Throttling, בוחרים באפשרות Fast 3G.
- משביתים את תיבת הסימון Disable cache (השבתת מטמון).
- לטעון מחדש את הדף.
שימוש ב-preload כאן מאפשר לתמונה להתחיל להיטען מראש, כך שהיא תהיה מוכנה להצגה כשהדפדפן צריך להציג אותה.
כדי לראות מה ההבדל בין הטעינה מראש, צריך לבדוק את אותה גלריית תמונות שנטענה באופן דינמי, אבל כאשר התמונה הראשונה נטענת מראש, על ידי ביצוע השלבים שבדוגמה הראשונה.
טעינה מראש של תמונות רקע באמצעות image-set
אם יש לכם תמונות רקע שונות לדחיסות מסך שונה, אפשר לציין אותן ב-CSS באמצעות התחביר image-set. לאחר מכן הדפדפן יכול לבחור איזו תצוגה להציג על סמך ה-DPR של המסך.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
הבעיה בתמונות רקע של CSS היא שהדפדפן מגלה אותן רק לאחר שהוא הוריד ועיבד את כל ה-CSS ב-<head> של הדף.
אפשר לבדוק את הבעיה באתר לדוגמה עם תמונת רקע רספונסיבית.
טעינה מראש של תמונות רספונסיביות מאפשרת לטעון את התמונות האלה מהר יותר.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
אם לא מציינים את המאפיין href, אפשר להבטיח שדפדפנים שלא תומכים ב-imagesrcset ברכיב <link>, אבל כן תומכים ב-image-set ב-CSS, יורידו את המקור הנכון. עם זאת, במקרה הזה הם לא יפיקו תועלת מהטעינה מראש.
אפשר לבדוק את ההתנהגות של הדוגמה הקודמת עם תמונת רקע רספונסיבית שנטענו מראש בהדגמה של הטעינה מראש של הרקע הרספונסיבית.
השפעות מעשיות של טעינה מראש של תמונות רספונסיביות
בתיאוריה אפשר לטעון מראש תמונות רספונסיביות, אבל מה הן עושות בפועל?
התשובה היא שיצרתי שני עותקים של חנות להדגמה של אפליקציות PWA: חנות שלא טוענת מראש תמונות וגרסה אחת שטוענת חלק מהן מראש. מכיוון שהאתר טוען תמונות באופן הדרגתי באמצעות JavaScript, יש סיכוי גבוה שטעינה מראש של התמונות שמופיעות באזור התצוגה הראשונית תועיל לו.
כך התקבלו התוצאות הבאות לגבי ללא טעינה מראש ועבור טעינה מראש של תמונה:
- התחלת העיבוד נשארה ללא שינוי.
- אינדקס המהירות השתפר מעט (273 אלפיות השנייה, כי תמונות מגיעות מהר יותר לא תופסות חלק גדול משטח הפיקסלים).
- Last Painted Hero השתפר באופן משמעותי, ב-1.2 שניות.
טעינה מראש ו-<picture>
קבוצת העבודה של Web Performance Group דנה בהוספת שווה ערך לטעינה מראש עבור 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> לפי הסדר, מוצאת את הרכיב הראשון שתואם ומשתמש במשאב המצורף.
מאחר שטעינה מראש רספונסיבית לא כוללת מושגים של "order" או "first Match", תצטרכו לתרגם את נקודות העצירה (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)
מכיוון שתמונות יכולות להיות מועמדות ל-LCP Largest Contentful Paint (LCP), הטעינה מראש שלהן יכולה לשפר את מדד ה-LCP באתר.
גם אם התמונה שאתם טוענים מראש מגיבה, טעינות מראש פועלות בצורה הטובה ביותר כשמשאב התמונה לא גלוי במטען הייעודי (payload) הראשוני של תגי העיצוב. כמו כן, תקבל שיפור LCP נוסף באתרים שמעבדים תגי עיצוב בצד הלקוח מאשר באתרים ששולחים תגי עיצוב מלאים מהשרת.