تصميم متجر سلة: دليل UX والسرعة والتحويل 2026

تصميم متجر الإلكتروني على سلة ليس مسألة جمال — هو مسألة هل العميل يصل للمنتج بسرعة؟ هل يشتري بدون ما يفقد الصبر؟

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

---

Core Web Vitals — أهم 3 مقاييس تحتاج تتحسنها

جوجل يقيس متجرك على 3 معايير فقط. إذا لبيت الثلاثة، أنت في الصفحة الأولى:

1. LCP (Largest Contentful Paint)

التعريف: كم الوقت اللي يستغرق لتحميل أكبر عنصر مرئي في الصفحة (عادة صورة المنتج الرئيسية).

الهدف: أقل من 2.5 ثانية

كيف تحسّنها:

• استخدم صور بحجم صغير: صورة 500KB بدل 5MB
• حوّل الصور لـ WebP (أصغر من JPG بـ 25% تقريباً)
• قلّل عدد الخطوط (fonts) — استخدم Tajawal واحدة بدل 3 خطوط

أمثلة أرقام:

الحالة	LCP	جوجل يقول
صور ثقيلة + 5 خطوط	5.2 ثانية	❌ ضعيف
صور محسّنة + خط واحد	1.8 ثانية	✅ ممتاز

2. INP (Interaction to Next Paint)

التعريف: كم الوقت من لما العميل ينقر زر (مثل “أضف للسلة”) لحد ما الصفحة تستجيب.

الهدف: أقل من 200 ملي ثانية

كيف تحسّنها:

• قلّل عدد JavaScript المشغّل أثناء التصفح
• استخدم Lazy Loading على الصور أسفل الصفحة (يتحملن لما العميل يسكرول)
• اختبر على جوال قديم — إذا بطيء هناك، بتكون بطيء عند 50% العملاء

مثال عملي: عميل ينقر زر “أضف للسلة” على منتج:

• الرد السريع: 150ms (يشوف تأكيد فوراً) = ✅
• الرد البطيء: 500ms (ينتظر نصف ثانية) = العميل يظن ما نجح الزر، ينقره مرة ثانية

3. CLS (Cumulative Layout Shift)

التعريف: كم تتحرك العناصر أثناء تحميل الصفحة بدون ما العميل ينقر.

الهدف: أقل من 0.1

مثال المشكلة: تفتح صفحة منتج:

1. النص والسعر يظهر فوراً
2. صورة المنتج تتحمل بطيء
3. الصورة تظهر فجأة وتدفع السعر والزر تحت (Shift)
4. نقرت على الزر لكن الصورة دفعته، فضغطت على كلام ثاني

كيف تحسّنها:

• احجز مساحة للصورة قبل التحميل (حط height و width على img tag)
• لا تضيف widgets أو إعلانات بعد التحميل الأول
• اختبر التصميم على سرعات انترنت بطيئة

---

هيكل ملاحة المتجر — 3 clicks rule

العميل يجب يصل لأي منتج من الصفحة الرئيسية في 3 نقرات أو أقل.

الهيكل الأساسي (الصحيح):

الرئيسية
├── أقسام رئيسية (5-7 أقسام)
│   ├── عبايات
│   ├── فساتين
│   └── ملابس رجالية
│       ├── قمصان رسمية
│       ├── بناطيل
│       └── ملابس داخلية

المشكلة: متجر عنده 50 قسم في الصفحة الرئيسية

• العميل ضايع
• جوجل صعب يتابع
• معدل الخروج عالي

الحل: حصر الأقسام الرئيسية في 5 فقط، والأقسام الفرعية تحتها.

الملاحة على الجوال — مهم جداً

على الجوال، الملاحة ضيقة. المفروض:

• ✅ قائمة hamburger (☰) في الأعلى
• ✅ عدد الأقسام 4-6 أقسام فقط
• ✅ تصنيفات شعبية في الصفحة الرئيسية (أفضل 5 فئات)
• ❌ لا تخفي الأقسام تماماً في menu — بعض الأقسام الشعبية تكون مرئية

---

تحسينات التحويل (Conversion Optimization)

تصميم سريع بدون تحويل = زيارات عديمة الفائدة. هنا التحسينات اللي تحول الزائر لعميل:

