چگونه 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 _درصد

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

،

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

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 _درصد

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

،

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

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 از یک استراتژی حافظه نهان برای اولین بار برای رفتن به حافظه نهان API خود استفاده می کند و دوباره به شبکه سقوط می کند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

برای یک راه اندازی با منابع محدود ، انتخاب بستر مناسب می تواند برای موفقیت تجارت بسیار مهم باشد. با حرکت به PWA با تمرکز بر سرعت ، مقاومت و درگیری ، به ما این امکان را داد تا به لطف افزایش تبدیل ها و دسترسی بدون اصطکاک وب ، 80 ٪ هزینه خود را به بازار عرضه کنیم.

Rakesh Raman ، بنیانگذار و رئیس علوم محصول و داده در TrueBil

44 _درصد

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

26 _درصد

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

61 _%

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

80 _درصد

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

،

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

Harleen Batra

درباره

TrueBil که در سال 2015 تأسیس شد ، یک بازار آنلاین هند است که 100 ٪ اتومبیل های معتبر استفاده شده را به فروش می رساند. با بیش از 1.4 میلیون کاربر فعال ماهانه ، این یک راه حل یک مرحله ای است که شامل انتقال عنوان ، بیمه ، وام و ضمانت خدمات است. مشتریان آینده نگر می توانند صفحات محصول جداگانه را با تصاویر و گزارش های دقیق بازرسی مشاهده کنند و ارزیابی خودرو را با ویژگی های "مقایسه" و "Truescore" سایت دریافت کنند. TrueBil محصول خود را با ویژگی های غنی متمایز می کند ، از جمله توصیه های شخصی مبتنی بر یادگیری ماشین ، یک ویژگی افزودنی به علاقه مندی ها ، یک ویژگی اشتراک-یک اتومبیل و موارد دیگر.

چالش

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

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

راه حل

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

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

برای بار اول و ناوبری های سریع بهینه سازی کنید

با استفاده از Lighthouse برای هدایت بهینه سازی عملکرد ، تیم ضمن اجرای ویژگی های جدید ، فرهنگ اول را به کار گرفت. TrueBil توانست با اولویت بندی اولین رنگ و زمان محتوا به معیارهای تعاملی (TTI) و بهینه سازی برای بارهای سریع ، بازدیدهای مکرر و ناوبری صاف ، تجربه کاربر را به میزان قابل توجهی بهبود بخشد. این تیم با تعیین بودجه عملکرد و استفاده از تکنیک های متنوعی برای دستیابی به آنها به این نتایج رسید.

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

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

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

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

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

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

برای از بین بردن هرگونه تنگنا بسته های JavaScript ، این تیم بارهای بار را از طریق تقسیم کد کاهش داد . آنها برای کاهش اندازه بسته نرم افزاری و بهبود زمان بارگذاری آنها 44 ٪ از تکه های مؤلفه و مسیر استفاده کردند و TTI از 6 ثانیه به حدود 5 ثانیه و رنگ معنی دار اول (FMP) از 4.1 ثانیه به 3.6 ثانیه رسید.

تأثیر کاهش اندازه تکه.

CSS بحرانی درون خطی

برای بهبود بیشتر FMP ، این تیم از Lighthouse برای یافتن فرصت ها و تأیید تأثیر بهینه سازی عملکرد استفاده کرد. فانوس دریایی اظهار داشت که کاهش CSS مسدود کردن رندر بیشترین تأثیر را خواهد داشت ، بنابراین Truebil تمام CS های بحرانی را وارد کرده و CSS غیر بحرانی را معوق کرده است . این روش FMP را حدود 2 ثانیه کاهش داد .

تأثیر CSS بحرانی.

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

برای کاهش سربار از DNS و TLS ، TrueBil از <link rel="preconnect"> و <link rel="dns-prefetch"> استفاده کرد. این رویکرد باعث می شود که مرورگر در اسرع وقت در صفحه بار و نام دامنه متقاطع قبل از حل و فصل ، دست و پا را تکمیل کند و این امکان را برای یک تجربه کاربری ایمن و ناخوشایند فراهم کند.

تأثیر اضافه کردن <link rel=preconnect> .

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

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

تأثیر دارایی های پیش تنظیم برای سفرهای مشترک کاربر.

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

تصاویر بخش مهمی از تجربه و اعتبار محصول TrueBil است که در هر لیست محصول شامل 40 تصویر است. برای اطمینان از اینکه تصاویر بار صفحه را مسدود نمی کنند ، تیم تصمیم گرفت تا تمام منابع خود را از CDN ارائه دهد و از ImageMagick برای بهینه سازی تصویر استفاده کند. آنها همچنین تمام منابع قابل فشرده سازی ، از جمله تصاویر ، JavaScript و CSS را برای کاهش بیشتر زمان بار کاهش دادند.

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

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

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

در قابلیت اطمینان بسازید

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

یک استراتژی حافظه پنهان ترکیبی برای بارگیری قابل اعتماد

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

برای صفحات استاتیک ، مانند صفحه اشتراک ها ، TrueBil از یک استراتژی حافظه نهان برای اولین بار برای رفتن به حافظه نهان API خود استفاده می کند و دوباره به شبکه سقوط می کند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

برای یک راه اندازی با منابع محدود ، انتخاب بستر مناسب می تواند برای موفقیت تجارت بسیار مهم باشد. با حرکت به PWA با تمرکز بر سرعت ، مقاومت و درگیری ، به ما این امکان را داد تا به لطف افزایش تبدیل ها و دسترسی بدون اصطکاک وب ، 80 ٪ هزینه خود را به بازار عرضه کنیم.

Rakesh Raman ، بنیانگذار و رئیس علوم محصول و داده در TrueBil

44 _درصد

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

26 _درصد

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

61 _%

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

80 _درصد

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