# تحسين التجارة الإلكترونية على الجوال: Core Web Vitals وإتمام الشراء والإصلاحات المحددة التي تحرّك التحويل

> 70-85% من زيارات التجارة الإلكترونية من الجوال. عشرة مجالات محددة (Web Vitals، وأهداف اللمس، والملء التلقائي للنماذج، وApple Pay، ومناطق الإبهام) تسدّ فجوة التحويل بين الجوال وسطح المكتب، مع أدوات ومعايير حقيقية.

Ryan Badger - 1 مايو 2025 - القراءة في 8 دقيقة

## لماذا الجوال هو اللعبة كلها

70-80% من زيارات متجرك الإلكتروني من الجوال. وفي معظم فئات المستهلكين تقترب من 85%. وتحويل سطح المكتب عادةً 2-3 أضعاف تحويل الجوال، وهذا لا يخبرك بأن سطح المكتب أفضل بقدر ما يخبرك بأن الجوال معطوب في معظم المتاجر.

تجربة جوال محسّنة جيدًا تستطيع سد الفجوة، وغالبًا تقلبها: بعض علامات DTC تحوّل الآن على الجوال بمعدل يساوي سطح المكتب أو يفوقه. والفرق محدد وقابل للقياس، ويتعلق في معظمه بالنظافة لا بالابتكار.

تغطي هذه المقالة ما يحرّك تحويل الجوال فعلًا، مع معايير وأدوات وأمور محددة للإصلاح. لا "صمّم للجوال أولًا". بل الفحوصات المحددة التي تنتج الارتفاع التراكمي.

## 1. Core Web Vitals ولماذا تراقبها Google

تستخدم Google مقاييس Core Web Vitals كإشارة ترتيب ومؤشر على جودة التجربة. وبعيدًا عن زاوية SEO، فالمقاييس الأساسية مؤشرات قوية على التحويل.

### LCP (أكبر رسم للمحتوى)

الزمن حتى يُرسم أكبر عنصر في الجزء المرئي أولًا (عادةً صورة الواجهة أو H1). الهدف: أقل من 2.5 ثانية على جوال 4G.

أشيع أسباب LCP السيئ:

- صورة الواجهة غير مضغوطة أو كبيرة جدًا
- تحميل خط الويب يعطّل الرسم
- حقن سكربتات الأطراف الثالثة (أدوات الدردشة، والتحليلات، وأدوات اختبار A/B) في `<head>`

### INP (التفاعل حتى الرسم التالي)

الزمن من تفاعل المستخدم (النقر) حتى التحديث المرئي التالي. الهدف: أقل من 200ms.

أشيع أسباب INP السيئ:

- صفحات ثقيلة بـ JavaScript (متاجر React/Vue دون تقسيم الشيفرة)
- سكربتات التحليلات أو الدردشة التي تعمل بشكل متزامن عند التفاعل
- تأخر النقر في متصفحات الجوال الأقدم

### CLS (تحوّل التخطيط التراكمي)

أشياء تقفز في الصفحة أثناء تحميلها. الهدف: أقل من 0.1.

أشيع الأسباب:

- صور بلا سمات العرض/الارتفاع
- إعلانات أو تضمينات أطراف ثالثة تُحمَّل بعد المحتوى
- خطوط تُحمَّل فتغيّر حجم النص

### كيف تفحص

