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

This article is available in English — Read in English

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

كل ما في المقال مبني على ملاحظات المطورين الرسمية لووردبريس، ومستودع الإضافات على WordPress.org، وأدلة Google على موقع web.dev، وكلها مذكورة في المراجع آخر المقال. وأي معلومة لم أستطع التأكد منها من هذه المصادر تركتها خارج المقال.

لماذا الصور مهمة جدًا للسرعة؟

تقيس Google تجربة الصفحة بمجموعة مؤشرات اسمها Core Web Vitals. أحدها هو Largest Contentful Paint أو LCP، وهو يقيس الوقت الذي يستغرقه أكبر عنصر محتوى في الجزء الظاهر من الشاشة حتى يظهر. في أغلب المقالات وصفحات الهبوط وصفحات المنتجات يكون هذا العنصر صورة: البانر الرئيسي، أو الصورة البارزة، أو صورة المنتج الأساسية. وإذا كان هذا الملف ثقيلًا أو تأخر تحميله، فستبدو الصفحة كلها بطيئة حتى لو كانت بقية العناصر سليمة.

الصور تؤثر أيضًا على ثبات التصميم. عندما تُحمَّل صورة بدون مساحة محجوزة لها، ينزل النص الذي تحتها فجأة. هذه الحركة تُحسب في مؤشر آخر اسمه Cumulative Layout Shift أو CLS، ودليل Google على web.dev يذكر الصور التي ليس لها أبعاد كسبب شائع لهذه المشكلة.

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

ما الذي يفعله ووردبريس بصورك تلقائيًا؟

كثير من أصحاب المواقع يثبتون ثلاث إضافات للصور قبل أن يعرفوا ما يقدمه ووردبريس نفسه. هذا ما تحصل عليه حاليًا بدون أي إضافة، مع الإصدار الذي أضاف كل ميزة.

الميزة منذ ماذا تفعل
الصور المتجاوبة (srcset وsizes) ووردبريس 4.4 تسمح للمتصفح باختيار نسخة أصغر من الصورة للشاشات الصغيرة
تصغير الصور الضخمة ووردبريس 5.3 تصغّر الصور الكبيرة جدًا إلى 2560 بكسل كحد أقصى وتحتفظ بالأصل
التحميل الكسول الأصلي ووردبريس 5.5 تضيف loading="lazy" حتى لا تُحمَّل الصور البعيدة إلا عند الحاجة
رفع صور WebP ووردبريس 5.8 تسمح برفع صور WebP واستخدامها مثل JPEG وPNG
أولوية الجلب العالية ووردبريس 6.3 تطلب من المتصفح جلب الصورة المرجح أنها صورة LCP أولًا
رفع صور AVIF ووردبريس 6.5 تسمح برفع صور AVIF إذا كان الخادم يدعمها

الصور المتجاوبة

عندما ترفع صورة، يُنشئ ووردبريس عدة نسخ أصغر منها. ومنذ ووردبريس 4.4 يضيف الخاصيتين srcset وsizes إلى كود الصورة، فيستطيع الموبايل تحميل نسخة صغيرة بدل الملف بعرضه الكامل. ومنذ ووردبريس 5.3 أُضيف مقاسان افتراضيان إضافيان هما 1536×1536 و2048×2048. لا تحتاج إلى فعل أي شيء للاستفادة من ذلك، لكن يجب أن يعرض قالبك الصور من خلال دوال ووردبريس المعتادة. بعض أدوات بناء الصفحات والسلايدرات تكتب كود الصور بطريقتها الخاصة وتتجاهل هذه الميزة.

تصغير الصور الضخمة

منذ ووردبريس 5.3، إذا كان طول الصورة المرفوعة أو عرضها أكبر من 2560 بكسل، يُنشئ ووردبريس نسخة مصغرة ويستخدمها كأكبر مقاس متاح، ويبقى الملف الأصلي في مجلد الرفع. وهذا يحميك من الخطأ الكلاسيكي: رفع صورة الكاميرا كما هي. ويمكن تغيير هذا الحد باستخدام الفلتر big_image_size_threshold، وإرجاع القيمة false يوقف التصغير تمامًا، وهو شيء نادرًا ما أنصح به.

add_filter( 'big_image_size_threshold', function () {
    return 1920;
} );

التحميل الكسول وأولوية الجلب

