Pinterest PWA: تعزيز أداء الهاتف بالطريقة الصحيحة

إذا كنت تبحث عن حل لتسريع نمو أعمال التجارة الإلكترونية الخاصة بك ، فيجب أن ترى منشورات تقترح الاستثمار في التجارة الإلكترونية و PWA. تستند هذه الاقتراحات إلى أرقام فعلية يمكنك الاعتماد عليها. من زيادة التحويلات المستندة إلى الأجهزة المحمولة إلى تحسين أداء الموقع مما يؤدي إلى تجربة مستخدم أفضل ، فإن تطوير PWA هو تطابق تم إنشاؤه في الجنة لاستراتيجية التجارة الإلكترونية الخاصة بك. لمعرفة المزيد حول هذا الموضوع ، ندعوك لزيارة دراسة الحالة الحالية لـ Pinterest PWA: كيفية الاستفادة من تطبيق الويب التالي في المستقبل لتعزيز أداء الهاتف المحمول وتوسيع عائد الاستثمار بمرور الوقت.

نظرة عامة على Pinterest

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

كل منشور على Pinterest يسمى دبوس. هناك المليارات من الدبابيس على Pinterest ، وتعمل هذه المنصة كمحرك اكتشاف مرئي حيث تتطلب منك الدبابيس التحميل في شكل jpg أو png بدلاً من النص. يمكنك حفظ دبابيس على لوحاتك الخاصة أو العامة والحفاظ على إلهامك منظمًا في مكان واحد ، لذلك في المرة القادمة ، يمكنك بسهولة استرداد ما تبحث عنه.

أسس Pinterest Paul Sciarra و Evan Sharp و Ben Silbermann منذ 12 عامًا. تشير Pinterest إلى نفسها على أنها "قائمة الأفكار العالمية". بفضل Pinterest ، أصبح لدى الأشخاص طريقة أسهل بكثير للعثور على الأفكار حتى عندما لم يتم الكشف عن أسمائهم بعد.

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

لماذا يجتمع Pinterest و PWA معًا؟

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

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

في عام 2015 ، قدمت Google PWA كحل لتحقيق أقصى قيمة لكل من التجار والمستخدمين النهائيين. لقد أضاءت Pinterest فكرة عن مكان الاستثمار للحصول على تجربة ويب متنقلة جديدة.

إليك كيفية تقديم PWA:

• للمستخدمين: يسعى PWA إلى تحسين تجربة المستخدم على نطاق عالمي ، مما يعني أن موقع الهاتف المحمول الخاص بك سيوفر النطاق الترددي ويتم تحميله بسرعة واستجابة على الرغم من العيش في أماكن ذات اتصالات إنترنت منخفضة أو معالجة محدودة للبيانات. تُحدث تفاعلات الموقع السريعة والسلسة والسلسة فرقًا كبيرًا ، وتقود رحلة ممتعة.
• للتجار: توفير تكاليف تطوير التطبيقات المكررة حيث يتم تشغيل PWA عبر متصفح للعمل عبر أنظمة التشغيل. يمكن لـ PWA أن يعمل مثل تطبيق محلي ، ولكن يمكنه أيضًا أن يوفر للتجار فرصًا لعرض مواقع الجوال الخاصة بعلاماتهم التجارية على صفحة نتائج محرك البحث ، حتى في الأماكن الأعلى التي تتمتع بتجربة مستخدم جيدة.

تحديات Pinterest التي تعزز تكامل PWA

أظهرت البيانات أن 80٪ من مستخدمي Pinterest استخدموا الموقع على متصفحات الأجهزة المحمولة بدلاً من تطبيق محلي. على الرغم من زيادة معدل تثبيت التطبيق بمرور الوقت ، إلا أنه جاء مصحوبًا بعيب: العديد من المراجعات السلبية وغير الراضية والمحبطة المتعلقة مباشرة بشبكة الويب على الأجهزة المحمولة الخاصة بهم.

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

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

