حالة دراسية
March 13, 2022

تحسين سرعة المتجر الالكتروني عبر منصة سلة

كيفية تحسين وزيادة سرعة الموقع و المتجر الالكتروني الخاص بك في سلة
blog-details

نشرت من قبل

إبراهيم فتحي
Statistic Icon

موضوع

حالة دراسية

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

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

في هذا المقال سنتحدث بشكل تفصيلي حول حالة دراسية قُمنا بتحليلها وانجازها عبر فريق ريبارو لرفع وتحسين سرعة الموقع لهذه الحالة عبر ادوات القياس pagespeed insights + gtmetrix .

نظرة عامة مُشرقةْ والجزء الأخر في عالمٍ مُظلم من التقنيات القديمة :

الحالة التي سنستفيض من خلالها المعلومات المختلفة حول زيادة سرعة متاجر سلة و الوصول بسرعة المتجر حتى +90 لنسختي الموبايل و سطح المكتب في اداء القياس الخاصة ب جوجل "page speed insight" .
بالاضافة الى توضيح كافة العوامل المُسببة لبطء المتاجر التي يتم توفيرها عبر منصة سلة أو زد .

  • اسم المتجر : xb-cards
  • منصة المتجر : سلة
  • باقة المتجر عبر سله : بلس
  • الخدمة المُقدمة : زيادة سرعة المتجر "باقة شهرية" + يومين مجاناً بشكل تجريبي
  • النتيجة : زيادة سرعة المتجر الالكتروني حتى +90
تفاصيل :

يختص المتجر "الحالة الدراسية" بتوفير الالعاب المدفوعة مع قيام صاحب المتجر باستخدام خاصية التعديل عبر الانماط "CSS" وذلك لتغير شكل الموقع بقدر المُستطاع ليتلائم مع الهوية الخاصة بالمتجر.

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

سرعة المتجر في نسخة الموبايل قبل التهيئة و السيو التقني

سرعة الموقع لنسخة سطح المكتب قبل التهيئة وزيادة السرعة

معايير قياس تجربة الصفحة وسرعة الموقع لنسخة الموبايل "Core web vitals"
معايير قياس تجربة الصفحة و سرعة المتجر لنسخة سطح المكتب "Core web vitals"

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

مُلاحظة غير مدفوعة وليست ذات طابع تفضيلي : قمنا ايضاً بفحص ما يقارب 30 موقعاً تابعاً لـ منصة زد ، تقنياً المتاجر في زِدْ افضل من منصة سلة ، وكذلك استخدامهم دوال برمجية متقاربة ولكن أفضل بشكل بسيط.

قمنا عبر فريق ريبارو برفع سرعه الموقع الى اقصى حد ممكن "للصفحة الرئيسية فقط دون كامل الموقع" حتى +90عبر ادوات القياس

سرعة المتجر لنسخة الموبايل و تجربة الصفحة "Core web vitals"
سرعة المتجر لنسخة سطح المكتب و تجربة الصفحة "Core web vitals"

توضح النتيجة المُرفقة زيادة سرعة المتجر بنسبة 500% لنسخة الموبايل مع الاخذ بعين الاعتبار عوامل التصدر وتجربة الصفحة "Core web vitals" والتي من شأنها ان تساهم بشكل اكبر في ان ينافس الموقع عبر مُحرك البحث عبر وجود سرعة تصفح افضل وتجربة صفحة افضل مما يزيد من فرص زيادة تجربة المستخدم ما يُساهم بدوره في رفع ترتيب الموقع في محركات البحث.

لكن يبقى السؤال كيف قُمنا في ريبارو بزيادة سرعة المتجر عبر منصة سلة ؟

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

اولاً : ما هي مواقع الطرف الثالث وكيفية عملها ؟

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

خدمات التحليل - التسويق- المبيعات- التتبع و غيرها

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

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

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

اضغط هنا لقراءة المقال

هنالك العديد من منصات الطرف الثالث مثل :

  • شوبيفاي
  • منصة سلة
  • منصة زد
  • WiX
  • Webflow
  • Godaddy websilte building
  • blogger
  • expandcart
  • منصة متاجر
  • وغيرهم العديد من المنصات المختلفة

ثانياً : التتبع و التحليل لمتاجر سلة

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

بدايةً : التحليل

وجدنا بان متجر xb-cards التابع لمنصة سلة ، يستهلك وقتاً اطول حتى انتهاء تحميل الملفات

  • يحتاج الموقع الى 16 ثانية حتى اكتمال عملية تحميل كامل الموقع و ملفاته
  • بالاضافة الى تحميل ملفات الى ذاكرة المتصفح بحوالي 6 ونصف ميجا بايت من الملفات
  • وكذلك يقوم الموقع بحوالي 81 اتصال صادر من الموقع والذي يعني ايضاً 81 اتصال وارد
  • مُجمل هذه الاتصالات تقوم بنقل بيانات ما يعادل 4 ميجا بايت
  • بينما يحتاج الموقع حوالي ثانيتان و نصف للوصول الى اول نمط مكتمل من البيانات
  • اما بما يتعلق بترتيب اكواد الموقع وتشغيلها فان الموقع يحتاج حوالي ثانية و نصف "بينما هذا الامر متفاوت "

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

  • يحتاج الموقع 1.41 ثانية للتحميل بشكل كامل
  • الاتصالات الصادرة اصبحت حوالي 32 اتصال بدلاً من 81
  • البيانات التي يتم نقلها اصبحت حوالي 924 كيلو بايت بدلا من 3.8 ميجا
  • ترتيب الاكواد و تشغيلها اصبح 960 جزء من الثانية
  • يحتاج الموقع 1.12 ثانية لاكتمال اول نمط من البيانات

