چگونه Truebil وب را به کانال رشد خود تبدیل کرد

داستان یک استارتاپ در مورد ساخت یک تجربه وب درجه یک.

Harleen Batra

درباره

Truebil که در سال ۲۰۱۵ تأسیس شد، یک بازار آنلاین هندی است که خودروهای دست دوم ۱۰۰٪ تأیید شده را می‌فروشد. با بیش از ۱.۴ میلیون کاربر فعال ماهانه، این یک راه‌حل جامع است که شامل انتقال سند، بیمه، وام و ضمانت خدمات می‌شود. مشتریان بالقوه می‌توانند صفحات محصول را به صورت جداگانه با تصاویر و گزارش‌های بازرسی دقیق مشاهده کنند و با ویژگی‌های «مقایسه» و «Truescore» سایت، ارزیابی‌های خودرو را دریافت کنند. Truebil محصول خود را با ویژگی‌های غنی، از جمله توصیه‌های شخصی‌سازی‌شده مبتنی بر یادگیری ماشین، ویژگی افزودن به موارد دلخواه، ویژگی اشتراک‌گذاری خودرو و موارد دیگر، متمایز می‌کند.

چالش

تروبیل یک استارتاپ ناب با تراکنش‌های با فرکانس پایین و ارزش بالا است، بنابراین انتخاب پلتفرم مناسب برای اولویت‌بندی و سرمایه‌گذاری بسیار مهم بود.

Truebil موبایل را به عنوان پلتفرم هدف خود شناسایی کرد و به دلیل کشف آسان وب و اصطکاک کم، وب را برای اولین برنامه خود، Truebil Lite ، انتخاب کردند. فناوری وب هزینه‌های توسعه کمتر، استفاده کمتر از داده و حافظه و هزینه‌های جذب مشتری را به طور قابل توجهی کمتر از ساخت یک برنامه Android/iOS فراهم می‌کند. و با ساخت یک برنامه وب پیش‌رونده (PWA)، Truebil می‌تواند از تمام مزایای وب و مزایای iOS/Android بهره‌مند شود.

راه حل

یک تیم داخلی چهار ماه طول کشید تا Truebil Lite را با استفاده از React، Django و Preact (برای مهاجرت به محیط تولید) توسعه دهد. آنها اصول راهنمای روشنی را برای برنامه وب بر اساس اهداف کاربر تعیین کردند. این تجربه باید شامل موارد زیر می‌بود:

• سرعت بالا در بارگذاری اولیه و پیمایش‌های بعدی،
• قابل اعتماد ، مستقل از محدودیت‌های شبکه یا دستگاه کاربر، و
• جذاب ، مخصوصاً برای صفحات نمایش کوچک موبایل، طوری که کاربران بخواهند دوباره به آن مراجعه کنند.

برای بارگذاری اولیه سریع و پیمایش بهینه شوید

با استفاده از Lighthouse برای هدایت بهینه‌سازی عملکرد، تیم ضمن پیاده‌سازی ویژگی‌های جدید، فرهنگ اولویت عملکرد را اتخاذ کرد. Truebil توانست با اولویت‌بندی معیارهای First Contentful Paint و Time to Interactive (TTI) و بهینه‌سازی برای بارگذاری سریع اولیه، بازدیدهای مکرر و پیمایش روان، تجربه کاربری را به طور قابل توجهی بهبود بخشد. تیم با تعیین بودجه‌های عملکرد و استفاده از تکنیک‌های مختلف برای دستیابی به آنها، به این نتایج دست یافت.

بودجه‌های عملکردی را تنظیم کنید

با توجه به ذهنیت اولویت عملکرد، تیم Truebil تصمیم گرفت تجربه خود را به عنوان یک برنامه تک صفحه‌ای با رندر سمت سرور برای اولین بار و رندر سمت کلاینت برای بارهای بعدی طراحی کند. حفظ عملکرد برنامه‌های وب با رندر سمت کلاینت می‌تواند دشوار باشد، بنابراین Truebil بودجه‌های عملکرد بسیار دقیقی را تعیین کرد تا اطمینان حاصل شود که سرعت به خطر نمی‌افتد، به خصوص با اضافه شدن ویژگی‌های بیشتر.

این تیم بودجه‌های سختگیرانه‌ای را بر اساس نقاط عطف برای TTI تعیین کرد تا آن را زیر پنج ثانیه نگه دارد. برای رسیدن به این هدف، آنها به صورت دستی اطمینان حاصل کردند که هیچ ساختی از حجم بسته جاوا اسکریپت ۲۵۰ کیلوبایتی تجاوز نمی‌کند، دائماً اندازه تصاویر را بررسی می‌کردند و به طور مداوم امتیاز عملکرد Lighthouse برنامه را پیگیری می‌کردند.

