صور منتجاتك — ليست عن الكاميرا، عن القرار

العلاقة بين الصور و LCP

في ٧٠٪ من المتاجر التي شخّصناها، كان عنصر LCP صورة منتج في الصفحة الرئيسية. هذا يعني: سرعة فتح صفحتك تساوي تقريباً سرعة تحميل صورتك الأكبر. صورة بحجم ٢ ميجابايت على ٤G = ٤ ثوانٍ على الأقل قبل أن يرى الزائر شيئاً ذا معنى.

Lighthouse يخبرك بهذا في توصيتَي 'اضبط أحجام الصور بشكل صحيح' و 'استخدم صيغ صور حديثة'. لكن التقرير لا يفسّر السبب، فيتجاهله المالك. المبدأ بسيط: كل كيلوبايت إضافي في صورة الواجهة = أجزاء من الثانية إضافية في LCP = تخسر زبائن.

الحجم المناسب

هذه قاعدة بسيطة بناء على ما نطبّقه في كل مشاريعنا:

• الصورة الرئيسية: ١٢٠ كيلوبايت كحد أقصى، WebP أو AVIF.
• صورة منتج في الشبكة: ٤٠–٨٠ كيلوبايت، WebP.
• صورة داخل صفحة المنتج: ١٥٠–٢٠٠ كيلوبايت، WebP، بتحميل كسول ما عدا الأولى.
• صورة في اللافتة: ٨٠–١٢٠ كيلوبايت، WebP، متجاوبة (srcset).

WebP و AVIF — لماذا تهمّان

صيغتا JPEG و PNG قديمتان (تسعينيات). WebP (٢٠١٠) و AVIF (٢٠١٩) أصغر بـ٣٠–٥٠٪ بدون فقدان جودة ملحوظ. كل المتصفحات الحديثة تدعمها — Safari من ٢٠٢٠، Chrome/Firefox من قبل.

في سلة و زد، لوحة التحكّم تحوّل صورك تلقائياً إلى WebP عند الرفع. لكن لو رفعت صورة JPEG حجمها ٣ ميجابايت، الـWebP الناتج قد يكون ١.٢ ميجابايت — ما زال كبيراً. ضغط الصورة قبل الرفع هو الفرق.

أدوات الضغط

1. TinyPNG (tinypng.com) — أبسط أداة. اسحب وأفلت، تحصل على صورة مضغوطة بنفس الجودة المرئية. ٢٠ صورة مجاناً يومياً.
2. Squoosh من قوقل — يعرض المقارنة قبل/بعد، يدعم AVIF.
3. ImageOptim (Mac) — مجاني، يضغط دفعة من الصور.

أبعاد الصورة — لا تنسَها

هذا الخطأ الأكثر شيوعاً في متاجر سلة/زد: رفع صورة ٣٠٠٠×٣٠٠٠ بكسل لتُعرض في بطاقة شبكة حجمها ٣٠٠×٣٠٠ بكسل. المتصفّح يحمّل الصورة كاملة قبل أن يصغّرها. النتيجة: ١٠× الحجم اللازم، ١٠× وقت التحميل.

القواعد:

• الصورة الرئيسية: عرض أقصى 1920px، جودة ٨٠٪.
• صورة الشبكة: عرض أقصى 800px، جودة ٨٠٪.
• الصورة المصغّرة: عرض أقصى 400px، جودة ٨٠٪.
• صورة صفحة المنتج (قابلة للتكبير): عرض أقصى 1600px، جودة ٨٥٪.

التحميل الكسول

الصور خارج منطقة العرض لا تُحمَّل حتى يقترب منها الزائر. أضف loading="lazy" لكل صورة ما عدا الأولى/الثانية في منطقة العرض (الصورة الرئيسية وأول صف من الشبكة). سلة وزد يفعلونها افتراضياً، لكن لو القالب مخصّص، تأكد.

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

الخلاصة

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