یک راهنمای گام به گام در مورد چگونگی تجزیه LCP و شناسایی حوزههای کلیدی برای بهبود.
منتشر شده: ۳۰ آوریل ۲۰۲۰، آخرین بهروزرسانی: ۳۱ مارس ۲۰۲۵
بزرگترین رنگ محتوا (LCP) یکی از سه معیار Core Web Vitals است و نشان میدهد که محتوای اصلی یک صفحه وب با چه سرعتی بارگذاری میشود. به طور خاص، LCP زمان را از زمانی که کاربر بارگذاری صفحه را شروع میکند تا زمانی که بزرگترین تصویر یا بلوک متن در نمای دید رندر میشود، اندازهگیری میکند.
برای ارائه یک تجربه کاربری خوب، سایتها باید تلاش کنند تا حداقل در ۷۵٪ از بازدیدهای صفحه، LCP برابر با ۲.۵ ثانیه یا کمتر داشته باشند.
عوامل مختلفی میتوانند بر سرعت بارگذاری و رندر یک صفحه وب توسط مرورگر تأثیر بگذارند و تأخیر در هر یک از آنها میتواند تأثیر قابل توجهی بر LCP داشته باشد.
به ندرت پیش میآید که یک اصلاح سریع در یک بخش از صفحه، منجر به بهبود قابل توجهی در LCP شود. برای بهبود LCP، باید کل فرآیند بارگذاری را بررسی کنید و مطمئن شوید که هر مرحله در طول مسیر بهینه شده است.
درک معیار LCP شما
قبل از بهینهسازی LCP، توسعهدهندگان باید بررسی کنند که آیا اصلاً مشکلی در LCP دارند یا خیر و میزان چنین مشکلی چقدر است.
LCP را میتوان با ابزارهای مختلفی اندازهگیری کرد و همه این ابزارها LCP را به یک شکل اندازهگیری نمیکنند. برای درک LCP کاربران واقعی، باید به آنچه کاربران واقعی تجربه میکنند نگاه کنیم، نه آنچه یک ابزار آزمایشگاهی مانند Lighthouse یا آزمایش محلی نشان میدهد. این ابزارهای آزمایشگاهی میتوانند اطلاعات زیادی برای توضیح و کمک به شما در بهبود LCP ارائه دهند، اما توجه داشته باشید که آزمایشهای آزمایشگاهی به تنهایی ممکن است کاملاً نمایانگر آنچه کاربران واقعی شما تجربه میکنند، نباشند.
دادههای LCP مبتنی بر کاربران واقعی را میتوان از ابزارهای نظارت بر کاربر واقعی (RUM) که در یک سایت نصب شدهاند یا با استفاده از گزارش تجربه کاربری کروم (CrUX) که دادههای ناشناس را از کاربران واقعی کروم برای میلیونها وبسایت جمعآوری میکند، به دست آورد.
استفاده از دادههای Chrome DevTools CrUX LCP
پنل عملکرد Chrome DevTools، تجربه LCP محلی شما را در کنار CrUX LCP صفحه یا مبدا در نمای معیارهای زنده و در Insights یک ردیابی عملکرد شامل جزئیات زمانبندیهای زیربخش LCP (که به زودی توضیح خواهیم داد) نشان میدهد.
با لایهبندی دادههای میدانی در پنل Performance، میتوانید ارزیابی کنید که آیا یک صفحه دارای مشکلات LCP کاربر واقعی است یا خیر و تنظیمات محیط محلی خود را برای بازتولید و اشکالزدایی بهتر آن مشکلات تطبیق دهید.
استفاده از دادههای PageSpeed Insights CrUX LCP
PageSpeed Insights دسترسی به دادههای CrUX را در بخش بالایی با عنوان « کشف آنچه کاربران واقعی شما تجربه میکنند» فراهم میکند. دادههای آزمایشگاهی دقیقتر در بخش پایینی با عنوان « تشخیص مشکلات عملکرد» موجود است. اگر دادههای CrUX برای وبسایت شما در دسترس است، همیشه ابتدا روی دادههای واقعی کاربر تمرکز کنید.
PageSpeed Insights حداکثر چهار داده CrUX مختلف را نشان میدهد:
- داده تلفن همراه برای این آدرس اینترنتی
- دادههای دسکتاپ برای این آدرس اینترنتی
- داده موبایل برای کل Origin
- دادههای دسکتاپ برای کل Origin
میتوانید این موارد را در کنترلهای بالا و سمت راست بالای این بخش تغییر دهید. اگر یک URL دادههای کافی برای نمایش در سطح URL نداشته باشد، اما دادههایی برای مبدا داشته باشد، PageSpeed Insights همیشه دادههای مبدا را نشان میدهد.
LCP برای کل مبدا ممکن است با LCP یک صفحه خاص بسیار متفاوت باشد، بسته به اینکه LCP در آن صفحه در مقایسه با سایر صفحات در آن مبدا چگونه بارگذاری میشود. همچنین میتواند تحت تأثیر نحوه پیمایش بازدیدکنندگان به این صفحات قرار گیرد. صفحات اصلی معمولاً توسط کاربران جدید بازدید میشوند و بنابراین اغلب ممکن است "سرد" بارگذاری شوند، بدون هیچ محتوای ذخیره شدهای و بنابراین اغلب کندترین صفحات در یک وبسایت هستند.
نگاه کردن به چهار دسته مختلف دادههای CrUX میتواند به شما کمک کند تا بفهمید که آیا یک مشکل LCP مختص این صفحه است یا یک مشکل عمومیتر در کل سایت. به طور مشابه، میتواند نشان دهد که کدام نوع دستگاهها دارای مشکلات LCP هستند.
استفاده از معیارهای تکمیلی PageSpeed Insights CrUX
کسانی که به دنبال بهینهسازی LCP هستند، باید از زمانبندیهای First Contentful Paint (FCP) و Time to First Byte (TTFB) نیز استفاده کنند، که معیارهای تشخیصی خوبی هستند و میتوانند بینشهای ارزشمندی در مورد LCP ارائه دهند.
TTFB زمانی است که بازدیدکننده شروع به پیمایش به یک صفحه میکند (برای مثال، کلیک روی یک لینک)، تا زمانی که اولین بایتهای سند HTML دریافت میشوند. TTFB بالا میتواند دستیابی به LCP 2.5 ثانیهای را چالش برانگیز یا حتی غیرممکن کند.
TTFB بالا میتواند به دلیل ریدایرکتهای متعدد سرور، فاصله زیاد بازدیدکنندگان از نزدیکترین سرور سایت، وضعیت ضعیف شبکه بازدیدکنندگان یا عدم توانایی در استفاده از محتوای ذخیره شده به دلیل پارامترهای کوئری باشد.
وقتی یک صفحه شروع به رندر شدن میکند، ممکن است یک رنگ اولیه (مثلاً رنگ پسزمینه) وجود داشته باشد و به دنبال آن محتوایی ظاهر شود (مثلاً سربرگ سایت). ظاهر محتوای اولیه با FCP اندازهگیری میشود. اختلاف بین FCP و سایر معیارها میتواند بسیار گویا باشد.
اختلاف زیاد بین TTFB و FCP میتواند نشان دهد که مرورگر نیاز به دانلود فایلهای مسدودکننده رندر زیادی دارد. همچنین میتواند نشانهای باشد که برای رندر کردن هرگونه محتوای معنادار، باید کار زیادی انجام دهد - نشانه کلاسیک سایتی که به شدت به رندر سمت کلاینت متکی است.
اختلاف زیاد بین FCP و LCP نشان میدهد که منبع LCP یا بلافاصله برای اولویتبندی مرورگر در دسترس نیست (برای مثال، متن یا تصاویری که توسط جاوا اسکریپت مدیریت میشوند به جای اینکه در HTML اولیه موجود باشند)، یا اینکه مرورگر قبل از اینکه بتواند محتوای LCP را نمایش دهد، در حال تکمیل کارهای دیگری است.
استفاده از دادههای PageSpeed Insights Lighthouse
بخش Lighthouse از PageSpeed Insights راهنماییهایی برای بهبود LCP ارائه میدهد، اما ابتدا باید بررسی کنید که آیا LCP ارائه شده به طور کلی با دادههای واقعی کاربر ارائه شده توسط CrUX مطابقت دارد یا خیر. اگر Lighthouse و CrUX با هم اختلاف نظر داشته باشند، احتمالاً CrUX تصویر دقیقتری از تجربه کاربری شما ارائه میدهد. قبل از اقدام، مطمئن شوید که دادههای CrUX شما برای صفحه شما است، نه منبع کامل آن.
اگر هم Lighthouse و هم CrUX مقادیر LCP را نشان دهند که نیاز به بهبود دارند، بخش Lighthouse میتواند راهنماییهای ارزشمندی در مورد راههای بهبود LCP ارائه دهد. از فیلتر LCP برای نمایش فقط ممیزیهای مربوط به LCP به شرح زیر استفاده کنید:
علاوه بر فرصتهای بهبود، اطلاعات