الصور: العدو الأول (أو الصديق) لسرعة موقعك
أكثر من نصف وزن صفحات الإنترنت اليوم يتكون من الصور. عندما يرفع مالك موقع صورة بصيغة PNG أو JPEG بحجم 3 ميجابايت مباشرة من هاتفه إلى مقالته، فإنه يدمر تجربة الزائر وفرصه في تصدر نتائج البحث في نفس اللحظة.
محركات البحث وجوجل بيج سبيد (PageSpeed Insights) أصبحت تعاقب بصرامة المواقع التي لا تقوم بتهيئة صورها. التحسين لم يعد خياراً، بل ضرورة تقنية.
ثورة صيغ WebP و AVIF
لفترة طويلة كنا نستخدم JPEG للصور العادية و PNG للصور ذات الخلفية الشفافة. لكن جوجل طورت صيغاً جديدة قادرة على تقديم نفس الدقة بحجم أقل بكثير.
الضغط الصحيح (Lossy vs Lossless)
تغيير الصيغة لا يكفي، يجب أيضاً ضغط الصورة لإزالة البيانات الوصفية (EXIF Data) والبيكسلات الزائدة التي لا تلاحظها العين البشرية.
قائمة التحقق قبل رفع أي صورة:
أبعاد الصور ومشاكل اهتزاز الصفحة (CLS)
هل سبق ودخلت موقعاً وحاولت النقر على زر، لكن فجأة تم تحميل صورة بالأعلى فتغير مكان الزر ونقرت بالخطأ على شيء آخر؟ هذا ما تسميه جوجل بـ Cumulative Layout Shift (CLS) وهو يعاقب الموقع بشدة.
width والـ height داخل وسم الـ HTML للصورة. هذا يخبر المتصفح بأن يحجز مساحة فارغة للصورة مسبقاً قبل تحميلها، مما يمنع تحرك النصوص لاحقاً.مثال:
<img src="image.webp" width="800" height="400" alt="وصف">سحر التحميل الكسول (Lazy Loading)
لماذا يجبر المتصفح الزائر على تحميل 15 صورة في أسفل المقال وهو لا يزال يقرأ في المقدمة؟ تقنية التحميل الكسول توقف تحميل الصور المخفية، ولا تقوم باستدعائها إلا عندما يقترب الزائر من النزول إليها (Scroll).
أفضل أدوات وإضافات ضغط الصور
لست مضطراً للقيام بكل هذا يدوياً لكل صورة. هناك أدوات وإضافات تقوم بضغط، تحويل، وتقديم صورك بأفضل شكل تلقائياً:
| الصيغة | الاستخدام الأمثل | الضغط | الشفافية |
|---|---|---|---|
| AVIF | للويب (الجيل الأحدث) | ممتاز جداً | نعم |
| WebP | للويب (الأساسي حالياً) | ممتاز | نعم |
| JPEG | التصوير الفوتوغرافي للطباعة | متوسط | لا |
| PNG | اللوجوهات البسيطة جداً | ضعيف (حجم كبير) | نعم |
هل صور موقعك تبطئ تقدمك؟
قم بفحص صفحات موقعك عبر أداة Seovix لاختبار السرعة، واكتشف حجم الصور الفعلي والمشاكل التقنية التي تعيق حصولك على سرعة تحميل مثالية.
افحص سرعة موقعك مجاناً