كيف جعلت شركة Truebil شبكة الويب من النمو

قصة شركة ناشئة عن إنشاء تجربة ويب الأفضل من نوعها

Harleen Batra
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 حدودًا صارمة للأداء لضمان عدم التأثير في السرعة، خاصةً عند إضافة المزيد من الميزات.

وضع الفريق ميزانيات صارمة مستندة إلى المعالم لوقت التفاعل الأولي بهدف إبقائه أقل من خمس ثوانٍ. لتحقيق هذا الهدف، تأكّد الفريق يدويًا من أنّ أي إصدار لن يتجاوز حجم حِزمة JavaScript التي تبلغ 250 كيلوبايت، وواصل التحقّق من أحجام الصور باستمرار، وتتبُّع نتيجة أداء التطبيق في Lighthouse.

تحسين حِزم JavaScript

بدأ الفريق بالإجراءات الأساسية باستخدام نمط PRPL لتحسين حِزم JavaScript ووضعها في ذاكرة التخزين المؤقت مسبقًا، كما انتقل إلى HTTP/2 لعرض حِزم JavaScript المهمة.

ولتحميل الموارد غير المهمة بشكل بطيء، استخدموا مكوّنات التحميل البطيء على مستوى إطار العمل لتحميل الأجزاء التي تظهر أسفل الصفحة.

لإزالة أيّ قيود في حِزم JavaScript، قلّل الفريق الأحمال من خلال تقسيم الرموز البرمجية. واستخدمت الشركة تقسيم المحتوى إلى أجزاء استنادًا إلى المكوّنات والمسارات لتقليل حجم الحِزمة الرئيسية وتحسين مدة التحميل بنسبة %44، مع انخفاض وقت التفاعل من 6 ثوانٍ إلى 5 ثوانٍ تقريبًا وسرعة عرض أول جزء ذي معنى (FMP) من 4.1 ثانية إلى 3.6 ثانية.

لقطات شاشة من "أدوات مطوّري البرامج في Chrome" تعرض حجم حِزمة تطبيق Truebil Lite قبل تقسيم الرمز البرمجي وبعده
تأثير تقليل حجم القطعة:

CSS المُهمّ المضمّن

لتحسين FMP بشكلٍ أكبر، استخدم الفريق Lighthouse للعثور على فرص لتحسين الأداء والتحقّق من تأثيرها. أشار مقياس Lighthouse إلى أنّ تقليل CSS الذي يمنع العرض سيكون له التأثير الأكبر، لذا أدرجت Truebil كلّ ملفات CSS المهمة وأرجأت ملفات CSS غير المهمة. أدّت هذه التقنية إلى خفض وقت عرض اللقطة بنحو ثانيتَين.

لقطات شاشة لأدوات مطوّري البرامج في Chrome تعرِض وقت ظهور "أول مرّة يظهر فيها محتوى مفيد" في تطبيق Truebil Lite قبل إدراج CSS وبعده
تأثير تضمين ملفات CSS المهمة

تجنُّب الرحلات المتكرّرة والمكلفة ذهابًا وإيابًا إلى أيّ وجهة

للحدّ من الوقت المستغرَق في عمليات نظام أسماء النطاقات وTLS، استخدمت Truebil <link rel="preconnect"> و<link rel="dns-prefetch">. يؤدي هذا الأسلوب إلى إكمال المتصفّح عملية تأكيد الاتصال من خلال بروتوكول أمان طبقة النقل (TLS) في أقرب وقت ممكن عند تحميل الصفحة وتحديد أسماء النطاقات من مصادر مختلفة مسبقًا، ما يسمح بتوفير تجربة آمنة وسريعة للمستخدم.

لقطات شاشة لأدوات مطوّري البرامج في Chrome تعرض تأثير rel=preconnect
تأثير إضافة <link rel=preconnect>:

تحميل الصفحة التالية مسبقًا بشكل ديناميكي

