سرعة المتجر بتبيع: دليل Core Web Vitals للتاجر

جرب الحركة دي: افتح متجرك من موبايلك، على باقة الموبايل مش على الواي فاي، وعد لحد ما صورة المنتج تظهر. لو عديت 3، فيه عملاء كتير بيقفلوا الصفحة قبلك.

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

باختصار: سرعة المتجر بتأثر مباشرة على المبيعات: تحسين 0.1 ثانية زود التحويل 8.4% في مواقع التجزئة حسب Deloitte. جوجل بيقيس السرعة بتلات مقاييس (LCP أقل من 2.5 ثانية، INP أقل من 200 مللي ثانية، CLS أقل من 0.1)، وأكبر مكسب سريع هو ضغط صور المنتجات بصيغة WebP أو AVIF.

الأرقام: السرعة بتساوي فلوس#

• دراسة من جوجل على أكتر من 10,000 موقع موبايل لقت إن 53% من زيارات الموبايل بتتساب لو الصفحة أخدت أكتر من 3 ثواني عشان تحمل. الدراسة قديمة شوية (2016)، بس من ساعتها توقعات الناس للسرعة زادت مش قلت.
• دراسة Deloitte اللي اسمها Milliseconds Make Millions (بتكليف من جوجل، على 37 براند وأكتر من 30 مليون زيارة) لقت إن تحسين سرعة الموبايل 0.1 ثانية بس زود التحويل في مواقع التجزئة 8.4%، وزود متوسط قيمة الطلب 9.2%.

0.1 ثانية! ده أقل من رمشة عين. تخيل بقى متجر بياخد 6 ثواني بدل 3.

وعندنا في مصر الموضوع أهم، لأن نسبة كبيرة من العملاء:

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

Core Web Vitals: التلات أرقام اللي جوجل بيبص عليها#

جوجل بيقيس تجربة المستخدم الحقيقية في موقعك بتلات مقاييس اسمها Core Web Vitals، وبيستخدمها ضمن إشارات الترتيب في نتائج البحث:

1. LCP: إمتى أكبر حاجة في الصفحة بتظهر؟#

Largest Contentful Paint هو الوقت لحد ما أكبر عنصر في أول شاشة يظهر، وفي المتجر ده غالبا صورة المنتج أو البانر. الكويس: 2.5 ثانية أو أقل.

2. INP: الصفحة بترد بسرعة لما العميل يدوس؟#

Interaction to Next Paint بيقيس الوقت من لما العميل يدوس على زرار (زي اختيار مقاس أو "أضف للسلة") لحد ما الشاشة تتغير فعلا. الكويس: 200 مللي ثانية أو أقل. المقياس ده حل محل FID في مارس 2024، وهو أصعب، لأنه بيقيس كل الضغطات مش أول واحدة بس.

3. CLS: الصفحة بتتنطط؟#

Cumulative Layout Shift بيقيس قد إيه العناصر بتتحرك من مكانها وهي بتحمل. أكيد حصلك إنك رايح تدوس على حاجة والصفحة نطت فدست على حاجة تانية. الكويس: 0.1 أو أقل.

جوجل بيعتبر الصفحة كويسة لو 75% من زيارات الناس الحقيقية عدت الحدود دي. يعني مش كفاية إنها سريعة عندك إنت.

إيه اللي بيحصل لما العميل يفتح الصفحة؟#

عشان تعرف تصلح، لازم تعرف الوقت بيروح فين. ده تبسيط لتحميل صفحة منتج:

كل مرحلة من دول ممكن تبقى هي عنق الزجاجة:

