تحسين الصور لتسريع المواقع: الدليل الشامل
·2 min read·Philo
أداء الويبالصور تمثّل نحو 50% من حجم الصفحة. تحسينها هو أكبر خطوة نحو رفع أداء موقعك.
لماذا يهمّ هذا؟
- 53% من مستخدمي الجوّال يغادرون الصفحة إذا تجاوز وقت التحميل 3 ثوانٍ
- ثانية واحدة إضافية في التحميل = انخفاض 7% في معدل التحويل
- مؤشرات Core Web Vitals (LCP وCLS) تؤثر مباشرةً على ترتيبك في Google
الخطوة الأولى: اختر الصيغة المناسبة
- WebP: الأفضل لجميع استخدامات الويب (أصغر بنسبة 25–35% من JPEG)
- PNG: للخلفيات الشفافة والشعارات
- JPEG: للصور الفوتوغرافية
- SVG: للأيقونات والرسوم البيانية
- AVIF: الجيل القادم مع دعم نسخة احتياطية
الخطوة الثانية: اضغط الصور
| النوع | مستوى الجودة | التوفير المتوقع |
|---|---|---|
| صور رئيسية (Hero) | 80–85% | 40–60% |
| مقالات المدونة | 70–80% | 50–70% |
| المصغّرات | 60–70% | 60–80% |
TinyImg — ضغط في المتصفح، خصوصية كاملة.
الخطوة الثالثة: الصور المتجاوبة
<img src="image-800.webp"
srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Alt text" width="800" height="600" />
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Alt text" width="800" height="600" />
</picture>
الخطوة الرابعة: التحميل الكسول (Lazy Loading)
<img src="image.webp" loading="lazy" alt="Description" width="800" height="600" />
لا تُطبّق التحميل الكسول على الصور التي تظهر في الجزء المرئي من الصفحة عند الفتح.
الخطوة الخامسة: حدّد أبعاد الصورة
<img src="photo.webp" alt="Photo" width="800" height="600" />
الخطوة السادسة: استخدم شبكة CDN
Cloudflare وCloudinary وimgix وVercel من أبرز الخيارات المتاحة.
الخطوة السابعة: قِس وراقب
- LCP: أقل من 2.5 ثانية
- CLS: أقل من 0.1
- إجمالي حجم الصور: أقل من 500 كيلوبايت
قائمة المراجعة
- استخدم صيغة WebP
- اضغط عبر TinyImg
- أضف srcset وsizes
- فعّل التحميل الكسول للصور خارج نطاق الرؤية
- حدّد الأبعاد (width + height)
- استخدم CDN
- راجع الأداء عبر PageSpeed Insights
أداء الويبتحسينسرعة التحميلSEO