LCP چیست و چگونه Largest Contentful Paint را بهبود دهیم؟

این مطلب نسخه خلاصه‌شده‌ای از یکی از راهنماهای تخصصی وبتیک است.

فرض کنید PageSpeed Insights را باز کرده‌اید و مقابل Largest Contentful Paint عدد 4.3 ثانیه دیده می‌شود. اولین توصیه‌ای که معمولاً به ذهن می‌رسد این است: «تصویرها را فشرده کنیم.»

ممکن است تصویر اصلی صفحه اصلاً دیر دانلود نشود؛ مرورگر شاید دو ثانیه دیر متوجه وجود آن شود. ممکن است تصویر خیلی زود دانلود شده باشد اما JavaScript اجازه رندر شدن آن را ندهد. ممکن است پاسخ HTML از سرور دیر برسد و بخش بزرگی از زمان LCP قبل از آنکه مرورگر حتی تصویر را ببیند از دست رفته باشد.

LCP یا Largest Contentful Paint یکی از سه معیار اصلی Core Web Vitals است و مدت زمانی را اندازه گیری می‌کند که طول می‌کشد بزرگ‌ترین عنصر محتوایی قابل‌مشاهده در Viewport کاربر رندر شود. برای تجربه خوب، هدف این است که LCP در صدک 75 بازدیدهای واقعی، به تفکیک موبایل و دسکتاپ، حداکثر 2.5 ثانیه باشد.

در این مقاله فقط نمی‌خواهیم بدانیم LCP چیست. هدف این است که بتوانیم LCP ضعیف را تحلیل کنیم، LCP Element را پیدا کنیم، زمان آن را به بخش‌های قابل تشخیص بشکنیم و براساس علت واقعی، راه حل مناسبی انتخاب کنیم.

LCP چیست؟

مثلا در صفحه محصول ممکن است هدر در کمتر از یک ثانیه ظاهر شود، اما تصویر اصلی محصول سه ثانیه بعد نمایش داده شود. در یک Landing Page ممکن است ناوبری آماده باشد، اما Hero Image و تیتر اصلی با تاخیر ظاهر شوند.

LCP یکی از سه Core Web Vital فعلی در کنار INP و CLS است. LCP Loading عملکرد را می‌سنجد، INP پاسخ‌گویی را بررسی می‌کند و CLS روی ثبات بصری تمرکز دارد. اگر هنوز با رابطه این سه معیار آشنا نیستید، بهتر است LCP را در چارچوب کلی Core Web Vitals ببینید، نه به‌عنوان یک عدد مستقل.

LCP خوب چند ثانیه است؟

این ارزیابی برای تجربه واقعی کاربران بر اساس صدک 75 انجام می‌شود. یعنی برای قرار گرفتن در محدوده Good، هدف این نیست که فقط یک اجرای آزمایشگاهی زیر 2.5 ثانیه باشد؛ بخش بزرگی از کاربران واقعی باید چنین تجربه‌ای داشته باشند. موبایل و دسکتاپ نیز باید جداگانه بررسی شوند.

به‌عنوان مثال اگر صد کاربر واقعی صفحه را باز کرده باشند و LCP صدک 75 برابر 2.3 ثانیه باشد، وضعیت LCP در محدوده خوب قرار می‌گیرد. اگر همین مقدار 3.2 ثانیه باشد، صفحه در محدوده Needs Improvement قرار خواهد گرفت.

LCP دقیقا چه چیزی را اندازه گیری می‌کند؟

به همین دلیل ممکن است LCP یک صفحه 2 ثانیه باشد، در حالی که دانلود بعضی Resourceهای پایین صفحه تا ثانیه 6 ادامه داشته باشد.

چه عناصری می‌توانند LCP Element باشند؟

مثلا مرورگر ابتدا تیتر را رندر می‌کند و آن را بزرگ‌ترین عنصر می‌داند. کمی بعد Hero Image نمایش داده می‌شود و چون مساحت بیشتری دارد، تصویر تبدیل به LCP Candidate جدید می‌شود. web.dev نیز توضیح می‌دهد که مرورگر با رندر شدن عناصر بزرگ‌تر می‌تواند Entry جدیدی برای Largest Contentful Paint ثبت کند.

چگونه LCP Element صفحه را پیدا کنیم؟

در Lighthouse و ابزارهای عملکرد می‌توانید LCP و عنصر مرتبط با آن را مشاهده کنید. Chrome DevTools نیز در عملکرد Panel اطلاعات مربوط به Core Web Vitals و LCP را نشان می‌دهد و در Insights امکان بررسی Breakdown و علت‌های احتمالی تاخیر را فراهم کرده است.

چهار بخش اصلی LCP را بشناسید

اگر LCP Element برای رندر شدن منبع جداگانه‌ای نیاز نداشته باشد، مثلا یک بلوک متن با فونت سیستمی باشد، بخش‌های مربوط به منبع می‌توانند صفر باشند. این مدل چهار بخشی در راهنمای web.dev و ابزارهای فعلی Chrome برای تشخیص علت LCP استفاده می‌شود.

TTFB؛ صفحه از همان ابتدا چقدر دیر شروع می‌شود؟

فرض کنید هدف LCP شما 2.5 ثانیه است و HTML بعد از 1.6 ثانیه به مرورگر می‌رسد. قبل از اینکه مرورگر تصویر Hero را پیدا کند، بخش بزرگی از بودجه زمانی خود را مصرف کرده‌اید.

اما کاهش TTFB به تنهایی نیز تضمین نمی‌کند LCP خوب شود. ممکن است HTML خیلی سریع برسد ولی تصویر LCP دو ثانیه بعد کشف شود.

