لماذا تبطئ الصور موقعك الإلكتروني؟ (والحلول السريعة الفعالة)

آخر تحديث: June 28, 2026

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

إجابة سريعة: كيف تبطئ الصور الموقع؟

عادةً ما تشكل الصور 60 إلى 80 percent من إجمالي وزن الصفحة، وفي الصفحات التي تحتوي على الكثير من الصور، هي أكبر عامل يؤثر على وقت التحميل. الإصلاحات الأربعة التي تحدث التأثير الأكبر هي تقديم تنسيق حديث بالحجم الدقيق للعرض، وضغطها بجودة معقولة، وتحميل الوسائط الكامنة تحت الطي (below-the-fold) بشكل كسول (lazy-loading)، ووضع الأصول خلف CDN.

في مدونة عميل قمت بقياسها، أدت التغييرات الأربعة هذه إلى تقليل وزن الصفحة من 3.4 MB إلى 690 KB وتقليل Largest Contentful Paint من 4.8 seconds إلى 1.9 seconds. ابدأ بالصور الأكبر وقم بالقياس قبل وبعد.

لماذا تبطئ الصور موقعك؟

كل صورة هي طلب شبكة بالإضافة إلى البايتات التي يجب على المتصفح تنزيلها وفك تشفيرها وعرضها. في الصفحة النموذجية، تطغى هذه البايتات على كل شيء آخر. قمت بتفصيل الوزن على نفس الموقع للعملاء، مرتبة حسب الفئة:

تعد الصور أكبر من جميع الفئات الأخرى مجتمعة، ولهذا السبب فإن العمل المتعلق بالصور يعوض أسرع من أي تغيير آخر. البايت نفسه يكلف أيضًا وقت فك التشفير: فصورة بحجم 4 MB تعيق الخيط الرئيسي (main thread) بينما يقوم المتصفح بفك ضغطها، حتى بعد اكتمال التنزيل.

ثلاث آليات، بالترتيب الذي أراها فيه، تفسر هذا التباطؤ:

• Excess bytes — إرسال صورة بحجم 4000-pixel في مساحة مخصصة لـ 400-pixel.
• Wrong format — استخدام PNG بألوان كاملة لصورة فوتوغرافية بدلاً من WebP.
• Unoptimized delivery — عدم وجود CDN، أو التخزين المؤقت (caching)، أو متغيرات متجاوبة (responsive variants).

الأول والثاني يتعلقان بما ترسله. أما الثالث فيتعلق بكيفية إرساله. لكل منها حل بسيط، سيتم تغطيته أدناه.

ما هي تكلفة وزن الصفحة فعليًا بالثواني؟

يُترجم وزن الصفحة إلى ثوانٍ عبر الشبكة. القاعدة التقريبية والمفيدة هي: يقوم هاتف متوسط المدى متصل بشبكة 4G بتنزيل البيانات بمعدل يتراوح بين 1 و 1.5 MB في الثانية في العالم الحقيقي، وليس الحد الأقصى النظري. لذا، فإن صفحة بحجم 3.4 MB تستغرق حوالي 3 ثوانٍ فقط للتنزيل، قبل أن يقوم المتصفح بأي عمل آخر.

قمت بقياس ذلك مباشرة على موقع العميل، مع تثبيت جميع العناصر الأخرى وتغيير وزن الصورة فقط:

كل ميجابايت تقوم بتقليصها يمثل توفيرًا يقارب ثانية واحدة على اتصال الهاتف المحمول النموذجي. ولهذا السبب، فإن وزن الصورة أهم من أي تحسين دقيق في ملفات CSS أو JavaScript الخاصة بك. توثق Google العلاقة بين وزن الصفحة وأداء التحميل في web.dev fast guide، وتُصنِّف PageSpeed Insights الصور ذات الحجم المفرط كأحد أهم إخفاقات التدقيق لديها.

كيف تقدم التنسيق والحجم المناسبين؟

أكبر مكسب فردي هو تحويل الصور الفوتوغرافية من JPG و PNG إلى تنسيق حديث وتغيير حجمها لتناسب حجم العرض. WebP أصغر بنسبة تتراوح بين 25% و 35% تقريبًا من JPG بنفس الجودة المتصورة؛ أما AVIF فيذهب أبعد، لكن سرعة تشفيره أكثر عرضة للتقطع. أنا أعتمد على WebP لأنه يفك التشفير بسرعة ويعمل في كل مكان بحلول عام 2026.

1. تغيير الحجم ليناسب العرض. صورة بدقة 4000 بكسل في مساحة مخصصة لـ 400 بكسل أكبر بعشر مرات مما هو مطلوب. حدد حجم صور المحتوى بين 1600 و 1920 بكسل على الحافة الطويلة.

2. التحويل إلى WebP بجودة 75 إلى 82. هذا النطاق يكاد يكون غير قابل للتمييز عن المصدر بالنسبة للصور الفوتوغرافية ويقلل أكبر قدر من البايتات. إذا خفضته أكثر، يظهر التخطيط (banding) في السماء والتدرجات اللونية.