1. صفحة المنتج — قبل وبعد

قبل (ضعيف):

[صورة صغيرة]
السعر: 150 ريال
وصف قصير: "عباءة حمراء"
[زر صغير: أضف]

بعد (محسّن):

[صورة كبيرة تملأ الشاشة + صور ثانوية من زوايا مختلفة]
التقييم: ★★★★★ (25 تقييم)
السعر: 150 ريال | السعر الأصلي: 200 (خصم 25%)
الوصف الكامل: الخامة، المقاسات، الألوان، العناية
[زر كبير برّاق أحمر: أضف للسلة]
[زر إضافي: شارك]
الشحن المجاني (يظهر بـ ✓)
الاسترجاع 14 يوم (يظهر بـ ✓)
أسئلة شائعة عن المنتج من عملاء قبل

النتيجة: تحويل يرتفع من 1% لـ 3-5%

2. سلة الشراء — بسطها

مشكلة شائعة: سلة الشراء معقدة، العميل في الصفحة الثانية يغيّر رأيه.

الحل:

• عرض السلة في drawer بيمين الشاشة (لا صفحة جديدة)
• عرض ملخص فوري: الكمية، السعر، التوصيل
• زر “إتمام الشراء” بارز جداً

3. الثقة والأمان

معظم الزائرين يخافون من:

• السرقة البنكية
• أن المنتج ما يوصل
• الشركة تقفل الحسابات

أضف:

• ✅ شهادات SSL (رابط HTTPS أخضر)
• ✅ بيانات التاجر واضحة (اسم، رقم جوال، عنوان)
• ✅ سياسة الاسترجاع واضحة
• ✅ طرق دفع معروفة (مدى، Visa، Apple Pay)
• ✅ تقييمات زبائن حقيقية (إذا كانت موجودة)

---

تحسينات الأداء التقنية

تحميل الصور الذكية

الطريقة	الحجم	الوقت
صورة JPG عادية (1920x1080)	850KB	2.5 ثانية
صورة WebP مضغوطة	250KB	0.8 ثانية
صورة WebP + Lazy Load	250KB (الصور أسفل تتحمل لاحقاً)	0.8 ثانية للصفحة

كيف تطبّقها:

<!-- الطريقة الصحيحة -->
<img 
  src="/product-01.webp" 
  alt="منتج بوصف عربي"
  width="500" 
  height="500"
  loading="lazy"
  decoding="async"
/>

تقليل JavaScript

كل سكريبت JavaScript تضيفه (مثل عداد الزوار، الإحصائيات، الإعلانات) يبطّء الموقع.

المسموح:

• الضروري فقط (مثل “أضف للسلة”)
• إحصائيات جوجل (GA4)
• شات العملاء

الممنوع:

• ❌ 5 سكريبتات إعلانات مختلفة
• ❌ Live chat من 3 شركات
• ❌ أدوات رسائل للموظفين

---

Schema Markup — كلام جوجل يفهمه

جوجل بطيء في قراءة HTML عادي. بتساعده بـ JSON-LD (لغة خاصة لتمثيل البيانات).

Schema للمنتج (مهم):

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "عباءة كريبيه",
  "image": "https://rankxseo.com/product.jpg",
  "description": "عباءة كريبيه مستقيمة",
  "brand": {
    "@type": "Brand",
    "name": "متجري"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://store.salla.sa/product",
    "priceCurrency": "SAR",
    "price": "150.00",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "25"
  }
}

النتيجة: جوجل يعرض النجوم والسعر مباشرة في نتائج البحث (Rich Snippet).

Schema للمتجر:

{
  "@context": "https://schema.org/",
  "@type": "LocalBusiness",
  "name": "اسم المتجر",
  "url": "https://store.salla.sa",
  "telephone": "0501234567",
  "address": {
    "@type": "PostalAddress",
    "addressRegion": "الرياض"
  }
}

---

قائمة تدقيق الأداء (30 نقطة)

انسخ هذه القائمة واختبر متجرك:

السرعة (10 نقاط)

