סיפור של סטארט-אפ שפיתח את חוויית האינטרנט הטובה ביותר בתחום.
מידע כללי
Truebil היא זירת מסחר אונליין הודית שנוסדה בשנת 2015 ומוכרת מכוניות משומשות שאושרו במאה אחוז. ל-Carvana יש יותר מ-1.4 מיליון משתמשים פעילים בחודש, והיא מספקת פתרון מקיף שכולל העברת בעלות, ביטוח, הלוואות ותעודות אחריות לשירות. לקוחות פוטנציאליים יכולים לראות דפי מוצרים ספציפיים עם תמונות ודוחות בדיקה מפורטים, ולקבל הערכות של כלי רכב באמצעות התכונות 'השוואה' ו-'Truescore' באתר. Truebil מבדילה את המוצר שלה באמצעות תכונות עשירות, כולל המלצות מותאמות אישית על סמך למידת מכונה, תכונה להוספה למועדפים, תכונה לשיתוף רכב ועוד.
האתגר
Truebil היא חברת סטארט-אפ יעילה עם עסקאות בתדירות נמוכה ובערך גבוה, ולכן היה חשוב לבחור את הפלטפורמה הנכונה לתעדוף ולהשקעה.
ב-Truebil זיהו את הפלטפורמה לנייד כפלטפורמת היעד שלהם, ובחרו באינטרנט לאפליקציה הראשונה שלהם, Truebil Lite, בגלל החשיפה הקלה באינטרנט והחיכוך הנמוך. טכנולוגיית האינטרנט מאפשרת ליהנות מעלות פיתוח נמוכה יותר, משימוש קטן יותר בנתונים ובזיכרון ועלויות נמוכות יותר לצורך צירוף לקוחות בהשוואה לפיתוח אפליקציה ל-Android או ל-iOS. בנוסף, פיתוח אפליקציה מסוג Progressive Web App (PWA) מאפשר ל-Truebil ליהנות מכל היתרונות של האינטרנט וגם מהיתרונות של iOS או Android.
פתרון
צוות פנימי של החברה פיתח את Truebil Lite במשך ארבעה חודשים באמצעות React, Django ו-Preact (להעברה בסביבת הייצור). הם קבעו עקרונות מנחים ברורים לאפליקציית האינטרנט על סמך יעדי המשתמשים. חוויית המשתמש הייתה צריכה להיות:
- מהיר בטעינת הדף הראשונה ובפעולות ניווט לאחר מכן,
- מהימנה, ללא קשר למגבלות הרשת או המכשיר של המשתמש, וגם
- מעוררת עניין, במיוחד במסכים קטנים של מכשירים ניידים, כדי שהמשתמשים ירצו לחזור אליה.
אופטימיזציה לטעינה מהירה של האתר בפעם הראשונה ולניווטים מהירים
בעזרת Lighthouse, הצוות השתמש בתרבות של התמקדות בביצועים בזמן הטמעת התכונות החדשות. ב-Truebil הצליחו לשפר משמעותית את חוויית המשתמש על ידי מתן עדיפות למדדים הצגת תוכן ראשוני וזמן לפעולה אינטראקטיבית (TTI), וביצוע אופטימיזציה לטעינה מהירה בפעם הראשונה, לביקורים חוזרים ולניווט חלק. הצוות השיג את התוצאות האלה על ידי הגדרת תקציבי ביצועים ושימוש במגוון שיטות.
הגדרת תקציבי ביצועים
הצוות של Truebil התמקד בביצועים, ולכן בחר לתכנן את חוויית המשתמש כאפליקציית דף יחיד עם עיבוד בצד השרת בטעינה הראשונה ועיבוד בצד הלקוח בטעינות הבאות. קשה לשמור על ביצועים טובים באפליקציות אינטרנט עם עיבוד בצד הלקוח, ולכן ב-Truebil הגדירו תקציבי ביצועים מחמירים מאוד כדי להבטיח שהם לא יפגעו במהירות, במיוחד כשהם מוסיפים עוד תכונות.
הצוות הגדיר תקציבים מחמירים ל-TTI שמבוססים על אבני דרך, במטרה לשמור על זמן טעינה של פחות מחמש שניות. כדי להשיג את היעד הזה, הם דאגו באופן ידני שאף גרסה לא תחרוג מגודל חבילת JavaScript של 250KB, ביצעו בדיקה שוטפת של גודל התמונות ועקבו באופן קבוע אחרי ציון הביצועים של האפליקציה ב-Lighthouse.
אופטימיזציה של חבילות JavaScript
הצוות התחיל מהיסודות, והשתמש בתבנית PRPL כדי לבצע אופטימיזציה של עומסי העבודה של JavaScript ולשמור אותם במטמון מראש, ועבר ל-HTTP/2 כדי להציג חבילות JavaScript קריטיות.
כדי לבצע טעינה איטית של משאבים לא קריטיים, הם השתמשו ברכיבי הטעינה האיטית ברמת המסגרת כדי לטעון קטעים מתחת לקצה המסך.
כדי להסיר צווארי בקבוק בחבילות JavaScript, הצוות צמצם את עומסי התעבורה באמצעות פיצול קוד. הם השתמשו בקיצוץ לקטעים לפי רכיבים ומסלולים כדי לצמצם את גודל החבילה הראשית ולשפר את זמן הטעינה ב-44%. הזמן עד לפעילות מלאה (TTI) ירד מ-6 שניות ל-5 שניות בערך, והזמן להצגת תוכן משמעותי (FMP) ירד מ-4.1 שניות ל-3.6 שניות.

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

