چگونه 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 توانست با اولویت بندی معیارهای First Contentful Paint و Time to Interactive (TTI) و بهینه سازی برای اولین بارگذاری سریع، بازدیدهای مکرر و ناوبری روان، تجربه کاربر را به طور قابل توجهی بهبود بخشد. این تیم با تنظیم بودجه عملکرد و استفاده از تکنیک های مختلف برای دستیابی به آن نتایج به دست آورد.

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

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

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

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

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

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

برای حذف هر گونه گلوگاه بسته جاوا اسکریپت، این تیم از طریق تقسیم کد، بارهای پرداختی را کاهش داد . آن‌ها از قطعه‌بندی مبتنی بر کامپوننت و مسیر برای کاهش اندازه باندل اصلی و بهبود زمان بارگذاری آن‌ها تا 44 درصد استفاده کردند که TTI از 6 ثانیه به حدود 5 ثانیه و First Meaningful Paint (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> دانلود می کند تا از پیمایش روان برای کاربران اطمینان حاصل کند. در حالی که تیم به صورت دستی پیوندها را برای واکشی اولیه شناسایی می کند، از بسته وب برای بسته بندی JS برای آن پیوندها استفاده می کند.

اثر واکشی اولیه دارایی ها برای سفرهای مشترک کاربر.

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

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

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

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

هنگامی که برنامه آماده شد، تیم می خواست اندازه بسته نرم افزاری فروشنده و زمان اجرای جاوا اسکریپت را کاهش دهد، بنابراین برنامه React خود را در مرحله تولید به Preact تغییر دادند. (در مجموعه React بیشتر بیاموزید.) این رویکرد به آنها کمک کرد تا اندازه بسته نرم افزاری فروشنده را از 82.3 کیلوبایت به 51.2 کیلوبایت کاهش دهند.

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

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

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

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

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

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

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

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

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

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

Truebil Lite در حالت آفلاین.

برای بازگرداندن کاربران، تعامل را بهبود ببخشید

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

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

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

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

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

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

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

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

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

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

درخواست های متنی برای کاربران بالغ

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

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

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

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

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

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

44 _درصد

بهبود زمان بارگذاری

26 _درصد

جلسات کاربر طولانی تر

61 _%

افزایش در تبدیل

80 _درصد

افزایش هزینه های درآمد به بازاریابی