• رد السيرفر (TTFB): لو السيرفر بطيء أو بعيد أو بيعمل استعلامات كتير، كل حاجة بعده بتتأخر.
• الملفات اللي بتعطل الرسم: CSS وخطوط وسكريبتات في أول الصفحة، المتصفح بيستناها قبل ما يرسم أي حاجة.
• صورة المنتج: أكبر ملف في الصفحة غالبا، ولو مش مضغوطة هي اللي بتبوظ الـ LCP.
• السكريبتات الخارجية: بكسل فيسبوك، تيك توك، أناليتكس، شات، هيت ماب... كل واحد ليه تكلفة على المعالج، وده بيبوظ الـ INP.

الصور: أكبر مكسب بأقل مجهود#

خدنا صورة منتج حقيقية من متجر Trendy House على هلا أوردرز، مقاسها 1440×1440، وجربنا عليها كذا صيغة. ده اللي طلع:

والصورة دي أصلا كانت متجهزة لموقع. الصور اللي بتطلع من موبايل حديث بتبقى 3 أو 4 ميجا، وفيه تجار بيرفعوها زي ما هي. صفحة قسم فيها 20 منتج بالشكل ده يعني 60 ميجا على باقة عميلك. مستحيل تتباع.

أهم قواعد الصور:

1. متعرضش صورة أكبر من المكان بتاعها. صورة في كارت عرضه 300 بكسل مش محتاجة تبقى 4000 بكسل. اعمل نسخة مصغرة للقوايم ونسخة كبيرة لصفحة المنتج.
2. استخدم WebP أو AVIF. كل المتصفحات الحديثة بتدعمهم.
3. حدد العرض والطول في الكود، عشان المتصفح يحجز المكان والصفحة متتنططش (CLS).
4. أجل تحميل الصور اللي تحت بـ loading="lazy"، بس أوعى تأجل صورة المنتج الرئيسية، دي عايزها تيجي بأولوية.

<!-- الصورة الرئيسية: أولوية عالية ومن غير lazy -->
<img src="/products/dress-1400.webp"
     width="1400" height="1400"
     fetchpriority="high"
     alt="فستان كتان أسود بأكمام طويلة">

<!-- صور القايمة تحت: تتحمل لما العميل يقرب منها -->
<img src="/products/dress-600.webp"
     width="600" height="600"
     loading="lazy" decoding="async"
     alt="فستان كتان أسود">

السكريبتات الخارجية: كل واحد ليه تمن#

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

• ركب اللي محتاجه بس. بكسل ميتا لو بتعمل إعلانات فيسبوك، بكسل تيك توك لو بتعمل إعلانات تيك توك. مش الاتنين "احتياطي".
• راجع الإضافات القديمة كل كام شهر. أداة شات جربتها مرة ونسيتها لسه بتحمل في كل صفحة.
• حمل السكريبتات بعد المحتوى (defer أو async) بدل ما تعطل رسم الصفحة.
• متحطش فيديو يوتيوب يشتغل لوحده في أول الصفحة. اعرض صورة، والفيديو يحمل لما العميل يدوس.

إزاي تقيس سرعة متجرك#

• PageSpeed Insights: حط رابط صفحة منتج (مش الرئيسية بس). فوق هتلاقي بيانات المستخدمين الحقيقيين لو موقعك عليه زيارات كفاية، وتحت اختبار معملي بيقولك المشاكل بالتفصيل. البيانات الحقيقية هي الأهم.
• Google Search Console: فيه تقرير Core Web Vitals بيجمع صفحات موقعك كلها ويقولك أنهي مجموعة صفحات فيها مشكلة.
• أدوات المطور في كروم: تبويب Network وتبويب Performance، وتقدر تعمل محاكاة لموبايل بطيء و4G ضعيف.
• التجربة الحقيقية: هات موبايل أندرويد رخيص، اقفل الواي فاي، وجرب تطلب من متجرك من أول الإعلان لحد صفحة "تم الطلب". مفيش أداة هتوريك اللي هتشوفه بعينك.

غلطة شائعة في القياس#

