تحسين LCP وCLS في ووردبريس بدون تغيير شكل الموقع

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

الخطوة الأولى: اعرف ما هو عنصر LCP فعلًا

في تقرير PageSpeed Insights افتح بند «Largest Contentful Paint element»؛ سيعرض العنصر نفسه، ومعه تقسيم الوقت إلى أربعة أجزاء. وفي Chrome افتح أدوات المطور ثم تبويب Performance وسجّل تحميل الصفحة، وستجد علامة LCP على الخط الزمني تشير إلى العنصر.

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

إصلاح LCP خطوة بخطوة

1. 1

   تأكد أن الصورة ليست lazy

   منذ ووردبريس 6.3 تضيف النواة fetchpriority="high" تلقائيًا للصورة التي تتوقع أنها LCP، ولا تضيف التحميل الكسول لأول ثلاث صور في المحتوى. لكن القوالب وبعض إضافات التحسين تتجاوز ذلك وتضيف loading="lazy" لكل الصور. افحص مصدر الصفحة وابحث عن صورة البانر.

2. 2

   اجعل خلفيات CSS قابلة للاكتشاف

   صورة خلفية داخل ملف CSS أو تُضاف بسكربت سلايدر لا يراها المتصفح وهو يقرأ HTML. الحل إما تحويلها إلى وسم img في القالب، أو تحميلها مسبقًا من رأس الصفحة كما في المثال التالي.

   phpنسخ

   // functions.php في قالب فرعي: تحميل مسبق لبانر الرئيسية فقط
   add_action( 'wp_head', function () {
   	if ( ! is_front_page() ) {
   		return;
   	}
   	$id     = 123; // رقم صورة البانر في مكتبة الوسائط
   	$src    = wp_get_attachment_image_url( $id, 'full' );
   	$srcset = wp_get_attachment_image_srcset( $id, 'full' );
   	printf(
   		'<link rel="preload" as="image" href="%s" imagesrcset="%s" imagesizes="100vw" fetchpriority="high">',
   		esc_url( $src ),
   		esc_attr( $srcset )
   	);
   }, 1 );

3. 3

   أرسل مقاسًا يناسب الشاشة

   ووردبريس يولّد مقاسات متعددة لكل صورة ويكتب srcset تلقائيًا للصور المدرجة من المحرر. المشكلة تظهر عندما يطبع القالب رابط المقاس الكامل مباشرة. استخدم wp_get_attachment_image() في القالب بدل كتابة الرابط يدويًا، وحوّل البانر إلى WebP.

4. 4

   أزل حركة الظهور عن الشاشة الأولى

   حركات fade-in في Elementor وأمثاله تجعل العنصر شفافًا حتى يعمل السكربت، فيتأخر الرسم رغم أن الصورة وصلت. أوقف حركة الدخول لأقسام الشاشة الأولى فقط، واتركها لما تحتها.

5. 5

   اخفض زمن أول بايت

   كاش الصفحات هو الفرق الأكبر هنا. إذا كنت على هوستنجر فراجع إعداد Hostinger CDN مع LiteSpeed Cache، وفي أي استضافة راجع أنواع الكاش في ووردبريس.

إصلاح CLS: احجز المكان قبل أن يصل المحتوى

• الصور: ووردبريس يضيف width وheight للصور المدرجة من المحرر، فيحسب المتصفح المساحة قبل التحميل. الخطر في صور القالب والشعارات وصور الإضافات المكتوبة يدويًا بلا أبعاد.
• الفيديو والخرائط: إطارات iframe بلا ارتفاع ثابت تقفز عند التحميل. أعطها نسبة عرض في CSS.
• الخط العربي: عندما يظهر النص بخط النظام ثم يتبدل إلى Cairo أو Tajawal، تتغير أطوال الأسطر فتقفز الفقرات. استضف الخط محليًا وحمّل ملف الوزن المستخدم في الشاشة الأولى مسبقًا.
• الشرائط والإشعارات: شريط «شحن مجاني» أو إشعار كوكيز يُحقن أعلى الصفحة يدفع كل شيء للأسفل. اجعله fixed أو احجز له ارتفاعه في CSS من البداية.

/* حجز مساحة للفيديو المضمَّن والبانر قبل تحميلهما */
.entry-content iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.home-hero { aspect-ratio: 1200 / 500; }
.promo-bar { min-height: 44px; }

كيف تتأكد أن التحسين لم يغيّر الشكل؟

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

أسئلة حول LCP وCLS في ووردبريس

روابط مفيدة

• شرح PageSpeed Insights وأوزان درجة الأداء
• تحسين الصور: WebP والأبعاد الصحيحة

المراجع

Optimize LCP وWeb Vitals على web.dev، وتحسينات الصور في ووردبريس 6.3. آخر مراجعة لهذه المصادر: 18 أكتوبر 2026.