منبع Load Delay؛ مرورگر چه زمانی منبع اصلی را پیدا می‌کند؟

منبع Load Delay فاصله بین دریافت HTML و زمانی است که مرورگر دانلود منبع مربوط به LCP را شروع می‌کند.

این یعنی گاهی بهترین بهینه‌سازی برای تصویر LCP کم کردن حجم آن نیست؛ زودتر قابل کشف کردن آن است.

منبع Load Duration؛ خود فایل چقدر دیر دانلود می‌شود؟

اگر LCP یک تصویر باشد، این بخش می‌تواند تحت تأثیر حجم فایل، ابعاد تصویر، فرمت، سرعت شبکه، CDN و Cache قرار بگیرد.

Element رندر Delay؛ فایل آمده، چرا هنوز چیزی دیده نمی‌شود؟

ممکن است تصویر Hero در 1.4 ثانیه کاملاً دانلود شده باشد، اما تا 3 ثانیه روی صفحه دیده نشود.

2. LCP منبع را از HTML قابل کشف کنید

اگر LCP تصویر است، یکی از بهترین حالت‌ها این است که URL تصویر در Markup اولیه وجود داشته باشد.

4. در صورت نیاز از fetchpriority=”high” استفاده کنید

web.dev استفاده از fetchpriority="high" را برای تصاویر مهمی مانند LCP Image یکی از کاربردهای اصلی Fetch Priority معرفی می‌کند.

5. چه زمانی از preload استفاده کنیم؟

اگر ده‌ها منبع را Preload کنید، مرورگر مجبور می‌شود منابع زیادی را هم‌زمان با منبع اصلی Fetch کند. نتیجه ممکن است دقیقا خلاف چیزی باشد که می‌خواستید.

9. Client-side رندرینگ را با دقت بررسی کنید

اگر HTML اولیه تقریبا خالی باشد و مرورگر برای ساخت Hero Section مجبور باشد Bundle JavaScript را دانلود، Parse و Execute کند، LCP منبع ممکن است بسیار دیر کشف شود.

Field LCP و Lab LCP چه تفاوتی دارند؟

فرض کنید Lighthouse روی یک اجرای مشخص LCP برابر 1.9 ثانیه نشان می‌دهد، اما داده کاربران واقعی مقدار 3.1 ثانیه دارد.

آیا CDN باعث بهبود LCP می‌شود؟

اما اگر مشکل اصلی این باشد که Hero Image دو ثانیه دیر کشف می‌شود، CDN فقط مدت دانلود بعد از Discovery را کاهش می‌دهد.

LCP چیست؟

LCP یا Largest Contentful Paint یکی از معیارهای Core Web Vitals است و مدت زمانی را اندازه گیری می‌کند که طول می‌کشد بزرگ‌ترین عنصر محتوایی قابل‌مشاهده در Viewport رندر شود. هدف توصیه شده برای تجربه خوب، LCP برابر 2.5 ثانیه یا کمتر در صدک 75 است.

چگونه LCP را کاهش دهیم؟

ابتدا LCP را به چهار بخش TTFB، منبع Load Delay، منبع Load Duration و Element رندر Delay تقسیم کنید. سپس بخشی را که بیشترین زمان غیرضروری را مصرف می‌کند هدف قرار دهید. راه حل بسته به گلوگاه می‌تواند بهبود سرور، Discovery زودتر منبع، حذف Lazy Load از LCP Image، Image بهینه‌سازی یا کاهش رندر Delay باشد.

LCP Element چیست؟

LCP Element بزرگ‌ترین عنصر محتوایی است که در Viewport رندر شده و برای محاسبه Largest Contentful Paint در نظر گرفته می‌شود. این عنصر می‌تواند تصویر، Video Poster، CSS Background Image واجد شرایط یا یک بلوک متن باشد.

آیا تصویر همیشه LCP Element است؟

خیر. در بسیاری از صفحات تصویر Hero یا Product Image به LCP تبدیل می‌شود، اما بلوک متن، عنوان بزرگ، Video Poster یا Background Image نیز می‌توانند LCP باشند.

آیا بارگذاری تنبل باعث افزایش LCP می‌شود؟

اگر روی تصویر داخل Viewport و مخصوصا LCP Image استفاده شود، می‌تواند شروع دانلود را عقب بیندازد و LCP را بدتر کند. بارگذاری تنبل معمولاً برای تصاویر خارج از Viewport مناسب است.

آیا fetchpriority=”high” باعث بهبود LCP می‌شود؟

اگر LCP منبع زود کشف می‌شود اما مرورگر Priority کافی به آن نمی‌دهد، fetchpriority="high" می‌تواند مفید باشد. با این حال نباید تعداد زیادی منبع را High Priority کرد.

آیا Preload همیشه برای LCP مناسب است؟

خیر. Preload بیشتر زمانی ارزش دارد که منبع مهم دیر کشف شود، مثلا LCP Image داخل CSS Background باشد. Preload بی دلیل می‌تواند با Resourceهای حیاتی دیگر رقابت ایجاد کند.

تفاوت LCP و FCP چیست؟

FCP زمان نمایش اولین محتوای قابل‌مشاهده را اندازه گیری می‌کند، اما LCP روی بزرگ‌ترین محتوای قابل‌مشاهده تمرکز دارد. به همین دلیل FCP ممکن است خوب باشد و LCP همچنان ضعیف بماند.

مطالعه نسخه کامل

برای مطالعه توضیحات کامل، مثال‌ها و جزئیات بیشتر، LCP چیست و چگونه Largest Contentful Paint را بهبود دهیم؟ را در وبتیک بخوانید.