قصة شركة ناشئة حول تقديم تجربة الويب الأفضل في فئتها
لمحة عامة
تأسست شركة Truebel في عام 2015، وهي سوق هندية على الإنترنت تُباع فيه السيارات المستعملة المعتمدة بنسبة 100%. ومن خلال ما يزيد عن 1.4 مليون مستخدم نشط شهريًا، تمثّل هذه المنصة حلاً شاملاً يشمل نقل حقوق الملكية والتأمين والقروض وضمانات الخدمة. ويمكن للعملاء المحتملين الاطّلاع على صفحات المنتجات الفردية مع صور وتقارير فحص تفصيلية والحصول على تقييمات للمركبات من خلال ميزتَي "مقارنة" و"Truescore" للموقع الإلكتروني. تُميّز Truebel منتجها عن منتجاتها من خلال ميزات رائعة تشمل الاقتراحات المخصّصة التي تستند إلى تعلُّم الآلة وميزة "إضافة الميزات المفضّلة" وميزة مشاركة السيارة وغير ذلك.
التحدّي
Truebel هي شركة ناشئة ذات كفاءة عالية تعتمد على معاملات منخفضة التكرار وعالية القيمة، لذلك كان من الضروري اختيار النظام الأساسي المناسب لتحديد الأولويات والاستثمار فيها.
تعتبر شركة Truebel عن الأجهزة الجوّالة كنظام أساسي مستهدَف، واختارت الويب لتطبيقها الأول، TrueBill Lite، لسهولة اكتشاف الويب ومدى صعوبة الاستخدام. توفّر تكنولوجيا الويب تكاليف تطوير أقل واستخدامًا أقل للبيانات والذاكرة وتكاليف اكتساب عملاء أقل بكثير مقارنةً بإنشاء تطبيق Android/iOS. ومن خلال تصميم تطبيق ويب تقدّمي (PWA)، يمكن لشركة Truebel الاستفادة من جميع مزايا الويب ومزايا نظام التشغيل iOS/Android.
الحلّ
واستغرق فريق داخلي أربعة أشهر لتطوير Truebel Lite باستخدام React وDjango وPreact (لنقل بيانات الإنتاج). حيث وضعوا مبادئ توجيهية واضحة لتطبيق الويب بناءً على أهداف المستخدم. يجب أن تكون التجربة:
- سريعة عند أول تحميل وعمليات التنقّل اللاحقة
- موثوقة ومستقلة عن قيود الشبكة أو الجهاز التي يفرضها المستخدم
- جذابة، خاصة بالنسبة إلى شاشات الأجهزة الجوّالة الصغيرة، ما يجعل المستخدمين يرغبون في العودة إليها.
تحسين عمليات التحميل الأولى والتنقل سريعًا
من خلال استخدام أداة Lighthouse لتوجيه عمليات تحسين الأداء، تبنّى الفريق ثقافة تركّز على الأداء أولاً أثناء تنفيذ ميزات جديدة. ومن خلال تحسين تجربة المستخدم بشكل كبير، أعطيت الأولوية لمقياسَي First Contentful Paint وTime to Interactive (TTI)، وأجريت تحسينات بهدف زيادة سرعة عمليات التحميل الأولى والزيارات المتكررة والتنقل السلس. حقق الفريق هذه النتائج من خلال وضع ميزانيات الأداء واستخدام مجموعة متنوعة من التقنيات لتحقيقها.
تحديد ميزانيات الأداء
من خلال التركيز على الأداء في المقام الأول، اختار فريق Truebel تصميم تجربتهم كتطبيق من صفحة واحدة مع عرض من جهة الخادم للتحميل الأول والعرض من جهة العميل لعمليات التحميل اللاحقة. قد يكون من الصعب الحفاظ على أداء تطبيقات الويب ذات الأداء الجيّد بالعرض من جهة العميل، لذلك وضعت شركة Truebel ميزانيات خاصة بالأداء صارمة لضمان عدم المساس بالسرعة، وخاصةً عند إضافة المزيد من الميزات.
وضع الفريق ميزانيات صارمة مستندة إلى المعالم الرئيسية لـ TTI بهدف إبقاءها أقل من خمس ثوانٍ. ولتحقيق هذا الهدف، تأكّدوا يدويًا من أنّ الإصدار لن يتجاوز حجم حزمة JavaScript بحجم 250 كيلوبايت، وحرصوا على التحقّق باستمرار من أحجام الصور، وتتبّعوا باستمرار نتيجة أداء تطبيق Lighthouse.
تحسين حِزم JavaScript
بدأ الفريق بالأساسيات باستخدام نمط PRPL لتخزين حمولات JavaScript مسبقًا وتحسينها، وعن طريق الانتقال إلى HTTP/2 لعرض حِزم JavaScript المهمّة.
لاستخدام طريقة "التحميل الكسول" للموارد غير المهمة، استخدمت الشركة مكوّنات التحميل الكسول على مستوى إطار العمل لتحميل الأجزاء في الجزء السفلي غير المرئي من الصفحة.
لإزالة أي مؤثّرات سلبية في حزمة JavaScript، يحرص الفريق على تقليل الحمولات من خلال تقسيم الرمز. واستخدَم فريق العمل ميزة التقسيم المستند إلى المكوّنات والمسار لتقليل حجم الحِزمة الرئيسية وتحسين مدة التحميل بنسبة 44%، مع انخفاض نسبة "سرعة الصفحة" من 6 ثوانٍ إلى 5 ثوانٍ، وسرعة عرض أول نتيجة (FMP) من 4.1 ثانية إلى 3.6 ثانية.
تضمين لغة CSS المهمة
لتحسين FMP بشكل أكبر، استعان الفريق بأداة Lighthouse للبحث عن فرص جديدة والتحقق من تأثير تحسينات الأداء. أشارت أداة Lighthouse إلى أنّ تقليل محتوى CSS الذي يحظر عرض الإعلانات سيكون له أكبر تأثير، لذلك تضمّنت شركة Truebel تضمين جميع ملفات CSS المهمة والمؤجلة لمحتوى CSS غير المهم. وهذه التقنية قللت من ميزة "سرعة عرض المحتوى في الثانية" بحوالي ثانيتين.
تجنَّب رحلات ذهاب وعودة متعددة ومكلفة إلى أي مصدر.
للحدّ من النفقات العامة من نظام أسماء النطاقات وبروتوكول أمان طبقة النقل، استخدمت شركة Truebel <link rel="preconnect"> و<link rel="dns-prefetch">. يتسبب هذا الأسلوب في إكمال المتصفّح تأكيد اتصال بروتوكول أمان طبقة النقل (TLS) في أقرب وقت ممكن عند تحميل الصفحة وحل أسماء النطاقات المتعددة المصادر مسبقًا، ما يسمح بتجربة مستخدم آمنة وسريعة.
<link rel=preconnect>.جلب الصفحة التالية مسبقًا ديناميكيًا
من خلال تحليل بياناتهم، حدد الفريق رحلات المستخدم الأكثر شيوعًا التي يمكنهم تحسينها. في هذه الحالات، ينزّل التطبيق بشكل ديناميكي مورد الصفحة التالية باستخدام <link rel=prefetch> لضمان التنقّل السلس للمستخدمين. ويحدّد الفريق يدويًا الروابط التي سيتم جلبها مُسبقًا، ولكنهم يستخدِمون حزمة الويب لتجميع هذه الروابط.
تحسين الصور والخطوط
وتشكّل الصور جزءًا أساسيًا من تجربة المنتج ومصداقيته لدى شركة Truebel، إذ تضم كل بيانات المنتج ما يصل إلى 40 صورة. للتأكّد من أنّ الصور لا تحظر تحميل الصفحات، اختار الفريق عرض جميع موارده من شبكة توصيل للمحتوى (CDN) واستخدام imagemagick لتحسين الصور. ونجحت الشركة في ضغط جميع الموارد القابلة للضغط، بما في ذلك الصور وJavaScript وCSS، وذلك بهدف تقليل وقت التحميل.
لتجنب وميض من النصوص غير المرئية مع الحفاظ على وقت التحميل في أقل وقت ممكن، أعدّت شركة Truebel خدمة CSS الخاصة بها لاستخدام خطوط النظام كخطوط احتياطية إلى أن يتم تحميل الخطوط الخارجية.
تحسينات إضافية
وعندما أصبح التطبيق جاهزًا، أراد الفريق تقليل حجم حزمة المورِّد ووقت تنفيذ JavaScript بشكل أكبر، فقرّروا تبديل تطبيق React الخاص بهم إلى Preact في مرحلة الإنتاج. (مزيد من المعلومات في مجموعة React) وقد ساعدتهم هذه الطريقة في تقليل حجم حزمة المورِّد من 82.3 كيلوبايت إلى 51.2 كيلوبايت.
تعزيز الموثوقية
مع التركيز على السوق الهندية، يمكن للغالبية العظمى من مستخدمي شركة TrueBill الوصول إلى منتجاتها من خلال شبكات غير منتظمة تتخللها أحيانًا نطاق ترددات منخفضة يصل إلى 2G. لذا، كان بناء تجربة مرنة أمرًا بالغ الأهمية ليس فقط لتحسين الأداء في ظل ظروف شبكة محدودة، ولكن أيضًا لتقديم منتج يمكن للمستخدمين الاعتماد عليه، منتج يمكن استخدامه دائمًا.
استراتيجية تخزين مؤقت مختلطة لتسهيل التحميل
يختلف تفاعل ومعدل التغيير لمحتوى Truebel كثيرًا. لضمان أن يكون جميع المحتوى حديث وموثوق به، نفّذ فريق Truebel التخزين المؤقت لواجهة برمجة التطبيقات باستخدام مجموعة من الاستراتيجيات التي تعتمد على الشبكة أولاً، وذاكرة التخزين المؤقت أولاً، والأسرع أولاً.
بالنسبة إلى الصفحات الثابتة، مثل صفحة الاشتراكات، تستخدم Truebel استراتيجية ذاكرة التخزين المؤقت أولاً للانتقال إلى ذاكرة التخزين المؤقت لواجهة برمجة التطبيقات للاشتراك أولاً، ثم التراجع عن استخدام الشبكة.
بالنسبة إلى الصفحات ذات المحتوى الديناميكي الذي نادرًا ما يتم تغييره، مثل قائمة المنتجات أو صفحات التفاصيل، تستخدم Truebel استراتيجية الشبكة أولاً حتى يفحص المتصفح الشبكة أولاً بحثًا عن المحتوى قبل الرجوع إلى ذاكرة التخزين المؤقت لواجهة برمجة التطبيقات في حالة عدم توفر الشبكة.
وبالنسبة إلى الصفحات الديناميكية التي تتغير كثيرًا، مثل صفحات الصفحة الرئيسية والتصفية والبحث والمدينة، تستخدم Truebel استراتيجية الأسرع للاختيار بين الشبكة أو ذاكرة التخزين المؤقت بناءً على أيهما يحدث أولاً. لضمان أن يكون المحتوى حديثًا، يتم تعديل ذاكرة التخزين المؤقت عندما تختلف استجابة الشبكة عن تلك المتوفّرة في ذاكرة التخزين المؤقت.
عاملو الخدمة للاستمتاع بتجربة كاملة بلا إنترنت
وعلى الرغم من أنّ قدرًا كبيرًا من محتوى شركة Truebel ديناميكي للغاية، يمكن إضافة السيارات أو شراؤها في أي وقت، أراد الفريق ضمان توفُّر بعض المحتوى على مستخدميها للتفاعل معه، حتى إذا كانوا يستخدمون شبكات غير مستقرة أو كانوا غير متصلين بالإنترنت تمامًا.
باستخدام مشغِّلي الخدمات، تمكّن الفريق من تخزين كل من البيانات الثابتة والبيانات الديناميكية التي سبق أن تفاعل معها المستخدم حتى يتمكن المستخدم من عرضها بلا اتصال بالإنترنت. للتأكد من أن المستخدمين يعرفون أن المحتوى قد يتغير عند معاودة الاتصال بالإنترنت، غيَّر الفريق واجهة المستخدم إلى وضع تدرّج الرمادي للإشارة إلى وضع عدم الاتصال بالإنترنت. فتصفح صفحات المنتجات هو جزء مهم من رحلة مستخدم Truebel. يمكن للمستخدمين الذين زاروا تطبيق الويب التقدّمي مرة واحدة على الأقل تصفُّح البيانات وصفحات المنتجات التي زاروها من قبل، ولكن لن يتمكّنوا من الاطّلاع على أي تعديلات على البيانات أو المنتج.
تحسين التفاعل لتشجيع المستخدمين على العودة باستمرار
تجربة أولى جذابة
وبما أنّ معظم المستخدمين يأتون من قنوات مدفوعة، كانت شركة Truebel بحاجة إلى إلى تكملة تطبيق الويب السريع التحميل بمنتج يُظهر اقتراحات ملائمة للغاية لزيادة الإحالات الناجحة. بينما يستخدم الفريق نظام توصية يعتمد على التصفية المتطورة للمستخدمين الحاليين، فإن نظامهم لا يعمل مع المستخدمين الذين يقومون بتسجيل الدخول لأول مرة.
لتجنب منح المستخدمين لأول مرة بداية على البارد، دمج الفريق نظام توصية باستخدام جهود التسويق الرقمي. وتضيف هذه التفاصيل تفاصيل المنتج، مثل طراز السيارة والسعر ونوع الجسم، إلى عنوان URL المقصود للإعلان من خلال مَعلمة نظام مراقبة الزيارات من Urchin التي يقرأها نظام الاقتراح ويظهر في المنتجات المعروضة. فإذا لم يقر النظام مثل هذه التفاصيل في عنوان URL، فسيعود إلى السيارات المشهورة، التي هي مجموعة من النماذج المشهورة والميزانيات الشائعة والسيارات التي أصبحت شائعة في الأسابيع أو الأيام القليلة الماضية.
تطبيق ويب قابل للتثبيت
ونتيجة لإنشاء تطبيق ويب سريع وكامل الميزات مع توفير تجربة استخدام مقنعة للمستخدمين، أرادت شركة TrueBill ضمان عودة المستخدمين إلى خدماتها. وأدركوا أن جعل التطبيق قابلاً للتثبيت من شأنه أن يجعل الزيارات المتكررة أكثر سلاسة.
نفّذ الفريق ميزة الإضافة إلى الشاشة الرئيسية لجعل منتجهم تطبيق ويب تقدّميًا كاملاً (PWA). وسمحت هذه الطريقة للمستخدمين بإضافة TrueBill Lite إلى الشاشة الرئيسية وتشغيله في وضع ملء الشاشة. وبما أنهم قاموا بالفعل بتنفيذ وضع عدم الاتصال بالإنترنت، تمكن الفريق من إضافة الميزة الجديدة بسهولة.
لضمان عدم تلقّي المستخدمين أيّ محتوى غير مرغوب فيه وزيادة احتمالية تثبيت المستخدمين للتطبيق، عدَّل الفريق مؤخرًا استراتيجيتهم من أجل الترويج لتثبيت تطبيق الويب التقدّمي بحيث تظهر طلبات التثبيت عندما تكون مفيدة لأنواع مختلفة من المستخدمين. استقرت شركة Truebel على استراتيجية من ثلاثة أجزاء:
- عرض الطلبات عند إكمال المستخدم لأحد الإجراءات أو عندما يكون غير نشِط لفترة قصيرة
- عرض طلبات سياقية للمستخدمين البالغين
- عرض إعلان بانر عندما يقضي المستخدم فترة زمنية محدَّدة على الموقع الإلكتروني.
إشعارات البانر التلقائية عند اكتمال العملية وعلى الصفحات التي تتلقّى عددًا كبيرًا من الزيارات
قرر الفريق عرض بانر التثبيت عندما يكمل المستخدم مهمة ما أو عندما يكون على صفحات تشهد حركة زيارات كبيرة ولكن في وضع عدم النشاط (أي عدم اتخاذ إجراء، مثل التمرير أو ملء نموذج). سمح لهم هذا الأسلوب بتجنب مقاطعة نشاط المستخدم.
الطلبات السياقية للمستخدمين البالغين
بالنسبة إلى المستخدمين الذين تفاعلوا مع التطبيق لفترة من الوقت، استخدم الفريق رسائل مخصّصة سياقية للغاية لتوضيح قيمة تثبيت التطبيق على الشاشة الرئيسية:
بانر مخصَّص للمطالبات المستنِدة إلى الوقت
أخيرًا، أنشأ الفريق إعلان بانر غير متداخل مع تصميم يشبه الإشعارات يتم تشغيله في أحداث معيّنة، مثل فتح صفحة بطاقة بيانات أو بعد أن يقضي المستخدم فترة زمنية محدّدة في التطبيق:
نتيجةً لهذه التحسينات، ارتفعت معدلات الإحالات الناجحة والتفاعل لدى شركة Truebel بشكلٍ ملحوظ حيث حققت زيادة بنسبة 26% في جلسات المستخدمين وزيادة بنسبة 61% في الإحالات الناجحة، وهو ما يمثل أمرًا مهمًا لنشاطها التجاري نظرًا لقيمة المعاملة المرتفعة لكل إحالة ناجحة.
بالنسبة إلى شركة ناشئة ذات موارد محدودة، يمكن أن يكون اختيار المنصة المناسبة أمرًا بالغ الأهمية لنجاح النشاط التجاري. ومن خلال الانتقال إلى تطبيق الويب التقدّمي (PWA) الذي يركّز على السرعة والمرونة والتفاعل، نجحنا في زيادة إنفاق الأرباح على التسويق بنسبة 80% وذلك بفضل زيادة الإحالات الناجحة ومدى الوصول السلس على الويب.
راكيش رامان، المؤسس المشارك ورئيس قسم علوم المنتجات والبيانات في شركة Truebel
زيادة بنسبة %44
تحسين في مدّة التحميل
زيادة بنسبة %26
جلسات مستخدمين أطول
%61
نسبة الزيادة في الإحالات الناجحة
زيادة بنسبة %80
نسبة الزيادة في الإنفاق من أرباح التسويق