كيف تحسّن صور موقعك وترفع درجة PageSpeed

سرعة التحميل عامل ترتيب أكّدته Google منذ 2018 لأجهزة سطح المكتب ومنذ 2021 للهواتف. بل إنّ أثرها يمتدّ مباشرة إلى معدّل التحويل: فكل ثانية إضافية في التحميل ترفع نسبة مغادرة الصفحة إلى 32% بحسب بيانات Google نفسها. وفي التجارة الإلكترونية، تُظهر دراسات Portent أنّ الصفحات التي تُحمَّل في ثانية واحدة تحقّق تحويلات تصل إلى ثلاثة أضعاف صفحات تستغرق خمس ثوانٍ.

وتشكّل الصور عادةً ما بين 50 و80% من وزن صفحة الويب كاملة. ولهذا فتحسينها بشكل صحيح هو أكثر ما يمكنك فعله أثرًا في أداء أي موقع.

ما الذي يقيسه PageSpeed Insights في الصور؟

يحلّل Google PageSpeed Insights صفحتك ويشير إلى مشكلات الصور في عدّة فئات، وأكثرها شيوعًا:

• «قدّم الصور بتنسيقات الجيل التالي»: يظهر حين يستخدم الموقع JPG أو PNG في موضع كان WebP (أو AVIF) ليصغّر فيه الحجم كثيرًا.
• «اضبط مقاسات الصور بشكل صحيح»: يظهر حين تكون الصورة المرفوعة أكبر من المساحة التي تُعرض فيها. مثال: رفع صورة بعرض 2000 بكسل لعرضها في 400 بكسل.
• «أجّل تحميل الصور خارج الشاشة»: يظهر حين تُحمَّل الصور الواقعة أسفل الشاشة مع بقية الصفحة، بدل تحميلها عند وصول المستخدم إليها بالتمرير (lazy loading).
• «رمّز الصور بكفاءة»: يظهر حين يكون في ضغط الصور متّسع لمزيد من التصغير من دون فقدان جودة ملحوظ.
• «صورة LCP»: تحدّد أي صورة تمثّل Largest Contentful Paint في الصفحة، وهي العنصر الرئيسي الذي يحدّد أحد مؤشّرات Core Web Vitals.

ستة مبادئ لتحسين الصور على الويب

1. اختر الصيغة المناسبة لكل نوع من الصور

اختيار الصيغة هو القرار الأكبر أثرًا، حتى قبل أي ضغط:

يعطي WebP ملفات أصغر من JPG بنسبة 25 إلى 35% وأصغر من PNG بنسبة 20 إلى 30% بالجودة البصرية نفسها. وفي 2026 تجاوز توافقه 97% من المتصفحات المستخدمة، فلم يبقَ سبب تقني لتجنّبه في المواقع الجديدة.

2. اضغط من دون التفريط في الجودة الظاهرة

الضغط هو تصغير حجم الملف مع الإبقاء على أبعاد الصورة. وفي صور JPG، خفض الجودة من 100% إلى 80% يعطي ملفات أصغر بخمسة إلى عشرة أضعاف بفرق لا تلحظه العين على الشاشة. وهذا هو النطاق المثالي للويب.

أوزان مرجعية عملية لكل نوع من الصور:

• صورة الواجهة أو اللافتة الرئيسية: أقل من 200 كيلوبايت
• صورة منتج في متجر إلكتروني: من 50 إلى 150 كيلوبايت
• صورة مقال في مدوّنة: من 50 إلى 120 كيلوبايت
• صورة مصغّرة: من 10 إلى 30 كيلوبايت
• شعار (PNG أو WebP): أقل من 30 كيلوبايت
• أيقونات SVG: أقل من 5 كيلوبايت

3. ارفع الصور بأبعاد العرض الفعلية

هذا أشيع الأخطاء وأكثرها أثرًا: رفع صور أكبر بكثير من المساحة التي تُعرض فيها. فالمتصفح ينزّل الصورة كاملة ثم يهمل البكسلات الزائدة عند العرض.

أمثلة على كلفة هذا الخطأ:

• صورة منتج بمقاس 3000×3000 بكسل تُعرض في إطار 600×600 بكسل: ينزّل المتصفح 9 ملايين بكسل ولا يستخدم إلا 360 ألفًا، أي هدر بنسبة 96%.
• لافتة بعرض 4000 بكسل في موقع أقصى عرض لتخطيطه 1440 بكسل: 63% من البكسلات المنزَّلة تُهمَل فورًا.

والقاعدة بسيطة: ينبغي ألّا تتجاوز الصورة المرفوعة ضعف أبعاد العرض (والضعف هنا لتغطية شاشات Retina وHiDPI). فلمساحة عرضها 600 بكسل، ارفع صورة بعرض 1200 بكسل على الأكثر.

استخدم أداة تغيير حجم الصورة من ImageTools لضبط الأبعاد قبل الرفع، بإدخال القيم بالبكسل أو بالنسبة المئوية.

4. فعّل التحميل المؤجّل (lazy loading)

التحميل المؤجّل أسلوب لا تُحمَّل فيه الصورة إلا عندما توشك أن تدخل المساحة المرئية من الشاشة، بدل تنزيل كل صور الصفحة دفعة واحدة عند التحميل الأول. وأثره كبير: ففي الصفحات المليئة بالصور، كقوائم المنتجات أو المقالات الطويلة، قد يخفض الوزن الأولي للصفحة بنسبة 60 إلى 80%.

