تحسين صور ووردبريس في 2026: السرعة وتحسين محركات البحث

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

صور WordPress هي عادةً السبب الأكبر الوحيد لبطء تحميل الصفحة. قم بضغطها إلى WebP قبل التحميل، وحدد عرض العرض (display width)، وقم بتمكين التحميل الكسول (lazy loading) وsrcset المتجاوب، وضع CDN أمامها. هذه المجموعة هي ما خفض قيمة Largest Contentful Paint الخاصة بي من 3.8s إلى 1.1s على مدونة ثقيلة الوسائط. لقد قمت بتحسين أكثر من 100 موقع WordPress باستخدام سير العمل هذا، لذا ستقوم بقية الصفحة بالمرور على كل إعداد أقوم بتغييره فعليًا.

الإجابة السريعة: ما الذي يجب إصلاحه أولاً؟

اضغط الصور إلى WebP قبل الرفع، وحدد عرض العرض عند 1920px، وأبقِ كل ملف تحت 200KB، ومكّن التحميل الكسول (lazy loading) وsrcset المتجاوب، وضع CDN أمامها. قم بتشغيل ShortPixel (أو EWWW) للتحويل عند الرفع وCloudflare للتسليم من الحافة (edge delivery). تمثل الصور ما بين 60 إلى 80 بالمائة من وزن الصفحة في المدونة النموذجية، لذا يكمن فيها الفوز المقاس.

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

في المدونة النموذجية، تشكل الصور ما بين 60 إلى 80 بالمائة من وزن الصفحة. قمت بقياس متجر WooCommerce نفسه قبل وبعد إصلاح الصور: انخفض إجمالي حجم الصفحة من 9.4MB إلى 1.1MB وقفز معدل PageSpeed للهاتف المحمول من 31 إلى 78.

المتسببون المعتادون الذين ألاحظهم هم:

• صور JPEG بكاميرا بحجم 4MB يتم رفعها مباشرة من الهاتف
• استخدام PNG حيث يمكن أن يكون WebP ربع الحجم
• ملف واحد بحجم 2560px يُقدم لهاتف بحجم 375px
• عدم وجود تحميل كسلول (lazy loading)، مما يجعل المتصفح يقوم بتنزيل كل صورة دفعة واحدة

يأتي WordPress الآن مع إعدادات افتراضية جيدة، لكنه لن يمنعك من رفع صورة بحجم 6MB. هذا الجزء يعتمد عليك.

كيف تحجّم الصور قبل رفعها؟

هذه الخطوة الواحدة تفعل أكثر من أي إضافة (plugin). قم بتغيير الحجم إلى أكبر حجم ستعرضه فعليًا، ثم اضغط. بالنسبة لمعظم صور المحتوى التي تتراوح عرضها بين 1600 و 1920px.

روتين التحجيم الخاص بي قبل الرفع:

1. قم بإسقاط الدفعة في أداة تغيير الحجم بحد أقصى 1920px.
2. تحويلها إلى WebP بجودة 80.
3. التأكد من أن الناتج أقل من 200KB.
4. ثم الرفع إلى WordPress.

بالنسبة لمنطق التحديد الكامل للحجم، يغطي دليل resize images for web guide نقاط التوقف (breakpoints)، ويتعامل دليل batch resize guide مع المجلدات بالكامل دفعة واحدة.

كيف تحوّل إلى WebP و AVIF؟

WebP أصغر بنسبة 25 إلى 35 بالمئة من JPEG عند جودة متساوية، وقد دعمت نواة WordPress ذلك منذ الإصدار 6.5. أما AVIF فيضغط بمقدار أصغر بنسبة 20 إلى 30 بالمئة من WebP، لكن دعم المتصفح والمحرر لا يزال غير مكتمل.

أقوم بضغط صور البطل إلى كلا التنسيقين وأترك مهمة التفاوض لـ CDN. إرشادات Google نفسها هي تقديم التنسيقات الحديثة كلما أمكن — اطلع على استخدام تنسيقات الصور الحديثة على web.dev.

إذا كان لديك مجموعة من صور PNG عبر الإنترنت بالفعل، فإن محول PNG إلى WebP يمر بعملية تحويل الدفعات دون كسر عناوين URL.

ما هي إضافة الضغط التي يجب عليك استخدامها؟

قمت بضغط مكتبة صور مكونة من 1,200 صورة عبر كل إضافة رئيسية. إليك المقايضات الصادقة أدناه - ولا أحد منهم يدفع لي أي شيء.

أُثبّت أولاً إضافة ShortPixel Image Optimizer. يبدو ضغط Glossy مطابقًا لما تراه عيني، حيث يقوم تلقائيًا بإنشاء WebP و AVIF، ويعيد كتابة العلامات (markup) لتقديمها. الخطة المجانية هي 100 صورة شهريًا، وهي كافية للاختبار ولكن ليس لتنظيف تراكم كبير حقيقي.

يتميز Smush بواجهة نظيفة وإعدادات افتراضية جيدة، لكن المستوى المجاني لا يحول إلى WebP - وهذا يقع خلف حائط الدفع الخاص بـ Pro. هذا جيد إذا كنت تدفع بالفعل مقابلها، ومحدود إذا لم تكن كذلك.

