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

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

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

كيف حسنت معالجة الصور على شوبيفاي

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

وجدت أن جميع هذه المميزات متوفرة في تطبيق Tiny SEO Speed Image Optimizer، مع خصائص إضافية مهمة مثل تحسين عناوين الصور، ومعالجة الوصف والنص البديل (ALT Text) تلقائيًا، فضلًا عن إمكانية تحسين جميع صور المتجر السابقة بسهولة بضغطة واحدة. لذلك اعتمدت هذا التطبيق كحل أساسي لمتجري.

تثبيت تطبيق Tiny SEO Speed Image Optimizer

الخطوة الأولى: توجهت إلى متجر تطبيقات شوبيفاي الرسمي وبحثت عن تطبيق Tiny SEO Speed Image Optimizer، ثم ضغطت على زر Install لبدء التثبيت على المتجر.

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

ضبط إعدادات التطبيق الأساسية

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

الخطوة الأولى: فعل خيار Automatic Image Optimization، وهو الخيار الأساسي الذي يقوم بفحص جميع صور المتجر ومعالجتها تلقائيًا، من خلال ضغطها دون التأثير على الجودة وتحويلها إلى صيغة WebP. لتفعيل الخيار، اضغط على زر Turn On.

الخطوة الثانية: إعداد مسميات الصور على المتجر بشكل تلقائي. فعند رفع صور جديدة، يمنحها التطبيق اسمًا وفق قالب محدد. في متجري اخترت نموذج اسم المنتج (Product Name)، بحيث تأخذ الصور اسم المنتج مع ترقيم تسلسلي (مثل: اسم المنتج 1، اسم المنتج 2، …). هذه الميزة تساعد على تحسين ظهور صور المتجر في نتائج محركات البحث، إضافًة إلى تنظيمها على متجرك.

بعد تحديد نموذج التسمية المناسب، اضغط على زر Save Changes لحفظ الإعدادات والانتقال للخطوة التالية.

الخطوة الثالثة: فعّل خيار Advanced Image Reduction لضبط مقاسات الصور تلقائيًا. هذه الميزة تقلل من حجم الصور كبيرة الأبعاد وتجعلها تتناسب مع مساحة العرض داخل المتجر.

في حالتي اخترت مقاس 1200 بكسل لأنه يوفر توازنًا مثاليًا بين الجودة والحجم، ويتناسب مع تصميم قالب متجري. فعلى سبيل المثال، إذا رفعت صورة بحجم 2400 بكسل فسيتم تقليصها تلقائيًا إلى 1200 بكسل. وبعد الانتهاء، اضغط على زر Save Changes لحفظ الإعدادات.

الخطوة الأخيرة: سيطلب منك التطبيق اختيار الخطة المناسبة بين الخيارات التالية:

• الخطة المجانية: تعالج حتى 50 صورة شهريًا فقط.
• الخطة المدفوعة: تبدأ الخطة من 14 دولارًا شهريًا، وتشمل معالجة ما يصل إلى 1500 صورة، مع إتاحة ميزات إضافية مثل التحميل الكسول والتحميل المسبق، ويزداد الحد الشهري للصور المسموح بمعالجتها بزيادة قيمة الخطة المدفوعة.

يمكنك البدء بالخطة المجانية لتجربة التطبيق ومتابعة أداء متجرك، ثم الترقية إلى الخطة المدفوعة إذا وجدت أنها تلبي احتياجاتك وتُحسّن أداء الصور بشكل ملحوظ. لذلك، انتقل إلى قسم Pay as you go واضغط على زر Get Started لتفعيل التطبيق على متجرك.

تحسين النص النائب للصور تلقائيًا (Alt Text)

ضمن ممارسات تحسين الصور على متجري، رغبت في تحسين النصوص البديلة للصور (Alt Text)، حيث يمكن للصور أن تحصل على وصف تلقائي عند رفعها بما يتناسب مع هوية المتجر.

لذلك، توجهت إلى إعدادات تطبيق TinySEO عبر المسار: "TinySEO" >> "Settings"، ثم اخترت إعدادات النص النائب من تبويب "Alt Text" من القائمة الجانبية.

بعد ذلك فعلت الميزة على الصور التي لا تحتوي نصًا بديلًا عند رفعها فقط، وليس على جميع صور الموقع حتى لا تؤثر على الصور الذي كتبت لها نص نائب يدويًا. لذلك من خيار ALT text generation اخترت Generate only on missing alt texts.

ثم حدّدت آلية كتابة النص البديل من بين النماذج المتاحة في التطبيق، وفضّلت أن يكون بصيغة: اسم المنتج متبوعًا باسم المتجر، لما لذلك من دور في تحسين ظهور المنتجات ضمن نتائج محركات البحث، فضلًا عن تنظيم الصور داخل المتجر. وأخيرًا، ضغطت على زر "Save" لتفعيل ميزة النص البديل التلقائي على المتجر.

تفعيل التحميل الكسول على المتجر (Lazy Loading)

في هذه الخطوة رغبت في تفعيل ميزة التحميل الكسول (Lazy Loading) على صفحات المتجر. هذه الميزة تمنع تحميل جميع الصور دفعة واحدة عند فتح الصفحة، بل يتم تحميلها تدريجيًا عند اقتراب الزائر من مشاهدتها أثناء التصفح، مما يحسن سرعة تحميل الصفحات بشكل ملحوظ حتى مع وجود عدد كبير من الصور.

لتفعيلها، توجهت إلى إعدادات التحميل الكسول عبر المسار: "TinySEO" >> "Settings"، ثم ضغطت على زر "Setup Lazy Loading" كما هو موضح في الصورة التالية:

بعد ذلك، ضغطت على زر "Unlock" لتفعيل الميزة على المتجر.

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

ضغط وتحسين صور المنتجات تلقائيًا

الخطوة الأخيرة كانت الانتقال إلى إعدادات التطبيق لتفعيل ميزة ضغط الصور تلقائيًا على المتجر. لذلك توجهت إلى إعدادات التطبيق مرة أخرى، ثم اخترت تبويب Overview، وقمت بتفعيل خيار Automatic Optimization عبر الضغط على زر "Activate" كما هو ظاهر في الصورة التالية:

بعد ذلك، حددت العناصر المطلوب تحسين صورها مثل صور المنتجات، والتصنيفات، والمقالات. ثم ضغطت على زر "Save" لحفظ الإعدادات على متجري.

الآن، سيتم تحسين أي صورة جديدة تُرفع على المتجر تلقائيًا. أما إذا رغبت في معالجتها يدويًا، فيمكنك التوجه إلى المسار: "TinySEO" >> "Improve Speed"، ثم الضغط على زر "View Optimization" من تبويب Image Optimization.

بعدها سيُظهر لك التطبيق جميع الصور غير المُعالجة على المتجر، حينها اضغط على زر "Start Now" لبدء عملية المعالجة اليدوية.

تتم عملية المعالجة سحابيًا عبر خوادم TinySEO، لذلك عليك الانتظار حتى يتم تحسين جميع الصور تدريجيًا.

بعد الانتهاء، لاحظت أن حجم الصور قد انخفض بنسبة 64% دون أي تأثير على الجودة. كما تم تحويل جميع الصور إلى صيغة WebP، بالإضافة إلى تفعيل ميزة التحميل الكسول (Lazy Load) على المتجر، مما ساعد بشكل كبير في تسريع تحميل الصفحات وتحسين تجربة المستخدم.

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