تحسين التجارة الإلكترونية عبر الأجهزة المحمولة: اجعل موقعك على الويب يعمل بشكل أسرع

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

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

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

سيؤدي تحسين معدل التحويل بنسبة 0.1٪ إلى تحقيق عائد استثمار أكبر بكثير لبائع تجزئة أكبر مما هو عليه بالنسبة لمتاجر أصغر.

قم بتحسين الصور للحصول على تجربة تجارة إلكترونية رائدة على الأجهزة المحمولة

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

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

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

من المهم أن يكون لدى جميع أعضاء الفريق تقدير لتحسين الواجهة الأمامية وتأثير أي قرارات رسومية على حجم الصور وبالتالي سرعة الصفحة.

بينما تسمح أدوات التصميم القياسية مثل Photoshop للمصممين بتحسين الصور ، يتوفر عدد من خدمات الجهات الخارجية التي يمكنها تحسين الصور تلقائيًا على موقع الويب الخاص بك. يقدم كل من Akamai و Ampliance خدمات إدارة الصور التي تعمل على تحسين صورك بناءً على مجموعة من القواعد المكونة. يمكنهم حتى تحويل ملفات jpeg إلى صور WebP لدعم المتصفحات لضمان أن تكون أحجام الملفات صغيرة قدر الإمكان.

في Envoy ، قمنا مؤخرًا بتجربة Akamai image manager على موقع الويب الخاص بالعميل وشهدنا انخفاضًا متوسطًا بنسبة 80٪ في حجم ملف صور PLP ، مع عدم وجود انخفاض ملحوظ في الجودة المرئية. أدى ذلك إلى انخفاض كبير في الوزن الإجمالي لصفحات PLP (صفحة قائمة المنتجات) وقفزة كبيرة فورية في نتائج Google Pagespeed. إذا كنت لا ترغب في استخدام خدمة جهة خارجية لهذا الغرض ، فيمكنك تنفيذ أداة مفتوحة المصدر مثل Thumbor ، وهي خدمة تقوم بتثبيتها محليًا على خوادم الويب الخاصة بك. تعمل أدوات مثل هذه على تحسين صورك تلقائيًا أثناء التنقل ثم تخزينها مؤقتًا في مستودع.

استخدم CDN

شبكات توصيل المحتوى (CDNs) هي خدمات تقوم بتخزين المحتوى الخاص بك مؤقتًا على شبكة من الخوادم المعروفة باسم الحافة. عادةً ما تتم استضافة هذه الخوادم على مستوى العالم في العديد من المواقع لضمان تخزين المحتوى الخاص بك مؤقتًا في موقع ماديًا أقرب إلى المستخدمين من خوادمك الأصلية. بينما تُستخدم شبكات CDN غالبًا للتخزين المؤقت للصور و css و JavaScript ومقاطع الفيديو ، يمكنك أيضًا استخدامها لتخزين صفحات HTML الكاملة مؤقتًا.

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

يمكن لـ CDN أيضًا تقليل الحمل على خوادمك الأصلية بشكل كبير. غالبًا ما تكون صفحة PLP صفحة متعطشة للمعالج ليقوم تطبيق الويب الخاص بك بإنشائها سريعًا. قد يحتوي على عدد كبير من المنتجات والأوجه ، وكلها تضيف الكثير من المعالجة. في معظم الحالات ، لن تتغير صفحة PLP من ساعة إلى أخرى ، لذا فإن تخزين هذه الصفحة في ذاكرة التخزين المؤقت لمدة ساعة واحدة أمر ممكن تمامًا. بدلاً من الاضطرار إلى إنشاء تلك الصفحة آلاف المرات في غضون ساعة واحدة ، سيتعين على خادمك الأصلي القيام بذلك مرة واحدة. في الواقع ، إنه لا يعمل تمامًا مثل هذا لأن العديد من شبكات CDN لديها العديد من ذاكرة التخزين المؤقت المستقلة ، ولكن لا يزال بإمكانك توقع تفريغ حوالي 60٪. هذا يعني أن خوادمك الأصلية وتطبيقك ستحصل على طلبات أقل بنسبة 60٪ من دون وجود CDN.

استخدم أدوات تحليل السرعة لتحسين تجربة التجارة الإلكترونية على الأجهزة المحمولة

هناك عدد من الأدوات المجانية والمدفوعة عبر الإنترنت التي يمكنها تحليل صفحة الويب وتقديم توصيات حول كيفية جعل موقع الويب الخاص بك يعمل بشكل أسرع. من المحتمل أن الأدوات المجانية الثلاثة الأكثر استخدامًا هي Google PageSpeed ​​Insights و Yslow و Webpagetest. تختلف كل أداة من هذه الأدوات اختلافًا طفيفًا ، ولكن جميعها تحلل عنوان URL الخاص بك وترسل تقريرًا يحتوي على توصيات ، جنبًا إلى جنب مع النتيجة.

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

قلل من استخدام نصوص الطرف الثالث

تحتوي معظم مواقع التجارة الإلكترونية لشركة B2C على مجموعة من موارد الجهات الخارجية ، بدءًا من البرامج النصية لتتبع الشبكة التابعة إلى اختبارات MVT. قد تحتوي على موجز Twitter أو تتبع Facebook أو حتى خطوط خارجية. يمكن أن تؤدي هذه الموارد الخارجية إلى إبطاء موقع الويب بشكل كبير إذا لم تتم إدارتها بعناية شديدة.

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

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

جوجل AMP

مشروع Google Accelerated Mobile Pages عبارة عن تقنية نشر على الويب مفتوحة المصدر تهدف إلى تحسين سرعة وأداء المحتوى ، الذي يتم تسليمه على وجه التحديد إلى الأجهزة المحمولة. بقيادة Google وبدأت في عام 2015 ، تم تصميم تقنية AMP في الأصل لتسليم المحتوى الإخباري. تتميز صفحات AMP بخفة وزنها وتميل إلى استخدام بيانات أقل بحوالي 10 مرات من نظيراتها التي لا تحتوي على AMP ، وغالبًا ما يتم تحميلها في أقل من ثانية واحدة. بالرغم من ذلك ، هناك مشكلة كبيرة. تدعم صفحات AMP مجموعة محدودة جدًا من الوظائف ، وبالتالي فهي غير مناسبة للعديد من التطبيقات ، خاصة مواقع التجارة الإلكترونية الثرية والعملية.

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

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

اذهب للتكيف

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

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

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

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

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

هناك العديد من الطرق المختلفة لتسريع صفحات موقع التجارة الإلكترونية للجوال. يتضمن بعضها التطوير ، والبعض الآخر يتضمن استخدام خدمات الطرف الثالث ، والبعض الآخر يتضمن التوازن بين التصميم والوظيفة.