איך Truebil הפכה את האינטרנט לערוץ הצמיחה שלה

הסיפור של סטארט-אפ שבנה חוויית אינטרנט מהטובות ביותר.

Harleen Batra

מידע כללי

Truebil היא זירת מסחר הודית אונליין שנוסדה בשנת 2015 ומוכרת מכוניות משומשות שעברו אישור ב-100%. עם יותר מ-1.4 מיליון משתמשים פעילים בחודש, זהו פתרון מקיף שכולל העברת בעלות, ביטוח, הלוואות ואחריות על שירותים. לקוחות פוטנציאליים יכולים לראות דפי מוצרים ספציפיים עם תמונות ודוחות בדיקה מפורטים, ולקבל הערכות של כלי רכב באמצעות התכונות 'השוואה' ו'Truescore' באתר. המוצר של Truebil מתייחד בתכונות רבות, כולל המלצות מותאמות אישית שמבוססות על למידת מכונה, תכונה להוספה למועדפים, תכונה לשיתוף מכונית ועוד.

האתגר

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

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

פתרון

צוות פנימי פיתח את Truebil Lite במשך ארבעה חודשים באמצעות React,‏ Django ו-Preact (למיגרציה של הייצור). הם הגדירו עקרונות מנחים ברורים לאפליקציית האינטרנט על סמך מטרות המשתמשים. חוויית המשתמש הייתה צריכה להיות:

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

אופטימיזציה לטעינה מהירה של הדף הראשון ולניווטים

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

הגדרת תקציבי ביצועים

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

הצוות הגדיר תקציבים קפדניים שמבוססים על אבני דרך ל-TTI, במטרה לשמור על זמן הטעינה מתחת לחמש שניות. כדי לעמוד ביעד הזה, הם הקפידו באופן ידני שאף גרסת build לא תחרוג מגודל של 250KB של קובץ JavaScript, בדקו באופן קבוע את גודל התמונות ועקבו באופן רציף אחרי ציון הביצועים של האפליקציה ב-Lighthouse.

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

הצוות התחיל עם היסודות באמצעות תבנית PRPL כדי לבצע שמירה במטמון מראש ואופטימיזציה של מטען ייעודי (payload) של JavaScript, ומעבר ל-HTTP/2 כדי להציג חבילות קריטיות של JavaScript.

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

כדי להסיר צווארי בקבוק בחבילות JavaScript, הצוות צמצם את המטען הייעודי (payload) באמצעות פיצול קוד. הם השתמשו בחלוקה לחלקים לפי רכיבים ומסלולים כדי להקטין את גודל החבילה הראשית ולקצר את זמן הטעינה ב-44%. זמן הטעינה עד לפעילות מלאה (TTI) ירד מ-6 שניות לכ-5 שניות, והצגת התוכן הראשוני (FMP) ירדה מ-4.1 שניות ל-3.6 שניות.

ההשפעה של הקטנת גודל המקטע.

CSS קריטי מוטבע

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

ההשפעה של הטמעת CSS קריטי.

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

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

ההשפעה של הוספת <link rel=preconnect>.

טעינה מראש דינמית של הדף הבא

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

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

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

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

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

אופטימיזציות נוספות

כשהאפליקציה הייתה מוכנה, הצוות רצה לצמצם עוד יותר את גודל חבילת הספק ואת זמן הריצה של JavaScript, ולכן הוא העביר את אפליקציית React ל-Preact בייצור. (מידע נוסף זמין באוסף המאמרים בנושא React). הגישה הזו עזרה להם לצמצם את גודל חבילת הספקים מ-82.3KB ל-51.2KB.

אמינות מובנית

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

אסטרטגיית שמירת מטמון היברידית לטעינה אמינה

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

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

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

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

קובצי Service Worker לחוויית אופליין מלאה

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

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

Truebil Lite במצב אופליין.

שיפור המעורבות כדי לעודד את המשתמשים לחזור

חוויה ראשונית מעניינת

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

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

אפליקציית אינטרנט להתקנה

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

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

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

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

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

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

הנחיות לפי הקשר למשתמשים בוגרים

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

באנר מותאם אישית להנחיות מבוססות-זמן

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

בעקבות השיפורים האלה, שיעורי ההמרה והמעורבות של Truebil גדלו באופן משמעותי, עם סשנים ארוכים יותר ב-26% והמרות רבות יותר ב-61% . הנתונים האלה חשובים מאוד לעסק, בהתחשב בערך העסקה הגבוה של כל המרה.

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

ראקש ראמן (Rakesh Raman), מייסד שותף ומנהל מוצר ומדע נתונים ב-Truebil

‫44_%

שיפור בזמן הטעינה

‫26_%

פעילויות למשך זמן ארוך יותר למשתמשים

‫61_%

עלייה בהמרות

‫80_%

עלייה ביחס בין ההכנסות להוצאות השיווקיות