اجعل صور WordPress سريعة: مقاييس الويب Web Vitals و WebP

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

هذا هو الملحق الذي يركز على السرعة لدليل تحسين صور WordPress لعام 2026 WordPress image optimization guide for 2026. يتناول ذلك الدليل الإعداد العام: plugins، و srcset، و CDN، و htaccess. أما هذا الدليل فيضيق نطاقه إلى سؤال واحد: كيف تجعل صور WordPress سريعة بما يكفي لتحويل Core Web Vitals إلى اللون الأخضر؟ لقد قمت بقياس كل خطوة على مدونتي المليئة بالوسائط، والتحسينات أدناه هي ما نقل بالفعل Largest Contentful Paint من 3.8s إلى 1.1s.

الإجابة السريعة: ما الذي يجعل صور WordPress سريعة؟

قم بضغط كل صورة إلى WebP قبل التحميل، وحدد عرض العرض الخاص بها حتى لا يقوم المتصفح أبدًا بتنزيل ملف بحجم 4000px لمساحة مخصصة لـ 400px، وقم بتحميل المحتوى الكسول (lazy-load) لكل شيء أسفل الطية (below the fold)، وضع CDN أمام المسار /wp-content/uploads/. في مدونتي الخاصة، قللت هذه الخطوات الأربع الوزن الإجمالي للصور بنسبة 84% وخفضت قيمة LCP على الهاتف المحمول من 3.8s إلى 1.1s. إن Largest Contentful Paint (LCP) في مدونة WordPress هو دائمًا تقريبًا صورة، لذا فهذا هو المكان الذي تكمن فيه السرعة.

لماذا تهيمن صور WordPress على مقاييس Core Web Vitals الخاصة بك؟

تقيّم Core Web Vitals السرعة المُدرَكة، وأكثرها فشلاً في WordPress هو Largest Contentful Paint، والذي يكون عادةً الصورة الرئيسية أو أول صورة مضمنة في موقع المحتوى. لقد قمت بتشغيل PageSpeed Insights على 40 من منشوراتي الخاصة وكان عنصر LCP صورة في 37 منها.

تدفع الصور أيضًا المقاييس الأخرى بشكل غير مباشر:

• تمنع صورة رئيسية بحجم 4MB عنصر LCP حتى يكتمل تنزيلها على شبكة 4G بطيئة.
• تحدث ارتفاعات في انحراف التخطيط (Layout shift) عندما تصل الصور دون تحديد العرض والارتفاع.
• يتأثر INP عندما تؤدي قائمة انتظار صور عملاقة إلى تجويع الخيط الرئيسي أثناء التحليل (parse).

تقيس Google هذه المقاييس من مستخدمي Chrome الحقيقيين وتدمجها في إشارات ترتيب البحث، والموثقة في web.dev fast loading guidance. نادرًا ما يكون الحل هو الخادم (server). بل هو دائمًا الصور.

ما مقدار وزن الصورة الذي يمكنك تقليصه؟

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

إن الانخفاض من 9.4MB إلى 1.1MB ليس حالة خاصة. إنه ما يحدث عندما تتوقف عن نشر ملفات JPEG غير المضغوطة بالدقة الأصلية. الرافعة الأكبر هي التنسيق والأبعاد، والتي يحللها الدليل optimize images for web speed مقياسًا بمقياس.

ما هو LCP ولماذا يكون دائمًا صورة تقريبًا؟

يحدد Largest Contentful Paint اللحظة التي يتم فيها عرض أكبر عنصر مرئي. في مدونة على WordPress، يكون هذا العنصر عبارة عن صورة رئيسية (hero photo)، أو صورة مميزة (featured image)، أو أول صورة كبيرة مضمنة — وليس نصًا. حتى يتم تنزيل الصورة وفك تشفيرها ورسمها، تبدو الصفحة للمستخدم ولـ Google وكأنها "لا تزال قيد التحميل".

هناك ثلاثة أشياء تزيد من قيمة LCP للصور، وأتحقق من جميعها في كل تدقيق:

• الملف كبير جدًا بالنسبة لمنطقة العرض (viewport) التي يملؤها.
• يتم تحميل صورة LCP بشكل كسول (lazy-loaded) عن طريق الخطأ، لذا تبدأ متأخرة.
• لا يوجد CDN، لذا ينتقل الملف من مصدر واحد في الجانب الآخر من العالم.

الخطأان الأخيران هما أخطاء في الإعدادات يمكنك إصلاحها في دقائق. أما الأول فهو عادة تحميل، ويتم تغطيته في دليل حجم ملفات الصور image file size guide.

