אופטימיזציה של ביצועי האתרים והאפליקציות של eBay כדי לספק חוויית משתמש מהירה יותר.
בשנת 2019, חברת Speed הייתה יוזמה חובקת-החברה של eBay, וצוותים רבים ניסו להעמיד את האתר והאפליקציות בה כמה שיותר מהר עבור המשתמשים. למעשה, עם שיפור של 100 אלפיות השנייה בזמן הטעינה של דף חיפוש, eBay נהנתה מעלייה של 0.5% במספר "Add to Cart" (הוספה לעגלת הקניות).
100אלפיות שנייה
שיפור בזמן הטעינה
0.5%
עלייה במספר 'הוספה לעגלת הקניות'
בזכות השימוש בתקציבי ביצועים (שנגזר אחרי מחקר תחרותי עם דוח חוויית המשתמש ב-Chrome) והתמקדנו במדדי ביצועים מרכזיים שמתמקדים במשתמשים, חברת eBay הצליחה לשפר משמעותית את מהירות האתר.
...ונתוני דוח חוויית המשתמש ב-Chrome מדגישים גם את השיפורים האלה.
יש עוד עבודה רבה לפני כן, אבל אלה הלקחים ש-eBay למדה עד כה.
"חיתוך" ביצועי אתרים
השיפורים שבוצעו ב-eBay התאפשרו כתוצאה מצמצום או "קיצוצים" (בגודל ובזמן) של ישויות שונות שמשתתפות במסע המשתמש. הפוסט הזה עוסק בנושאים שרלוונטיים לקהילת מפתחי האתרים באופן כללי, במקום בנושאים ספציפיים ל-eBay.
הפחתת המטען הייעודי (payload) בכל משאבי הטקסט
אחת הדרכים להאיץ אתרים היא לטעון פחות קוד, כי ב-eBay הפחיתו את כל הבייטים הלא נחוצים והבלתי נחוצים של JavaScript, CSS, HTML ו-JSON שהוצגו למשתמשים. בעבר, עם כל תכונה חדשה, eBay המשיכה להגדיל את המטען הייעודי (payload) של התשובות שלה, בלי לפנות מקום שלא היה בשימוש. המצב הזה הצטבר עם הזמן והפך לצוואר בקבוק בביצועים. צוותים בדרך כלל מתעכבים בפעילות הניקוי הזו, אבל תופתעו לגלות כמה חסכה eBay.
המילה 'חיתוך' כאן היא הבייטים המבוזבזים במטען הייעודי (payload) של התגובה.
אופטימיזציה קריטית של הנתיב עבור תוכן בחלק העליון והקבוע
לא כל פיקסל במסך חשוב באותה מידה. התוכן בחלק העליון והקבוע הוא קריטי יותר מהתוכן בחלק הנגלל. אפליקציות ל-iOS או ל-Android/למחשב ולאינטרנט מודעים לכך, אבל מה לגבי שירותים? לארכיטקטורת השירותים של eBay יש שכבה בשם Experience Services, שאליה מגיעים ממשקי הקצה (אפליקציות ושרתי אינטרנט ספציפיים לפלטפורמה). שכבה זו תוכננה במיוחד כמבוססת על תצוגה או מכשיר, ולא על ישויות כמו פריט, משתמש או הזמנה. לאחר מכן, ב-eBay השיקה את הרעיון של הנתיב הקריטי לשירותי חוויית המשתמש. כשמגיעה בקשה לשירותים האלה, הם פועלים לקבלת הנתונים של התוכן בחלק העליון והקבוע באופן מיידי, על ידי קריאה במקביל לשירותים אחרים ב-upstream. ברגע שהנתונים מוכנים, הם נמחקים מייד. הנתונים בחלק הנגלל נשלחים בקטע מאוחר יותר או בטעינה עצלה. התוצאה: משתמשים זוכים לראות את התוכן בחלק העליון והקבוע מהר יותר.
כאן 'חיתוך' מתייחס לזמן ששירותים משקיעים כדי להציג תוכן רלוונטי.
אופטימיזציות של תמונות
תמונות הן אחת מהתורמים המשמעותיים ביותר לריבוי דפים. גם אופטימיזציות קטנות לעשות עבודה רבה. eBay ביצעה שתי אופטימיזציות לתמונות.
קודם כל, eBay ביצעה סטנדרטיזציה לפורמט התמונה WebP לתוצאות חיפוש בכל הפלטפורמות, כולל iOS ו-Android ודפדפנים נתמכים. דף תוצאות החיפוש הוא הדף שמכיל הכי הרבה תמונות ב-eBay, והוא כבר השתמש ב-WebP, אבל הדפוס לא עקבי.
שנית, תמונות הרישום של eBay עברו אופטימיזציה משמעותית (גם בגודל וגם בפורמט), אבל אותה הקפדה לא טיפלה בתמונות שנאספו (למשל, במודול העליון בדף הבית). ב-eBay יש הרבה תמונות שנאספו באופן ידני, ומועלות באמצעות כלים שונים. בעבר, האופטימיזציות היו בידי מעלה הסרטון, אבל עכשיו eBay אוכפת את הכללים בכלים, כך שכל התמונות שהועלו יעברו אופטימיזציה בהתאם.
'חיתוך' כאן הוא הבייטים של התמונות המיותרים שנשלחו למשתמשים.
שליפה מראש חזויה של נכסים סטטיים
סשן של משתמש ב-eBay הוא לא רק דף אחד. זה זרימה. לדוגמה, הזרימה יכולה להיות ניווט מדף הבית לדף חיפוש לדף של פריט. אז למה הדפים בתהליך לא עוזרים זה לזה? זה הרעיון של שליפה מראש חזויה, שבה בדף אחד מתבצעת שליפה מראש (prefetch) של הנכסים הסטטיים שנדרשים עבור הדף שצפוי להופיע בדף הבא.
בשיטה 'חיזוי מראש', הנכסים כבר נמצאים במטמון של הדפדפן כשמשתמש מנווט לדף החזוי. הפעולה הזו מתבצעת בנכסי CSS ו-JavaScript, שבהם ניתן לאחזר את כתובות ה-URL מראש. חשוב לציין כאן שזה עוזר רק בניווטים בפעם הראשונה. בניווטים הבאים, הנכסים הסטטיים כבר יופיעו במטמון.
המילה 'חיתוך' כאן היא זמן הרשת לנכסים סטטיים ב-CSS ו-JavaScript בניווט הראשון.
שליפה מראש (prefetch) של תוצאות החיפוש המובילות
כשמשתמש מבצע חיפוש ב-eBay, נתוני הניתוח של eBay מצביעים על סבירות גבוהה שהמשתמש ינווט לפריט שנמצא בין 10 תוצאות החיפוש המובילות. לכן, eBay מבצע עכשיו שליפה מראש של פריטים מהחיפוש ושומר אותם מוכנים לקראת הניווט. השליפה מראש (prefetch) מתבצעת בשתי רמות.
הרמה הראשונה מתבצעת בצד השרת, שבה שירות הפריטים שומר במטמון את 10 הפריטים המובילים בתוצאות החיפוש. כשהמשתמש עובר לאחד מהפריטים האלה, eBay חוסך עכשיו את זמן עיבוד השרת. השמירה במטמון בצד השרת מנוצלת על ידי אפליקציות ספציפיות לפלטפורמה, והיא מופצת באופן גלובלי.
הרמה השנייה מתבצעת במטמון של הדפדפן, שזמין באוסטרליה. שליפה מראש (prefetch) של פריטים הייתה אופטימיזציה מתקדמת בגלל האופי הדינמי של הפריטים. יש גם ניואנסים רבים: חשיפות דף, קיבולת, פריטים במכרזים ועוד. אפשר לקרוא מידע נוסף על הנושא במצגת של LinkedIn בנושא Performance Engineering Meetup, או בפוסט מפורט בבלוג בנושא זה מהמהנדסים של eBay.
המילה 'חיתוך' כאן יכולה להיות זמן עיבוד השרת או זמן רשת, בהתאם למיקום שבו הפריט נשמר במטמון.
הורדה דחופה של חיפוש תמונות
כשנשלחת שאילתה ברמה גבוהה, קורים שני דברים בדף תוצאות החיפוש. אחד הוא שלב הריקול/הדירוג, שבו מוחזרים הפריטים הרלוונטיים ביותר שתואמים לשאילתה. השלב השני הוא הרחבת הפריטים שבוצע להם ריקול עם מידע נוסף שקשור להקשר של המשתמש, כמו עלויות משלוח. eBay שולחת עכשיו מיד את 10 התמונות הראשונות של הפריטים לדפדפן בקטע יחד עם הכותרת, כדי שההורדות יוכלו להתחיל לפני ששאר תגי העיצוב יגיעו. כתוצאה מכך, התמונות מופיעות עכשיו מהר יותר. השינוי הזה הושק בכל העולם לפלטפורמת האינטרנט.
הלחצן 'חיתוך' כאן הוא שעת ההתחלה של ההורדה של תמונות של תוצאות חיפוש.
שמירה במטמון קצה עבור נתונים של הצעה אוטומטית
כשהמשתמשים מקלידים אותיות בתיבת החיפוש, מופיעות הצעות. ההצעות האלה לא משתנות לגבי שילובי אותיות במשך יום אחד לפחות. הם מועמדים אידיאליים לשמירה במטמון ולהצגה שלהם מ-CDN (למשך 24 שעות לכל היותר), במקום לשלוח בקשות עד למרכז הנתונים. במיוחד בשווקים בינלאומיים אפשר להפיק תועלת משמירת CDN במטמון.
אבל יש מלכוד. ב-eBay היו כמה רכיבים של התאמה אישית בחלון הקופץ של ההצעות, שלא ניתן לשמור במטמון באופן יעיל. למרבה המזל, לא הייתה בעיה באפליקציות הספציפיות לפלטפורמה, כי ממשק המשתמש להתאמה אישית ולהצעות יכול להיות מופרד. באינטרנט, בשווקים בינלאומיים, זמן האחזור היה חשוב יותר מהיתרון הקטן של ההתאמה האישית. לשם כך, ל-eBay יש עכשיו הצעות אוטומטיות שמוגשות ממטמון CDN ברחבי העולם לאפליקציות ספציפיות לפלטפורמה ולשווקים מחוץ לארה"ב עבור eBay.com.
'חיתוך' כאן הוא זמן האחזור ברשת וזמן העיבוד של השרת עבור הצעות אוטומטיות.
שמירה במטמון קצה למשתמשים לא מזוהים בדף הבית
בפלטפורמת האינטרנט, התוכן בדף הבית למשתמשים לא מזוהים זהה באזור מסוים. אלה משתמשים שמשתמשים ב-eBay בפעם הראשונה או מתחילים סשן חדש, ולכן אין התאמה אישית. למרות שהקריאייטיבים בדף הבית משתנים כל הזמן לעיתים קרובות, עדיין יש מקום לשמירה במטמון.
ב-eBay החליטו לשמור במטמון את התוכן הלא מזוהה של המשתמשים (HTML) ברשת הקצה (PoPs) למשך תקופה קצרה. משתמשים חדשים יכולים עכשיו לקבל תוכן של דף הבית משרת שנמצא בסביבתם, במקום במרכז נתונים רחוק. eBay עדיין נערכת ניסויים של כך בשווקים בינלאומיים, שבהם תהיה לכך השפעה גדולה יותר.
המשמעות של "חיתוך" כאן היא שוב גם זמן אחזור ברשת וגם זמן עיבוד שרת עבור משתמשים לא מזוהים.
אופטימיזציות עבור פלטפורמות אחרות
שיפורים בניתוח אפליקציות ב-iOS או ב-Android
אפליקציות ל-iOS או ל-Android מקשרות לשירותים לקצה העורפי שפורמט התגובה שלהם הוא בדרך כלל JSON. מטענים ייעודיים (payloads) אלה של JSON יכולים להיות גדולים. במקום לנתח את כל קובץ ה-JSON כדי לעבד משהו במסך, eBay הוסיפה אלגוריתם ניתוח יעיל שמבצע אופטימיזציה לתוכן שצריך להציג באופן מיידי.
עכשיו המשתמשים יכולים לראות את התוכן מהר יותר. בנוסף, עבור האפליקציה ל-Android, eBay מתחילה להפעיל את בקרי תצוגת החיפוש ברגע שהמשתמש מתחיל להקליד בתיבת החיפוש (ב-iOS כבר בוצעה אופטימיזציה זו). בעבר זה קרה רק אחרי שהמשתמשים לחצו על לחצן החיפוש. עכשיו המשתמשים יכולים להגיע אל תוצאות החיפוש שלהם מהר יותר. המדד 'חיתוך' כאן מייצג את משך הזמן שהמכשירים משקיעים כדי להציג תוכן רלוונטי.
שיפורים בזמן ההפעלה של אפליקציות ל-Android
רלוונטי לאופטימיזציות של זמן להפעלה במצב התחלתי באפליקציות ל-Android. כשאפליקציה מתחילה לפעול במצב התחלתי, הרבה אתחולים מתרחשים גם ברמת מערכת ההפעלה וגם ברמת האפליקציה. קיצור זמן האתחול ברמת האפליקציה עוזר למשתמשים לראות את מסך הבית מהר יותר. eBay ביצעה קצת פרופיילינג והבחינו שלא כל האתחולים נדרשים להצגת תוכן ושניתן לבצע חלק מהם באופן מדורג.
חשוב מכך, ב-eBay הבחינו בכך שהייתה קריאה חוסמת של צד שלישי לניתוח נתונים שגרמה לעיכוב הרינדור במסך. הסרת השיחה החוסמת והוספה שלה לאסינכרונית סייעה לזמני ההפעלה במצב התחלתי. "חיתוך" כאן הוא זמן ההפעלה המיותר של אפליקציות ל-Android.
מסקנות
כל ה "חיתוך" של eBay תרמו באופן קולקטיבי להזזת המחט, וזה קרה לאורך תקופה. המהדורות הושקו בהדרגה במהלך השנה, כשכל גרסה הולכת ומתקצרת בעשרות אלפיות השנייה, ובסופו של דבר הגיעו לנקודה שבה eBay נמצאת עכשיו:
ביצועים הם תכונה ויתרון תחרותי. חוויות שעברו אופטימיזציה מובילות להתעניינות רבה יותר של המשתמשים, להמרות ולהחזר ROI גבוה יותר. במקרה של eBay, האופטימיזציות האלה היו שונות - השקעה של מאמץ נמוך - עד כמה פעולות מתקדמות.
כדי לקבל מידע נוסף, מומלץ לקרוא את המאמר מהירות באלף קיצונים ולחפש מאמרים מפורטים יותר של מהנדסי eBay לגבי ביצועיהם בעתיד הקרוב.