لـتحسين LCP في ووردبريس حدد أولا عنصر Largest Contentful Paint على الموبايل، ثم قلل زمن استجابة الخادم بكاش الصفحات وشبكة CDN، وتأكد أن صورة LCP تكتشف مبكرا ولا تحمل تحميلا كسولا، وبمقاس صحيح وصيغة WebP أو AVIF مع fetchpriority="high"، واحذف CSS والخطوط والسكريبتات التي تحجب العرض قبلها.
هذا الدليل يدعم دليل Core Web Vitals الذي يشرح المؤشرات الثلاثة بشكل عام.
كيف أحدد عنصر LCP؟
شغل PageSpeed Insights على الرابط وافتح تشخيص “Largest Contentful Paint element” ليظهر لك العنصر بالضبط. وفي أدوات مطوري كروم سجل التحميل في لوحة Performance وابحث عن علامة LCP. افحص الموبايل والكمبيوتر كلا على حدة، لأن العنصر يختلف غالبا بين التصميمين.
عناصر LCP الشائعة في مواقع ووردبريس:
- صورة خلفية الواجهة أو السلايدر.
- نص العنوان الرئيسي (عندما لا توجد صورة في الواجهة).
- الصورة البارزة في المقالات.
- أول صورة منتج في صفحات المنتجات.
افهم الأجزاء الأربعة لـ LCP
تقسم جوجل LCP إلى أربعة أجزاء يعرضها Lighthouse وأدوات المطورين:
- زمن أول بايت TTFB: المدة حتى يبدأ وصول HTML.
- تأخر تحميل المورد: الفجوة بين TTFB وبدء المتصفح في تحميل صورة LCP.
- مدة تحميل المورد: الوقت الذي تستغرقه الصورة في التنزيل.
- تأخر عرض العنصر: الوقت بعد تحميل الصورة حتى رسمها على الشاشة.
أصلح الجزء الأكبر أولا، فتصغير الصورة لن يفيد إذا كانت المشكلة في TTFB.
الخطوة 1: تقليل TTFB
- كاش الصفحات. قدم HTML مخزنا بدلا من تشغيل PHP واستعلامات قاعدة البيانات لكل زائر، باستخدام كاش الاستضافة أو إضافة كاش مضبوطة جيدا.
- كاش الكائنات (Redis أو Memcached) إذا دعمته الاستضافة، خاصة لووكومرس والمستخدمين المسجلين.
- CDN مع كاش HTML. تخزين HTML على الحافة يفيد الزوار البعيدين عن خادمك، مع استثناء صفحات السلة والدفع والحساب.
- إصدار PHP والموارد. إصدار PHP حديث مدعوم وعدد كاف من عمليات PHP مهم للمواقع المزدحمة.
- الإضافات البطيئة. استخدم Query Monitor لاكتشاف الاستعلامات البطيئة والطلبات الخارجية عند تحميل الصفحة.
الخطوة 2: إلغاء تأخر تحميل المورد
يجب أن يبدأ المتصفح تحميل صورة LCP في أسرع وقت.
- اجعل صورة الواجهة وسم
<img>حقيقيا في HTML بدلا من خلفية CSS أو سلايدر يعمل بجافاسكريبت. - لا تحملها تحميلا كسولا. يضيف ووردبريس
loading="lazy"لكثير من الصور تلقائيا ويحاول استثناء أول صورة، لكن القوالب والإضافات قد تلغي ذلك، فافحص HTML. - أضف
fetchpriority="high":
<img src="/wp-content/uploads/hero-1200.avif"
srcset="/wp-content/uploads/hero-800.avif 800w, /wp-content/uploads/hero-1200.avif 1200w"
sizes="(max-width: 768px) 100vw, 1200px"
width="1200" height="675"
fetchpriority="high" alt="Product showcase" />
- إذا كان لا بد أن تكون الصورة خلفية CSS فحملها مسبقا:
<link rel="preload" as="image" href="/hero-1200.avif" fetchpriority="high">
الخطوة 3: تقليل مدة التحميل
- قدم المقاس الصحيح عبر
srcset، فالهاتف لا يجب أن ينزل صورة بعرض 2560 بكسل. - استخدم AVIF أو WebP، راجع تحويل الصور إلى WebP وAVIF في ووردبريس.
- اضغط الصور بشكل معقول، فصور الواجهة نادرا ما تحتاج أقصى جودة.
- قدمها من CDN قريبة من الزوار.
الخطوة 4: تقليل تأخر العرض
حتى بعد وصول الصورة قد ينتظر المتصفح:
- CSS الذي يحجب العرض. ضمن CSS الحرج وحمل الباقي بشكل غير متزامن، أو احذف CSS غير المستخدم. كثير من إضافات التحسين تفعل ذلك، فاختبر النتيجة بصريا.
- خطوط الويب عندما يكون عنصر LCP نصا. استخدم
font-display: swap، وحمل مسبقا الخط أو الخطين المستخدمين أعلى الصفحة، وفكر في استضافة الخطوط على موقعك. - جافاسكريبت يخفي المحتوى حتى يعمل: السلايدر، مكتبات الحركة التي تبدأ العناصر بـ
opacity: 0، وسكريبتات اختبار A/B. إذا كانت الواجهة تظهر بتأثير جافاسكريبت فإن LCP ينتظر هذا السكريبت.
الخطوة 5: ضبط ترويسات الكاش
مدد كاش طويلة للملفات الثابتة (CSS وJS والخطوط والصور) تفيد الزيارات المتكررة. والتعارض الشائع: الخادم يرسل ترويسات Cache-Control طويلة، لكن إعداد CDN يستبدلها بمدة أقصر للمتصفح. في Cloudflare يمكن ضبط Browser Cache TTL على احترام الترويسات الموجودة لتطبق قواعد خادمك. وأضف رقم إصدار لروابط الملفات (مثل style.css?ver=1.2.0) حتى لا يقدم الكاش الطويل ملفات قديمة بعد التحديث.
الخطوة 6: التحقق
- أعد تشغيل PageSpeed Insights على الموبايل عدة مرات، فنتائج المختبر تتغير بين المحاولات.
- راجع تقسيم LCP مرة أخرى لترى أي جزء ما زال الأكبر.
- انتظر تحديث البيانات الميدانية، فهي نافذة متحركة مدتها 28 يوما.
قائمة تحسين LCP في ووردبريس
- تحديد عنصر LCP على الموبايل والكمبيوتر
- كاش الصفحات مفعل وHTML يقدم بسرعة
- CDN مضبوطة مع استثناء السلة والدفع
- صورة الواجهة وسم
<img>بدون تحميل كسول ومعfetchpriority="high" - مقاس صحيح مع
srcsetوصيغة حديثة - CSS الحرج مضمن أو CSS غير المستخدم مقلل
- خطوط أعلى الصفحة محملة مسبقا مع
font-display: swap - لا ظهور تدريجي معتمد على جافاسكريبت لعنصر LCP
- ترويسات الكاش متسقة بين الخادم وCDN
أخطاء شائعة
- سلايدر ثقيل في الواجهة، بينما الصورة الواحدة المحسنة تفوز دائما تقريبا.
- التحميل المسبق لصور كثيرة فيفقد تلميح الأولوية معناه.
- الاختبار وأنت مسجل الدخول حيث يتم تجاوز الكاش.
- إصلاح نسخة الكمبيوتر ونسيان أن صورة واجهة الموبايل مختلفة.
تريد أن أراجع LCP في موقعك؟ أرسل لي الرابط. وإذا كانت مشكلتك في الاستجابة لا التحميل فاقرأ كيف تقلل Total Blocking Time.
الأسئلة الشائعة
ما هي نتيجة LCP الجيدة؟
LCP الجيد هو 2.5 ثانية أو أقل عند الشريحة 75 من مرات التحميل الحقيقية، وما فوق 4 ثوان يعتبر ضعيفا.
لماذا LCP أسوأ على الموبايل؟
اختبارات الموبايل تحاكي معالجات وشبكات أبطأ، وتصميم الموبايل يستخدم غالبا عنصر LCP مختلفا، والصور الكبيرة والسكريبتات الثقيلة تضر أكثر على الهواتف.
هل أحمل صورة الواجهة مسبقا preload؟
إذا اكتشف المتصفح الصورة متأخرا، مثل صورة خلفية في CSS، فالتحميل المسبق يفيد. أما وسم img عادي في HTML فيكفيه غالبا fetchpriority=high.
هل تحسن CDN مؤشر LCP؟
يمكن لشبكة CDN تقليل زمن أول بايت وزمن تحميل الملفات للزوار البعيدين عن خادمك، خاصة عندما تخزن HTML مع الملفات الثابتة.
