أداء الصور وسرعة الموقع

تحسين الصور لسرعة الموقع
دليل WebP و Lazy Loading

الصور تشكل 60% من حجم أي صفحة ويب. تعلم كيف تضغط صورك بذكاء وتحولها للصيغ الحديثة لتسريع موقعك وتحقيق علامة LCP خضراء في جوجل.

يونيو 2026
10 دقائق قراءة
فريق Seovix
-70%
تقليل حجم الصور
LCP
تحميل أسرع للغلاف
CLS
منع اهتزاز الصفحة
جدول المحتويات
1
مشكلة الصور وسرعة الموقع
2
صيغ WebP و AVIF
3
الضغط الصحيح (Compression)
4
أبعاد الصور ومشاكل CLS
5
تقنية Lazy Loading
6
أفضل أدوات وإضافات الصور
حجم الصفحة

الصور: العدو الأول (أو الصديق) لسرعة موقعك

أكثر من نصف وزن صفحات الإنترنت اليوم يتكون من الصور. عندما يرفع مالك موقع صورة بصيغة PNG أو JPEG بحجم 3 ميجابايت مباشرة من هاتفه إلى مقالته، فإنه يدمر تجربة الزائر وفرصه في تصدر نتائج البحث في نفس اللحظة.

محركات البحث وجوجل بيج سبيد (PageSpeed Insights) أصبحت تعاقب بصرامة المواقع التي لا تقوم بتهيئة صورها. التحسين لم يعد خياراً، بل ضرورة تقنية.

60%
من حجم (وزن) الصفحة المتوسطة يأتي من الصور غير المضغوطة
3x
تحميل أسرع عند استخدام صيغ الجيل القادم (Next-Gen)
LCP
العامل الأكبر في تحديد سرعة التحميل الأولية للمستخدم
الصيغ الحديثة

ثورة صيغ WebP و AVIF

لفترة طويلة كنا نستخدم JPEG للصور العادية و PNG للصور ذات الخلفية الشفافة. لكن جوجل طورت صيغاً جديدة قادرة على تقديم نفس الدقة بحجم أقل بكثير.

صيغ الجيل القادم (المطلوبة)
WebP: يوفر حجم أصغر بـ 25-34% مقارنة بـ JPEG مع نفس الجودة، ويدعم الشفافية.
AVIF: أحدث وأقوى من WebP، يوفر ضغطاً هائلاً (تصل لـ 50% أقل من JPEG) وممتاز للـ LCP.
مدعومة بالكامل الآن في جميع المتصفحات الحديثة (Chrome, Safari, Edge).
الصيغ القديمة (تجنبها للويب)
PNG: ملفات ضخمة جداً، استخدمها فقط للشعارات الصغيرة (Logos) إذا لزم الأمر.
JPEG / JPG: جيدة للصور الفوتوغرافية لكنها تفتقر للضغط الفعال ولا تدعم الشفافية.
GIF: أثقل صيغة على الإطلاق! استبدلها دائماً بمقاطع فيديو قصيرة (MP4/WebM).
ضغط الملفات

الضغط الصحيح (Lossy vs Lossless)

تغيير الصيغة لا يكفي، يجب أيضاً ضغط الصورة لإزالة البيانات الوصفية (EXIF Data) والبيكسلات الزائدة التي لا تلاحظها العين البشرية.

الضغط مع الفقدان (Lossy Compression)
أفضل خيار لصور المقالات والويب
يقوم بحذف بعض البيانات اللونية بشكل دائم لتقليل الحجم بنسبة تصل إلى 80%. النتيجة؟ صورة تبدو مطابقة تماماً للأصل بالنسبة لعين المستخدم، لكن بحجم 40KB بدلاً من 400KB.

قائمة التحقق قبل رفع أي صورة:

