אחוז התמונות והסרטונים במטען הייעודי (payload) האופייני של אתר יכול להיות משמעותי. לצערנו, יכול להיות שבעלי עניין בפרויקט לא יהיו מוכנים להוציא משאבי מדיה מהאפליקציות הקיימות שלהם. חריגות כאלה הן מתסכלות, בייחוד כשכל הצדדים המעורבים רוצים לשפר את הביצועים של האתר, אבל לא מצליחים להגיע ליעד. למרבה המזל, טעינה מושהית היא פתרון שמפחית את המטען הייעודי (payload) הראשוני וגם את זמן הטעינה של הדף, אבל לא מדלג על תוכן.
מהי טעינה מושהית?
'טעינה מדורגת' היא שיטה שדוחה טעינה של משאבים לא קריטיים בזמן הטעינה של הדף. במקום זאת, המשאבים הלא קריטיים האלה נטענים ברגע הצורך. כשמדובר בתמונות, לעתים קרובות "לא קריטית" זהה ל"מחוץ למסך". אם השתמשתם ב-Lighthouse ובדקתם כמה הזדמנויות לשיפור, יכול להיות שיופיעו הנחיות בתחום הזה כמו דחיית הבדיקה של תמונות שלא מופיעות במסך:
סביר להניח שכבר ראיתם טעינה עצלה בפעולה, והיא אמורה להיראות כך:
- אתם מגיעים לדף ומתחילים לגלול תוך כדי קריאת התוכן.
- בשלב מסוים, גוללים לתמונה placeholder אל אזור התצוגה.
- תמונת ה-placeholder מוחלפת לפתע בתמונה הסופית.
דוגמה לטעינה מדורגת של תמונות מופיעה בפלטפורמת הפרסום הפופולרית Medium, שטוענת תמונות placeholder קלילות יותר בזמן טעינת הדף ומחליפה אותן בתמונות שנטענות לעצלנות כשהגלילה מתבצעת באזור התצוגה.
אם אתם לא מכירים את התכונה 'טעינה מושהית', יכול להיות שאתם תוהים עד כמה השיטה מועילה ומה היתרונות שלה. המשיכו לקרוא כדי לגלות!
למה לבצע טעינה מדורגת של תמונות או סרטונים במקום רק לטעון אותם?
מפני שייתכן שאתה טוען דברים שהמשתמש אף פעם לא יראה. הדבר בעייתי מכמה סיבות:
- היא מבזבזת נתונים. בחיבורים ללא מדידה, זה לא הדבר הגרוע ביותר שיכול לקרות (למרות שיכול להיות שאתם משתמשים ברוחב הפס היקר הזה כדי להוריד משאבים אחרים שבאמת יוצגו למשתמש). עם זאת, בתוכניות של נתונים מוגבלים, טעינת דברים שהמשתמש אף פעם לא רואה יכולה להיות בזבוז של הכסף שלו.
- היא גוזלת זמן עיבוד, סוללה ומשאבי מערכת אחרים. אחרי שמורידים משאב מדיה, הדפדפן צריך לפענח אותו ולעבד את התוכן שלו באזור התצוגה.
טעינה עצלה של תמונות וסרטונים מפחיתה את זמן הטעינה הראשונית של הדף, את משקל הדף הראשוני ואת השימוש במשאבי המערכת, ולכל הגורמים האלה יש השפעה חיובית על הביצועים.
הטמעה של טעינה מושהית
יש כמה דרכים להטמיע טעינה מושהית. בחירת הפתרון שלכם צריכה להתחשב בדפדפנים שבהם אתם תומכים ובנוסף למה שאתם מנסים לטעון בטעינה מדורגת.
בדפדפנים מודרניים מוטמעת טעינה מדורגת ברמת הדפדפן, ואפשר להפעיל אותה באמצעות המאפיין loading בתמונות ובמסגרות iframe.
כדי לספק תאימות לדפדפנים ישנים יותר או לבצע טעינה מדורגת באלמנטים ללא טעינה מדורגת מובנית, תוכלו להטמיע פתרון עם JavaScript משלכם.
קיימות גם מספר ספריות קיימות שיעזרו לכם לעשות זאת.
אפשר לעיין בפרסומים באתר זה כדי לקבל פרטים מלאים על כל הגישות האלה:
בנוסף, ריכזנו רשימה של בעיות פוטנציאליות בטעינה מושהית ודברים שכדאי להיזהר במהלך ההטמעה שלכם.
סיכום
כשמשתמשים בו בזהירות, טעינה עצלה של תמונות וסרטונים יכולה לקצר משמעותית את זמן הטעינה הראשונית ואת המטען הייעודי (payloads) של הדפים באתר, כולל מדדי הליבה לבדיקת חוויית המשתמש באתר. המשתמשים לא יחוו פעילות מיותרת ברשת, כולל קרבות ברשת בחיבורים איטיים יותר, ועלויות עיבוד של משאבי מדיה שהם לעולם לא יראו, אבל הם עדיין יוכלו לצפות במשאבים האלה אם הם ירצו.
בכל הנוגע לשיטות לשיפור הביצועים, טעינה עצלה היא בדרך כלל בלתי שנויה במחלוקת. אם באתר שלכם יש הרבה תמונות מוטבעות, זו דרך מצוינת לצמצם הורדות מיותרות. המשתמשים באתר ובעלי העניין בפרויקט יעריכו זאת!