شيء آخر هو أن الويب المحمول السابق لـ Pinterest تطلب 23 ثانية على الأقل لبدء التفاعل. راجع المستخدمون تواجد Pinterest على الهاتف المحمول قبل تحول عام 2017 باعتباره "لعنة شريرة لشبكة الجوّال". على وجه التحديد ، تم إرسال أكثر من 2.5 ميغا بايت من JavaScript لوقت كافٍ لتحليلها وتجميعها قبل الاستقرار النهائي للخيط الرئيسي ليكون تفاعليًا.

نتائج Pinterest PWA

حول الوظائف

لحل وقت التفاعل المرهق ، حلق Pinterest PWA الجديد المئات من JavaScript ، وقلص حجم الحزمة الأساسية الخاصة بهم إلى 150 كيلو بايت من 650 كيلو بايت الأولي. علاوة على ذلك ، تمكنوا من رفع مقاييس الأداء المهمة. يحتاج وقت التفاعل إلى أقل من 6 ثوانٍ ، وظهر الطلاء الأول بعد 1.8 ثانية ، مخفضًا من 4.2 ثانية.

بشكل عام ، أصبحت شبكة الجوّال الآن أكثر خفة واستجابة. النظام الأساسي مليء بالصور ، ولكن يتم محاذاة جميع العناصر قريبًا وبشكل واضح. تعمل انتقالات الصفحة أيضًا بشكل جيد وفقًا لتوقعاتهم.

النتائج

أسفر التحول في عام 2017 عن زيادة بنسبة 103٪ في عدد المستخدمين النشطين أسبوعيًا على الويب المحمول الجديد عامًا بعد عام.

مقارنة Pinterest PWA بشبكة الجوال القديمة:

• 40٪ زيادة في الوقت الذي يقضيه في الموقع لأكثر من 5 دقائق
• زيادة بنسبة 44٪ في الإعلانات التي ينشئها المستخدمون
• 50٪ زيادة في نسبة النقر إلى الظهور للإعلان
• 60٪ أعلى في التفاعلات الأساسية

مقارنة Pinterest PWA بالتطبيق الأصلي:

• 5٪ زيادة في الوقت الذي يقضيه في الموقع لأكثر من 5 دقائق
• زيادة بنسبة 2٪ في الإعلانات التي ينشئها المستخدمون
• ظلت نسبة النقر إلى الظهور الإعلان
• حوالي 2-3٪ أعلى في التفاعلات الأساسية

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

يقترب Pinterest PWA من محاكاة تطبيق محلي. لذلك لا توجد تغييرات قابلة للتطبيق في الوظيفة. ومع ذلك ، فإن استخدام التخزين يطلب من مستخدمي iOS 56 ميجابايت ومستخدمي Android 9.6 ميجابايت لتقديم نفس التجربة التي يوفرها PWA ، مع عبء أقل على تنزيل 150 كيلوبايت المصغر والمضغوط. كل ذلك بفضل ميزة الإضافة الرائعة إلى الشاشة الرئيسية.

ما الذي يمكن أن تتعلمه من تغيير تطبيق Pinterest على الهاتف المحمول؟

كان الاسم "Project Duplo" ، والذي جاء من إلهام البساطة وإمكانية الوصول في صيف عام 2017 عندما ولد فريق من مطوري منصات الويب ومهندسي النمو. عندما قاموا بفحص أداء الموقع القديم من أجل القياسات ، يمكن لشبكة الويب المحمولة الخاصة بهم التعامل مع أقل من 10٪ من عمليات الاشتراك بينما حقق الويب على سطح المكتب خمسة أضعاف هذا المبلغ.

