كيفية ضغط الصور في WordPress — تسريع موقعك في 5 دقائق
موقع WordPress الخاص بك بطيء. لقد حاولت تخزين المكونات الإضافية مؤقتًا، وقمت بترقية الاستضافة، وقمت بتصغير CSS الخاص بك - ولا يزال الأمر بطيئًا. فيما يلي إحصائية قد تفسر السبب: في موقع WordPress المتوسط، تمثل الصور ما بين 40 إلى 60% من إجمالي وزن الصفحة. يمكن أن يصل حجم منشور مدونة واحد يحتوي على خمس صور غير محسّنة إلى 15-25 ميغابايت. لا يمكن لخطة الاستضافة وإعدادات التخزين المؤقت التي اخترتها بعناية أن تعوض عن عرض 25 ميجابايت من الصور في كل تحميل للصفحة.
لماذا تعمل الصور على إبطاء مواقع WordPress؟
يجعل WordPress من السهل بشكل خطير تحميل الصور الضخمة. يمكنك سحب صورة من هاتفك إلى مكتبة الوسائط، ويقوم WordPress بإنشاء بعض أحجام الصور المصغرة، ثم تقوم بإدراجها في منشور. المشكلة: يقوم هاتفك بالتصوير بدقة 12-48 ميجابكسل، وينتج ملفات يتراوح عرضها بين 4000-8000 بكسل و3-8 ميجابايت لكل منها. قد يعرض WordPress هذه الصورة بعرض 800 بكسل في منشورك، لكنه لا يزال يقوم بتحميل النسخة الأصلية بالحجم الكامل خلف الكواليس ما لم يتم تكوين المظهر الخاص بك بشكل صحيح.
اضرب ذلك في 5 إلى 10 صور في منشور مدونة نموذجي، وأضف صورة رأس السمة الخاصة بك، وصور الشريط الجانبي، وأي صور خلفية، وستعرض بسهولة 20 إلى 40 ميجابايت من بيانات الصور لكل صفحة. حتى في حالة الاتصالات السريعة، يستغرق ذلك من 2 إلى 4 ثوانٍ فقط للصور. أما بالنسبة لاتصالات الهاتف المحمول، فالأمر أسوأ بكثير.
أبعاد الصورة المثالية لـ WordPress
قبل القلق بشأن الضغط، احصل على الأبعاد الصحيحة. تحتوي معظم سمات WordPress على مساحة محتوى يتراوح عرضها بين 700 و1200 بكسل. يعد تحميل صورة بحجم 5000 بكسل لحاوية بحجم 900 بكسل بمثابة هدر خالص. تغيير حجم الصور الخاصة بك لتتناسب مع عرض محتوى الموضوع الخاص بك. بالنسبة لمنشورات المدونة القياسية، عادةً ما يكون عرض 1200 بكسل هو الحد الأقصى الذي ستحتاجه على الإطلاق. بالنسبة للصور الرئيسية ذات العرض الكامل، فإن 1920 بكسل كافية لجميع الشاشات تقريبًا.
الصور المميزة: 1200 × 630 بكسل (وهذا يعمل أيضًا بشكل مثالي لمشاركة الوسائط الاجتماعية). صور مشاركة المدونة: عرض 800-1200 بكسل، ارتفاع متناسب. لافتات كاملة العرض: 1920 × 600-800 بكسل. الصور المصغرة: يقوم WordPress بإنشاء هذه العناصر تلقائيًا، ولكن يمكنك التحكم في الأحجام من خلال الإعدادات > الوسائط. عادةً ما يؤدي الحصول على الأبعاد الصحيحة قبل التحميل إلى تقليل حجم الملف بنسبة 60-80% قبل تطبيق أي ضغط.
اضغط قبل التحميل - وليس بعده
يعتمد العديد من مستخدمي WordPress على المكونات الإضافية مثل Smush أو ShortPixel لضغط الصور بعد التحميل. تعمل هذه الأشياء، ولكنها تضيف تحميلًا على الخادم، وتتطلب أحيانًا خططًا مدفوعة للمكتبات الكبيرة، وما زلت تقوم بتحميل النسخ الأصلية ذات الحجم الكبير أولاً. نهج أفضل: ضغط الصور الخاصة بك قبل التحميل إلى ووردبريس. قم بتغيير الحجم إلى الأبعاد الصحيحة، وضغطها بجودة 75-85%، وستصبح صورة هاتفك بحجم 6 ميجا بايت صورة جاهزة للويب بحجم 150 كيلو بايت. قم بتحميل ذلك مباشرة.
إذا كانت لديك منشورات حالية تحتوي على صور غير محسّنة، فيمكن أن يساعدك المكون الإضافي في التحسين المجمع. ولكن بالنسبة لكل مشاركة جديدة في المستقبل، قم بضغطها قبل التحميل. إنه أسرع، ويمنحك مزيدًا من التحكم في الجودة، ولا يعتمد على بقاء المكون الإضافي نشطًا.
تنسيق WebP للووردبريس
يدعم WordPress تحميلات WebP محليًا منذ الإصدار 5.8، كما تمت إضافة دعم AVIF في WordPress 6.5. تكون صور WebP أصغر بنسبة 30% تقريبًا من ملفات JPEG المكافئة، مما يعني أن كل صورة على موقعك يتم تحميلها بشكل أسرع مع عدم وجود فرق واضح في الجودة. تحويل الصور الخاصة بك إلى WebP قبل التحميل، أو استخدم مكونًا إضافيًا يقدم إصدارات WebP تلقائيًا إلى المتصفحات التي تدعمه (وهي جميع المتصفحات الحديثة في عام 2026).
تأثير مؤشرات الويب الأساسية
تعمل مؤشرات أداء الويب الأساسية من Google على قياس أداء التحميل مباشرةً، وتؤثر الصور على مقياسين مهمين: أكبر طلاء محتوى (LCP) و إزاحة التخطيط التراكمي (CLS). الصور غير المحسنة هي السبب الأول لضعف درجات LCP. حدد دائمًا سمات العرض والارتفاع على الصور لمنع CLS.
تحميل كسول والصور المستجيبة
يضيف الإصدار 5.5+ من WordPress التحميل البطيء للصور تلقائيًا، مما يعني أن الصور الموجودة أسفل الجزء غير المرئي لا يتم تحميلها حتى يمرر الزائر بالقرب منها. يعد هذا تحسينًا هائلاً للصفحات التي تحتوي على العديد من الصور - يحتاج التحميل الأولي للصفحة فقط إلى جلب الصور المرئية على الشاشة. تأكد من أن المظهر الخاص بك لا يقوم بتعطيل هذه الميزة. يمكنك التحقق من خلال فحص مصدر صفحتك والبحث عنه التحميل = "كسول" السمات الموجودة على علامات img الخاصة بك.
يقوم WordPress أيضًا بإنشاء علامات صور سريعة الاستجابة باستخدام سمة srcset، والتي تخدم أحجام صور مختلفة بناءً على شاشة الزائر. وهذا يعني أن زائر الهاتف المحمول يحصل على ملف صورة أصغر من زائر سطح المكتب. ولكن هذا يعمل بشكل جيد فقط إذا قمت بتحميل الصور بحجم بداية معقول - يمكن أن يقدم WordPress إصدارات أصغر من صورة بحجم 1200 بكسل، لكنه لا يمكنه تقديم إصدارات أصغر من صورة بحجم 400 بكسل. اهدف إلى أن يتراوح عرضه ما بين 1200 إلى 1920 بكسل حسب الحجم الذي قمت بتحميله، ودع WordPress يتولى الباقي.
الإصدار الذي مدته خمس دقائق: قم بتغيير حجم الصور إلى عرض 1200 بكسل، وضغطها بجودة 80% بتنسيق WebP، وتحميلها إلى WordPress، والتأكد من تمكين التحميل البطيء. افعل ذلك في مشاركاتك الخمس التالية على مدونتك، ثم تحقق من نتيجة Google PageSpeed Insights الخاصة بك. عادة ما يكون التحسن كبيرًا - فنحن نتحدث عن قفزات تتراوح بين 20 إلى 40 نقطة في نتائج أداء الأجهزة المحمولة نتيجة لتحسين الصورة وحدها.