איך התמקדות בביצועי אינטרנט שיפרה את שיעור הקליקים של Tokopedia' ב-35%

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

Tokopedia היא אחת מחברות המסחר האלקטרוני הגדולות באינדונזיה. עם יותר מ-2.7 מיליון רשתות סוחרים ברחבי המדינה, יותר מ-18 מיליון כרטיסי מוצר ויותר מ-50 מיליון מבקרים בחודש, צוות האינטרנט ידע שההשקעה בביצועי האינטרנט היא חיונית. הם יצרו תרבות שמתמקדת בביצועים, והשיגו עלייה של 35% בשיעורי הקליקים (CTR) ועלייה של 8% בהמרות (CVR).

35%

עלייה בשיעור הקליקים (CTR)

8%

עלייה בשיעור ההמרות (CVR)

4שניות

שיפור ב-TTI

הדגשת ההזדמנות

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

הגישה שבה השתמשו

JavaScript ואופטימיזציה של משאבים

חסימת עיבוד או שימוש ממושך ב-JavaScript היא סיבה נפוצה לבעיות בביצועים. הצוות נקט כמה צעדים כדי לצמצם את הבעיה:

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

אופטימיזציה של דף הבית

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

גודל ה-JavaScript של האפליקציה הוקטן ב-88% (מ-320KB ל-37KB). הציון של Lighthouse שיפר ב-90 נקודות. ה-FCP קיבל פחות משנייה אחת. גידול של 35% בשיעור הקליקים. עלייה של 8% בשיעור ההמרות.

תקצוב ביצועים ומעקב אחר ביצועים

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

  • מודד את איכות הרשת, ניטור התשתיות, ביצועי החזית וביצועי השרת.
  • נעשה שימוש בשילוב של ממשקי API של פלטפורמת האינטרנט (כמו Resource Timing API והכותרת Server-Timing), PageSpeed Insights (PSI) API ו- הדוח לגבי חוויית המשתמש ב-Chrome כדי לעקוב אחר מדדי השטח ושיעור ה-Lab.
  • המערכת מנתחת תמונות מ-Lighthouse כדי לזהות הזדמנויות לאופטימיזציה של התמונות.
  • אוכפת תקציב בגודל חבילה במהלך אינטגרציה רציפה (CI). הרצת ה-CI תיכשל אם החבילה חורגה מהתקציב.
ציון TTI של 2.2 שניות בדף הבית (ציון של Lighthouse: 88). ציון TTI של 1.9 שניות בדפי המוצרים (ציון של Lighthouse: 86).

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

דנדי סונרדי, מנהלת הנדסה, פלטפורמת אינטרנט, Tokopedia

בדף Scale on Web המקרים לדוגמה תוכלו לקרוא על סיפורי הצלחה נוספים מהודו ומדרום-מזרח אסיה.