متى يكون تحسين التحميل كافيًا دون إعادة التصميم بالكامل؟

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

متى يكون من الأفضل الاستمرار في تحويل الكتل أو إعادة التصميم؟

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

إعادة تصميم متجر مسلمداني على الإنترنت: العملية والنتائج

هل شعرت يومًا بالإحباط بسبب أداء موقع الويب الخاص بك؟

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

وبعد الاتصال بالعديد من البائعين، قرروا في النهاية العمل معنا في Harun Studio. لقد ساعدتني مناقشة طويلة عبر الواتساب والمكالمات الهاتفية على فهم مدى عمق المشاكل حقًا.

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

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

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

قمت بعد ذلك بإجراء تدقيق كامل لمتجرهم عبر الإنترنت ووجدت أنه لا يزال هناك مجال كبير للتحسين.

وبناءً على تلك المراجعة، قرر موقع Islamadani.id اتخاذ خطوة أكبر: إعادة تصميم موقع الويب بالكامل مع التركيز على الأداء والتحويل.

تضمن هذا التحول العديد من الخطوات الإستراتيجية، بما في ذلك اختيار سمة أخف وأكثر استجابة، والتحويل من Elementor إلى Blocks، وتقليل المكونات الإضافية غير الضرورية، وترحيل الاستضافة إلى VPS أكثر موثوقية يديره Harun Studio. تم التعامل مع كل خطوة بعناية للتأكد من تحسين تجربة المستخدم وزيادة إمكانية التحويل.

النتيجة؟ موقع ويب أسرع وأكثر استجابة وأكثر استعدادًا لخدمة عملاء Islamadani.id. لم تكن عملية إعادة التصميم هذه تتعلق فقط بمظهر مرئي جديد. كان الأمر يتعلق بإنشاء تجربة تسوق أفضل يمكن أن تدعم نمو الأعمال.

تحديد المشكلة: كيف اكتشفت الاختناقات في متجر Islamadani.id السابق

لماذا وافق Muslimadani.id على بدء مشروع إعادة التصميم؟ لقد أرادوا استخدام قنوات مثل إعلانات Google وFacebook وInstagram لجذب المزيد من الزيارات إلى متجرهم عبر الإنترنت.

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

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

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

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

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

وهذا هو الشكل الذي تبدو عليه صفحة المنتج بعد إعادة التصميم:

هل يمكنك رؤية الفرق؟

هل لاحظت وجود السهمين الأيمن والأيسر على صورة المنتج ومعرض المنتجات المرئي بجانب الصورة الرئيسية؟
هل لاحظت أيضًا زر “أضف إلى حقيبة التسوق”، الذي يبدو أكثر ملاءمة من “أضف إلى سلة التسوق”، وكيف يبرز كأحد أبرز العناصر في الصفحة، إلى جانب زر واتساب؟
ومعلومات المخزون القصيرة التي قمت بتخصيصها برسائل مثل “أسرع، لم يتبق سوى 2 في المخزون!” عندما ينخفض المخزون إلى أقل من 5، أو “يتبقى قطعة واحدة فقط لهذا المتغير. اطلب الآن قبل أن يفعل شخص آخر ذلك.” عندما يبقى عنصر واحد فقط؟

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

إعادة بناء المظهر مع إعطاء الأولوية للسرعة

استخدام GeneratePress وGenerateBlocks

لتحقيق أفضل أداء ممكن، قررت تحويل موقع الويب من سمة ThemeForest ومنشئ الصفحة Elementor إلى GeneratePress مع GenerateBlocks.

GeneratePress هو قالب WordPress خفيف الوزن وسريع، بينما يوفر GenerateBlocks مرونة في التصميم دون التضحية بالسرعة. تمت إعادة بناء التصميمات التي تم إعدادها مسبقًا في Figma في موقع WooCommerce الخاص بهم باستخدام هذه المجموعة. وكانت النتيجة موقعًا إلكترونيًا يبدو قويًا من الناحية المرئية مع كونه سريع الاستجابة وسريع الاستجابة أيضًا.

عمل الكود المخصص

ولدعم الاحتياجات المحددة لـMuslimadani.id، قمت بكتابة أكثر من 1000 سطر من التعليمات البرمجية المخصصة. وقد غطى هذا ميزات مثل معلومات حجم الملابس الموجودة على بطاقات المنتج، والتسعير المخصص على صفحات المنتج، والعديد من العناصر الأخرى التي تدعم تجربة تسوق أفضل.

نقل الموقع من استضافة Niagahoster المشتركة إلى SpeedyPage VPS

للتأكد من أن موقع الويب يمكنه الأداء بأفضل حالاته والتعامل مع حركة المرور الأعلى بشكل أكثر سلاسة، قمت بترحيل الاستضافة من استضافة Niagahoster المشتركة إلى SpeedyPage VPS بالمواصفات التالية:

ايه ام دي رايزن 7900
ذاكرة DDR5
تخزين NVMe
موقع خادم سنغافورة

لقد قمت بتحسين VPS باستخدام حزمة LEMP: Linux، وNginx، وMySQL، وPHP. من خلال تكوين الخادم الصحيح، تمكنت من تحقيق أقصى قدر من أداء WooCommerce والتأكد من أن موقع الويب Islamadani.id يظل سريعًا ومستقرًا.

لماذا الانتقال إلى VPS؟

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

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

يمكن أن يؤثر بطء TTFB على العديد من مقاييس الأداء المهمة، بما في ذلك:

الطلاء الأول للمحتوى (FCP): مدى سرعة ظهور المحتوى المرئي الأول
أكبر رسم للمحتوى (LCP): مدى سرعة ظهور العنصر الأكبر
إجمالي وقت الحظر (TBT): المدة التي لا يستطيع المستخدمون التفاعل فيها بسبب قيام JavaScript أو CSS بحظر الصفحة
التحول التراكمي للتخطيط (CLS): مدى ثبات التخطيط أثناء تحميل الصفحة

من خلال الانتقال إلى VPS، قدمنا موارد مخصصة لـ Muslimadani.id. أدى ذلك إلى تقليل TTFB بشكل كبير وتحسين الأداء العام للموقع. وكانت النتيجة تجربة مستخدم أسرع وأكثر استجابة، والتي يمكن أن تؤدي في النهاية إلى تحسين معدل التحويل ورضا العملاء.

الخلاصة: تحول ناجح

ومع التحويل من Elementor إلى GeneratePress وGenerateBlocks، بالإضافة إلى إعادة التصميم التي كانت أكثر ملاءمة للمشتري، نجح موقع Islamadani.id في تحسين سرعة موقع الويب بشكل عام وتجربة المستخدم.

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

يمكن للعملاء الآن استكشاف المنتجات وإكمال عمليات الشراء بسرعة وسهولة أكبر، مما يؤدي في النهاية إلى تحسين الرضا والولاء.