بهینه‌سازی بسته‌های جاوا اسکریپت

این تیم با استفاده از الگوی PRPL برای پیش‌ذخیره‌سازی و بهینه‌سازی بارهای داده جاوا اسکریپت و با انتقال به HTTP/2 برای ارائه بسته‌های مهم جاوا اسکریپت، کار خود را با اصول اولیه آغاز کرد.

برای بارگذاری تنبل منابع غیر حیاتی، آنها از اجزای بارگذاری تنبل در سطح چارچوب خود برای بارگذاری قطعات زیر صفحه استفاده کردند.

برای رفع هرگونه گلوگاه در بسته‌های جاوا اسکریپت، تیم از طریق تقسیم کد، حجم داده‌ها را کاهش داد . آن‌ها از قطعه‌بندی مبتنی بر کامپوننت و مسیر برای کاهش اندازه بسته اصلی و بهبود زمان بارگذاری تا ۴۴ درصد استفاده کردند، به طوری که TTI از ۶ ثانیه به حدود ۵ ثانیه و First Meaningful Paint (FMP) از ۴.۱ ثانیه به ۳.۶ ثانیه کاهش یافت.

CSS انتقادی درون خطی

برای بهبود بیشتر FMP، تیم از Lighthouse برای یافتن فرصت‌هایی برای بهینه‌سازی عملکرد و اعتبارسنجی تأثیر آن استفاده کرد. Lighthouse نشان داد که کاهش CSS مسدودکننده رندر بیشترین تأثیر را خواهد داشت، بنابراین Truebil تمام CSSهای حیاتی را inline کرد و CSSهای غیرحیاتی را به تعویق انداخت . این تکنیک FMP را حدود ۲ ثانیه کاهش داد .

از سفرهای رفت و برگشت متعدد و پرهزینه به هر مبدا خودداری کنید

برای کاهش سربار DNS و TLS، Truebil از <link rel="preconnect"> و <link rel="dns-prefetch"> استفاده کرد. این رویکرد باعث می‌شود مرورگر در اسرع وقت در هنگام بارگذاری صفحه، TLS handshake را تکمیل کند و نام‌های دامنه cross-origin را از قبل حل کند و یک تجربه کاربری امن و سریع را فراهم کند.

صفحه بعدی را به صورت پویا پیش دریافت کنید

با تجزیه و تحلیل داده‌های خود، تیم، رایج‌ترین مسیرهای کاربری را که می‌توانستند برای آنها بهینه‌سازی کنند، شناسایی کرد. در این موارد، برنامه به صورت پویا با استفاده از <link rel=prefetch> منبع صفحه بعدی را دانلود می‌کند تا پیمایش روان برای کاربران تضمین شود. در حالی که تیم به صورت دستی لینک‌ها را برای prefetch شناسایی می‌کند، از webpack برای بسته‌بندی JS برای آن لینک‌ها استفاده می‌کند.

بهینه سازی تصاویر و فونت ها

تصاویر بخش مهمی از تجربه و اعتبار محصول Truebil هستند، به طوری که هر لیست محصول شامل حداکثر ۴۰ تصویر است. برای اطمینان از اینکه تصاویر مانع بارگذاری صفحه نمی‌شوند، تیم تصمیم گرفت تمام منابع خود را از یک CDN ارائه دهد و از imagemagick برای بهینه‌سازی تصویر استفاده کند. آنها همچنین تمام منابع قابل فشرده‌سازی، از جمله تصاویر، جاوا اسکریپت و CSS را Gzip کردند تا زمان بارگذاری را بیشتر کاهش دهند.

برای جلوگیری از نمایش ناگهانی متن نامرئی و در عین حال پایین نگه داشتن زمان بارگذاری تا حد امکان، Truebil CSS خود را طوری تنظیم کرده است که از فونت‌های سیستمی به عنوان جایگزین استفاده کند تا فونت‌های خارجی بارگذاری شوند.

بهینه‌سازی‌های بیشتر

وقتی برنامه آماده شد، تیم می‌خواست اندازه بسته نرم‌افزاری فروشنده و زمان اجرای جاوا اسکریپت را بیشتر کاهش دهد، بنابراین برنامه React خود را در مرحله تولید به Preact تغییر دادند. (برای اطلاعات بیشتر به مجموعه React مراجعه کنید.) این رویکرد به آنها کمک کرد تا اندازه بسته نرم‌افزاری فروشنده را از ۸۲.۳ کیلوبایت به ۵۱.۲ کیلوبایت کاهش دهند.