ما يميز هذا المشروع هو أنه لم يستغرق الأمر سوى 3 أشهر قصيرة من مهندسي Pinterest لبناء ودمج وإطلاق موقع الهاتف المحمول الجديد ، وهو أيضًا أكبر موقع PWA في العالم. اذا،، كيف يفعلون ذلك؟ وبالعودة إلى الوراء ، فقد شاركوا نفس القلق من كونهم من أوائل المتبنين في وجهة النظر بعد عامين من إطلاق مصطلح تطبيق الويب التقدمي.

الكشف عن الإطار

يمثل Gestalt حسابًا للوقت القصير الذي يتم فيه إنشاء عملية إعادة الكتابة الكاملة وشحنها في ميزات Pinterest. تساعد مكتبة واجهة المستخدم مفتوحة المصدر هذه على تسليم المشروع في غضون ربع سنة. تسمح مجموعة المكونات من Gestalt لهم ببناء لغة تصميم فريدة لإنشاء صفحات مذهلة باستمرار وبسهولة دون لمس CSS.

ثم تم إنشاء مجموعة أخرى للويب المحمول فقط ، مع مكونات تخطيط محددة لصفحات متباعدة محددة. للانتقال إلى تطوير واجهة مستخدم سريع ومقاوم للأخطاء ، تحتاج الحدود الافتراضية لـ PageContainer إلى استبعاد FullWidth ، باستثناء حدود FixedHeader. وتم استخدام React 16 لكل تطوير ويب حدث في Pinterest.

لقد أولىوا اهتمامًا وثيقًا بعامل الخدمة حيث اكتسبت PWA شهرتها من الاستفادة من الاستخدام التقليدي مع مكتبات Workbox للإنشاء والإدارة. تعطي Pinterest اليوم الأولوية لاستراتيجية ذاكرة التخزين المؤقت أولاً لتعديل أي حزم JavaScript أو CSS وواجهة مستخدم غلاف التطبيق.

كيف قاموا بتسريع السرعة

كان الأداء والسرعة على وجه الخصوص من المراكز البارزة في تحويل Pinterest. بعد التحسين ، قامت Pinterest بتقليص حجم ملف JavaScript من 490 كيلو بايت إلى 190 كيلو بايت ، وذلك من المستوى الافتراضي لتقسيم التعليمات البرمجية في المسار ، ثم المطالبة باستخدام مكون <Loader> مع تقسيم الكود من مستوى المكون.

كما أن الاعتماد على نظام التحميل المسبق من جانب العميل - الخادم يعمل أيضًا لأنه يساعد في تسريع التحميل من خلال تحسين التحميل الأولي للصفحة والتغييرات في المسار من جانب العميل.

لضمان تجربة سريعة ولكنها تشبه إلى حد كبير اللغة الأصلية ، اعتمدت Pinterest على متجر redux العادي ، وهو مسؤول عن تغيير المسارات في اللحظة القريبة من خلال الحصول على مصدر نموذج واحد للحقيقة مثل Pin أو إجراء المستخدمين.

في عرض ملموس ، ترى فقط دبوسًا بمحتوى محدود. ستقرأها أولاً حتى تقرر النقر للحصول على مزيد من المعلومات. بهذه الطريقة ، وقت كافٍ لجلب التفاصيل من الخادم. كل هذا ممكن لأن بيانات Pin يتم تطبيعها للجماهير.

الماخذ الرئيسية

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

نأمل ، من خلال دراسة الحالة الملهمة هذه ، أن تكون منفتحًا لتعلم المزيد عن PWA وتحاول أن ترى كيف يمكن أن تساعدك على البقاء قويًا وخطيرًا. إذا كنت تبحث عن خبير يمتد لعقد من الزمان في تطوير PWA لـ Magento ، منصة التجارة الإلكترونية الأعلى نتيجة في الوقت الحالي ، فلا تنسَ التحقق من Tigren.

لمعرفة المزيد عن حلول Magento PWA المتميزة ، اتصل بـ Tigren وأخبرنا بالمكان الذي تواجه مشكلة فيه.