קניות למהירות ב-eBay.com

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

Addy Osmani

ב-2019, eBay השיקה יוזמה ברמת החברה שמטרתה לשפר את המהירות של האתר והאפליקציות למשתמשים. צוותים רבים התגייסו למטרה הזו. למעשה, בכל שיפור של 100 אלפיות השנייה בזמן הטעינה של דף החיפוש, ב-eBay ראו עלייה של 0.5% במספר הפעמים שבהן המשתמשים לחצו על 'הוספה לעגלת הקניות'.

בעזרת השימוש בתקציבי ביצועים (שנגזרו לאחר מחקר תחרותי עם הדוח לגבי חוויית המשתמש ב-Chrome) והתמקדות במדדי ביצועים מרכזיים שמתמקדים במשתמשים, הצוות של eBay הצליח לשפר באופן משמעותי את מהירות האתר.

…והנתונים שלהם בדוח לגבי חוויית המשתמש ב-Chrome מדגישים את השיפורים האלה.

עדיין יש לנו עבודה רבה לעשות, אבל ריכזנו כאן את הלקחים של eBay עד כה.

'חיתוך' בביצועי האתר

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

צמצום עומס התעבורה בכל משאבי הטקסט

אחת הדרכים להאיץ אתרים היא פשוט לטעון פחות קוד. ב-eBay צמצמו את עומסי הטקסט על ידי חיתוך כל הבייטים שלא בשימוש ובלתי נחוצים בתגובות של JavaScript,‏ CSS,‏ HTML ו-JSON שמוצגות למשתמשים. בעבר, בכל תכונה חדשה, eBay הגדילה את עומס העבודה בתגובות שלה, בלי לנקות את מה שלא היה בשימוש. עם הזמן, הבעיה הזו הצטברה והפכה לצוואר בקבוק בביצועים. בדרך כלל, הצוותים נהגו לדחות את פעילות הניקוי הזו, אבל תופתעו לגלות כמה eBay הצליחה לחסוך.

'החיתוך' כאן הוא הבייטים שהוחמצו בתוכן התגובה.

אופטימיזציה של נתיב קריטי לתוכן שמופיע מעל למסך

לא כל פיקסל במסך חשוב באותה מידה. התוכן בחלק העליון של המסך קריטי יותר מאשר תוכן בחלק התחתון. אפליקציות ל-iOS, ל-Android, למחשב ולאינטרנט יודעות את זה, אבל מה לגבי שירותים? בארכיטקטורת השירותים של eBay יש שכבה שנקראת Experience Services, שאליה מדברים ממשקי הקצה (אפליקציות ספציפיות לפלטפורמה ושרתי אינטרנט). השכבה הזו תוכננה במיוחד להיות מבוססת-תצוגה או מבוססת-מכשיר, ולא מבוססת-ישות כמו פריט, משתמש או הזמנה. לאחר מכן, eBay הציגה את הקונספט של נתיב קריטי לשירותי חוויית משתמש. כשמגיעה בקשה לשירותים האלה, הם פועלים כדי לקבל את הנתונים של התוכן שמופיע בחלק העליון של המסך באופן מיידי, על ידי קריאה לשירותים אחרים ב-upstream במקביל. ברגע שהנתונים מוכנים, הם נמחקים באופן מיידי. הנתונים שמתחת לקצה המסך נשלחים בחלק מאוחר יותר או נטענים באיטרציה. התוצאה: המשתמשים רואים את התוכן שמופיע מעל למסך מהר יותר.

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

אופטימיזציה של תמונות

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

קודם כל, eBay הגדירה פורמט תמונות WebP כפורמט הסטנדרטי לתוצאות החיפוש בכל הפלטפורמות, כולל iOS,‏ Android ודפדפנים נתמכים. דף תוצאות החיפוש הוא הדף עם הכי הרבה תמונות ב-eBay, והם כבר השתמשו ב-WebP, אבל לא באופן עקבי.

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

'חיתוך' כאן הוא הבייטים של התמונה שלא נשלחו למשתמשים.

אחזור מראש חזוי של נכסים סטטיים

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

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