تستخدم سلة العديد من التقنيات التي تؤثر سلباً على سرعة الموقع فمثلاً ، ستجد بان جميع المتاجر المُشتركة لدى سلة تحتوي على اكواد جوجل تاجز "google tags"
ويحتوي الكود على الأي دي الخاص بسلة ، وجود الكود في الهيد الخاص بالموقع او لأي سكربت يُعطل من مفهوم نمطية الموقع المثالية لـ : Domtree


تحثْ محركات البحث على استخدام النمطية المثالية فمثلا :

  • أن لا يحتوي الهيد على اكواد جافا سكربت
  • جميع اكواد الجافا سكربت يفضل ان توجد في البودي <body

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

ملاحظة مهمة : الموقع يستخدم جوجل تاجز ايضاً الخاص به مما يعني وجود الكود مرتين ، مرة ل سلة و مرة لصاحب الموقع!!

ايضاً نجد بأن منصة سلة تستخدم اصدار متأخر وقديم جدا من البوتستراب ، يستخدم مطورو سلة الاصدار الثالث!
ناهيك عن أن المنصة تعتمد على مكاتب مختلفة من الجافا سكربت مثل :

  • React Js : يمكن الاعتماد عليها كلياً وفصل جميع المكاتب او جزئياً مع استخدام purjs
  • Moment JS : يمكن الاستغناء عنها باستخدام webpack أو مثيلاتها
  • Pure JS : يمكن التقليل من استخدامها والاعتماد على ريكات او العكس
  • Pollyfil JS : يمكن الاستغناء عنها برمجياً بالاعتماد على مكاتب ريكات

وبتحليل التقنيات المُستخدمة نجد بان منصة سلة تعتمد على بعض الدوال التي من الممكن استبدالها بافضل منها وما يُعطي نتيجة افضل ،فلنلقي نظره على الصورة التالية :

جميع ما باللون الأحمر من المهم تحليله ومن ثم تهيئته ف تحسينه للحصول على نتيجة افضل. لكن لفريقنا نظره مختلفة فإن اهم عنصر يجب ان يتم تحسينه هو
Dom Size

  • نجد بان هنالك ضرورة ملحة تحت مسمى "Avoid an excessive DOM size" ، والتي تعني تجنب استخدام العناصر الموحدة ضمن كتلة او مجموعة برمجية واحدة
  • ولتبسيطها اكثر ، ستجد في معظم متاجر سلة وجود سلسلة من العناصر تحت عنصر واحد ، ويعني عنصر رئيسي واحد فقط يحتوي على عناصر فرعية
  • وكلما زادت هذه العناصر الفرعية ازداد الموقع سوءاً .
  • ولفهمها بشكل أوسع وطُرق حلها ، بامكانكم متابعة هذا المقال من هنا
  • بالاضافة الى وجود ضرورة مُلحة لاستبدال بعض الدوال البرمجية المستخدمة بلغه الجافا سكربت الى استخدام دوال افضل.
  • وايضاً الاهم هذا التحذير يُخبرنا بأن الموقع يستهلك من ذاكرة الاستضافة وذاكرة المتصفح في جوالك او جهاز الكمبيوتر الخاص بك بشكل مُفرط.
  • هنالك تقنيات بسيطة ايضاً غير مُطبقة داخل متاجر سلة على الرغم من اهميتها

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

واخيراً :

التقنية المُستخدمة عبر ريبارو بمُجملها ، تُعطي لنا صلاحية التحكم بـ 65% برمجياً من المتاجر او خدمات الطرف الثالث سابقة الذكر. يتم تطبيق التقنيات المناسبة لكل موقعٍ او متجر على حدى.

استطعنا عبر فريق ريبارو بتطبيق اسلوب التهيئة و تحسين سرعة المتاجر ل سلة و زد و شوبيفاي وكذلك مواقع الطرف الثالث ، ناهيكَ عن تطبيقها لموقع XB-CARDS وهو الحالة الدراسية الآنفة الذكر. نعلم جيداً باننا لم نقم بتطبيق حل مشكلة DOM size على حالة الدراسة ، وانما تركناها لمطوري سلة للتحسين منها .
بامكانكم التواصل معنا في حال رغبتكم الحصول على هذه الخدمة عبر ريبارو ، والتي ستساهم بشكل فعال في التوافق مع تحديثات جوجل الخاصة بتجربة الصفحة وسرعة الموقع.

في المقال القادم سنتحدث بشكل مفصل ايضاً حول زد ، ومن ثم شوبيفاي باذن الله