التجارة الإلكترونية: إن إدراك سرعة موقع الويب يحدث فرقًا كبيرًا

نعلم جميعًا أن سرعات موقع الويب يمكن أن تحدث فرقًا كبيرًا في معدل التحويل والالتصاق لموقع التجارة الإلكترونية.

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

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

هناك الكثير من الأدوات لمساعدتك على تحسين سرعة صفحات الويب مثل Yslow أو Google Pagespeed Insights ، وهناك العديد من أفضل الممارسات مثل تصغير ودمج css و js ، واستخدام رموز css ، وتقليل طلبات الشبكة التي يجب أن يتبع مطور الواجهة الأمامية لضمان زيادة سرعة الصفحة إلى أقصى حد.

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

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

هناك بعض الأشياء التي لا يمكنك التحكم فيها مثل زمن انتقال الشبكة أو سرعات اتصال الهاتف المحمول ، وبالتالي هناك حد لما يمكن تحقيقه بسرعة الصفحة الأولية. على اتصال 3G في أي مكان بين 600 مللي ثانية و 1 ثانية يتم استهلاكه بواسطة النفقات العامة الإلزامية للشبكة ، والتي لا يمكنك فعل أي شيء حيالها. استنادًا إلى وقت تحميل الصفحة المطلوب وهو 2 ثانية ، يمنحنا هذا ثانية واحدة فقط للعب بها. هذا ليس بالكثير.

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

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

ستركز هذه المقالة على تصور سرعة الصفحة.
أيهما أكثر أهمية: ما مدى سرعة تحميل الصفحة أو مدى سرعة تحميل الصفحة للمستخدم؟

من المؤكد أن التصور هو أكثر ما يهم المستخدم.

سرعة الموقع: الانطباعات الأولى

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

المفتاح هنا هو إعطاء الأولوية لتحميل المحتوى المهم أولاً ، قبل المحتوى الآخر - امنح المستخدم شيئًا مهمًا ليراه بأسرع ما يمكن.

أثناء معالجة هذه المعلومات المهمة ، يمكنك بعد ذلك البدء في تحميل المستوى التالي من المحتوى.

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

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

تم إجراء هذا الاختبار على جهاز محاكاة iPhone 6 على اتصال 3G جيد وتعطيل التخزين المؤقت. بعد أن تم تحميل الصفحة في البداية ، بدأت في التحديث الثابت.

في ما يزيد قليلاً عن 600 مللي ثانية ، بدأ شيء ما يحمل اسمي في الرأس. ستلاحظ أيضًا أنه تم إجراء 6 مكالمات شبكة فقط وتحميل 5 أصول (3 ملفات css وصورتان).

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

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

في أقل من ثانيتين بقليل ، لدي الآن قسم جديد من المحتوى المهم.

في أقل من 3 ثوانٍ ، أدرك الآن أن الصفحة قد تم تحميلها بالكامل بينما استغرق تحميل الصفحة بالكامل أقل من 5 ثوانٍ. يشير هذا إلى أنني أدركت أن الموقع قد تم تحميله بالكامل عندما يتم تحميله بنسبة 60٪ فقط.

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

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

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

بعد 8.5 ثانية ، يمكنني رؤية بدء تحميل الرف الدائري. لم يتغير عدد الطلبات مما يشير إلى أن الجزء الأكبر من الطلبات المتعلقة بالمحتوى يتم إجراؤها في البداية عند تحميل الصفحة.

لم أدرك أن الموقع قد تم تحميله بالكامل إلا بعد 22 ثانية تقريبًا. استغرقت الصفحة فعليًا ما مجموعه 28.4 ثانية ليتم تحميلها بالكامل. يشير هذا إلى أنني أدركت أنه تم تحميل الصفحة بالكامل عندما تم تحميل 77٪ في الواقع.

من السهل رؤية الفرق الواضح بين التجربتين. بينما يتم تحميل الصفحة الرئيسية للجوّال من Amazon بشكل أسرع من الصفحة الرئيسية لـ Charles Tyrwhitt ، فقد تم بذل الجهود لضمان إدراك المستخدمين أنها أسرع. يبدأ المستخدم في رؤية شيء ما يتم تحميله في غضون 12.5٪ من إجمالي وقت تحميل الصفحة بينما يرى مستخدمو موقع Charles Tyrwhitt الإلكتروني شيئًا ما يحدث فقط في غضون 26٪ من إجمالي وقت تحميل الصفحة. قدمت صفحة Amazon الرئيسية 6 طلبات للشبكة قبل أن يرى المستخدم تقدمًا بينما قدمت صفحة Charles Tyrwhitt الرئيسية 90 طلبًا.

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

تحسين سرعة موقع الويب من خلال إعطاء الأولوية لـ CSS

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

حل لذلك هو تقسيم ملفات css الخاصة بك وتحميلها بالتسلسل مع المحتوى المهم. إذا نظرنا إلى مثال Amazon ، فإنهم يقومون بتحميل ملف css بحجم 6.5 كيلو كواحد من طلباتهم الستة الأولية. يحتوي هذا الملف على css المطلوب لتصميم المحتوى الهام على صفحتهم الرئيسية. في الواقع ، الحجم الإجمالي لجميع ملفات css المطلوبة قبل أن يرى المستخدم المحتوى على صفحة أمازون الرئيسية للجوال أقل من 40 كيلو بينما يزيد عن 500 كيلو على صفحة تشارلز تيرويت الرئيسية.

تتيح لك هذه الممارسة تقديم محتوى هام للمستخدم بسرعة كبيرة وتساعد على فرض إدراك السرعة.

افعل الشيء نفسه مع JavaScript

بالإضافة إلى إعطاء الأولوية لـ css ، يجب أن تفكر في كيفية القيام بذلك أيضًا باستخدام JavaScript. ستعتمد جميع مواقع التجارة الإلكترونية تقريبًا بشكل كبير على JavaScript لتعمل. هذا جيد طالما أن JavaScript لا يمنع تحميل المحتوى المهم. إذا أخذت مثال موقع Charles Tyrwhitt مرة أخرى وقمت بتعطيل JavaScript على متصفحي ، أرى الآن تحميل المحتوى في غضون 4.5 ثانية. يعد هذا تغييرًا هائلاً في تصوري لسرعة هذا الموقع ، ولم يكن لـ JavaScript الذي تم تحميله قبل المحتوى الهام أي تأثير على هذا المحتوى ، وبالتالي لا يوجد سبب لعدم تحميل JavaScript بعد هذا المحتوى.

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

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