لو موقعك بياخد 4 ثواني علشان يظهر العنصر الرئيسي قدام الزائر، Google بيعتبر ده تجربة سيئة وبيخفّض ترتيبك في البحث. اللي قدامك هنا 4 خطوات مثبتة بأرقام لتنزيل الـ LCP لتحت 1.8 ثانية، من غير ما تغيّر الـ framework أو تعيد كتابة الموقع.
تحسين LCP: الخطوات اللي بتشتغل فعلاً
المشكلة باختصار
الـ Largest Contentful Paint هو الزمن اللي بياخده أكبر عنصر مرئي في الـ viewport علشان يتعرض. غالبًا بيكون صورة hero، أو heading كبير، أو فيديو. Google بيعتبر LCP أحد الـ Core Web Vitals الثلاثة، وبيستخدمه عامل ترتيب فعلي في نتائج البحث منذ 2021.
الحد المقبول من Google: أقل من 2.5 ثانية لـ 75% من زيارات الموقع. أكتر من 4 ثواني = "ضعيف" رسميًا، وده اللي بيخلّي الزائر يقفل التاب قبل ما يخلّص قراءة العنوان.
إيه هو الـ LCP بالظبط — مثال للمبتدئين
تخيّل إن صفحتك ظهرت قدام الزائر، لكن المساحة الرئيسية في النص لسه فاضية. الزائر شايف الـ navbar، شايف الـ background، لكن صورة المنتج الكبيرة في النص لسه بتحمّل. اللحظة اللي الصورة الكبيرة دي تظهر فيها = ده الـ LCP بتاعك.
المتصفح بيقيس ده بالمللي ثانية من لحظة بداية تحميل الصفحة. لو طالك 4200ms = LCP سيء. لو طالك 1800ms = LCP ممتاز.
بشكل علمي ودقيق: الـ LCP هو وقت render أكبر عنصر من نوع img أو video أو block-level text داخل الـ initial viewport، بيتحسب من lifecycle event بإسم largest-contentful-paint في الـ PerformanceObserver API.
الخطوة 1: قِس قبل ما تعدّل
أكبر غلطة بيعملها المطورين هي إنهم يبدأوا يعدّلوا قبل ما يقيسوا. بدون رقم بداية، مش هتعرف لو التعديل نفع ولا لأ. استخدم اتنين أدوات بس:
- PageSpeed Insights — بيديك LCP حقيقي من بيانات Chrome User Experience Report، يعني من زوار حقيقيين مش من جهازك.
- Lighthouse CLI — بيشتغل local وبيديك تفاصيل العنصر اللي بيسبّب الـ LCP.
# تثبيت Lighthouse CLI
npm install -g lighthouse
# تشغيل audit مع تركيز على LCP
lighthouse https://yoursite.com \
--only-categories=performance \
--output=html \
--output-path=./report.html \
--throttling-method=simulate
# هيظهرلك في الـ report:
# Largest Contentful Paint: 4.2 s
# LCP element: 
لو الـ Lighthouse اداك LCP عنصره صورة، عرفت إنك محتاج تركّز على تحسين الصور. لو العنصر heading نصي، هتركّز على font loading وserver response time. الفرق ده بيوفّر عليك ساعات شغل في الاتجاه الغلط.
الخطوة 2: حسّن العنصر الرئيسي للـ LCP
لو الـ LCP صورة (الحالة الأشيع، حوالي 70% من المواقع حسب Web Almanac 2023)، فيه 3 إجراءات بترتيب الأولوية:
