لماذا يكون LCP لديك بطيئًا
LCP سباق بين طلب المتصفح لصفحتك واكتمال رسم ذلك العنصر الأكبر الواحد. يكاد كل بطء في LCP يعود إلى واحد من أربعة أمور تقف في طريق ذلك السباق:
- بطء الوقت حتى أول بايت. إذا استغرق الخادم ثانيتين فقط للاستجابة، لا يمكن لـ LCP أن يبدأ عدّاده قبل ذلك - وكل ما بعده يرث التأخير.
- صورة رئيسية غير محسّنة. ملف PNG بحجم 4 ميجابايت يُقدَّم بحجم العرض بدلاً من صيغة مضغوطة ومناسبة الحجم هو السبب الأكثر شيوعًا الذي نراه على الإطلاق.
- CSS أو JS يحجب العرض في
<head>. لا يستطيع المتصفح رسم أي شيء، بما في ذلك عنصر LCP، حتى ينتهي من تحميل وتحليل الموارد الحاجبة للعرض. - اكتشاف متأخر للمورد. إذا كانت صورة LCP مُشار إليها فقط داخل
background-imageفي CSS أو تُحمَّل عبر JavaScript بعد الترطيب (hydration)، فإن المتصفح لا يعرف حتى أن عليه بدء جلبها إلا في وقت متأخر جدًا عما كان ممكنًا.
كيفية تحديد عنصر LCP لديك
تخمين العنصر الذي يمثل LCP لديك غير موثوق - فهو يتغير حسب حجم إطار العرض والمحتوى. يُشغّل تدقيق الموقع في Scanverra تمريرة Lighthouse حقيقية على كل من ملف تعريف سطح المكتب وإطار عرض جوال بعرض 375 بكسل، ويُبلّغ عن قيمة LCP وتوقيته مباشرة من ذلك التشغيل، لا كتقدير - بحيث تنظر إلى المقياس نفسه الذي ستعكسه بيانات Google الميدانية في النهاية، لا بديلًا عنه.
يمكنك أيضًا فتح لوح Performance في Chrome DevTools، وتسجيل تحميل صفحة، والبحث عن علامة "LCP" في مسار التوقيتات - فهي تُبرز العنصر الدقيق في الصفحة المعروضة عند تمرير المؤشر فوقها.
كيفية إصلاحه
1. حمّل المورد الفعلي لـ LCP مسبقًا (preload)
إذا كان بإمكان المتصفح اكتشاف صورتك الرئيسية فقط بعد تحليل CSS أو تشغيل JS، أخبره عن الصورة مسبقًا بدلاً من ذلك:
1export default function RootLayout() {
2 return (
3 <html lang="en">
4 <head>
5 <link
6 rel="preload"
7 as="image"
8 href="/hero.webp"
9 fetchPriority="high"
10 />
11 </head>
12 <body>{/* ... */}</body>
13 </html>
14 );
15}2. حدد صورة LCP كأولوية عالية
إذا كنت تعرض الصورة الرئيسية عبر وسم صورة على مستوى المكوّن، حدّدها كمورد ذي أولوية حتى لا يُحمَّل بشكل كسول (lazy-load) وتتنافس أولاً على النطاق الترددي:
1<img
2 src="/hero.webp"
3 alt="Product dashboard overview"
4 width={1200}
5 height={630}
6 fetchPriority="high"
7 loading="eager"
8/>3. اضغط الصورة نفسها وحدد حجمها بشكل صحيح
قدّم AVIF أو WebP بدلاً من PNG/JPEG حيثما يدعمها المتصفح، ولا تُرسل أبدًا صورة أكبر من أكبر حجم ستُعرض به فعليًا - فصورة مصدرية بعرض 3000 بكسل مُصغّرة عبر CSS لا تزال تكلّف التحميل الكامل.
4. تخلّص من TTFB أولًا
التحميل المسبق لصورة بطيئة التحميل لا يُصلح خادمًا بطيئًا. إذا كان TTFB جزءًا كبيرًا من ميزانية LCP لديك، أصلح ذلك أولًا - راجع دليل TTFB أدناه - إذ إن كل تحسين آخر لـ LCP محكوم بمدى تأخر بدء المتصفح.
5. أزل الموارد الحاجبة للعرض من المسار الحرج
أجّل أو حمّل بشكل غير متزامن جافاسكريبت غير الحرجة، وضمّن كمية صغيرة من CSS اللازمة للمحتوى الظاهر أعلى الصفحة، وحمّل باقي ورقة الأنماط دون حجب أول رسم.
كيف تكتشف Scanverra مشاكل LCP
تُشغّل فحوصات الأداء في Scanverra تدقيق Lighthouse حقيقي على عنوان URL الحي لديك على كل من سطح المكتب وإطار عرض جوال بعرض 375 بكسل، وتُبلّغ عن توقيت LCP الفعلي من ذلك التشغيل إلى جانب مقاييس Core Web Vitals الأخرى - وهذا ليس تقديرًا اصطناعيًا ولا رقمًا مخزّنًا من طرف ثالث.