لماذا يكون موقع الويب الخاص بك بطيئًا - قائمة مرجعية لتحسين الصور لعام 2026
قم بتشغيل موقع الويب الخاص بك من خلال Google PageSpeed Insights الآن. تفضل، افتح علامة تبويب جديدة وقم بذلك. إذا كانت درجة أدائك أقل من 80، فهناك احتمال كبير أن تكون التوصية العليا متعلقة بالصور. تعد الصور غير المحسنة أكبر مساهم منفرد في إبطاء مواقع الويب - فهي تمثل دائمًا وزنًا أكبر للصفحة مقارنة بجافا سكريبت وCSS والخطوط وHTML مجتمعة. والخبر السار هو أن تحسين الصورة هو أيضًا أسهل إصلاح للأداء. لا توجد تغييرات في التعليمات البرمجية، ولا إعادة تكوين الخادم، ولا تصحيح الأخطاء. مجرد صور أكثر ذكاءً.
الصور هي المشكلة رقم 1 في وزن الصفحة
وفقًا لبيانات أرشيف HTTP، تشكل الصور حوالي 42% من متوسط الوزن الإجمالي لصفحة الويب. يبلغ متوسط حجم صفحة الويب حوالي 2.3 ميغابايت، منها حوالي 1 ميغابايت عبارة عن صور. ولكن هذا هو المتوسط - فالمواقع سيئة التحسين تقدم بشكل روتيني ما بين 5 إلى 15 ميغابايت من الصور لكل صفحة. تضيف كل ميغابايت إضافية حوالي 1-2 ثانية من وقت التحميل على اتصال الهاتف المحمول النموذجي. تستغرق الصفحة التي يبلغ حجمها 10 ميغابايت من 8 إلى 12 ثانية ليتم تحميلها بالكامل على شبكة 4G، ويغادر معظم الزوار بعد 3 ثوانٍ.
تكمن المشكلة دائمًا تقريبًا في أحد أمرين: الصور ذات الأبعاد الكبيرة جدًا (التي تعرض صورة بحجم 4000 بكسل في حاوية بحجم 800 بكسل) أو الصور التي لم يتم ضغطها بشكل كافٍ (توفير جودة بنسبة 100% عندما تكون 80% متطابقة بصريًا). في كثير من الأحيان يكون كلاهما.
عنصر القائمة المرجعية 1 - عرض الصور ذات الحجم المناسب
هذا هو التحسين الوحيد ذو التأثير الأعلى. إذا كان CSS الخاص بك يعرض صورة بعرض 800 بكسل، فيجب أن يكون عرض ملف الصورة حوالي 800 بكسل - وليس 4000 بكسل. يؤدي عرض الصور كبيرة الحجم إلى إهدار النطاق الترددي على وحدات البكسل التي يتخلص منها المتصفح. افتح أدوات المطور في متصفحك، وافحص صورك، وقارن الحجم المعروض بالحجم الطبيعي (الملف). إذا كان الحجم الطبيعي أكبر من 2x الحجم المعروض، فأنت تهدر البيانات.
بالنسبة للتصميمات سريعة الاستجابة حيث قد يتم عرض الصورة بأحجام مختلفة على شاشات مختلفة، استخدم سمة srcset لتوفير أحجام صور متعددة. يختار المتصفح أفضل ما يناسب شاشة الزائر. الطريقة الشائعة: تقديم صور بعرض 400 بكسل و800 بكسل و1200 بكسل و1600 بكسل. قم بإنشاء متغيرات الحجم هذه من النسخة الأصلية، واترك للمتصفح الاختيار.
عنصر قائمة التحقق 2 - استخدم تنسيقات الجيل التالي
إذا كنت لا تزال تعرض ملفات JPEG وPNG فقط في عام 2026، فستترك ما بين 25 إلى 50% من التوفير المحتمل في حجم الملف على الطاولة. ويب بي يتمتع بدعم متصفح شبه عالمي (97%+ عالميًا) وينتج ملفات أصغر بنسبة 25-35% من JPEG بنفس الجودة. AVIF يحقق ضغطًا أفضل - أصغر بنسبة 50% تقريبًا من تنسيق JPEG - وأصبح دعم المتصفح الآن أعلى من 92%.
التنفيذ واضح ومباشر: تحويل الصور الخاصة بك إلى WebP (أو AVIF إذا كان النظام الأساسي الخاص بك يدعمه). للحصول على أقصى قدر من التوافق، استخدم عنصر صورة HTML لتقديم AVIF للمتصفحات التي تدعمه، وWebP كبديل، وJPEG كبديل نهائي. تحتوي معظم منصات CMS الحديثة ومولدات المواقع الثابتة على مكونات إضافية أو ميزات مدمجة للتعامل مع هذا تلقائيًا.
عنصر قائمة التحقق 3 - تنفيذ التحميل البطيء
يؤدي التحميل البطيء إلى تأجيل تحميل الصور الموجودة أسفل إطار العرض المرئي. يقوم متصفح الزائر بتنزيل الصور فقط أثناء التمرير بالقرب منها، بدلاً من تحميل جميع الصور الموجودة على الصفحة مرة واحدة. يؤدي هذا إلى تحسين وقت التحميل الأولي للصفحة بشكل كبير، خاصة على الصفحات ذات الصور الثقيلة مثل المحافظ أو المعارض أو منشورات المدونات الطويلة. في HTML، الأمر بسيط مثل الإضافة التحميل = "كسول" إلى علامات الصور الخاصة بك. تقوم معظم منصات CMS الآن بهذا بشكل افتراضي.
تحذير مهم: لا تقم بتحميل الصور المرئية في إطار العرض الأولي (في الجزء المرئي من الصفحة) ببطء. يجب أن يتم تحميل صورة البطل والشعار وأي صور مرئية بدون تمرير على الفور. يؤدي التحميل البطيء إلى الإضرار بدرجة LCP الخاصة بك لأنه يؤخر عرض المحتوى المرئي الأكثر أهمية.
عنصر القائمة المرجعية 4 - الضغط على مستوى الجودة المناسب
يمكن ضغط معظم الصور الموجودة على الويب بجودة تصل إلى 75-85% دون أي خسارة ملحوظة. عادةً ما يكون الفرق بين الجودة بنسبة 100% و85% في ملف JPEG غير مرئي للعين البشرية، لكن الفرق في حجم الملف هو 2-3x. تشغيل الصور الخاصة بك من خلال ضاغط وقارن بين ما قبله وما بعده. سوف تتفاجأ بمدى صغر الحجم الذي يمكنك جعله أصغر دون أي تدهور واضح.
أدوات اختبار أداء الصورة
رؤى جوجل PageSpeed: يحدد الصور المحددة التي تحتاج إلى التحسين ويقدر التوفير. جيتميتريكس: يعرض المخططات الانحدارية حتى تتمكن من رؤية الصور التي تؤدي إلى إبطاء الأمور بالضبط. اختبار صفحة الويب: يوفر طرق عرض شريط الصور لمعرفة متى تظهر الصور أثناء التحميل. أدوات تطوير Chrome: تتيح لك علامة التبويب "الشبكة" فرز الطلبات حسب الحجم للعثور على أكبر المخالفين.
عنصر قائمة التحقق 5 - فكر في CDN للصور
تقوم شبكة توصيل المحتوى بتخزين نسخ من صورك على خوادم حول العالم، بحيث يقوم الزائرون بتنزيل الصور من خادم قريب منهم بدلاً من خادمك الأصلي الموجود في منتصف الطريق حول العالم. بالنسبة للمواقع ذات الجمهور العالمي، يمكن لشبكة CDN تقليل أوقات تحميل الصور بنسبة 40-60%. يقدم العديد من موفري خدمات CDN أيضًا تحسينًا تلقائيًا للصورة - حيث يقومون بتغيير حجم التنسيقات وضغطها وتحويلها بسرعة بناءً على جهاز الزائر والمتصفح.
تعد Cloudflare (الطبقة المجانية المتوفرة)، وBunnyCDN، وAmazon CloudFront من الخيارات الشائعة. إذا كنت تستخدم WordPress، فإن خطة Cloudflare المجانية وحدها يمكنها أن تُحدث فرقًا ملحوظًا. بالنسبة للمواقع الثابتة على منصات مثل Netlify أو Vercel، يتم تضمين تسليم CDN.
قائمة التحقق الكاملة حسب التأثير: (1) تغيير حجم الصور لعرض الأبعاد، (2) الضغط بجودة 75-85%، (3) التحويل إلى WebP أو AVIF، (4) تنفيذ التحميل البطيء للصور ذات الطيات السفلية، (5) استخدام srcset المستجيب لأحجام الشاشات المتعددة، (6) العرض من خلال CDN، (7) تعيين رؤوس ذاكرة التخزين المؤقت المناسبة حتى لا يعيد الزائرون العائدون تنزيل الصور. اعمل من خلال هذه القائمة وقم بتشغيل PageSpeed Insights بعد كل خطوة. تشهد معظم المواقع أكبر تحسن لها من الخطوات 1-3 وحدها.