يعد EWWW Image Optimizer خياري للمواقع ذات الحجم الكبير. إنه يُحسّن عددًا غير محدود من الصور المحلية مجانًا ولا يفرض رسومًا إلا على CDN و exactDN الخاصة به. الإعداد أكثر تعقيدًا من ShortPixel.

يتمتع Imagify بتكامل وثيق مع WP Rocket وله شريط تمرير بسيط بثلاثة مستويات. جودة الضغط قوية؛ لكن الحد الأقصى للرصيد الشهري هو القيد الرئيسي على المتاجر الكبيرة.

كيف تجعل خاصية srcset المتجاوبة تعمل فعليًا؟

يُنشئ WordPress تلقائيًا أحجام مصغرة (thumbnail)، ومتوسطة (medium)، وكبيرة (large)، وبعض الأحجام الوسيطة، ويُخرج لك خاصية srcset — ولكن فقط إذا كان قالبك يستخدم الدالة wp_get_attachment_image() بدلاً من ترميز علامات <img> بشكل ثابت.

مثال على البنية التي يخرجها WordPress:

<img
  src="hero-1536x800.webp"
  srcset="hero-768x400.webp 768w,
          hero-1200x628.webp 1200w,
          hero-1536x800.webp 1536w"
  sizes="(max-width: 768px) 100vw, 1200px"
  loading="lazy"
  width="1536" height="800"
  alt="Storefront hero image">

كيف أتحقق من ذلك: افتح أدوات المطور (DevTools)، واضبط التقييد على Slow 4G، وأعد التحميل، وتحقق من علامة تبويب Network. يجب أن يطلب الهاتف ملف 768w، وليس ملف 1536w. إذا قام كل جهاز بتحميل نفس الملف، فهذا يعني أن القالب معطوب أو أن أداة بناء الصفحات تتجاوز البنية المتجاوبة (responsive markup).

كيف تقوم بتفعيل التحميل الكسول؟

منذ إصدار WordPress 5.5، يحصل كل <img> على loading="lazy" بشكل افتراضي، وأضاف الإصدار 6.1 تلميح fetchpriority="high" لأول صورة كبيرة حتى تتوقف عن التنافس مع المحمل الكسول (lazy loader). نادراً ما تحتاج إلى إضافة (plugin) لهذا الأمر بعد الآن.

تسرد وثائق WordPress الرسمية حول التحميل الكسول WordPress lazy-loading documentation الفلاتر إذا كنت بحاجة إلى استثناء صورة LCP أو تحميل إطارات iframe بشكل كسول. أما الميكانيكا الأعمق فتوجد في مقالتنا lazy load images، والتي تتضمن الخطأ الشائع المتمثل في التحميل الكسول للبطل (hero) الموجود فوق الطية (above the fold).

كيف يقلل الـ CDN من وقت تحميل الصور؟

يقوم CDN بخدمة الملفات من أقرب نقطة (edge) إلى الزائر ويُزيل دورات الذهاب والإياب (round-trips) من مصدرك (origin). بعد أن قمت بتحويل عميل واحد من ملفات JPEGs المستضافة في المصدر إلى Cloudflare plus Polish، انخفض زمن TTFB للصور من 420ms إلى 60ms في سنغافورة والبرازيل.

ما قمت بتكوينه:

• Cloudflare with Polish on (lossless plus WebP).
• تخزين كل شيء مؤقتًا على /wp-content/uploads/.
• ذاكرة تخزين مؤقت للمتصفح لمدة سنة لأنواع MIME للصور.
• WP Offload Media فقط إذا كنت مرتبطًا بـ S3.

للحصول على الإعداد الكامل، بما في ذلك رؤوس التخزين المؤقت (cache headers) وقواعد المسح (purge rules)، فإن دليل CDN للصور image CDN guide يتعمق في التفاصيل. أما المفاضلات بين الصيغ فتوجد في مقارنة WebP vs AVIF comparison.

هل دعم WebP الأساسي في WordPress كافٍ؟

جزئياً. منذ الإصدار 6.5، يمكنك تحميل WebP مباشرة ويتولى WordPress التعامل مع تغيير الحجم، وهذا أمر عظيم. لكن الأساس لا يحوّل ملفات JPEGs الموجودة لديك، ولا يولد AVIF تلقائيًا، ولا يتفاوض على التنسيق لكل متصفح. لا يزال المكون الإضافي (plugin) أو CDN يقوم بهذا العمل.

إذا بدأت موقعًا جديدًا تمامًا اليوم وقمت بتحميل WebP فقط، فإن الأساس كافٍ بالفعل. أما بالنسبة لأي موقع أقدم من ذلك — وهو ما ينطبق على الجميع تقريبًا — فأنت بحاجة إلى طبقة المكون الإضافي (plugin layer). اطلع على ملاحظات حقل أساس WordPress لمعرفة التغييرات المستمرة في الوسائط.

قائمة مراجعة الأداء قبل الإطلاق