ایجاد قابلیت اطمینان

با تمرکز بر بازار هند، اکثریت قریب به اتفاق کاربران Truebil به محصول خود از طریق شبکه‌های پراکنده‌ای دسترسی دارند که گاهی اوقات پهنای باند آنها به 2G هم می‌رسد. بنابراین ایجاد یک تجربه انعطاف‌پذیر نه تنها برای بهبود عملکرد در شرایط محدود شبکه، بلکه برای ارائه محصولی که کاربران بتوانند به آن اعتماد کنند - محصولی که همیشه کار کند - بسیار مهم بود.

یک استراتژی ذخیره‌سازی ترکیبی برای بارگذاری قابل اعتماد

تعامل و نرخ تغییر برای محتوای Truebil بسیار متفاوت است. برای اطمینان از اینکه تمام محتوای آن هم تازه و هم قابل اعتماد است، تیم Truebil با استفاده از ترکیبی از استراتژی‌های network-first، cache-first و fastest-first، ذخیره‌سازی API را پیاده‌سازی کرد.

برای صفحات استاتیک، مانند صفحه اشتراک‌ها، Truebil از استراتژی cache-first استفاده می‌کند تا ابتدا به حافظه پنهان API اشتراک خود مراجعه کند و سپس به شبکه بازگردد.

برای صفحاتی با محتوای پویا که به ندرت تغییر می‌کنند، مانند صفحات فهرست محصولات یا جزئیات آنها، Truebil از استراتژی شبکه-اول استفاده می‌کند، به طوری که مرورگر ابتدا شبکه را برای محتوا بررسی می‌کند و سپس در صورت عدم دسترسی به شبکه، به حافظه پنهان API مراجعه می‌کند.

و برای صفحات پویا که اغلب تغییر می‌کنند، مانند صفحات خانه، فیلتر، جستجو و شهر، Truebil از یک استراتژی سریع‌ترین-اول برای انتخاب بین شبکه یا حافظه پنهان بر اساس هر کدام که زودتر اتفاق بیفتد، استفاده می‌کند. برای اطمینان از تازه بودن محتوا، حافظه پنهان هر زمان که پاسخ شبکه با آنچه در حافظه پنهان است متفاوت باشد، به‌روزرسانی می‌شود.

کارمندان خدماتی برای یک تجربه کاملاً آفلاین

اگرچه بخش بزرگی از محتوای Truebil بسیار پویا است - می‌توان در هر زمانی ماشین اضافه یا خریداری کرد - تیم می‌خواست مطمئن شود که کاربرانشان حتی اگر از شبکه‌های نامنظم استفاده می‌کنند یا کاملاً آفلاین هستند، محتوایی برای تعامل داشته باشند.

با استفاده از سرویس ورکرها ، تیم توانست هم داده‌های استاتیک و هم داده‌های دینامیکی را که کاربر قبلاً با آنها تعامل داشته است، ذخیره کند تا کاربر بتواند آنها را به صورت آفلاین مشاهده کند. برای اطمینان از اینکه کاربران بدانند محتوا ممکن است هنگام آنلاین شدن مجدد تغییر کند، تیم رابط کاربری را به حالت خاکستری تغییر داد تا حالت آفلاین را نشان دهد. مرور صفحات محصول بخش مهمی از سفر کاربر Truebil است. کاربرانی که حداقل یک بار از PWA بازدید کرده‌اند، می‌توانند فهرست‌ها و صفحات محصولی را که قبلاً بازدید کرده‌اند، مرور کنند، اما نمی‌توانند هیچ به‌روزرسانی در فهرست یا محصول مشاهده کنند.

بهبود تعامل برای حفظ بازگشت کاربران

اولین تجربه جذاب

از آنجایی که بیشتر کاربران Truebil از کانال‌های پولی می‌آیند، این شرکت نیاز داشت تا برنامه وب سریع خود را با محصولی تکمیل کند که توصیه‌های بسیار مرتبطی را برای افزایش نرخ تبدیل نمایش دهد. در حالی که این تیم از یک سیستم توصیه مبتنی بر فیلترینگ پیشرفته برای کاربران فعلی استفاده می‌کند، سیستم آنها برای کاربرانی که برای اولین بار وارد سیستم می‌شوند، کار نمی‌کند.