أضاف ووردبريس 5.5 الخاصية الأصلية loading="lazy" للصور، فتنتظر الصور البعيدة في أسفل الصفحة حتى يقترب الزائر منها أثناء التمرير. لكن التحميل الكسول للصورة الرئيسية في أعلى الصفحة يضر مؤشر LCP، لذلك حسّنت الإصدارات التالية (5.9 و6.2 و6.3) طريقة اختيار ووردبريس للصور التي لا يطبق عليها التحميل الكسول. كما بدأ ووردبريس 6.3 في إضافة fetchpriority="high" للصورة التي يرجح أنها صورة LCP، وتقول ملاحظة الفريق الأساسي إن هذا يحسن LCP عادةً بنسبة تتراوح بين 5 و10 بالمئة.

المشكلة أن ووردبريس يخمّن فقط. فإذا كان القالب يحمّل الصورة الرئيسية كخلفية CSS أو من خلال سكربت سلايدر، فلن يستطيع ووردبريس تمييزها، وقد تحتاج إلى معالجة ذلك داخل القالب نفسه.

تحسين الصور في ووردبريس: اختيار الصيغة المناسبة

الصيغة التي ترفع بها الصورة تغير حجم الملف أكثر من أي إعداد آخر تقريبًا. هذا ملخص سريع مبني على دليل صيغ الصور في MDN وملاحظات ووردبريس الرسمية.

الصيغة الأنسب لـ ملاحظات
JPEG الصور الفوتوغرافية مدعومة في كل مكان، وملفاتها أكبر من الصيغ الحديثة
PNG لقطات الشاشة والرسوم الشفافة بدون فقد في الجودة، وغالبًا ثقيلة جدًا للصور الفوتوغرافية
WebP الصور والرسوم مدعومة في كل المتصفحات الرئيسية، وعادةً أصغر من JPEG
AVIF الصور الفوتوغرافية قد تكون أصغر من JPEG بنسبة تصل إلى 50% بنفس الجودة، وتحتاج دعم الخادم في ووردبريس
SVG الشعارات والأيقونات غير مسموحة في مكتبة الوسائط افتراضيًا لأسباب أمنية

تقول ملاحظة المطورين الخاصة بووردبريس 6.5 إن صور AVIF قد تكون أصغر من JPEG بنسبة تصل إلى 50% بنفس الجودة، وإن AVIF مدعومة في كل المتصفحات الرئيسية. الشرط المهم هنا هو الخادم: يعتمد ووردبريس على مكتبة معالجة الصور الموجودة في الاستضافة (Imagick أو GD) للتعامل مع AVIF. يمكنك التأكد من ذلك من «أدوات» ثم «صحة الموقع»، وبعدها تبويب «معلومات»، ثم قسم «التعامل مع الوسائط»، وابحث عن AVIF في قائمة الصيغ المدعومة. وإن لم تجدها، فاسأل شركة الاستضافة، أو استخدم WebP حاليًا.

ملاحظة عن شعارات SVG: يمنع ووردبريس رفع ملفات SVG افتراضيًا لأن ملف SVG قد يحتوي على سكربتات. وإذا احتجت إليها، فاستخدم إضافة تنظف الملفات قبل حفظها، واسمح بالرفع للمستخدمين الموثوقين فقط.

تحويل الصور تلقائيًا بإضافة Modern Image Formats

ووردبريس نفسه يسمح لك برفع ملفات WebP وAVIF، لكنه لا يحوّل صور JPEG التي ترفعها. وهنا تأتي إضافة فريق الأداء في ووردبريس نفسه، واسمها Modern Image Formats (كان اسمها سابقًا WebP Uploads)، ولديها أكثر من مئة ألف تثبيت نشط على WordPress.org.

بحسب صفحة الإضافة:

  • تُنشئ صور AVIF إذا كان الخادم يدعمها، وإلا تستخدم WebP.
  • عندما تكون الصيغتان متاحتين، تختار صيغة الإخراج من «الإعدادات» ثم «الوسائط».
  • تعمل على الصور الجديدة فقط. الصور القديمة لا تتحول إلا إذا أعدت توليدها، مثلًا بإضافة Regenerate Thumbnails أو بأمر WP-CLI وهو wp media regenerate.
  • افتراضيًا تُنشأ المقاسات الفرعية فقط بالصيغة الحديثة، ويبقى ملف JPEG أو PNG الأصلي كما هو.
  • يوجد خيار اسمه «Output fallback images» يجعلها تُنشئ الصيغة الأصلية والصيغة الحديثة معًا لكل مقاس.