ومن خلال تحليل بياناته، حدّد الفريق تجارب المستخدِمين الأكثر شيوعًا التي يمكن تحسينها. في هذه الحالات، ينزِّل التطبيق بشكل ديناميكي مورد الصفحة التالية باستخدام <link rel=prefetch> لضمان تنقّل سلس للمستخدمين. بينما يحدّد الفريق يدويًا الروابط التي سيتمّ تحميلها مسبقًا، يستخدم webpack لتجميع JavaScript لهذه الروابط.

لقطات شاشة لتطبيق Truebil Lit وChrome DevTools توضّح أنّه لا حاجة إلى طلبات الشبكة في عمليات التنقّل الشائعة لأنّه سبق أن تم جلب مواد العرض مسبقًا
تأثير ميزة "التحميل المُسبَق" لملفات الأصول في رحلات المستخدِمين الشائعة

تحسين الصور والخطوط

تشكّل الصور جزءًا مهمًا من تجربة منتجات Truebil ومصداقيتها، إذ تتضمّن كل بطاقة بيانات منتج ما يصل إلى 40 صورة. لضمان عدم حظر الصور لتحميل الصفحة، اختار الفريق عرض جميع موارده من شبكة توصيل المحتوى (CDN) واستخدام imagemagick لتحسين الصور. وضغطوا أيضًا جميع الموارد القابلة للضغط باستخدام برنامج Gzip، بما في ذلك الصور وJavaScript وCSS، لتقليل وقت التحميل بشكل أكبر.

لتجنُّب وميض نص غير مرئي مع إبقاء وقت التحميل منخفضًا قدر الإمكان، أعدّت Truebil ملف CSS لاستخدام خطوط النظام كخيار احتياطي إلى أن يتم تحميل الخطوط الخارجية.

مزيد من التحسينات

عندما أصبح التطبيق جاهزًا، أراد الفريق تقليل حجم حِزمة المورّد ووقت تنفيذ JavaScript بشكلٍ أكبر، لذلك بدّلوا تطبيق React إلى Preact في مرحلة الإنتاج. (اطّلِع على مزيد من المعلومات في مجموعة React). وقد ساعدت هذه الطريقة في تقليل حجم حزمة المورّد من 82.3 كيلوبايت إلى 51.2 كيلوبايت.

تعزيز الموثوقية

مع التركيز على السوق الهندي، يستخدم معظم مستخدمي Truebil منتجاتهم على شبكات غير متّصلة بشكل كامل، وتصل أحيانًا سرعات نقل البيانات فيها إلى 2G. لذلك، كان من الضروري توفير تجربة مرنة ليس فقط لتحسين الأداء في ظروف الشبكة المقيّدة، ولكن أيضًا لتقديم منتج يمكن للمستخدمين الاعتماد عليه، أي منتج يعمل دائمًا.

استراتيجية تخزين مؤقت مختلطة لتحميل موثوق

يتفاوت التفاعل مع محتوى Truebil ومعدّل التغيير فيه كثيرًا. لضمان أن يكون كل المحتوى متوفّرًا وموثوقًا به، نفَّذ فريق Truebil ميزة تخزين واجهة برمجة التطبيقات المؤقت باستخدام مجموعة من الاستراتيجيات التي تعتمد على الشبكة أولاً، والتخزين المؤقت أولاً، والسرعة أولاً.

بالنسبة إلى الصفحات الثابتة، مثل صفحة الاشتراكات، تستخدم Truebil استراتيجية التخزين المؤقت أولاً للانتقال إلى ذاكرة التخزين المؤقت لواجهة برمجة تطبيقات الاشتراك أولاً، ثم الرجوع إلى الشبكة.

بالنسبة إلى الصفحات التي تحتوي على محتوى ديناميكي نادرًا ما يتغيّر، مثل بطاقة بيانات المنتج أو صفحات التفاصيل، تستخدم Truebil استراتيجية الشبكة أولاً لكي يبحث المتصفّح أولاً في الشبكة عن المحتوى قبل الرجوع إلى ذاكرة التخزين المؤقت لواجهة برمجة التطبيقات في حال عدم توفّر الشبكة.