مجانًا: [PageSpeed Insights](https://pagespeed.web.dev/) يشغّل Lighthouse ويعرض الثلاثة. اختبر صفحة منتجك الأعلى إيرادًا، لا صفحتك الرئيسية. أصلح الأحمر، وتقبّل الكهرماني، وامضِ.

مدفوع / أعمق: WebPageTest.org لتحليل الشلال، وتبويب الأداء في Chrome DevTools للتحليل المحلي.

## 2. سرعة الجوال أقل من 3 ثوانٍ (جوال حقيقي، لا سطح مكتب مقيَّد السرعة)

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

اختبر على هواتف حقيقية على 4G. إن استغرقت صفحتك ثانيتين على محاكي Chrome، فمن المرجح أنها 4-5 ثوانٍ على هاتف Android متوسط على 4G.

### أكبر مكاسب السرعة (بالترتيب)

1. **تحسين الصور:** اضغطها إلى جودة 80%، وغيّر الحجم إلى الأبعاد المطلوبة فعلًا، وقدّمها بصيغة WebP أو AVIF. يفعل Shoprocket هذا تلقائيًا عبر Cloudflare
2. **حمّل المحتوى أسفل الصفحة تحميلًا كسولًا.** الصور وiframes والسكربتات الثقيلة لا ينبغي أن تُحمَّل حتى يُمرَّر إليها
3. **أجّل JavaScript غير الحرج.** التحليلات وأدوات الدردشة وأدوات اختبار A/B لا ينبغي أن تعطّل الرسم
4. **خزّن الأصول الثابتة مؤقتًا بقوة.** تخزين مؤقت لمدة سنة للصور والخطوط وCSS وJS بروابط ببصمة
5. **استخدم CDN** (Cloudflare أو Fastly أو المدمج في منصتك). يقدّم الأصول من حواف قريبة جغرافيًا
6. **قلّل سكربتات الأطراف الثالثة.** كل بكسل ووسم يضيف نحو 50-200ms؛ دقّق فيما هو ضروري فعلًا

## 3. حجم أهداف اللمس

تحدد إرشادات واجهة الإنسان من Apple حدًّا أدنى لأهداف اللمس بحجم 44×44 بكسل. وتحدد Google Material حجم 48×48. ومعظم نسخ "الجوال" في القوالب لا تبلغ أيًّا منهما.

**العلاجات:**

- أزرار ارتفاعها 44px على الأقل مع حشو داخلي 8-12px
- روابط التنقل ارتفاعها 44px على الأقل
- حقول النماذج ارتفاعها 44px على الأقل (يفيد إمكانية الوصول أيضًا)
- مسافة بين أهداف النقر المتجاورة 8px على الأقل

اختبار: افتح متجرك على هاتف. حاول أن تنقر قائمة الفئات بإبهامك. هل تخطئ النقر؟ هذه مشكلة هدف لمس.

## 4. تفاصيل إتمام الشراء على الجوال

السلة وإتمام الشراء على الجوال هما حيث ينزف معظم التحويل. قائمة مهام محددة:

### نماذج بعمود واحد

النماذج بعمودين تنجح على سطح المكتب وتفشل على الجوال. كدّس كل حقل رأسيًا. دون استثناءات.

### أنواع الإدخال المناسبة

- حقل البريد: `type="email"` (يظهر لوحة مفاتيح البريد برمز @)
- الهاتف: `type="tel"` (لوحة مفاتيح رقمية)
- الرمز البريدي: `type="text" inputmode="numeric"` للدول ذات الرموز البريدية الرقمية
- رقم بطاقة الائتمان: `type="text" inputmode="numeric" autocomplete="cc-number"` (يجعل الملء التلقائي يعمل)

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

### ملاءمة الملء التلقائي

تستطيع المتصفحات ملء الاسم والعنوان والبريد والهاتف وتفاصيل البطاقة تلقائيًا إن كانت سمات `autocomplete` في النموذج صحيحة. العميل الذي ينقر اقتراح الملء التلقائي يُتمّ الشراء في 3 ثوانٍ. وبدون الملء التلقائي يكتب يدويًا أكثر من 12 حقلًا.

قيم autocomplete القياسية: `name`، `email`، `tel`، `street-address`، `postal-code`، `country`، `cc-number`، `cc-exp`، `cc-csc`، `cc-name`.

### زر "أضف إلى السلة" الثابت في صفحات المنتجات

مرّر صفحة منتج على الجوال 3 شاشات فيخرج زر "أضف إلى السلة" من الشاشة. العلاج: أضف شريطًا سفليًا ثابتًا بالسعر وزر الإضافة يظهر حين يخرج الزر الأصلي من العرض.

### Apple Pay + Google Pay + Link

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

- **Apple Pay:** يُفعَّل تلقائيًا بعد أن تتحقق من نطاقك لدى Stripe (يتولى Shoprocket ذلك)
- **Google Pay:** مشابه
- **Stripe Link:** يملأ البطاقة والعنوان من هوية Link عبر المواقع

كل إتمام شراء على الجوال بدون هذه يسرّب العملاء. فعّل الثلاثة.

## 5. تقليل حقول النماذج

كل حقل في إتمام شرائك على الجوال نقطة احتكاك. دقّق في حقولك:

**مطلوب عادةً:**

- البريد الإلكتروني
- عنوان الشحن (الاسم، والشارع، والمدينة، والرمز البريدي، والدولة)
- تفاصيل الدفع (أو Apple/Google Pay)

**كثيرًا ما يُجمع أكثر من اللازم:**

- رقم الهاتف (فقط إن احتجته للتسليم / لشركات الشحن؛ والكثير منها لا يحتاجه)
- تاريخ الميلاد (لا حاجة إليه عند الشراء تقريبًا أبدًا)
- اسم الشركة (للأعمال B2B فقط)
- الاشتراك في النشرة (محدد مسبقًا حيث يسمح القانون؛ وخانة اختيار منفصلة خلاف ذلك)
- "كيف سمعت عنا؟" (انقله إلى استبيان ما بعد الشراء)

حقول أقل = إتمام شراء أسرع = إكمال أعلى. كل حقل تحذفه يعادل تقريبًا تحسنًا بنسبة 5-10% في إكمال الشراء على الجوال، ويتراكم.

## 6. نص مقروء وطول سطر مناسب على الجوال

- **نص المتن:** 16px كحد أدنى (افتراضي iOS وإرشاد Google Material)
- **طول السطر:** 45-75 حرفًا
- **ارتفاع السطر:** 1.4-1.6 ضعف حجم الخط
- **التباين:** WCAG AA كحد أدنى (4.5:1 للمتن، 3:1 للنص الكبير)

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

## 7. اعتبارات الاستخدام بيد واحدة

يستخدم معظم مستخدمي الجوال هواتفهم بيد واحدة، ويصل الإبهام من أسفل اليمين (أو أسفل اليسار للأعسر). ينبغي أن تقع التفاعلات المهمة في منطقة الإبهام تلك.

- الدعوة الأساسية للإجراء (أضف إلى السلة، إتمام الشراء، اشترِ الآن) قرب الأسفل
- قائمة الهمبرغر أعلى اليسار أو اليمين، في متناول الإبهام
- زر "رجوع" متوقع (رجوع المتصفح يتفوق عادةً على أزرار الرجوع المخصصة)

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

## 8. صفحة منتج مخصصة للجوال

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

تسلسل فعّال لصفحة المنتج على الجوال:

1. صورة الواجهة (معرض قابل للسحب)
2. العنوان + السعر
3. محدد المتغيّر (المقاس، واللون)
4. أضف إلى السلة (الدعوة الأساسية)
5. إشارات الثقة (التقييم، والشحن المجاني، والإرجاع)
6. الوصف (قابل للطي، ويُطوى بعد 3 أسطر)
7. المواصفات / التفاصيل (قابلة للطي)
8. ملخص المراجعات مع توسيع "عرض الكل"
9. المنتجات ذات الصلة
10. الأسئلة الشائعة (قابلة للطي)

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

## 9. الاختبار على أجهزة حقيقية

ليس DevTools. ولا محاكي الجوال في المتصفح. بل هواتف حقيقية على اتصالات خلوية.

الحد الأدنى لتناوب الاختبار:

- iPhone SE (شاشة صغيرة، جهاز أقدم)
- iPhone 15 Pro (أحدث iOS، Safari)
- Samsung Galaxy متوسط الفئة (Android، Chrome)
- Android أقدم على 4G (يكشف مشكلات الأداء)

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

## 10. تجنب الأنماط القاتلة للجوال

أخطاء شائعة تدمّر تحويل الجوال:

### النوافذ المنبثقة البينية

نافذة "اشترك واحصل على خصم 10%!" التي تغطي الشاشة عند الهبوط على الجوال. تعاقب Google هذه في ترتيب البحث على الجوال. ويصطدم بها العملاء فيغادرون. استخدم نماذج تسجيل مدمجة بدلًا منها.

### تشغيل فيديو تلقائي مع الصوت

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

### حالات التمرير (hover) على اللمس

"مرّر لترى التفاصيل" لا تعمل على اللمس. إن كان في قالبك ما زالت أنماط الكشف بالتمرير على الجوال، فهي معطلة فعليًا.

### أزرار "إغلاق" صغيرة جدًا في النوافذ المنبثقة

علامة X بحجم 16 بكسل في الزاوية لا يمكن إصابتها بإبهام. اجعل أزرار الإغلاق 44×44 أو استخدم أزرار "إغلاق" بعرض كامل أسفل النوافذ.

### التمرير الأفقي في شبكات المنتجات

على الجوال، تخفي دوارات المنتجات ذات التمرير الأفقي 80% من المنتجات أسفل الطية. شبكة رأسية (عمودان على الجوال) تحوّل أفضل.

## ما يتولاه Shoprocket للجوال

معظم الأساسيات جاهزة مباشرة:

- **تحسين تلقائي للصور:** تغيير حجم + ضغط + WebP + تحميل كسول لكل صورة منتج
- **السلة المنزلقة (لا سلة بصفحة كاملة)** هي الافتراضي على الجوال
- **زر "أضف إلى السلة" الثابت على الجوال** مدعوم في المتاجر ذات القوالب
- **إتمام شراء متجاوب مع الجوال** بأنواع إدخال صحيحة وملء تلقائي وتكديس
- **Apple Pay + Google Pay + Stripe Link** دفع بنقرة واحدة عبر Stripe
- **أداة دردشة حية متجاوبة مع الجوال**
- **تسليم عبر CDN** من Cloudflare لكل أصل
- **Core Web Vitals محسّنة جاهزة** للمتجر المستضاف

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

لمستخدمي التضمين: أنت تتحكم في سرعة الصفحة المحيطة وتصميمها. أداة Shoprocket تُحمَّل تحميلًا كسولًا ولن تعطّل رسم صفحتك، لكن سرعة الصفحة الإجمالية عليك إدارتها.

> **نصيحة:** مرة كل ربع سنة، شغّل PageSpeed Insights على صفحات منتجاتك الثلاث الأعلى إيرادًا على الجوال. دوّن درجات Core Web Vitals الثلاث. وفي الربع التالي، قارن. الاتجاه التنازلي قاتل صامت للتحويل؛ اكتشفه كل ربع بدل أن تكتشفه بعد وقوع الضرر.

## باختصار

- **الجوال 70-85% من الزيارات.** تعاملت معه معظم المتاجر كفكرة لاحقة؛ لا تفعل
- **Core Web Vitals ثلاثة أرقام تتتبعها:** LCP وINP وCLS. أقل من 2.5s / 200ms / 0.1
- **اختبر على أجهزة حقيقية على 4G،** لا على محاكي متصفح
- **تفاصيل إتمام الشراء:** نماذج بعمود واحد، وأنواع إدخال صحيحة، وملء تلقائي، وApple/Google Pay، ودعوات إجراء ثابتة
- **حقول نماذج أقل** = إكمال أعلى. دقّق فيما هو مطلوب فعلًا
- **أهداف اللمس 44×44 كحد أدنى.** المسافة بين الأهداف 8px كحد أدنى
- **منطقة الإبهام مهمة.** دعوات الإجراء الأساسية قرب الأسفل؛ والهمبرغر أعلى اليسار/اليمين
- **تجنب القاتلات على الجوال:** النوافذ البينية، والصوت التلقائي، وحالات التمرير، وأزرار الإغلاق الصغيرة

[ابدأ تجربة مجانية](https://app-v3.shoprocket.io/signup) واحصل على تحسين تلقائي للصور + Apple Pay + إتمام شراء أصلي للجوال من اليوم الأول. 14 يومًا، دون بطاقة.

---

- HTML version: https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion
- Language: العربية (ar)
- Also in: [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)