درجة PageSpeed (الرقم من 100) مش هي الهدف. ممكن متجر ياخد 65 ويبيع كويس جدا، وممكن ياخد 95 في الاختبار المعملي وبياناته الحقيقية وحشة. ركز على الـ Core Web Vitals من المستخدمين الحقيقيين، وعلى معدل التحويل.

قايمة مراجعة سريعة#

• صور المنتجات WebP أو AVIF، ومقاسها مناسب لمكانها.
• صورة المنتج الرئيسية بتحمل بأولوية، وباقي الصور lazy.
• كل الصور والبانرات ليها عرض وطول محددين.
• مفيش سكريبتات أو إضافات مش مستخدمة.
• البكسلات والأناليتكس مش معطلين رسم الصفحة.
• المتجر عليه شهادة SSL وبيشتغل على HTTPS.
• جربت الطلب من موبايل أندرويد على باقة بيانات.
• راجعت تقرير Core Web Vitals في Search Console.

اللي هلا أوردرز بيعمله عنك#

لو متجرك على هلا أوردرز، جزء كبير من الشغل ده متعمل من غير ما تفكر فيه:

• صور المنتجات بتتصغر تلقائيا وتتحول لـ WebP وقت الرفع، ومعاها نسخة مصغرة للقوايم والكروت. ارفع الصورة من موبايلك، والمنصة تتصرف.
• شهادة SSL مجانية على الدومين بتاعك.
• صفحات الهبوط متصممة للموبايل أول، وخفيفة، ومستقلة عن ثيم المتجر، فالعميل اللي جاي من الإعلان بيوصل لصفحة واحدة فيها الفورم على طول.
• بكسل ميتا وتيك توك وGoogle Analytics بتتضاف من لوحة التحكم بالـ ID بس، من غير ما تلزق أكواد في القالب.
• خريطة موقع وروابط نظيفة عشان جوجل يلاقي صفحاتك.

الخلاصة#

السرعة مش رفاهية تقنية، هي جزء من تجربة الشراء زي السعر والصور. ابدأ بالصور لأنها أكبر مكسب، بعدها نضف السكريبتات، وقيس ببيانات المستخدمين الحقيقيين مش بالدرجة بس. وافتكر الرقم ده كل ما تيجي تضيف حاجة جديدة لمتجرك: 0.1 ثانية ممكن تساوي 8% مبيعات.

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

أسئلة شائعة#

سرعة الموقع بتأثر على المبيعات فعلا؟#

أيوه. دراسة Deloitte لقت إن تحسين سرعة الموبايل 0.1 ثانية زود التحويل في مواقع التجزئة 8.4%، ودراسة جوجل لقت إن 53% من زيارات الموبايل بتتساب لو الصفحة أخدت أكتر من 3 ثواني.

إيه هي Core Web Vitals؟#

تلات مقاييس جوجل بيقيس بيها تجربة المستخدم: LCP (أكبر عنصر ظهر إمتى، الكويس 2.5 ثانية أو أقل)، INP (سرعة الرد على الضغط، الكويس 200 مللي ثانية أو أقل)، وCLS (ثبات الصفحة، الكويس 0.1 أو أقل).

أستخدم أنهي صيغة لصور المنتجات؟#

WebP أو AVIF. في تجربتنا على صورة منتج حقيقية، WebP وفر 58% من حجم الـ JPEG الأصلية، وAVIF وفر 72%، وكل المتصفحات الحديثة بتدعمهم.

إزاي أقيس سرعة متجري ببلاش؟#

استخدم PageSpeed Insights على صفحة منتج، وتقرير Core Web Vitals في Google Search Console، وجرب بنفسك على موبايل أندرويد على باقة بيانات.

المصادر#

• web.dev: Milliseconds make millions (Deloitte)
• Deloitte: Milliseconds Make Millions report (PDF)
• Marketing Dive: Google, 53% of mobile users abandon sites that take over 3 seconds
• web.dev: Web Vitals
• web.dev: INP replaces FID