• يجب أن تكون جميع صور المحتوى أقل من 200KB.
• يتم تقديم WebP، مع استخدام JPEG كخيار احتياطي (fallback).
• يجب أن يحصل البطل (Hero) على fetchpriority="high"، وليس loading="lazy".
• يجب توفر srcset ويجب أن يقوم الهاتف بتحميل الملف الأصغر.
• يجب أن تقوم شبكة توصيل المحتوى (CDN) بتخزين مسار /wp-content/uploads/ في الذاكرة المؤقتة.
• يجب أن يصف النص البديل (Alt text) الصورة في ما بين 18 و 140 حرفًا.
• يجب أن يكون LCP أقل من 2.5s و CLS أقل من 0.1 في PageSpeed.

ملخص

تصغير الحجم، والضغط إلى WebP، والسماح لـ WordPress وإضافة ببناء srcset متجاوب، وتحميل الكسل تحت الطيّة، والتخزين المؤقت عند الحافة. ShortPixel بالإضافة إلى Cloudflare هي المجموعة التي ألجأ إليها أولاً؛ و EWWW هو خياري عندما تكون المكتبة ضخمة والميزانية صفر.

تحذير حقيقي واحد: الضغط التالف العدواني سيؤثر عليك في النهاية على صور المنتجات وشاشات Retina حيث تكون التفاصيل مهمة. أنا أحتفظ بالأصول (originals) في التخزين السحابي وأعيد التصدير منها، لأنه بمجرد أن تقوم بالكتابة فوق المصدر بنسخة تالفة، ستفقد التفاصيل إلى الأبد.

الأسئلة المتداولة

هل يجعل WordPress 6.5 إضافات تحسين الصور غير ضرورية؟

فقط للمواقع الجديدة تمامًا التي تقوم بتحميل WebP منذ اليوم الأول. يقوم Core 6.5 بتغيير حجم التحميلات بصيغة WebP ويقدم أحجامًا متجاوبة، ولكنه لا يحول مكتبات JPEG الحالية، ولا ينشئ AVIF، ولا يقوم بالتفاوض على التنسيق حسب المتصفح. أي موقع يحتوي على مكتبة وسائط موجودة لا يزال بحاجة إلى إضافة أو CDN لذلك.

ما هو أفضل مُحسّن صور مجاني لـ WordPress؟

تغطي الطبقة المجانية من EWWW Image Optimizer الضغط وتحويل WebP دون الحاجة إلى API مدفوع. يقدم ShortPixel 100 صورة مجانية شهريًا، وهو ما يناسب المواقع الصغيرة. بالنسبة للمكتبات الكبيرة بميزانية صفرية، يعد EWWW هو الخيار الافتراضي العملي؛ أما للتلقائية و AVIF، فإن الخطط المدفوعة من ShortPixel أو Imagify تستحق ذلك.

هل يجب أن أقدم WebP أم AVIF على WordPress؟

WebP كإعداد افتراضي عالمي، وAVIF إذا كان بإمكانك ترميزه وكان جمهورك يعتمد في الغالب على المتصفحات الحديثة. يعمل WebP في كل مكان حاليًا، بينما يقلل AVIF بنحو 50% ولكنه يترمّز ببطء ويتخطى بعض المتصفحات القديمة. أرسل AVIF مع احتياطي (fallback) بصيغة WebP عبر عنصر <picture> لتغطية كليهما.

هل يقوم WordPress بضغط صوري؟

نعم - ينشئ WordPress نسخًا متعددة ومُغيّرة الحجم لكل تحميل ويطبق ضغطًا خفيفًا. ولكنه لا يحول التنسيقات (أبعد من WebP في 6.5)، ولا يُحسّن بشكل عدواني، ولا يزيل البيانات الوصفية (metadata). تتولى الإضافة هذه الخطوات.

ما هي أفضل حزمة تحسين صور لـ WordPress؟

ShortPixel (للضغط وWebP/AVIF) بالإضافة إلى Cloudflare (لتوصيل الحافة - edge delivery) هي الحزمة التي ألجأ إليها أولاً؛ وأستخدم EWWW عندما تكون المكتبة ضخمة والميزانية صفرية. تتعامل هذه التركيبة مع الضغط، والتنسيقات الحديثة، والتخزين المؤقت على الحافة (edge caching). احتفظ بالملفات الأصلية في التخزين السحابي وأعد تصديرها من هناك، لأن الكتابة فوق المصدر بنسخة فقدت الجودة يعني خسارة التفاصيل إلى الأبد.

مصادر الصور

• آلة كاتبة عتيقة بملصق ورق يحمل شعار WordPress — صورة بواسطة Suzy Hazelwood على Pexels
• مساحة عمل كمبيوتر محمول لمكتب منزلي لتحرير موقع WordPress — صورة بواسطة cottonbro studio على Pexels
• كمبيوتر محمول يعرض صفحة دفع موقع إلكتروني على مكتب نظيف — صورة بواسطة Caio على Pexels
• إعداد مطور بشاشتين يعرض الكود وبرنامج تحرير الصور — صورة بواسطة Lukas Blazek على Pexels