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

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

טעינת תמונות רקע מראש באמצעות image-set

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

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

האפשרות Start Render (התחלת העיבוד) לא השתנתה.
המדד Speed Index השתפר מעט (273 אלפיות השנייה, כי התמונות מגיעות מהר יותר ולא תופסות חלק גדול משטח הפיקסלים).
Last Painted Hero השתפר באופן משמעותי, ב-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> לפי הסדר, מוצאת את המאפיין הראשון שתואם ומשתמשת במשאב המצורף.

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

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

ההשפעה על המדד 'המהירות שבה נטען רכיב התוכן הכי גדול' (LCP)

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

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