הימנעות מכמה נסיעות הלוך ושוב יקרות לכל מקור
כדי לצמצם את התקורה של DNS ו-TLS, ב-Truebil השתמשו ב-<link rel="preconnect">
וב-<link rel="dns-prefetch">
. הגישה הזו מאפשרת לדפדפן להשלים את לחיצת היד ב-TLS בהקדם האפשרי בזמן הטעינה של הדף, ולפתור מראש שמות דומיינים ממקורות שונים, וכך לספק חוויית משתמש מאובטחת ומהירה.

<link rel=preconnect>
.אחזור מקדים דינמי של הדף הבא
ניתוח הנתונים שלהם עזר לצוות לזהות את תהליכי השימוש הנפוצים ביותר שבהם הם יכולים לבצע אופטימיזציה. במקרים כאלה, האפליקציה מורידת באופן דינמי את המשאב של הדף הבא באמצעות <link rel=prefetch>
כדי להבטיח ניווט חלק למשתמשים. הצוות מזהה ידנית את הקישורים לטעינה מראש, אבל הוא משתמש ב-webpack כדי לארוז את ה-JS של הקישורים האלה.

אופטימיזציה של תמונות וגופנים
תמונות הן חלק חיוני מחוויית המוצר ומהמהימנוּת של Truebil, וכל כרטיס מוצר כולל עד 40 תמונות. כדי לוודא שהתמונות לא חוסמות את טעינת הדף, הצוות בחר להציג את כל המשאבים שלו מ-CDN ולהשתמש ב-imagemagick לאופטימיזציה של התמונות. הם גם השתמשו ב-Gzip לכל המשאבים שניתן לדחוס, כולל תמונות, JavaScript ו-CSS, כדי לקצר עוד יותר את זמן הטעינה.
כדי למנוע הבהוב של טקסט בלתי נראה תוך שמירה על זמן טעינה קצר ככל האפשר, ב-Truebil הגדרו את קובץ ה-CSS כך שישתמש בגופנים של המערכת כחלופה עד שגופני ה-CSS החיצוניים ייטענו.
אופטימיזציות נוספות
כשהאפליקציה הייתה מוכנה, הצוות רצה לצמצם עוד יותר את גודל החבילה של הספק ואת זמן הביצוע של JavaScript, ולכן החליפו את אפליקציית React ב-Preact בסביבת הייצור. (מידע נוסף זמין באוסף React). הגישה הזו עזרה להם לצמצם את גודל החבילה של הספק מ-82.3KB ל-51.2KB.
אמינות מובנית
החברה מתמקדת בשוק ההודי, ורוב המשתמשים ב-Truebil ניגשים למוצר שלה דרך רשתות לא יציבות, שלפעמים הן ברוחב פס נמוך של 2G. לכן, פיתוח חוויית משתמש עמיד היה קריטי לא רק לשיפור הביצועים בתנאים של רשתות מוגבלות, אלא גם כדי לספק מוצר שהמשתמשים יכולים לסמוך עליו – מוצר שתמיד עובד.
אסטרטגיית מטמון היברידית לטעינה מהימנה
האינטראקטיביות וקצב השינוי של התוכן ב-Truebil משתנים מאוד. כדי לוודא שכל התוכן שלהם עדכני ואמין, צוות Truebil הטמיע אחסון ב-API באמצעות שילוב של אסטרטגיות שמתמקדות ברשת, באחסון ובמהירות.
בדפים סטטיים, כמו דף המינויים, Truebil משתמשת באסטרטגיית 'מטמון קודם' כדי לעבור קודם למטמון של API המינויים, ואז לעבור לרשת.
בדפים עם תוכן דינמי שמשתנה לעיתים רחוקות, כמו דפי המוצרים או דפי הפרטים שלהם, מערכת Truebil משתמשת באסטרטגיה של 'רשת קודם', כך שהדפדפן בודק קודם את הרשת כדי למצוא תוכן, ואם הרשת לא זמינה, הוא עובר למטמון ה-API.
בדפים דינמיים שמשתנים לעיתים קרובות, כמו דף הבית, דף המסננים, דף החיפוש ודף העיר, מערכת Truebil משתמשת באסטרטגיית 'המהיר ביותר קודם' כדי לבחור בין נתונים מהרשת לבין נתונים ששמורים במטמון, על סמך מה שמגיע קודם. כדי לוודא שהתוכן עדכני, המטמון מתעדכן בכל פעם שהתגובה מהרשת שונה ממה שמופיע במטמון.
קובצי שירות (service workers) לחוויה מלאה במצב אופליין
אף על פי שחלק גדול מהתוכן של Truebil הוא דינמי מאוד – אפשר להוסיף או לקנות מכוניות בכל שלב – הצוות רצה לוודא שלמשתמשים תהיה גישה לכמה תוכן שיאפשר להם להתעניין בו, גם אם הם נמצאים ברשתות לא יציבות או אופליין לגמרי.
בעזרת שירותי עבודה, הצוות הצליח לשמור במטמון גם נתונים סטטיים וגם נתונים דינמיים שהמשתמש כבר קיים איתם אינטראקציה, כדי שהמשתמש יוכל לצפות בהם במצב אופליין. כדי לוודא שהמשתמשים יודעים שהתוכן עשוי להשתנות כשהם יחזרו לאינטרנט, הצוות שינה את ממשק המשתמש לצבע אפור כדי לציין מצב אופליין. דפדוף בדפי המוצרים הוא חלק קריטי בתהליך שעוברים המשתמשים ב-Truebil. משתמשים שביקרו באפליקציית ה-PWA לפחות פעם אחת יכולים לעיין בכרטיסי מוצרים ובדפי מוצרים שבהם הם ביקרו בעבר, אבל הם לא יוכלו לראות עדכונים בכרטיס או במוצר.

