صور ثقيلة وفيديو تلقائي: أكثر ما يبطئ موقع المحل على الجوال

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

المشكلة الأولى: صور بحجم الكاميرا

كيف تعرفها

صوّرت المنتجات بجوال حديث ورفعتها مباشرة. الصورة الواحدة قد تكون بعرض 4000 بكسل وعدة ميغابايتات، بينما تُعرض على شاشة جوال عرضها أقل من 500 بكسل. المتصفح يحمّل الملف كاملًا ثم يصغّره، فيدفع الزبون الثمن من باقته ووقته.

الإصلاح

صغّر أبعاد الصورة قبل الرفع إلى ما تحتاجه الصفحة فعلًا، مع هامش للشاشات عالية الدقة.
استخدم صيغة حديثة. دليل web.dev عن اختيار صيغة الصور يذكر أن WebP وAVIF تدعمان الشفافية والحركة، وأنهما مدعومتان في جميع المتصفحات الحديثة. للصور الفوتوغرافية العادية تبقى JPEG خيارًا مقبولًا إذا ضُغطت جيدًا.
قدّم أكثر من مقاس للصورة نفسها عبر الخاصية srcset، فيختار المتصفح النسخة الصغيرة للجوال والكبيرة لشاشة الكمبيوتر. معظم أنظمة إدارة المحتوى الحديثة تولّد هذه المقاسات تلقائيًا إذا رفعت صورة أصلية معقولة.

الاختبار

افتح صفحة المنتج في أداة PageSpeed Insights وابحث في التشخيص عن ملاحظات مثل الصور غير المضغوطة أو ذات الأبعاد الأكبر من اللازم. أعد القياس بعد الاستبدال وقارن.

المشكلة الثانية: فيديو يبدأ تلقائيًا أعلى الصفحة

كيف تعرفها

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

الإصلاح

اسأل أولًا: هل يضيف الفيديو معلومة؟ صورة ثابتة جيدة مع زر «شاهد الفيديو» تكفي غالبًا.
إذا كان الفيديو ضروريًا، فارفعه على منصة فيديو وضعه أسفل الصفحة، أو حمّل المشغّل فقط عندما يضغط الزائر.
إذا كنت تستخدم صورة متحركة GIF، فاستبدلها بفيديو قصير. يوضح web.dev أن عنصر الفيديو مع الخصائص autoplay وloop وmuted وplaysinline يعيد سلوك GIF نفسه، أي تشغيل تلقائي متكرر بلا صوت، بملف أصغر عادة بكثير.
أضف صورة غلاف للفيديو حتى لا يظهر فراغ أثناء التحميل.

الاختبار

قارن «أكبر عرض للمحتوى» (LCP) في الأداة قبل الإزالة وبعدها. إذا كان الفيديو أو غلافه هو العنصر الأكبر في الشاشة الأولى، فستلاحظ الفرق مباشرة.

المشكلة الثالثة: السلايدر في الشاشة الأولى

كيف تعرفها

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

الإصلاح

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

المشكلة الرابعة: التحميل الكسول في المكان الخطأ

كيف تعرفها

سمعت أن التحميل الكسول (lazy loading) يسرّع الموقع، ففُعّل على كل الصور بما فيها صورة الواجهة.

الإصلاح

الخاصية loading="lazy" تؤخر تحميل الصورة حتى تقترب من منطقة العرض، وهذا مفيد لصور المعرض وقوائم المنتجات أسفل الصفحة.
لكن web.dev يحذّر صراحة من تطبيقها على الصورة التي تشكّل أكبر عنصر في الشاشة الأولى، لأن ذلك يؤخر ظهورها ويضر بمقياس LCP. صورة الواجهة تُحمّل فورًا، والباقي كسول.
حدّد عرض كل صورة وارتفاعها في الكود، حتى لا تقفز عناصر الصفحة عند وصول الصور.

المشكلة الخامسة: صور المنتجات في المتجر

كيف تعرفها

صفحة قسم فيها خمسون منتجًا، كل منها بصورة مصغّرة هي في الحقيقة الصورة الكبيرة نفسها.

الإصلاح

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

كيف تقيس النتيجة بطريقة صحيحة

أداة PageSpeed Insights تعطيك نوعين من الأرقام. «بيانات المختبر» تُجمع في بيئة محكومة وتفيد في تتبع السبب، و«البيانات الميدانية» تأتي من زيارات حقيقية وتعكس التجربة الفعلية، لكنها لا تتوفر إلا للصفحات التي لها زيارات كافية. لموقع محل صغير، ستعتمد غالبًا على بيانات المختبر، فاختبر الصفحة نفسها قبل التعديل وبعده، على وضع الجوال، ثم جرّب بنفسك على بيانات الجوال لا على واي فاي المحل.

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

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

هل ضغط الصور يجعلها تبدو رديئة؟

ليس إذا اخترت مستوى ضغط معتدلًا. الفرق بين صورة بحجم 3 ميغابايت ونسخة مناسبة منها لا تلاحظه العين على شاشة جوال عادة. جرّب على صورة واحدة وقارن قبل أن تعمّم.

هل أحذف فيديو المطعم من الموقع؟

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

هل تكفي إضافة ضغط الصور في ووردبريس؟

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

كم يجب أن يكون وزن الصفحة؟

لا يوجد رقم رسمي واحد يناسب الجميع. الأفضل أن تقيس صفحتك وتقارنها بنفسها بعد كل تعديل، وأن تراقب مقاييس مثل LCP التي تعكس ما يراه الزائر.

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

صور ثقيلة وفيديو تلقائي: أكثر ما يبطئ موقع المحل على الجوال

المشكلة الأولى: صور بحجم الكاميرا

كيف تعرفها

الإصلاح

الاختبار

المشكلة الثانية: فيديو يبدأ تلقائيًا أعلى الصفحة

كيف تعرفها

الإصلاح

الاختبار

المشكلة الثالثة: السلايدر في الشاشة الأولى

كيف تعرفها

الإصلاح

المشكلة الرابعة: التحميل الكسول في المكان الخطأ

كيف تعرفها

الإصلاح

المشكلة الخامسة: صور المنتجات في المتجر

كيف تعرفها

الإصلاح

كيف تقيس النتيجة بطريقة صحيحة

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

هل ضغط الصور يجعلها تبدو رديئة؟

هل أحذف فيديو المطعم من الموقع؟

هل تكفي إضافة ضغط الصور في ووردبريس؟

كم يجب أن يكون وزن الصفحة؟

المصادر