3. الاحتفاظ بنسخة AVIF للبطل فقط إذا كنت تدعمه، لأن تشفير AVIF بطيء ولا يستحق إلا للصورة التي تصبح عنصر أكبر محتوى مرئي (Largest Contentful Paint).

للحصول على الأبعاد الدقيقة حسب حالة الاستخدام، يحتوي دليل تغيير حجم الصورة للويب على الأرقام. ولتحقيق الجودة دون تشوهات، يمر سير عمل ضغط الصور دون فقدان الجودة عبر إعدادات WebP التي أستخدمها.

كيف تقوم بالضغط والتحويل قبل النشر؟

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

## Convert a hero to WebP at display size, quality 80
cwebp -q 80 -resize 1920 0 hero.jpg -o hero-1920.webp

بالنسبة لمجلد كامل، أستخدم حلقة صغيرة تصدر عرضيات متعددة. الانضباط الأساسي هو عدم رفع صورة خام بحجم 5 MB مطلقًا.

• تحديد حد أدنى للجودة يبلغ 70 للمحتوى و 75 للصور المنتجات، ثم التعديل بالعين على الصور الحقيقية.
• إزالة البيانات الوصفية (EXIF، ملفات تعريف الألوان التي لا تحتاجها) — يمكن أن تضيف عشرات الكيلوبايت دون أي فائدة بصرية.
• إنشاء متغير واحد لكل نقطة توقف (breakpoint) بدلاً من صورة عملاقة واحدة لكل جهاز.
• الأتمتة في بيئة التكامل المستمر (CI) لضمان عدم وصول أي صورة غير مُحسّنة إلى مرحلة الإنتاج.

الخطأ الشائع هو ضغط الصورة المرفوعة وتجاهل كل صورة مصغرة (thumbnail) والمتغيرات المتجاوبة التي يولدها نظام إدارة المحتوى (CMS). قم بتشغيل خط الأنابيب (pipeline) على جميع الأحجام، وليس فقط الأصلية. هذه هي الخطوة التي قمت فيها بقياس أكبر انخفاض في وزن الصفحة — غالبًا ما يكون بين 70 و 80 بالمائة عن الأصل.

كيف تقوم بتحميل الصور الكسول (lazy-load) تحت الطية؟

يجب ألا تمنع صور أسفل الطية (below-the-fold) عملية العرض الأولية. يقوم التحميل الكسول الأصلي بذلك باستخدام سمة واحدة وبدون JavaScript.

<img src="gallery-1-800.webp"
     width="800" height="600"
     loading="lazy" decoding="async"
     alt="Product photo in natural light">

هناك سمتان أكثر أهمية مما يدركه الناس:

١. loading="lazy": يؤجل جلب الصورة حتى تقترب من منطقة الرؤية (viewport)، وبالتالي لا يتنافس أبدًا مع العرض الأولي (first paint). ٢. width و height: يسمحان للمتصفح بحجز المساحة المخصصة للصورة قبل وصولها، مما يمنع تحول التخطيط التراكمي (Cumulative Layout Shift).

لا تقم بالتحميل الكسول لصورة البطل (hero) أو صورة LCP؛ فهذا يؤخر أهم عنصر في الصفحة. القاعدة التي أتبعها هي: تحميل كل شيء أسفل الطية بشكل كسول، وتحميل الصورة الواحدة التي يراها المستخدمون أولاً بشكل فوري (eager-load).

كيف يسرّع الـ CDN الصور؟

يقوم الـ CDN بتقديم الصور من خادم قريب من كل زائر، مما يقلل زمن الذهاب والعودة للشبكة الذي يهيمن على عملية الرسم الأولى في حركة المرور عبر الهاتف المحمول والدولي. عند موقع العميل، أدى إضافة CDN أمام الصور إلى انخفاض LCP بمقدار 400 مللي ثانية أخرى للزوار خارج منطقة الأصل.

كما يوفر لك الـ CDN تحويلات في الوقت الفعلي (on-the-fly transforms): يمكنك طلب أي عرض أو تنسيق عبر URL، ويقوم الحافة (edge) بتوليده وتخزينه مؤقتًا. وهذا يلغي الحاجة إلى إنشاء عشرات المتغيرات مسبقًا. يغطي دليل CDN للصور رؤوس التخزين المؤقت ومفاتيح الكاش بالتفصيل.

قم بتعيين قيمة طويلة لـ Cache-Control: max-age=31536000, immutable على عناوين URL للصور ذات البصمة (fingerprinted) حتى تعيد الزيارات استخدامها. قم بمسح ذاكرة التخزين المؤقت عند النشر عندما تتغير البصمة.

كيف تتناسب الصور المتجاوبة؟

تخبر الصور المتجاوبة المتصفح بالضبط أي نسخة يجب تنزيلها لعرض الشاشة الحالي، بحيث لا يقوم الهاتف أبدًا بجلب صورة البطل الخاصة بالسطح المكتبي. تُعد سمتا srcset و sizes الطريقة الأصلية والمستقلة عن الاعتماديات للقيام بذلك.