وأبسط تطبيق له مدمج في HTML الحديث: يكفي أن تضيف الخاصية loading="lazy" إلى وسوم الصور:

<!-- Image that must load immediately (above the fold) -->
<img src="main-banner.webp" alt="Banner" loading="eager">

<!-- Images that can wait (below the fold) -->
<img src="product-1.webp" alt="Product 1" loading="lazy">
<img src="product-2.webp" alt="Product 2" loading="lazy">

تنبيه مهم: لا تضع loading="lazy" أبدًا على الصورة الرئيسية أعلى الشاشة (صورة الواجهة أو اللافتة أو أول صورة منتج)، لأنّ ذلك يؤخّر مؤشّر LCP، وهو أهمّ مؤشّرات Core Web Vitals، فتنخفض درجتك في PageSpeed مباشرة.

5. حدّد width وheight في وسوم الصور

حين يبدأ المتصفح بتحميل الصفحة، يبني تخطيطها قبل أن يعرف مقاسات الصور. فإن لم تكن width وheight محدّدتين، لن يحجز المساحة الصحيحة، وحين تُحمَّل الصورة «يقفز» التخطيط فيزيح النصوص والأزرار. وهذا ما يقيسه PageSpeed تحت اسم Cumulative Layout Shift (CLS)، وهو مؤشّر آخر من Core Web Vitals.

<!-- Without dimensions: causes layout shift -->
<img src="product.webp" alt="Product">

<!-- With dimensions: reserves the right space from the start -->
<img src="product.webp" alt="Product" width="600" height="600">

ولا يلزم أن تطابق قيمتا width وheight في HTML مقاس العرض الفعلي، فهما تحدّدان النسبة فحسب، أما مقاس العرض فيتكفّل به CSS.

6. استخدم صورًا متجاوبة عبر srcset

تتيح لك الخاصية srcset تقديم نسخ مختلفة من الصورة للأجهزة المختلفة: نسخة أصغر للهواتف وأكبر لأجهزة سطح المكتب. ويختار المتصفح تلقائيًّا النسخة الأنسب لشاشة المستخدم.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="Product"
  width="800"
  height="800"
  loading="lazy"
>

وفي المتاجر الإلكترونية المليئة بصور المنتجات، قد تخفض srcset حجم البيانات المنقولة لمستخدمي الهواتف بنسبة 40 إلى 60%.

قائمة تحقّق كاملة لتحسين الصور

راجع هذه القائمة قبل نشر أي صفحة أو تحديث صور موجودة:

• ☐ الصور بصيغة WebP (أو SVG للرسوم المتّجهة)
• ☐ الضغط مطبَّق — والصور تحت 150 كيلوبايت كلما أمكن
• ☐ الأبعاد صحيحة — لا تتجاوز ضعف مساحة العرض
• ☐ loading="lazy" في كل صورة أسفل الشاشة
• ☐ loading="eager" (أو بلا خاصية) في الصورة الرئيسية أعلى الشاشة
• ☐ width وheight محدّدتان في كل وسم <img>
• ☐ خاصية alt وصفية في كل صورة (لإمكانية الوصول وتحسين الظهور في البحث)
• ☐ srcset للصور التي تظهر بمقاسات شديدة الاختلاف بين الهاتف وسطح المكتب
• ☐ صورة LCP بلا loading="lazy" ومع fetchpriority="high" إن أمكن

التحسين بحسب المنصّة

ووردبريس

يحوّل ووردبريس الصور إلى WebP تلقائيًّا منذ الإصدار 6.1 إذا كان الخادم يدعم ذلك. ولمزيد من الاطمئنان، ثبّت إضافة تحسين مثل Imagify أو ShortPixel أو Smush، فهي تضغط الصور وتحوّلها إلى WebP وتضيف التحميل المؤجّل تلقائيًّا إلى ما هو موجود أصلًا في مكتبة الوسائط.

Shopify

يحوّل Shopify الصور إلى WebP تلقائيًّا ويقدّم النسخة المناسبة لكل جهاز منذ 2021. والذي يبقى على صاحب المتجر ضبطه يدويًّا هو مقاس الصور المرفوعة، والموصى به 2048×2048 بكسل لصور المنتجات، ثم يتولّى Shopify تصغيرها لكل موضع عرض.

Wix وSquarespace وسائر منصّات بناء المواقع

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

مواقع HTML وCSS الخالصة وأطر العمل (Next.js وNuxt وغيرها)

في هذه الحالة يقع التحسين كله على عاتق المطوّر. فمكوّن <Image> في Next.js مثلًا يتولّى التحميل المؤجّل وsrcset والتحويل إلى WebP تلقائيًّا. أما أطر العمل التي لا تقدّم هذه التسهيلات فتحتاج إلى تحسين يدوي وفق القائمة أعلاه.

كيف تقيس أثر التحسينات

بعد تطبيق التحسينات، قِس النتيجة بهذه الأدوات:

• Google PageSpeed Insights (pagespeed.web.dev) — تحليل شامل مع تشخيص لكل عنصر، منفصل للهاتف ولسطح المكتب.
• Google Search Console ← تقرير تجربة الصفحة — يعرض حالة Core Web Vitals ببيانات حقيقية من زوّار موقعك.
• WebPageTest.org — تحليل تقني مفصّل مع مخطّط تسلسل التحميل، مفيد لمعرفة الصورة التي تؤخّر مؤشّر LCP تحديدًا.
• Chrome DevTools → Network — صفّ النتائج بـ"Img" لترى كل الصور المحمَّلة وأحجامها وأزمنة تنزيلها.

الأسئلة الشائعة