تغيير الأبعاد (Resize): لا ترفع صورة بعرض 4000px بينما مكان عرضها في المقال لا يتجاوز 800px. قم بقصها أولاً.
الضغط الأولي: مرر الصورة عبر أداة مثل TinyPNG لتقليل حجمها.
التحويل (Convert): تأكد من أن الناتج النهائي يتم تقديمه بصيغة WebP أو AVIF للمستخدم.
الوزن المثالي: احرص دائماً أن يكون حجم الصور العادية داخل المقال أقل من 100 كيلوبايت (KB).
استقرار الشاشة

أبعاد الصور ومشاكل اهتزاز الصفحة (CLS)

هل سبق ودخلت موقعاً وحاولت النقر على زر، لكن فجأة تم تحميل صورة بالأعلى فتغير مكان الزر ونقرت بالخطأ على شيء آخر؟ هذا ما تسميه جوجل بـ Cumulative Layout Shift (CLS) وهو يعاقب الموقع بشدة.

الحل البرمجي السهل
لتجنب اهتزاز الصفحة، يجب عليك دائماً تحديد الـ width والـ height داخل وسم الـ HTML للصورة. هذا يخبر المتصفح بأن يحجز مساحة فارغة للصورة مسبقاً قبل تحميلها، مما يمنع تحرك النصوص لاحقاً.

مثال: <img src="image.webp" width="800" height="400" alt="وصف">
توفير الموارد

سحر التحميل الكسول (Lazy Loading)

لماذا يجبر المتصفح الزائر على تحميل 15 صورة في أسفل المقال وهو لا يزال يقرأ في المقدمة؟ تقنية التحميل الكسول توقف تحميل الصور المخفية، ولا تقوم باستدعائها إلا عندما يقترب الزائر من النزول إليها (Scroll).

-75%
طلبات السيرفر
يقلل الضغط على استضافتك
سريع
ظهور فوري
تركيز الموارد على أعلى الصفحة
"تحذير هام: لا تقم أبداً بتطبيق تقنية Lazy Loading على الصورة الرئيسية للمقال (Hero Image). هذه الصورة يجب أن تظهر فوراً لأنها المسؤولة عن مقياس LCP. طبّق التحميل الكسول فقط على الصور الموجودة أسفل خط الشاشة (Below the fold)."
فريق Seovix — خبير تحسين أداء المواقع
الأدوات العملية

أفضل أدوات وإضافات ضغط الصور

لست مضطراً للقيام بكل هذا يدوياً لكل صورة. هناك أدوات وإضافات تقوم بضغط، تحويل، وتقديم صورك بأفضل شكل تلقائياً:

ShortPixel / Imagify
أقوى إضافات لووردبريس. تقوم بضغط الصور وتقديمها بصيغة WebP/AVIF تلقائياً أثناء رفعك لها في لوحة التحكم.
Cloudflare (Polish)
خدمة CDN تقوم بضغط وتحويل الصور على الطاير (On-the-fly) دون تغيير الملف الأصلي على استضافتك.
TinyPNG / Squoosh
أدوات ويب مجانية لضغط الصور يدوياً قبل رفعها. Squoosh (من جوجل) تمنحك تحكماً دقيقاً في جودة الضغط.
Seovix Speed Test
أداة Seovix ستخبرك بالضبط أي الصور في موقعك حجمها كبير وتحتاج لضغط لتخطي اختبار PageSpeed.
ابدأ الفحص
الصيغةالاستخدام الأمثلالضغطالشفافية
AVIFللويب (الجيل الأحدث)ممتاز جداًنعم
WebPللويب (الأساسي حالياً)ممتازنعم
JPEGالتصوير الفوتوغرافي للطباعةمتوسطلا
PNGاللوجوهات البسيطة جداًضعيف (حجم كبير)نعم

هل صور موقعك تبطئ تقدمك؟

قم بفحص صفحات موقعك عبر أداة Seovix لاختبار السرعة، واكتشف حجم الصور الفعلي والمشاكل التقنية التي تعيق حصولك على سرعة تحميل مثالية.

افحص سرعة موقعك مجاناً