כיצד לייעל את טעינת התמונות באתר האינטרנט שלך

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

אתר אינטרנט מלא בתמונות יפות הוא נהדר ויכול להוות צוואר בקבוק טעינת עמודים ענק. לעתים קרובות אני רואה אתרי אינטרנט שטוענים תמונות בשווי של כמה מגה-בייט רק כדי שיהיה להם מחוון בדף הבית שלהם. דמיין שיש לך חיבור סלולרי 3G איטי ואתה טוען אתר זה. ייקח טעינה של גילאים ויגרום למשתמשים לעזוב את האתר שלך. תוכל לבדוק זאת באתר הנוכחי שלך על ידי בחירה בהגבלת רשת ב- Devtools של Chrome.

בְּעָיָה

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

בדוגמה שלהלן יצרתי אתר פשוט עם תמונת רקע של 4.8 מגהבייט. כפי שאתה יכול לראות, ה- DOM נטען תוך 1.14 שניות. בעיקרון, המשתמש רואה את התוכן לאחר 1.14 שניות. די טוב לרשת 3G. עם זאת, זה לוקח 27.32 שניות לטעון את תמונת הרקע אם המשתמש רואה חלקים מהתמונות נטענים. ייתכן שהמשתמש כבר עזב את האתר שלך בשלב זה.

אתר פשוט ומותאם בצורה גרועה עם תמונת רקע בנפח 4.8 מגה-בייט ברשת סלולרית מהירה

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

פִּתָרוֹן

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

השלב הבא יהיה לטעון משהו שנקרא תמונה "מציין מיקום" לפני טעינת התמונה המקורית בפועל. מציין מיקום זה הוא גרסה ברזולוציה נמוכה של התמונה המקורית. בעת יצירת תמונה זו, הפחתנו את הרזולוציה של התמונה מ- 7372 x 4392 פיקסלים ל- 20 x 11 פיקסלים. התוצאה היא גודל תמונה של 4.8 מגה עד 900 בתים.

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

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

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

(() => {'use strict'; // העמוד נטען const objects = document.getElementsByClassName ('asyncImage');
Array.from (objects) .map ((item) => {// טען את התמונה const img = תמונה חדשה (); img.src = item.dataset.src; // כאשר התמונה נטענת, החלף את קוד המקור של אלמנט ה- HTML img.onload = () => {item.classList.remove ('asyncImage'); להחזיר item.nodeName === 'IMG'? item.src = item.dataset.src: item.style.backgroundImage = ʻUrl ($ {item.dataset.src}) `;};}); }) ();

פונקציית Javascript מחפשת ב- DOM אחר כל מחלקות "asyncImage". לאחר מכן, כל התמונות שצוינו במאפיין data-src נטענות לאלמנטים אלה. ברגע שטוענת תמונה מוחלף מקור התג או תמונת הרקע של אלמנט שאינו IMG.

...

אוֹ

זריחת נוף יפה

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

סיכום

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

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

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

אין לנו עוד בעיות בתמונות מוזרות ונותנים למשתמש שכבת צבע ראשונה מהירה.

ראה דוגמא לעבודה כאן

טוען תמונות עצלות

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

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

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

מקווה שנהניתם לקרוא את המאמר הזה ותיהנו לעשות את השיפור הזה בעצמכם :). כמה מחיאות כפיים פירושן הרבה.