بالنسبة إلى الصفحات الديناميكية التي تتغيّر كثيرًا، مثل الصفحة الرئيسية والصفحات الخاصة بالفلاتر والبحث والمدن، تستخدم Truebil استراتيجية "الأكثر سرعة أولاً" للاختيار بين الشبكة أو ذاكرة التخزين المؤقت استنادًا إلى أيهما يأتي أولاً. لضمان توفّر محتوى جديد، يتم تعديل ذاكرة التخزين المؤقت كلما كان ردّ الشبكة مختلفًا عن المحتوى المتوفّر في ذاكرة التخزين المؤقت.

ملفات تشغيل الخدمات للحصول على تجربة كاملة بلا اتصال بالإنترنت

على الرغم من أنّ جزءًا كبيرًا من محتوى Truebil ديناميكي للغاية، إذ يمكن إضافة السيارات أو شراؤها في أي وقت، أراد الفريق التأكّد من توفّر بعض المحتوى للتفاعل معه، حتى إذا كانت الشبكات متقطّعة أو كانت غير متاحة على الإطلاق.

باستخدام خدمة workers، تمكّن الفريق من تخزين كلّ من البيانات الثابتة والبيانات الديناميكية التي تفاعل معها المستخدم سابقًا في ذاكرة التخزين المؤقت كي يتمكّن من عرضها بلا إنترنت. لضمان معرفة المستخدمين بأنّ المحتوى قد يتغيّر عند عودتهم إلى الإنترنت، غيّر الفريق واجهة المستخدم إلى درجات اللون الرمادي للإشارة إلى وضع عدم الاتّصال بالإنترنت. يُعدّ تصفُّح صفحات المنتجات جزءًا مهمًا من رحلة مستخدمي Truebil. يمكن للمستخدمين الذين زاروا التطبيق المتوافق مع الأجهزة الجوّالة (PWA) مرّة واحدة على الأقل تصفّح بطاقات البيانات وصفحات المنتجات التي سبق لهم زيارتها، ولكن لن يتمكّنوا من الاطّلاع على أي تعديلات على بطاقة البيانات أو المنتج.

لقطة شاشة لتطبيق Truebil Lite في وضع عدم الاتّصال بالإنترنت
تطبيق Truebil Lite في وضع عدم الاتّصال بالإنترنت

تحسين التفاعل مع المستخدمين لجذبهم باستمرار

تجربة أولى جذابة

بما أنّ معظم مستخدمي Truebil يأتون من القنوات المدفوعة، احتاجت الشركة إلى إضافة منتج يعرض اقتراحات ملائمة للغاية لزيادة الإحالات الناجحة إلى تطبيق الويب الذي يتم تحميله بسرعة. على الرغم من أنّ الفريق يستخدم نظام اقتراحات يستند إلى فلترة معقدة للمستخدمين الحاليين، لا يعمل نظامه مع المستخدمين الذين يسجّلون الدخول لأول مرة.

لتجنّب منح المستخدمين لأول مرة تجربة غير ناجحة، دمج الفريق نظام اقتراحات باستخدام جهود التسويق الرقمي. وتضيف هذه الشركة تفاصيل المنتجات، مثل طراز السيارة والسعر ونوع الهيكل، إلى عنوان URL المقصود للإعلان من خلال مَعلمة نظام مراقبة الزيارات من Urchin، والتي يقرأها نظام الاقتراحات الخاص بها ويظهر في المنتجات التي يتم عرضها. في حال عدم قراءة النظام لهذه التفاصيل في عنوان URL، يعود إلى عرض السيارات الرائجة، وهي عبارة عن مجموعة من الطُرز الرائجة والميزانيات الرائجة والسيارات الرائجة في الأسابيع أو الأيام القليلة الماضية.

تطبيق ويب قابل للتثبيت

بعد إنشاء تطبيق ويب سريع ومليء بالميزات يقدّم تجربة مستخدم رائعة، أرادت شركة Truebil التأكّد من أنّ المستخدمين سيستمرون في زيارتها. وأدركوا أنّ إتاحة تثبيت التطبيق سيجعل الزيارات المتكرّرة أكثر سلاسة.