'החיתוך' כאן הוא זמן הרשת של נכסים סטטיים מסוג CSS ו-JavaScript בזמן הניווט הראשון.

אחזור מראש של תוצאות החיפוש המובילות

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

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

הרמה השנייה מתרחשת במטמון הדפדפן, שזמין באוסטרליה. שליפה מראש של פריטים הייתה אופטימיזציה מתקדמת בגלל אופי הפריטים הדינמי. יש גם הרבה ניואנסים: חשיפות בדף, קיבולת, פריטים במכרז וכו'. מידע נוסף זמין במצגת של LinkedIn בנושא Performance Engineering Meetup, או בהמתנה לפרסום פוסט מפורט בנושא על ידי מהנדסי eBay.

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

הורדה מיידית של תמונות חיפוש

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

'החיתוך' כאן הוא זמן ההתחלה של ההורדה של תמונות מתוצאות החיפוש.

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

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

עם זאת, היה תנאי. ב-eBay היו כמה אלמנטים של התאמה אישית בחלון הקופץ של ההצעות, שלא ניתן לשמור במטמון ביעילות. למרבה המזל, זה לא היה בעיה באפליקציות הספציפיות לפלטפורמה, כי אפשר היה להפריד את ממשק המשתמש להתאמה אישית מההצעות. באינטרנט, בשווקים בינלאומיים, זמן האחזור היה חשוב יותר מהיתרון הקטן של ההתאמה האישית. עכשיו, ההצעות האוטומטיות של eBay מוצגות במטמון של CDN ברחבי העולם לאפליקציות ספציפיות לפלטפורמות ולשווקים מחוץ לארה"ב ב-eBay.com.

'החיתוך' כאן הוא זמן האחזור ברשת וזמן העיבוד בשרת של ההצעות האוטומטיות.

שמירה במטמון קצה למשתמשים לא מוכרים בדף הבית

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

eBay החליטה לשמור במטמון את תוכן המשתמש שלא זוהה (HTML) ברשת הקצה שלה (PoPs) למשך תקופה קצרה. משתמשים שמבקרים באתר בפעם הראשונה יכולים עכשיו לקבל את תוכן דף הבית משרת שנמצא בקרבת מקום, במקום ממרכז נתונים מרוחק. eBay עדיין בודקת את האפשרות הזו בשווקים בינלאומיים, שבהם ההשפעה שלה תהיה גדולה יותר.

'החיתוך' כאן הוא שוב גם זמן האחזור ברשת וגם זמן העיבוד בשרת למשתמשים לא מוכרים.

אופטימיזציה לפלטפורמות אחרות

שיפורים בניתוח של אפליקציות ל-iOS או ל-Android

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

עכשיו המשתמשים יכולים לראות את התוכן מהר יותר. בנוסף, באפליקציה ל-Android, eBay מתחילה לאתחל את בקרי תצוגת החיפוש ברגע שהמשתמש מתחיל להקליד בתיבת החיפוש (ב-iOS כבר בוצעה אופטימיזציה כזו). בעבר, המודעות הוצגו רק אחרי שהמשתמשים לחצו על לחצן החיפוש. עכשיו המשתמשים יכולים להגיע לתוצאות החיפוש מהר יותר. 'החיתוך' כאן הוא הזמן שבו המכשירים מציגים תוכן רלוונטי.

שיפורים בזמן ההפעלה של אפליקציות ל-Android

ההנחה הזו רלוונטית לאופטימיזציה של זמן הפעלה במצב התחלתי (cold start) באפליקציות ל-Android. כשאפליקציה מופעלת במצב התחלתי (cold start), מתבצע הרבה אתחול גם ברמת מערכת ההפעלה וגם ברמת האפליקציה. צמצום זמן האינטליקציה ברמת האפליקציה עוזר למשתמשים לראות את מסך הבית מהר יותר. צוות eBay ערך ניתוח פרופיל ושם לב שלא כל האינטליקציות נדרשות כדי להציג תוכן, וחלקן יכולות להתבצע באופן עצל.

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

מסקנות

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

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

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