هذه الإضافة أيضًا واحدة من الميزات التي تقدمها إضافة Performance Lab، التي تجمع إضافات الفريق التجريبية (مثل Image Placeholders وImage Prioritizer وEnhanced Responsive Images وغيرها) في مكان واحد. ويمكنك تثبيت Modern Image Formats وحدها إذا كانت هي كل ما تحتاج إليه. الإضافتان تتطلبان حاليًا إصدارًا حديثًا من ووردبريس، فحدّث ووردبريس أولًا.

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

خطوات بسيطة مع كل صورة ترفعها

الإضافات تساعد، لكن أكبر توفير يحدث قبل أن يصل الملف إلى ووردبريس أصلًا. هذه هي الخطوات التي أعطيها للعملاء وفرق المحتوى.

  1. صغّر المقاس أولًا. صورة المقال نادرًا ما تحتاج عرضًا أكبر من مساحة المحتوى في القالب، والصورة الرئيسية بعرض الشاشة نادرًا ما تحتاج أكثر من حوالي 1920 بكسل. لا تعتمد على ووردبريس لإصلاح صورة عرضها 6000 بكسل.
  2. صدّر الصورة بصيغة حديثة. أغلب برامج التعديل تصدّر WebP وAVIF، وأدوات المتصفح المجانية مثل Squoosh، التي ذكرها فريق ووردبريس، تؤدي الغرض أيضًا.
  3. راجع حجم الملف. إذا بقيت صورة مقال عادية ثقيلة بعد التصدير، فقلل الجودة قليلًا وقارن بعينك.
  4. سمّ الملف بشكل صحيح. استخدم اسمًا قصيرًا واضحًا بالحروف اللاتينية، مثل cairo-office-team.webp. الأسماء العربية تعمل، لكنها تتحول إلى روابط مشفرة طويلة يصعب مشاركتها وتتبع مشاكلها.
  5. اكتب النص البديل. صِف ما تعرضه الصورة بلغة المقال نفسها. في الموقع ثنائي اللغة، المقال العربي يأخذ نصًا بديلًا بالعربية.
  6. أدرج الصورة من المحرر. استخدم مكوّن الصورة أو خانة الصورة البارزة، حتى يضيف ووردبريس العرض والارتفاع وsrcset وخاصية التحميل.

النص البديل في المواقع ثنائية اللغة

إذا كنت تستخدم WPML أو Polylang، فراجع طريقة تعامل إعدادك مع ترجمة الوسائط. من الأخطاء الشائعة أن تستخدم الصفحة العربية الصورة الإنجليزية نفسها بنص بديل إنجليزي، فيسمع مستخدمو قارئات الشاشة لغة خاطئة، ومحركات البحث تأخذ إشارة غير متطابقة. ترجم النص البديل، وإذا كانت الصورة تحتوي على نص مكتوب (بانر عليه عنوان مثلًا)، فأعدّ نسخة عربية منفصلة.

إصلاح الصورة الرئيسية

الصورة الرئيسية هي موضع أغلب مشكلات LCP. راجع هذه النقاط بالترتيب:

  • هل عليها تحميل كسول؟ افتح الصفحة، واضغط بزر الماوس الأيمن على الصورة، واختر «فحص»، وابحث عن loading="lazy". الصورة العلوية لا يجب أن تحملها.
  • هل عليها fetchpriority="high"؟ إذا اختارها ووردبريس كصورة LCP فستجد هذه الخاصية. ودليل Google عن Fetch Priority يشرح سبب أهميتها.
  • هل هي خلفية CSS؟ الخلفيات المحددة في CSS يكتشفها المتصفح متأخرًا ولا تحصل على srcset. استخدم عنصر صورة حقيقيًا كلما أمكن.
  • هل هي داخل سلايدر؟ السلايدرات غالبًا تحمّل عدة صور كبيرة وجافاسكربت إضافي قبل عرض أول شريحة. صورة ثابتة واحدة قوية عادةً أداؤها أفضل.
  • هل لها عرض وارتفاع؟ بدونهما تقفز الصفحة عند تحميل الصورة.

إذا كان قالبك يصعّب هذه الإصلاحات، فهذا أمر مهم ينبغي أن تعرفه قبل إعادة التصميم القادمة. وعند اختيار قالب جديد لمتجر إلكتروني، فإن قائمتنا عن قوالب المتاجر المجربة مع العربية واتجاه RTL بداية جيدة.

الصور في متاجر ووكومرس

