صور الكتالوج الثقيلة توقّف الشراء على الجوال في سلة وزد وشوبيفاي

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

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

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

ليش صور الكتالوج تقرر أول ضغطة

في صفحة التصنيف أكبر رسم غالباً صورة منتج. لو الملف 2 ميجا JPEG من غير عرض وارتفاع، الجوال ينزّله، يفكّه، بعدين يرسم شبكة كانت فاضية ثواني. الزائر أصلاً قارن متجرين تانيين من إنستجرام.

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

الثقة كمان بتنزل. بلاطة فاضية شكلها متجر مش جاهز، مش براند غالي. ده قبل السعر والضريبة والدفع عند الاستلام.

إيه معنى ثقيل عملياً

ثقيل مش إحساس. هو ملف أكبر من المساحة اللي بيملأها، أو فورمات المتصفح بيفكّه ببطء.

• أول بلاطة أو الهيرو فوق حوالي 200 كيلو على الجوال غالية أصلاً.
• كتالوج 40 منتج كل صورة 1 ميجا يعني 40 ميجا تصفّح قبل الفلتر.
• لقطات PNG للمنتجات بتضيف شفافية محدش محتاجها على كارت أبيض.
• أربع فريمات كارسول بتنزل مرة واحدة بتضاعف نفس الغلطة.

الخلاصة: مقاس صور الكتالوج على مساحة الـ CSS، بعدين اضغط. ما ترفعش أصل الكاميرا وتتمنى الـ CDN يخمن.

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

كيف سلة وزد وشوبيفاي وووكومرس بيوصّلوا الصور

المنصات تختلف، الزائر ما يفرقش معاه. يفرقه إن أول صف يظهر. شغلك تستخدم مسار الصور الأصلي، وتبطل تحاربه بتطبيقات وباني صفحات.

سلة وزد

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

إعدادات القالب غالباً بتنزّل أول عدد من المصغرات فوراً. لو العدد 24 وكل مصغر لسه لقطة منتج شبه كاملة، كتالوج الرئيسية فيضان. قلّل العدد فوق الطية. استخدم مقاسات المنصة لو القالب يدعم `srcset`. ما تلزقش وسوم صور بروابط ديسكتوب جوه البنرات.

تطبيقات السلايدر واللوك بوك وإنستجرام بتجيب صور الكتالوج من عندها. الروابط دي غالباً بتعدّي تصغير الـ CDN. راجع كل تطبيق بيحط شبكة.

شوبيفاي وووكومرس

CDN شوبيفاي يقدر يطلع WebP وAVIF لما القالب يستخدم فلاتر الصور صح. قالب بيثبّت الصورة الرئيسية بحجم `master` بيبعت الأصل. ده التسريب المعتاد.

ووكومرس على استضافة مشتركة في مصر أو VPS رخيص أقسى. مفيش CDN بمستوى شوبيفاي إلا لو ضفت واحد. الرفع غير المضغوط يعيش على السيرفر. باني صفحات ينسخ نفس معرض 2000 بكسل ثلاث مرات في قالب التصنيف هيهد أكبر رسم.

ووكومرس كمان بيحب إضافات تولّد مقاسات مصغرة وبعدين ما تمسوحش المقاسات الفاضية. القرص بيمتلئ، والـ HTML لسه بيشير لأكبر ملف.

الخلاصة: استخدم API الصور في المنصة. لو القالب طالب `master`، غيّر القالب، ما تكتفيش بإعادة ضغط على فولدر الديسكتوب.

لما القالب نفسه هو الاختناق، أصلِح مساعدات الصور في القالب بدل ما تركّب تطبيق ضغط فوق شبكة مكسورة.

سير عمل ضغط تقدر تشغّله الأسبوع ده

ما تبدأش بإعادة تصميم. ابدأ بالملفات اللي بترسم أولاً. تاجر واحد، فولدر واحد، قاعدة فورمات واحدة.