ما هو تنسيق الصورة الأسرع لـ WordPress؟

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

أقوم بالضغط إلى WebP قبل الرفع وأترك لـ CDN مهمة التفاوض على AVIF مع المتصفحات التي تتعامل معه. بالنسبة للمفاضلات المتعلقة بالتنسيقات بتعمق أكبر، فإن JPG PNG WebP comparison هو المرجع الذي أرسله للناس.

كيف تقدم حجم الصورة المناسب لكل جهاز؟

هذا هو الشيء الذي يتجاهله الناس. يقوم WordPress بتوليد أحجام مصغرة ومتوسطة وكبيرة ووسيطة تلقائيًا ويُصدر srcset، ولكن فقط إذا استدعى القالب الدالة wp_get_attachment_image() بدلاً من ترميز علامة <img> بشكل ثابت. لا ينبغي للهاتف أبدًا تنزيل ملف 2560px.

يبدو ترميز HTML الذي يوفره 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"
  width="1536" height="800"
  alt="صورة البطل في واجهة المتجر بعرض كامل">

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

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

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

قاعدتان أطبقهما، لأنهما كلتاهما كلفاني LCP قبل أن أكتشفهما:

• لا تقم أبدًا بالتحميل الكسول لصورة LCP فوق الطية (above the fold).
• قم دائمًا بتعيين عرض وارتفاع صريح لمنع تحول التخطيط (layout shift).

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

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

يخدم الـ CDN كل صورة من أقرب نقطة طرفية للمستخدم ويُلغي الذهاب والعودة إلى المصدر الأصلي الخاص بك. بعد أن نقلت عميلاً واحداً من صور JPEG المستضافة في الأصل إلى Cloudflare مع تفعيل Polish، انخفض زمن TTFB للصور من 420ms إلى 60ms للزوار في سنغافورة والبرازيل — المنطقتين اللتين كان تقرير PageSpeed الخاص بهما أحمر.

ما أقوم بتكوينه على كل موقع:

• Cloudflare مع تفعيل Polish، وضغط بلا فقدان (lossless) بالإضافة إلى WebP.
• تخزين الكاش لكل شيء تحت المسار /wp-content/uploads/.
• ذاكرة تخزين مؤقت للمتصفح لمدة عام لأنواع MIME الخاصة بالصور.
• طبقة AVIF يتم التفاوض عليها بواسطة CDN وفوق WebP.

يعد التخزين المؤقت على الحافة (Edge caching) الأكثر أهمية لمتاجر WooCommerce الثقيلة بالصور والمدونات متعددة المؤلفين. الإعداد الكامل، بما في ذلك رؤوس التخزين المؤقت وقواعد التنظيف، موجود في دليل CDN للصور.

الخلاصة الرئيسية: مكدس السرعة المكون من أربع خطوات

إذا لم تتذكر أي شيء آخر، فتذكر هذه النقاط الأربع، لأنها المسؤولة عن انخفاض LCP الذي قمت بقياسه:

1. ضغط الصورة إلى WebP قبل التحميل، وبأقل من 200KB لكل صورة.
2. تحديد عرض العرض والسماح لـ srcset بتوفير الملف الصحيح.
3. التحميل الكسول للمحتوى أسفل الطية، وألا يكون أبداً صورة LCP.
4. تخزين الصور مؤقتًا عند حافة CDN بمدة صلاحية (TTL) تبلغ سنة واحدة.

إذا قمت بتطبيق هذه الخطوات، فسيتحول تقرير Core Web Vitals الخاص بك إلى اللون الأخضر. وتخطي خطوة srcset المتجاوب حتى لو كان ملف WebP مضغوطًا بشكل مثالي، سيظل يرسل ملف سطح مكتب إلى هاتف.

قائمة مراجعة السرعة قبل النشر

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

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

مصادر الصور

• مساحة عمل مشرقة بجهاز كمبيوتر مكتبي يُستخدم لإدارة موقع WordPress — photo by SHVETS Production on Pexels
• مكتب منزلي مريح بجهاز كمبيوتر محمول مفتوح على تدوينة في موقع WordPress — photo by Pixabay on Pexels
• جهاز MacBook يعرض صفحة بحث Google على طاولة خشبية في الهواء الطلق — photo by Pixabay on Pexels
• مُبرمج يكتب الأكواد على جهاز كمبيوتر محمول وشاشة في مكتب عصري — photo by Claudio Emanuel on Pexels