تضم المتاجر صورًا أكثر من أي نوع آخر من المواقع، فتتضاعف الأخطاء الصغيرة. وبضع عادات بسيطة تصنع فرقًا كبيرًا:

  • اتفق على نسبة أبعاد واحدة لصور المنتجات (المربع شائع) حتى تصطف شبكات التصنيفات ولا تتحرك.
  • ارفع صور المنتجات بمقاس معقول بدل ملف الاستوديو الخام.
  • اكتفِ في معرض المنتج بالصور التي تساعد العميل على اتخاذ قراره.
  • راجع صفحات التصنيفات من الموبايل، لا صفحة المنتج فقط. فالشبكات التي تضم صورًا مصغرة كثيرة هي المكان الذي تضر فيه الصور الثقيلة أكثر من غيره.

كيف تقيس النتيجة؟

لا تعتمد على التخمين. قِس قبل التعديل وبعده، على الصفحات نفسها.

الأداة ماذا تراجع لماذا
PageSpeed Insights مؤشر LCP وعنصر LCP يوضح أي صورة هي عنصر LCP
أدوات المطور في المتصفح تبويب Network مع فلتر Img يعرض حجم كل صورة في الصفحة
Search Console تقرير Core Web Vitals يعرض بيانات المستخدمين الحقيقيين على مدار الوقت

في PageSpeed Insights افتح قسم LCP في التشخيصات، وسيوضح لك العنصر الذي جرى قياسه. فإذا كان صورة، فقد عرفت بالضبط بأي ملف تبدأ. أما بيانات المستخدمين الحقيقيين في Search Console فتحتاج إلى بضعة أسابيع حتى تتحدث، فلا تقلق إذا لم يتغير التقرير في اليوم التالي.

أخطاء شائعة أراها كثيرًا

  • تثبيت أكثر من إضافة صور في نفس الوقت. إضافتان تحوّلان أو تطبقان التحميل الكسول على نفس الصور قد تتعارضان. اختر طريقة واحدة.
  • تطبيق التحميل الكسول على كل شيء بإضافة. بعض إضافات السرعة تضيف التحميل الكسول للصورة الرئيسية أيضًا. استثنِ الصورة العلوية.
  • ضغط الشعار حتى تفسد جودته. الشعارات والرسوم التي تحتوي على نصوص كثيرة تحتاج إلى صيغة بدون فقد أو SVG، لا إلى ضغط JPEG عنيف.
  • نسيان المحتوى القديم. الصور الجديدة أصبحت محسّنة، لكن الخمسمئة صورة التي رُفعت في 2019 ليست كذلك. أعد توليد أو استبدل الصور الموجودة في أهم صفحاتك.
  • حذف الصور الأصلية لتوفير المساحة. احتفظ بنسخة احتياطية من الأصول، لأنك قد تحتاج إليها في إعادة تصميم أو لصيغة لم تظهر بعد.

وإذا كنت تفضّل أن يتابع أحد ذلك ضمن الرعاية الدورية للموقع، فمراجعة الصور جزء من خطط الرعاية المستمرة لمواقع ووردبريس التي نقدمها.

أسئلة شائعة

هل أحوّل كل الصور إلى AVIF؟

فقط إذا كان الخادم يدعم AVIF (راجع «صحة الموقع» ثم قسم الوسائط). فإن كان يدعمها، فـAVIF تعطي عادةً ملفات أصغر للصور الفوتوغرافية. وإن لم يكن، فـWebP اختيار آمن ومدعوم في كل المتصفحات الرئيسية.

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

ليس دائمًا. يتعامل ووردبريس مع الصور المتجاوبة والتحميل الكسول وأولوية الجلب بنفسه. وإضافة مثل Modern Image Formats مفيدة إذا أردت أن تتحول صور JPEG تلقائيًا. أما إذا كنت تصدّر صورك بصيغة WebP أو AVIF أصلًا، فقد لا تحتاج إليها.

هل تحويل الصور سيكسر مقالاتي القديمة؟

إضافة Modern Image Formats تؤثر على الصور الجديدة فقط إلا إذا أعدت التوليد. إعادة التوليد تُنشئ ملفات جديدة، لذلك خذ نسخة احتياطية وجرّب على نسخة تجريبية أولًا، خصوصًا في المتاجر الكبيرة.

هل تحسين الصور يفيد السيو؟

بشكل غير مباشر، نعم. تحسين LCP وتقليل حركة التصميم يحسنان تجربة الصفحة، والنص البديل الجيد يساعد Google على فهم صورك. هذا ليس بديلًا عن المحتوى الجيد، لكنه يزيل نقطة ضعف تقنية شائعة.

كلمة أخيرة

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

المراجع