نفَّذ الفريق ميزة الإضافة إلى الشاشة الرئيسية ليصبح منتجهم تطبيق ويب تقدّميًا كاملاً (PWA). سمح هذا النهج للمستخدمين بإضافة تطبيق Truebil Lite إلى الشاشة الرئيسية وتشغيله في وضع ملء الشاشة. وبما أنّه سبق أن نفّذ الفريق وضع عدم الاتّصال بالإنترنت، تمكّن من إضافة الميزة الجديدة بسهولة.

لضمان عدم إرسال رسائل غير مرغوب فيها إلى المستخدمين وزيادة احتمالية تثبيتهم للتطبيق، عدّل الفريق مؤخرًا استراتيجيته للترويج لتثبيت التطبيقات المتوافقة مع الويب بحيث تظهر طلبات التثبيت عندما تكون مفيدة للأنواع المختلفة من المستخدمين. اتّبع فريق Truebil استراتيجية من ثلاثة أجزاء:

  • عرض طلبات عندما يُكمل المستخدم إجراءً أو يكون غير نشط
  • عرض طلبات سياقية للمستخدمين البالغين
  • عرض بانر عندما يقضي المستخدِم مدّة محدّدة على الموقع الإلكتروني

إعلانات البانر التلقائية عند اكتمال العملية وعلى الصفحات التي تجذب عددًا كبيرًا من الزيارات

قرّر الفريق عرض بانر التثبيت عندما يُكمل المستخدم مهمة أو يكون على صفحات ذات عدد زيارات مرتفع ولكنّه غير نشط (أي لا يتّخذ أي إجراء، مثل الانتقال للأسفل أو ملء نموذج). سمح لهم هذا النهج بتجنُّب مقاطعة نشاط المستخدم.

لقطات شاشة لبنر التثبيت في Truebil Lite

طلبات سياقية للمستخدمين البالغين

بالنسبة إلى المستخدمين الذين تفاعلوا مع التطبيق لفترة من الوقت، استخدم الفريق رسائل مخصّصة ذات سياق عالٍ لإظهار قيمة تثبيت التطبيق على الشاشة الرئيسية:

لقطات شاشة لطلبات التثبيت السياقية في تطبيق Truebil Lite للمستخدمين البالغين

بانر مخصّص للطلبات المستندة إلى الوقت

أخيرًا، أنشأ الفريق بانرًا غير مزعج بتصميم يشبه الإشعار يتم تشغيله عند حدوث أحداث معيّنة، مثل فتح صفحة بطاقة بيانات أو بعد أن يقضي المستخدم فترة زمنية محدّدة في التطبيق:

لقطة شاشة لبنر طلب التثبيت المستند إلى الوقت في Truebil Lite

نتيجةً لهذه التحسينات، زادت معدلات الإحالات الناجحة والتفاعل في Truebil بشكلٍ كبير مع زيادة مدّة جلسات المستخدِمين بنسبة% 26 وزيادة الإحالات الناجحة بنسبة% 61، ما يُعدّ أمرًا مهمًا لنشاطها التجاري نظرًا لارتفاع قيمة المعاملات لكل إحالة ناجحة.

بالنسبة إلى الشركات الناشئة التي تمتلك موارد محدودة، يمكن أن يكون اختيار المنصة المناسبة أمرًا بالغ الأهمية لنجاح النشاط التجاري. من خلال الانتقال إلى تطبيق متوافق مع الأجهزة الجوّالة يركز على السرعة والقدرة على التكيف والتفاعل، تمكّنا من زيادة نسبة الأرباح إلى الإنفاق التسويقي بنسبة 80%، وذلك بفضل زيادة الإحالات الناجحة وإمكانية الوصول السلسة إلى الويب.

راكيش رامان، المؤسس المشارك ورئيس قسم المنتجات وعلوم البيانات في Truebil

‎44%

تحسين وقت التحميل

26%

جلسات مستخدِمين أطول

‎61%

زيادة في الإحالات الناجحة

‎80%

زيادة نسبة الأرباح إلى الإنفاق التسويقي