<img srcset="hero-640.webp 640w,
             hero-960.webp 960w,
             hero-1280.webp 1280w,
             hero-1920.webp 1920w"
     sizes="(max-width: 768px) 100vw, 50vw"
     src="hero-1280.webp"
     width="1280" height="853"
     loading="eager" fetchpriority="high"
     alt="Hero image of a laptop browser loading a website">

يختار المتصفح أصغر نسخة لا تزال تملأ المساحة عند نسبة البكسل للجهاز. على الهاتف، والتي غالبًا ما تكون ملف 640w، فهي ربع بايتات ملف 1920w. أضف fetchpriority="high" إلى صورة LCP ليمنح المتصفح الأولوية بها أثناء التحميل المبكر.

كيف أقيس تأثير الصور؟

لا يمكنك تحسين ما لا تقيسه. تغطي أداتان العمل الخاص بالصور بشكل جيد.

• PageSpeed Insights — قم بتشغيله على pagespeed.web.dev. يبلغ عن بيانات الحقل من مستخدمين حقيقيين ويشير مباشرة إلى الصور كبيرة الحجم والتنسيقات المفقودة للجيل التالي.
• Lighthouse — هو التدقيق المعملي وراء PageSpeed Insights. توثق Chrome فحوصات الصور الخاصة بها في دليل مطوري Lighthouse. يذكر الصور المحددة التي تهدر البايتات.
• Chrome DevTools Network tab — قم بالتصفية حسب Img، والفرز حسب الحجم، ولاحظ المتسببين الرئيسيين. بهذه الطريقة أجد الصورة أو الصورتين اللتين يستحقان الإصلاح أولاً.
• WebPageTest — عبارة عن شلال وصورة فيلمية تظهر بالضبط متى يتم تنزيل كل صورة وكيف يغير ذلك التخطيط.

عندما يختلف المعمل والحقل، ثق ببيانات الحقل. الحصول على درجة معمل نظيفة على جهاز سريع عبر Wi-Fi لا يعني شيئًا إذا كان المستخدمون المحمولون الحقيقيون على 4G ما زالوا ينتظرون. نظرًا لأن الصور تقود Largest Contentful Paint في معظم الصفحات، فإن العمل الخاص بالصور هو أيضًا عمل Core Web Vitals — يرتبط دليل تحسين الصور لـ Core Web Vitals بين الاثنين.

ما الذي يجب تجنبه؟

• مطاردة الدرجة المثالية، وليس المستخدم. الحصول على 100 في المختبر لا قيمة له إذا ظل LCP الميداني 4 ثوانٍ.
• الضغط المفرط. خفض الجودة بشكل كبير يوفر البايتات ولكنه يفسد صور المنتجات. اختبر على صور حقيقية، وليس عينة.
• تجاهل الأجهزة المحمولة. معظم حركة المرور ومعظم التحميلات البطيئة تأتي من الهواتف المحمولة. قم بالتحسين لهاتف متوسط المدى يعمل على 4G، وليس جهاز الكمبيوتر المحمول الخاص بك للمطورين.
• التحسين لمرة واحدة. يتدهور الأداء مع طرح صور وميزات جديدة. أعد الاختبار بعد كل إصدار.
• صورة ضخمة واحدة لكل جهاز. بدون srcset، تقوم الهواتف بتنزيل الصورة الرئيسية المخصصة لأجهزة سطح المكتب.

الخلاصة الرئيسية

تُعد الصور أكبر رافعة واحدة لسرعة الموقع لأنها تمثل الحصة الأكبر من وزن الصفحة. الإصلاحات الأربعة — وهي التنسيق الحديث بالحجم المعروض، والضغط، والتنفيذ الكسول للتحميل (lazy-loading)، وخدمة CDN — ليست مثيرة للإعجاب، لكنها هي ما نقل موقع العميل الخاص بي من 3.4 MB و LCP يبلغ 4.8 ثانية إلى 690 KB و LCP يبلغ 1.9 ثانية. قم بتطبيقها بهذا الترتيب، وقِس كل خطوة، وابدأ بإصلاح أكبر الصور أولاً.

تنويه صادق: الأرقام الدقيقة للبايت والثواني المذكورة أعلاه مأخوذة من موقع عميل واحد، وستختلف أرقامك بناءً على المحتوى وحركة المرور وخدمة CDN. قم بتشغيل PageSpeed Insights على عناوين URL الخاصة بك قبل وبعد، ودع بيانات الحقل الواردة من المستخدمين الفعليين — وليس درجة المختبر المنظمة — هي الحكم فيما إذا كان الأمر قد نجح أم لا.

مصادر الصور

• شاشة كمبيوتر حديثة تعرض عمل تصميم الويب في مساحة عمل إبداعية — صورة بواسطة Tranmautritam على Pexels
• لقطة مقربة لشاشة كمبيوتر محمول تعرض صفحة تحميل لمحرك بحث — صورة بواسطة cottonbro studio على Pexels
• مطور يكتب الكود على كمبيوتر محمول في مساحة عمل مركزة — صورة بواسطة olia danilevich على Pexels