סיפורה של סטארט-אפ על בניית חוויית אינטרנט הטובה בתחומה.
מידע כללי
Truebil נוסדה בשנת 2015 והיא זירת מסחר הודית אינטרנטית שבה מוכרים 100% מכוניות משומשות עם אישורים. בשירות הזה יש יותר מ-1.4 מיליון משתמשים פעילים בחודש. זהו פתרון מרכזי שכולל העברת בעלות, ביטוח, הלוואות ואחריות על שירות. לקוחות פוטנציאליים יכולים לראות דפי מוצרים ספציפיים עם תמונות ודוחות בדיקה מפורטים, ולקבל הערכות של כלי הרכב באמצעות התכונות 'השוואה' ו-'Truescore' שקיימות באתר. Truebil מייחד את המוצר שלה בעזרת תכונות מתקדמות, כולל המלצות מותאמות אישית שמבוססות על למידת מכונה, תכונה להוספה למועדפים, פיצ'ר לשיתוף רכב ועוד.
אתגר
Truebil היא חברת סטארט-אפ רזה שמבצעת עסקאות בתדירות נמוכה ומניבות ערך גבוה, ולכן היה חשוב לבחור את הפלטפורמה המתאימה כדי לתת עדיפות ולהשקיע בה.
ב-Truebil זיהו שהאתר לנייד הוא פלטפורמת היעד, ולכן הם בחרו באינטרנט כאפליקציה הראשונה שלהם, Truebil Lite, בזכות יכולת הגילוי הנאותה והקלות שבה היא קלה באינטרנט. טכנולוגיית האינטרנט מספקת עלויות פיתוח נמוכות יותר, פחות שימוש בנתונים ובזיכרון וצמצום משמעותי של עלויות צירוף הלקוחות בהשוואה לפיתוח של אפליקציה ל-Android/iOS. בנוסף, באמצעות פיתוח Progressive Web App (PWA), Truebil יכולה ליהנות מכל היתרונות של האינטרנט וגם מהיתרונות של iOS/Android.
פתרון
לצוות פנים-ארצי נדרש ארבעה חודשים כדי לפתח את Truebil Lite באמצעות React, Django ו-Preact (למעבר לייצור). הם מגדירים עקרונות מנחים ברורים לאפליקציית האינטרנט על סמך יעדי המשתמשים. החוויה צריכה להיות:
- מהיר בטעינה הראשונה ובניווטים הבאים,
- מהימנה, ללא תלות במגבלות הרשת או המכשיר של המשתמש, וגם
- מעניין, במיוחד במסכים קטנים של מכשירים ניידים, כך שהמשתמשים ירצו לחזור אליו.
ביצוע אופטימיזציה לטעינה ראשונה ולניווט מהיר
באמצעות Lighthouse שנועדו לבצע אופטימיזציה של הביצועים, הצוות אימץ תרבות שמתמקדת בביצועים והטמיע תכונות חדשות. ב-Truebil הצליחו לשפר משמעותית את חוויית המשתמש על ידי תעדוף המדדים הצגת תוכן ראשוני (First Contentful Paint) ו-זמן עד לאינטראקטיביות (TTI) וביצוע אופטימיזציה לטעינות ראשונות מהירות, לביקורים חוזרים ולניווט חלק. הצוות השיג את התוצאות האלה על ידי הגדרה של תקציבי ביצועים ושימוש במגוון שיטות כדי להשיג אותם.
הגדרה של תקציבי ביצועים
מתוך מחשבה על ביצועים, צוות Truebil בחר לתכנן את החוויה שלהם כאפליקציה בדף יחיד עם רינדור בצד השרת לטעינה ראשונה ועיבוד בצד הלקוח לטעינות הבאות. לא תמיד קל לנהל אפליקציות אינטרנט עם ביצועי עיבוד בצד הלקוח, ולכן Truebil הגדירה תקציבי ביצועים מחמירים מאוד כדי להבטיח שהן לא יתפשרו על המהירות, במיוחד כשהן מוסיפות עוד תכונות.
הצוות הגדיר תקציבים מחמירים המבוססים על אבני דרך עבור TTI במטרה לשמור על פחות מחמש שניות. כדי לעמוד ביעד הזה, אנשי החברה הבטיחו באופן ידני שאף גרסת build לא תחרוג מגודל חבילה של 250KB JavaScript, הקפידו לבדוק בקביעות את גודל התמונות ולעקוב באופן רציף אחרי ציון הביצועים של האפליקציה Lighthouse.
אופטימיזציה של חבילות JavaScript
הצוות התחיל ביסודות באמצעות דפוס PRPL כדי לשמור מראש במטמון ולבצע אופטימיזציה של מטענים ייעודיים (payloads) ב-JavaScript, ובאמצעות מעבר ל-HTTP/2 כדי להציג חבילות JavaScript קריטיות.
כדי לבצע טעינה מדורגת של משאבים לא קריטיים, הם השתמשו ברכיבי הטעינה המושהית ברמת המסגרת כדי לטעון מקטעים בחלק הנגלל.
כדי להסיר צווארי בקבוק בחבילות JavaScript, הצוות הפחית את מטענים ייעודיים (payloads) באמצעות פיצול קוד. הם השתמשו בגיבוב (chunking), שמבוסס על רכיבים ומסלולים, כדי לצמצם את גודל החבילה הראשית ולשפר את זמן הטעינה ב-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>.שליפה מראש (prefetch) באופן דינמי של הדף הבא
על ידי ניתוח הנתונים, הצוות זיהה את התהליכים הנפוצים ביותר שעוברים משתמשים, שלפיהם הם יכולים לבצע אופטימיזציה. במקרים כאלה, האפליקציה מורידה באופן דינמי את המשאב של הדף הבא באמצעות <link rel=prefetch> כדי להבטיח למשתמשים ניווט חלק. הצוות מזהה באופן ידני את הקישורים לשליפה מראש (prefetch), אבל הוא משתמש ב-webpack כדי לאגד את ה-JS של הקישורים האלה.
אופטימיזציה של תמונות וגופנים
תמונות הן חלק קריטי מחוויית המוצר והאמינות של Truebil, וכל כרטיס מוצר כולל עד 40 תמונות. כדי לוודא שתמונות לא חוסמות את טעינת הדף, הצוות בחר לשרת את כל המשאבים שלו מ-CDN ולהשתמש ב-imagemagick לאופטימיזציה של תמונות. בנוסף, החברה יצרה באמצעות Gzip את כל המשאבים הניתנים לדחיסה, כולל תמונות, JavaScript ו-CSS, כדי לקצר עוד יותר את זמן הטעינה.
כדי להימנע מהבהוב של טקסט בלתי נראה תוך שמירה על זמן טעינה נמוך ככל האפשר, Truebil הגדיר את שירות ה-CSS לשימוש בגופני מערכת כחלופה עד לטעינה של גופנים חיצוניים.
אופטימיזציות נוספות
כשהאפליקציה הייתה מוכנה, הצוות רצה לצמצם עוד יותר את גודל החבילה של הספק ואת זמן הביצוע של JavaScript, ולכן הם העבירו את אפליקציית React ל-Preact בסביבת הייצור. (מידע נוסף זמין באוסף תגובות.) הגישה הזו עזרה להם להקטין את גודל חבילת הספק מ-82.3KB ל-51.2KB.
בניית אמינות
עם התמקדות בשוק ההודי, הרוב המכריע של משתמשי Truebil ניגשים למוצר שלהם ברשתות לא רציפות, שלפעמים מתאימות לרוחב פס נמוך כמו 2G. לכן, חשוב ליצור חוויה עמידה לא רק כדי לשפר את הביצועים בתנאי רשת מוגבלים, אלא גם כדי לספק מוצר שהמשתמשים יכולים לסמוך עליו – מוצר שתמיד עובד.
אסטרטגיה היברידית של שמירה במטמון לטעינה אמינה
האינטראקטיביות וקצב השינוי של התוכן של Truebil משתנים במידה רבה. כדי להבטיח שכל התוכן שלו יהיה עדכני ומהימן, צוות Truebil יישם שמירה במטמון API באמצעות שילוב של אסטרטגיות שמתמקדות קודם כל ברשת, מהמטמון קודם ומתחילה במהירות רבה יותר.
בדפים סטטיים, כמו דף המינויים, ב-Truebil נעשה שימוש באסטרטגיה שמתמקדת במטמון כדי לעבור קודם למטמון של ה-API של המינוי, תוך חזרה לרשת.
בדפים עם תוכן דינמי שמשתנה לעיתים רחוקות, למשל דפי רישום או דפי פרטים, Truebil משתמשת באסטרטגיה שמתמקדת ברשת כדי שהדפדפן בודק תחילה תוכן ברשת לפני שהוא חוזר למטמון ה-API אם הרשת לא זמינה.
ובמקרים של דפים דינמיים שמשתנים לעיתים קרובות, כמו דפי הבית, דפי הסינון, דפי החיפוש ודפי העיר, Truebil משתמשת בשיטה המהירה ביותר לבחירת רשת או מטמון בהתאם למה שמתרחש קודם. כדי להבטיח שהתוכן יהיה עדכני, המטמון מתעדכן בכל פעם שתגובת הרשת שונה מזו שבמטמון.
Service worker ונהנים מחוויה מלאה במצב אופליין
למרות שחלק גדול מהתוכן של Truebil הוא דינמי מאוד - ניתן להוסיף או לקנות מכוניות בכל עת - הצוות רצה לוודא שלמשתמשים יהיה תוכן מסוים שיעניין אותם, גם אם הם עוברים על רשתות לא תקינות או שהם לא מחוברים לאינטרנט.
באמצעות שימוש ב-Service Workers, הצוות הצליח לשמור במטמון גם את הנתונים הסטטיים וגם את הנתונים הדינמיים שמשתמשים כבר יצרו איתם אינטראקציה, כדי שהמשתמש יוכל לצפות בהם במצב אופליין. כדי לוודא שהמשתמשים ידעו שהתוכן עשוי להשתנות כשהם יחזרו לאינטרנט, הצוות שינה את ממשק המשתמש לגווני אפור לציון מצב אופליין. עיון בדפי מוצרים הוא חלק קריטי בתהליך שעובר המשתמש ב-Truebil. משתמשים שביקרו ב-PWA לפחות פעם אחת יכולים לעיין בכרטיסי מוצר ובדפי מוצרים שבהם ביקרו בעבר, אבל לא יוכלו לראות עדכונים בכרטיס המוצר או במוצר.
משפרים את המעורבות כדי לעודד את המשתמשים לחזור
חוויה ראשונה מעניינת
מאחר שרוב המשתמשים שלהם מגיעים מערוצים בתשלום, Truebil הייתה צריכה להוסיף לאפליקציית האינטרנט שנטענת במהירות מוצר שמציג המלצות רלוונטיות ביותר להגדלת מספר ההמרות. הצוות משתמש במערכת המלצות שמבוססת על סינון מתוחכם למשתמשים קיימים, אבל המערכת שלו לא מתאימה למשתמשים שמתחברים בפעם הראשונה.
כדי לא לפגוע במשתמשים שמנסים את המוצר בפעם הראשונה, הצוות שילב מערכת המלצות בעזרת מאמצי השיווק בדיגיטל. הם מוסיפים לכתובת היעד של המודעה פרטי מוצר, כמו דגם הרכב, מחיר וסוג גוף, באמצעות פרמטר מנטר התנועה של Urchin. המערכת קוראת את המידע הזה על ידי מערכת ההמלצות של החברה ומובילה אותו לידי ביטוי במוצרים שמוצגים במודעה. אם המערכת לא קוראת פרטים כאלה בכתובת ה-URL, המערכת משתמשת במכוניות פופולריות, שהן שילוב של דגמים פופולריים, תקציבים פופולריים ומכוניות שהיו פופולריות בשבועות או בימים האחרונים.
אפליקציית אינטרנט שניתנת להתקנה
ב-Truebil פיתחו אפליקציית אינטרנט מהירה עם כל התכונות והחוויית שימוש מושכת, ולכן רצו להבטיח שהמשתמשים ימשיכו לחזור. החברה הבינו שאם ניתן להתקין את האפליקציה, היא תהפוך את הביקורים החוזרים לחלקים הרבה יותר.
הצוות הטמיע את התכונה Add to Home Screen כדי להפוך את המוצר שלו ל-Progressive Web App (PWA). הגישה הזו אפשרה למשתמשים להוסיף את Truebil Lite למסך הבית ולהפעיל אותו במצב מסך מלא. ומאחר שהם כבר הטמיעו מצב אופליין, הצוות הצליח להוסיף את התכונה החדשה בקלות.
כדי לוודא שהמשתמשים שלהם לא נשלחו כספאם ולהגדיל את הסיכוי שהמשתמשים יתקינו את האפליקציה, הצוות עדכן לאחרונה את האסטרטגיה שלו לקידום התקנת PWA. כך יופיעו הודעות התקנה שעשויות להועיל לסוגים שונים של משתמשים. Truebil נקבעה על בסיס אסטרטגיה של שלושה חלקים:
- הצגת הודעות כשהמשתמש השלים פעולה או כשהוא לא פעיל.
- הצגת הנחיות לפי הקשר למשתמשים מבוגרים.
- הצגת באנר כשהמשתמש בילה פרק זמן מוגדר באתר.
מודעות באנר שמוגדרות כברירת מחדל בסיום התהליך ובדפים עם נפח תנועה גבוה
הצוות החליט להציג מודעת באנר להתקנה כשמשתמש מסיים משימה או נמצא בדפים עם הרבה תנועה, אבל לא פעיל (כלומר, לא מבצע פעולה כמו גלילה או מילוי טופס). גישה זו אפשרה להם להימנע מהפרעה לפעילות המשתמש.
הנחיות לפי הקשר למשתמשים מבוגרים
לגבי משתמשים שהייתה להם אינטראקציה עם האפליקציה במשך זמן מה, הצוות השתמש בהודעות מותאמות אישית עם הקשר רחב כדי להראות כמה חשוב להתקין את האפליקציה במסך הבית:
באנר מותאם אישית להנחיות מבוססות-זמן
לבסוף, הצוות בנה מודעת באנר שאינה פולשנית, עם עיצוב דמוי הודעה שמופעלת באירועים ספציפיים, כגון פתיחת דף רישום או לאחר שהמשתמש בילה פרק זמן מוגדר באפליקציה:
בעקבות השיפורים האלה, שיעורי ההמרות והמעורבות של Truebil גדלו באופן משמעותי עם ארוך יותר של 26% בסשנים של משתמשים ועלייה של 61% במספר ההמרות. נתון זה משמעותי מאוד לעסק שלו, בהתחשב בערך העסקה הגבוה של כל המרה.
לחברות סטארט-אפ עם משאבים מוגבלים, בחירת הפלטפורמה הנכונה יכולה להיות קריטית להצלחת העסק. המעבר ל-PWA שמתמקד במהירות, עמידות ומעורבות אפשר לנו להגדיל את הוצאות ההכנסות לשיווק ב-80%, הודות להגדלת מספר ההמרות ופוטנציאל החשיפה החלקי באינטרנט.
ראקש ראמאן (Rakesh Raman), מייסד שותף ומנהל תחום המוצר והנתונים ב-Truebil
44%
שיפור בזמן הטעינה
26%
סשנים ארוכים יותר של משתמשים
61%
עלייה בהמרות
80%
עלייה בהוצאות על הכנסות משיווק