שיפור המעורבות כדי למשוך משתמשים חוזרים
חוויה ראשונית מרתקת
מאחר שרוב המשתמשים של Truebil מגיעים מערוצים בתשלום, החברה נזקקה למוצר שיציג המלצות רלוונטיות מאוד כדי להגדיל את מספר ההמרות באפליקציית האינטרנט שלה, שנטענת במהירות. הצוות משתמש במערכת המלצות שמבוססת על סינון מתוחכם למשתמשים קיימים, אבל המערכת לא פועלת למשתמשים שנכנסים לחשבון בפעם הראשונה.
כדי למנוע מהמשתמשים בפעם הראשונה חוויית שימוש ראשונית (cold start), הצוות שילב מערכת המלצות באמצעות מאמצי השיווק הדיגיטלי שלו. הם מוסיפים פרטי מוצרים כמו דגם הרכב, המחיר וסוג הגוף לכתובת היעד של המודעה באמצעות פרמטר UTM, שמערכת ההמלצות שלהם קוראת אותו ומשקפת אותו במוצרים שמוצגים. אם המערכת לא קוראת פרטים כאלה בכתובת ה-URL, היא חוזרת לאפשרות 'רכבים פופולריים', שהיא שילוב של דגמים פופולריים, תקציבים פופולריים ורכבים שהיו פופולריים בשבועות או בימים האחרונים.
אפליקציית אינטרנט להתקנה
אחרי שיצרה אפליקציית אינטרנט מהירה עם מגוון תכונות וחוויית משתמש מרתקת, Truebil רצתה להבטיח שהמשתמשים שלה ימשיכו לחזור. הם הבינו שהאפשרות להתקין את האפליקציה תעזור להם להפוך את הביקורים החוזרים לחלקים יותר.
הצוות הטמיע את התכונה הוספה למסך הבית כדי להפוך את המוצר לאפליקציית Progressive Web App (PWA) מלאה. הגישה הזו אפשרה למשתמשים להוסיף את Truebil Lite למסך הבית ולהפעיל אותו במצב מסך מלא. מאחר שכבר הטמיעו מצב אופליין, הצוות הצליח להוסיף את התכונה החדשה בקלות.
כדי להבטיח שהמשתמשים לא יקבלו ספאם ולהגדיל את הסבירות שהם יתקינו את האפליקציה, הצוות עדכן לאחרונה את האסטרטגיה שלו לקידום התקנת אפליקציות PWA, כך שההנחיות להתקנה יופיעו רק כשהן יהיו מועילות באמת לסוגים שונים של משתמשים. ב-Truebil בחרו באסטרטגיה בת שלושה חלקים:
- הצגת הנחיות כשהמשתמש משלים פעולה או כשהוא לא פעיל.
- הצגת הנחיות לפי הקשר למשתמשים בוגרים.
- הצגת באנר כשהמשתמש מבלה פרק זמן מוגדר באתר.
מודעות באנר שמוגדרות כברירת מחדל בסיום תהליך ובדפים עם נפח תנועה גבוה
הצוות החליט להציג באנר להתקנה כשמשתמש משלים משימה או נמצא בדפים עם נפח תנועה גבוה אבל לא פעיל (כלומר, לא מבצע פעולה כלשהי, כמו גלילה או מילוי טופס). הגישה הזו אפשרה להם להימנע מהפרעה לפעילות של המשתמש.
הנחיות לפי הקשר למשתמשים בוגרים
למשתמשים שהיו להם אינטראקציות עם האפליקציה במשך זמן מה, הצוות השתמש בהודעות בהתאמה אישית לפי הקשר כדי להראות את הערך של התקנת האפליקציה במסך הבית:
באנר בהתאמה אישית להנחיות מבוססות-זמן
לבסוף, הצוות יצר באנר לא פולשני בעיצוב של התראה, שמופיע באירועים ספציפיים, כמו פתיחת דף של כרטיס מוצר או אחרי שהמשתמש מבלה פרק זמן מסוים באפליקציה:

בעקבות השיפורים האלה, שיעורי ההמרה והמעורבות של Truebil עלו באופן משמעותי, עם סשנים ארוכים יותר של משתמשים ב-26% ו61% יותר המרות. מדובר בשיפור משמעותי לעסק, בהתחשב בערך העסקה הגבוה של כל המרה.
בסטארט-אפ עם משאבים מוגבלים, הבחירה בפלטפורמה המתאימה יכולה להיות קריטית להצלחת העסק. המעבר לאפליקציית PWA שמתמקדת במהירות, בעמידות ובמעורבות אפשר לנו להגדיל את ההכנסות מול הוצאות השיווק ב-80%, הודות לעלייה במספר ההמרות ולנגישות ללא פשרות באינטרנט.
ראקיש ראמאן (Rakesh Raman), ממייסדי Truebil וראש מחלקת המוצר ומדעי הנתונים בחברה
44%
שיפור זמן הטעינה
26%
סשנים ארוכים יותר של משתמשים
61%
עלייה במספר ההמרות
80%
עלייה ביחס בין ההכנסות להוצאות השיווק