كثير من زوارك يفتحون موقعك على باقة جوال محدودة أو إشارة ضعيفة داخل مجمّع تجاري أو في الطريق. الصفحة التي فيها صور كبيرة كثيرة تبدو لهم معطلة، فيغادرون قبل اكتمالها.
الخبر الجيد أن مشاكل الصور أسهل مشاكل السرعة علاجاً، ويمكنك علاجها بالدردشة.
الصور غالباً أثقل جزء في الصفحة. صغّرها إلى المقاس الذي تُعرض به، واستخدم WebP أو صيغة حديثة، وحمّل الصور التي تحت الشاشة الأولى عند الاقتراب منها فقط.
غيّر المقاس قبل الرفع
الصورة القادمة من كاميرا الجوال قد تبلغ عدة ميغابايت وآلاف البكسلات عرضاً، بينما تُعرض في مربع عرضه بضع مئات. قاعدة جيدة: اجعل عرض الملف ضعف عرض العرض تقريباً للشاشات الحادة، وليس أكثر.
- صورة الغلاف بعرض الصفحة: من 1600 إلى 2000 بكسل تكفي.
- البطاقات وصور المنتجات المصغرة: من 600 إلى 800 بكسل.
- الشعارات والأيقونات: استخدم SVG فهي حادة وخفيفة جداً.
اختر الصيغة المناسبة
غالباً تعطي WebP (و AVIF حيث تُدعم) ملفات أصغر بكثير من JPEG و PNG بجودة مقاربة. أبقِ JPEG للصور كخيار احتياطي، وتجنب PNG للصور الفوتوغرافية لأنه كبير. جودة بين 75 و80 بالمئة لا تُلاحظ بالعين عادة.
حمّل بذكاء
الصور التي تحت الشاشة الأولى يجب أن تُحمَّل عند اقتراب الزائر منها فقط (التحميل الكسول). أما الصورة الرئيسية في الأعلى فتُحمَّل فوراً لأنها أول ما يراه الناس.
وحدّد عرضاً وارتفاعاً أو نسبة ثابتة لكل صورة حتى لا تقفز الصفحة أثناء وصول الصور.
طلب جاهز للنسخ
«حسّن كل صور هذا الموقع لباقة الجوال. حوّل الصور إلى WebP، وصغّر كل صورة بحيث لا تزيد عن ضعف مقاس عرضها، وفعّل التحميل الكسول لكل ما تحت الشاشة الأولى دون صورة الغلاف، وثبّت نسب الأبعاد حتى لا تقفز الصفحة، وأضف نصاً بديلاً قصيراً ووصفياً.»
بعد التعديل افتح الموقع على جوالك وأوقف الواي فاي وقارن سرعة ظهور الشاشة الأولى.