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

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

لمحة

تأسست شركة Truebil في عام 2015، وهي سوق هندية على الإنترنت تبيع سيارات مستعملة معتمدة بنسبة% 100. يضمّ هذا التطبيق أكثر من 1.4 مليون مستخدم نشط شهريًا، وهو حلّ شامل يتضمّن نقل ملكية المركبات والتأمين والقروض وضمانات الخدمة. يمكن للعملاء المحتملين الاطّلاع على صفحات المنتجات الفردية التي تتضمّن صورًا وتقارير فحص مفصّلة، والحصول على تقييمات للمركبات باستخدام ميزتَي "المقارنة" و"التقييم الحقيقي" في الموقع الإلكتروني. تتميّز 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 ثوانٍ تقريبًا، وانخفض مقياس سرعة عرض أول جزء من المحتوى من 4.1 ثانية إلى 3.6 ثانية.

تضمين CSS المهم

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

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

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

التحميل المُسبَق الديناميكي للصفحة التالية

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

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

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

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

تحسينات إضافية

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

تضمين موثوقية

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

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

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

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

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

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

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

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

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

تحسين التفاعل لتشجيع المستخدمين على العودة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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