Ele.me تحسِّن أوقات تحميل الأداء باستخدام تطبيق ويب تقدّمي متعدد الصفحات

Ele.me هي أكبر شركة لطلب الطعام وتوصيله في بر الصين الرئيسي. وتخدم هذه المنصة 260 مليون مستخدم مسجَّل من أكثر من 200 مدينة في جميع أنحاء الصين، ولديها أكثر من 1.3 مليون بطاقة بيانات للمطاعم. نظرًا لأن 99٪ من مستخدميها يطلبون الطعام على الأجهزة الجوّالة، شرعت Ele.me في تحسين تجربة الويب على الأجهزة الجوّالة وجعلها أسرع وأكثر موثوقية في الاتصالات غير المستقرة، وكل ذلك مع الاعتماد على النموذج التقني الأساسي لتطبيق متعدد الصفحات لتلبية احتياجاتهم التشغيلية.

  • انخفض وقت التحميل بنسبة 11.6% في جميع الصفحات المخزنة مؤقتًا بشكل مسبق.
  • انخفض وقت التحميل في المتوسّط بنسبة 6.35% على جميع الصفحات.
  • انخفض الوقت المستغرق للتفاعل باستمرار إلى 4.93 ثانية على شبكة الجيل الثالث عند التحميل الأول

بعد أن أطلقنا تطبيق الويب التقدّمي ile.me PWA، انخفضت أوقات التحميل بشكل كبير، ما أدّى إلى تحويل تجربة الويب على الأجهزة الجوّالة إلى أحد أسرع المواقع الإلكترونية حجز الطعام في الصين.

سبنسر يانغ، مدير منتجات تطبيق الويب التقدّمي Ele.me PWA

الاختيار بين التطبيق متعدد الصفحات وتطبيق الصفحة الواحدة

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

أدى النمو الهائل لموقع Ele.me في السنوات الأخيرة إلى نمو وحدات النشاط التجاري الفريدة داخل الشركة، حيث تتولى كل منها إدارة خدماتها المصغّرة ضمن نطاق https://ele.me الرئيسي. واستنتج فريق Elle.me أنّ عملية فصل هذه الخدمات الفردية تتم على أفضل نحو من خلال نموذج تطبيق متعدد الصفحات (MPA)، حيث يعمل كل فريق ويحافظ على خدمته الخاصة.

تطبيق PRPL على MPA

يوفّر نمط PRPL (التحميل المسبَق للموارد المهمة وعرض المسار الأولي والتخزين المؤقت للمسارات المتبقية والمسارات المتبقية بالتحميل الكسول) مجموعة من القضبان لتوجيه هيكل تطبيق الويب التقدّمي (PWA)، مع التركيز بشكل خاص على الوقت السريع للتفاعل وزيادة ذاكرة التخزين المؤقت لتقليل عمليات الإرسال والاستقبال للشبكة. وعلى الرغم من أنّ PRPL قد تم اختباره جيدًا على اتفاقيات إعادة التسويق، كان من غير الواضح كيف يمكن تطبيقه بالفعل على MPA. قررت Ele.me تبني عقلية PRPL عند التفكير في إعادة بناء اتفاقية شراكة الأعمال الخاصة بها كتطبيق ويب تقدّمي. لإجراء ذلك، يحرصون على توفير تحميل مسبق للموارد المهمة لتلك الصفحة عند انتقالهم إلى صفحة، من خلال تضمين <link rel="preload"> حسب الحاجة، أو عرض هذه النصوص البرمجية على مستوى سطحي بما يكفي بحيث يمكن لأداة التحميل المسبق في المتصفح أداء عملها بدون الحاجة إلى تلميحات إضافية. وتعمل هذه التطبيقات أيضًا على تحسين تطبيق الويب التقدّمي (PWA) تدريجيًا من خلال تثبيت مشغّل خدمات متى كان متوافقًا مع المتصفّح. ويتم استخدامه بعد ذلك لجلب مسارات التنقّل الأخرى ذات المستوى الأعلى وتخزينها مؤقتًا مسبقًا لكي يحصل المستخدم على تجربة تحميل وعرض أسرع عند النقر حول تطبيق الويب التقدّمي (PWA). لكل صفحة في الموقع الإلكتروني المتعدد الاستخدامات مسارها الخاص، لذا فإن تسريع عرض المسار الأولي معاد تطبيق أفضل الممارسات لتحسين مسار العرض الحرج لكل مسار. وبفضل هذه التغييرات، انخفض إجمالي وقت التحميل بنسبة 6.35% على جميع الصفحات في المتوسط.

خدمة شاشات الهيكل الانتقالي في أسرع وقت ممكن

أرادت Ele.me تطبيق فكرة الشاشات الهيكلية على تجربة المستخدم، وهي وسيلة لضمان استجابة الصفحة كلما نقر المستخدم على أي زر أو رابط في أسرع وقت ممكن من خلال نقل المستخدم إلى تلك الصفحة الجديدة، ثم تحميل المحتوى إلى تلك الصفحة عند توفّر المحتوى. وهذا أيضًا مفتاح تحسين الأداء الذي يتم رصده لتطبيق PWA. ومع ذلك، نظرًا لأن كل صفحة في MPA هي مسارها الأولي، فإن كل انتقال يتطلب إعادة تنفيذ جميع أعمال التحميل والتحليل والتقييم اللازمة في كل مرة.

لحل هذه المشكلة، أنشأ Ele.me شاشة الهيكل كمكوِّن فعلي لواجهة المستخدم، ثم استخدمت حزمة العرض من جهة الخادم Vue.js لإنشاء ثم عرض مكونات Vue مسبقًا على السلاسل قبل إدخالها في نماذج HTML. وهذا يسمح لهم بعرض شاشة الهيكل مباشرة وتحقيق انتقال أكثر سلاسة عند التنقل بين الصفحات.


شاشة هيكل عظمي أثناء انتقال الصفحة
شاشة هيكلية أثناء انتقال الصفحة
عرض الصفحة بالكامل بعد الانتقال إلى الصفحة
عرض الصفحة بالكامل بعد انتقال الصفحة

تخزين الموارد المشتركة في ذاكرة التخزين المؤقت مع مشغّل الخدمات

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

يتم تخزين المسارات التي تُعتبر مهمة، ولكنها غير بالغة الأهمية، يتم تخزينها مؤقتًا بشكل تدريجي من خلال مشغّل الخدمات في وقت التشغيل بدلاً من ذلك بينما يواصل المستخدم التنقّل في تطبيق الويب التقدّمي (PWA). ويسمح هذا لموقع Ele.me بعرض تطبيق الويب التقدّمي للمستخدمين مباشرةً من ذاكرة التخزين المؤقت في جميع ظروف الشبكة. ونتج عن ذلك: خفض وقت التحميل بنسبة 11.6% لجميع الصفحات التي تم تخزينها مؤقتًا بشكل مسبق.

محتوى إضافي للقراءة