برای جلوگیری از شروع سرد کاربران جدید، این تیم با استفاده از تلاش‌های بازاریابی دیجیتال خود، یک سیستم توصیه‌گر را ادغام کرد. آن‌ها جزئیات محصول مانند مدل خودرو، قیمت و نوع بدنه را از طریق یک پارامتر UTM به URL مقصد تبلیغ اضافه می‌کنند که توسط سیستم توصیه‌گر آن‌ها خوانده می‌شود و در محصولات نمایش داده شده منعکس می‌شود. در صورتی که سیستم چنین جزئیاتی را در URL نخواند، به خودروهای محبوب برمی‌گردد که ترکیبی از مدل‌های محبوب، بودجه‌های محبوب و خودروهایی است که در چند هفته یا چند روز گذشته محبوب بوده‌اند.

یک برنامه وب قابل نصب

Truebil با ساخت یک اپلیکیشن وب سریع، کامل و با تجربه کاربری جذاب، می‌خواست مطمئن شود که کاربرانش دوباره به آن مراجعه می‌کنند. آنها متوجه شدند که قابل نصب کردن اپلیکیشن، بازدیدهای مکرر را بسیار آسان‌تر می‌کند.

این تیم قابلیت «افزودن به صفحه اصلی» را پیاده‌سازی کرد تا محصول خود را به یک برنامه وب پیش‌رونده (PWA) کامل تبدیل کند. این رویکرد به کاربران اجازه می‌داد Truebil Lite را به صفحه اصلی اضافه کرده و آن را در حالت تمام صفحه اجرا کنند. و از آنجایی که آنها قبلاً حالت آفلاین را پیاده‌سازی کرده بودند، تیم توانست این ویژگی جدید را به راحتی اضافه کند.

برای اطمینان از اینکه به کاربرانشان اسپم ارسال نمی‌شود و افزایش احتمال نصب برنامه توسط کاربران، این تیم اخیراً استراتژی خود را برای ترویج نصب PWA به‌روزرسانی کرده است، به طوری که پیام‌های نصب زمانی ظاهر می‌شوند که واقعاً برای انواع مختلف کاربران مفید باشند. Truebil یک استراتژی سه بخشی را در پیش گرفته است:

• نمایش اعلان‌ها زمانی که کاربر عملی را انجام داده یا بیکار است.
• نمایش پیام‌های متنی به کاربران بزرگسال.
• نمایش بنر زمانی که کاربر مدت زمان مشخصی را در سایت گذرانده باشد.

بنرهای پیش‌فرض در هنگام تکمیل فرآیند و در صفحات پربازدید

تیم تصمیم گرفت وقتی کاربر کاری را انجام می‌دهد یا در صفحات پربازدید است اما بیکار است (یعنی اقدامی انجام نمی‌دهد، مانند پیمایش یا پر کردن فرم)، یک بنر نصب نشان دهد. این رویکرد به آنها اجازه داد تا از ایجاد وقفه در فعالیت کاربر جلوگیری کنند.

پیام‌های متنی برای کاربران بزرگسال

برای کاربرانی که مدتی با برنامه تعامل داشتند، تیم از پیام‌های سفارشی با محتوای بسیار مرتبط استفاده کرد تا ارزش نصب برنامه را در صفحه اصلی نشان دهد:

یک بنر سفارشی برای اعلان‌های مبتنی بر زمان

در نهایت، تیم یک بنر غیر مزاحم با طراحی شبیه اعلان ساخت که در رویدادهای خاص، مانند باز کردن صفحه فهرست یا پس از گذراندن مدت زمان مشخصی در برنامه توسط کاربر، فعال می‌شود:

به دلیل این بهبودها، نرخ تبدیل و تعامل Truebil با ۲۶٪ افزایش مدت زمان جلسات کاربری و ۶۱٪ افزایش نرخ تبدیل ، به طور قابل توجهی افزایش یافته است که با توجه به ارزش بالای تراکنش هر تبدیل، برای کسب و کار آنها قابل توجه است.

برای یک استارتاپ با منابع محدود، انتخاب پلتفرم مناسب می‌تواند برای موفقیت کسب‌وکار بسیار مهم باشد. حرکت به سمت یک PWA متمرکز بر سرعت، انعطاف‌پذیری و تعامل، به ما این امکان را داد که به لطف افزایش تبدیل‌ها و دسترسی آسان به وب، هزینه‌های درآمد به بازاریابی خود را تا ۸۰ درصد افزایش دهیم.

راکش رامان، هم‌بنیانگذار و رئیس بخش علوم محصول و داده در Truebil