• ☐ LCP < 2.5 ثانية
• ☐ INP < 200ms
• ☐ CLS < 0.1
• ☐ الصور بصيغة WebP
• ☐ Lazy loading مفعّل
• ☐ الخطوط محسّنة
• ☐ JavaScript قليل
• ☐ HTTP/2 مفعّل
• ☐ Caching مفعّل
• ☐ CDN للصور (اختياري)

التصميم والملاحة (8 نقاط)

• ☐ 3 clicks rule (كل منتج في 3 نقرات)
• ☐ قائمة واضحة على الجوال
• ☐ تصنيفات على الصفحة الرئيسية
• ☐ البحث سهل الوصول
• ☐ الملاحة منسقة على الجوال
• ☐ لا تظهر CLS (الصفحة ثابتة)
• ☐ الألوان متناسقة
• ☐ الخطوط واضحة (حجم 16px على الأقل)

التحويل (7 نقاط)

• ☐ صور المنتج عالية الجودة
• ☐ وصف المنتج كامل (80-150 كلمة)
• ☐ أسعار واضحة
• ☐ زر “أضف للسلة” بارز
• ☐ سلة الشراء سهلة
• ☐ طرق دفع متعددة
• ☐ سياسة الاسترجاع مرئية

الثقة والأمان (3 نقاط)

• ☐ HTTPS (أخضر في الرابط)
• ☐ رقم تواصل واضح
• ☐ شهادات وتقييمات حقيقية

Schema وSEO (2 نقطة)

• ☐ Schema markup موجود (Product + Organization)
• ☐ Meta tags محسّنة (title, description)

---

أدوات لقياس الأداء

1. Google PageSpeed Insights

pagespeed.web.dev

أدخل رابط متجرك — يعطيك درجة 0-100 وتوصيات محددة.

الهدف: 90+ على سطح المكتب، 80+ على الجوال

2. Google Search Console

search.google.com/search-console

مراقبة Core Web Vitals الحقيقية من عملاء فعليين.

3. GTmetrix

gtmetrix.com

يعطيك تفاصيل أكثر من PageSpeed (Largest Contentful Paint بالضبط كم ملي ثانية).

4. Mobile-Friendly Test

google.com/mobile-friendly

اختبر على الجوال مباشرة.

---

تحسينات تصميم سهلة ترفع التحويل 20%

#1: أضف توصيات “زبائن اشتروا أيضاً”

أسفل كل منتج، أظهر 3 منتجات متعلقة. يرفع التحويل 15%.

#2: عرض الشحن والاسترجاع قبل الشراء

“شحن مجاني” و “استرجاع 14 يوم” على صفحة المنتج تقلل الخوف.

#3: صور من زوايا مختلفة

صورة واحدة = تحويل 1%. صور متعددة = 3-5%.

#4: استعرض المنتج (Product Zoom)

اسمح للعميل يكبّر الصورة ويشوف التفاصيل. يرفع الثقة.

#5: عرض الألوان والمقاسات بشكل بصري

اسمح للعميل يختار اللون بنقرة واحدة بدل dropdown list.

---

الأسئلة الشائعة

إيش الفرق بين “Design” و “User Experience”؟

Design: كيف يبدو المتجر (الألوان، الخطوط). UX: كيف يشعر العميل وهو يتسوق (سهولة، سرعة، ثقة).

كيف أقيس التحويل الفعلي؟

أدخل Google Analytics → Conversions → اضبط هدف “عملية شراء” → شوف الـ Conversion Rate.

لو كان متجري سريع لكن تحويل منخفض، ايش المشكلة؟

السرعة وحدها ما كافية. تحقق:

1. هل الأسعار واضحة؟
2. هل الصور عالية الجودة؟
3. هل الزبائن يقدرون يصلوا للمنتج بسهولة؟

كم مرة بالشهر لازم أختبر الأداء؟

مرة على الأقل. لو عملت تغييرات، اختبر مباشرة بعدها.

---

تطبيق RankX SEO يحسّن أوصاف المنتجات وينظم البيانات الوصفية تلقائياً — جزء أساسي من تحسين الأداء.

---

اقرأ أيضاً: زيادة زيارات متجر سلة للاستراتيجية الشاملة، وأفضل شركة سيو سلة لاختيار الشريك الصحيح.