1. طلّع قائمة شبكة الرئيسية، وأعلى 20 صفحة تصنيف، وأعلى 20 منتج بالإيراد. صور الكتالوج دي هي اللي بتدفع الإيجار.
2. صغّر بحيث أطول ضلع يطابق أكبر مساحة حقيقية. لو الكارت 400 بكسل CSS على 2x، 800 بكسل يكفي. 2400 هدر.
3. حوّل إلى WebP (أو AVIF لو القالب والـ CDN بيتفاوضوا عليه). خلّي JPEG احتياطي فقط لو متصفح سوبر أب قديم لسه بيفشل.
4. اشيل الميتاداتا. EXIF الكاميرا وبروفايلات فوتوشوب بيضيفوا عشرات الكيلو من غير فايدة على الشاشة.
5. حط عرض وارتفاع في HTML أو نسبة في CSS عشان الشبكة ما تقفزش. ده يحمي استقرار التخطيط.
6. حمّل كسول كل بلاطة تحت أول صف. أبداً ما تخلّي صورة أكبر رسم كسولة.
7. أعد الاختبار على بروفايل جوال مقيّد، بعدين افحص المتجر وقارن أكبر رسم قبل وبعد.

التسلسل يشتغل على ميديا سلة وصور زد وملفات شوبيفاي ورفع ووكومرس. أسماء الأدوات تتغيّر. الفيزياء لا.

جودة من غير ملف الاستوديو

الفرق تخاف من الضغط لأن تصدير قديم طلع معكّر. التعكير يجي من تصغير نقش مزحوم زيادة، أو من رص ضغط ثلاث مرات (تصدير، تطبيق، CDN). اضغط مرة واحدة، بالمقاس الصح.

الأزياء والجمال محتاجين لون أكثر من كرتون تمر سادة. اختبر SKU واحد بجودة WebP 70 و75 و80 على جوال حقيقي، مش بس على شاشة معايرة. لو الخياطة أو خشونة القماش ماتت، ارفع الجودة للمجموعة دي بس. ما ترفعش الكتالوج كله إلى 95 احتياط.

PNG شفافية الخلفية حالة خاصة. ملف 2 ميجا شفاف في مصغر 200 بكسل غلطة ووكومرس وشوبيفاي المتكررة. حوّل إلى WebP بشفافية، أو ركّب على لون الكارت واحفظ WebP أصغر من غير شفافية.

المعارض والكارسول وقفز التخطيط

شبكة التصنيف نص القصة. معارض المنتج في شوبيفاي وسلة غالباً بتسبق تحميل كل زاوية. على SKU مجوهرات بـ 12 صورة، ده 12 فك قبل ما الزائر يعمل بينش.

حمّل الصورة المميزة كأكبر رسم. أجّل الباقي لحد السحب أو وقت الفراغ. لو بتبدّل صورة المتغير (ذهبي مقابل فضي)، بدّل رابط بمقاس، مش الأصل.

قفز التخطيط من علب صور ناقصة

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

احجز العلبة. استخدم النسبة الحقيقية للمجموعة. خلط 1:1 و4:5 في شبكة واحدة من غير ارتفاع كارت ثابت بيخلّي كل صف يعيد التدفق كلما الصور توصل. ده نفس مشكلة قفز التخطيط التراكمي اللي بنشوفها على الجوال.

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

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

الفيديو والتطبيقات وواقع الشبكة في الخليج

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

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

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

متاجر ووكومرس اللي بتبيع من مصر للسعودية غالباً بتحط كلاودفلير أو بروكسي مشابه قدام. ده يساعد زمن أول بايت. ما بيصغّرش PNG بـ 3 ميجا. الضغط لسه شغلك.

لو لسه بتختار افتراضي المنصة، استخدم مساعدات الصور الأصلية في القالب عشان ما تحاربش CDN تاني.

إيه تتأكد منه بعد ما تشحن الملفات الجديدة

الضغط مش خلصان لما المصمم يقول الفولدر نضيف. خلصان لما أكبر رسم على الجوال ينزل وأول صف باين من غير سبنر.

افتح التصنيف لايف على جوال متوسط، مش أحدث فلاجشيب. أكّد إن أول صورة WebP أو AVIF في شبكة التحميل. أكّد إنها مش `loading=lazy`. أكّد إن حجم البايت يطابق المساحة.

بعدين شغّل فحص x8x على نفس الرابط. لو أكبر رسم لسه صورة، إما سيّبت مرشح `srcset` أكبر، أو صورة خلفية CSS بتعدّي الـ CDN. صور الخلفية في السلايدر تسريب شائع في رئيسية سلة.

سيو المنتج لسه محتاج نص بديل يوصف الـ SKU، مش IMG_3098. الضغط والنص البديل نفس الأصل. ملف واحد، شغلين.

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

لو تحذيرات HTTPS اختلطت مع صور محتوى مختلط، اصلح النقل بعد كده. روابط صور `http://` القديمة تقدر تمنع أيقونة القفل حتى بعد الضغط. شوف شهادة SSL وثقة الدفع.