بزرگترین رنگ محتوایی (LCP)

Philip Walton

Barry Pollard

Largest Contentful Paint (LCP) معیاری با ثبات Core Web Vital برای اندازه گیری سرعت بار درک شده است. نقطه ای را در جدول زمانی بارگذاری صفحه مشخص می کند که احتمالاً محتوای اصلی صفحه بارگیری شده است. یک LCP سریع به کاربر اطمینان می دهد که صفحه مفید است.

از لحاظ تاریخی، اندازه‌گیری سرعت بارگیری محتوای اصلی یک صفحه وب و مشاهده آن برای کاربران، برای توسعه‌دهندگان وب یک چالش بوده است. معیارهای قدیمی تر مانند بار یا DOMContentLoaded به خوبی کار نمی کنند زیرا لزوماً با آنچه کاربر در صفحه خود می بیند مطابقت ندارند. و معیارهای عملکرد کاربر محور جدیدتر مانند First Contentful Paint (FCP) تنها شروع تجربه بارگیری را نشان می دهد. اگر صفحه ای یک صفحه نمایش اسپلش نشان می دهد یا نشانگر بارگذاری را نشان می دهد، این لحظه چندان به کاربر مربوط نمی شود.

در گذشته ما معیارهای عملکردی مانند First Meaningful Paint (FMP) و Speed ​​Index (SI) (هر دو در Lighthouse موجود هستند) را برای کمک به ثبت بیشتر تجربه بارگیری پس از رنگ اولیه توصیه می‌کردیم، اما این معیارها پیچیده هستند و توضیح آنها سخت است. ، و اغلب اشتباه است، به این معنی که آنها هنوز تشخیص نمی دهند که محتوای اصلی صفحه چه زمانی بارگذاری شده است.

بر اساس بحث‌های گروه کاری W3C Web Performance و تحقیقات انجام‌شده در Google، ما دریافتیم که روش دقیق‌تری برای اندازه‌گیری زمانی که محتوای اصلی یک صفحه بارگذاری می‌شود این است که ببینیم چه زمانی بزرگترین عنصر ارائه شده است.

LCP چیست؟

LCP زمان رندر بزرگترین تصویر یا بلوک متن قابل مشاهده در ویوپورت را نسبت به زمانی که کاربر برای اولین بار به صفحه پیمایش کرده است، گزارش می دهد.

نمره LCP خوب چیست؟

برای ارائه یک تجربه کاربری خوب، سایت ها باید تلاش کنند LCP 2.5 ثانیه یا کمتر داشته باشند. برای اطمینان از رسیدن به این هدف برای اکثر کاربران خود، یک آستانه خوب برای اندازه گیری صدک 75 بارگذاری صفحه است که در دستگاه های تلفن همراه و دسکتاپ تقسیم بندی شده است.

چه عناصری در نظر گرفته می شود؟

همانطور که در Largest Contentful Paint API مشخص شده است، انواع عناصر در نظر گرفته شده برای Largest Contentful Paint عبارتند از:

• عناصر <img> ( زمان ارائه فریم اول برای محتوای متحرک مانند GIF یا PNG متحرک استفاده می شود)
• عناصر <image> درون یک عنصر <svg>
• عناصر <video> (زمان بارگذاری تصویر پوستر یا زمان ارائه اولین فریم برای ویدیوها استفاده می شود - هر کدام زودتر باشد)
• یک عنصر با یک تصویر پس‌زمینه که با استفاده از تابع url() بارگذاری شده است، (برخلاف یک گرادیان CSS )
• عناصر سطح بلوک حاوی گره های متنی یا دیگر عناصر متنی در سطح درون خطی.

محدود کردن عناصر به این مجموعه محدود عمدی برای کاهش پیچیدگی بود. عناصر اضافی (مانند پشتیبانی کامل <svg> ) ممکن است در آینده با تحقیقات بیشتر اضافه شوند.

اندازه‌گیری‌های LCP علاوه بر در نظر گرفتن تنها برخی از عناصر، از اکتشافی برای حذف عناصر خاصی استفاده می‌کنند که کاربران احتمالاً آنها را «غیر محتوا» می‌دانند. برای مرورگرهای مبتنی بر Chromium، این موارد عبارتند از:

• عناصر با کدورت 0، آنها را برای کاربر نامرئی می کند.
• عناصری که نمای کامل را پوشش می دهند و احتمالاً عناصر پس زمینه هستند.
• تصاویر جای‌نما یا سایر تصاویر با آنتروپی کم، که احتمالاً محتوای واقعی صفحه را منعکس نمی‌کنند.

مرورگرها احتمالاً به بهبود این اکتشافی‌ها ادامه می‌دهند تا اطمینان حاصل کنند که انتظارات کاربر را از بزرگترین عنصر محتوایی مطابقت می‌دهیم.

این اکتشافی‌های «محتوا» با مواردی که FCP استفاده می‌کند متفاوت است، که ممکن است برخی از این عناصر را در نظر بگیرد، مانند تصاویر مکان‌نما یا تصاویر نمای کامل، حتی اگر واجد شرایط نامزدی LCP نباشند. علیرغم اینکه هر دو از "محتوا" در نام خود استفاده می کنند، هدف این معیارها متفاوت است. FCP زمانی را اندازه گیری می کند که محتوایی روی صفحه نمایش داده شود، در حالی که LCP زمانی که محتوای اصلی رنگ شده است اندازه گیری می کند.

اندازه یک عنصر چگونه تعیین می شود؟

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

برای عناصر تصویری که اندازه آنها از اندازه ذاتی آنها تغییر اندازه داده شده است، اندازه ای که گزارش می شود یا اندازه قابل مشاهده یا اندازه ذاتی است، هر کدام کوچکتر باشد.

برای عناصر متنی، LCP فقط کوچکترین مستطیلی را در نظر می گیرد که می تواند شامل تمام گره های متن باشد.

برای همه عناصر، LCP حاشیه‌ها، بالشتک‌ها یا حاشیه‌های اعمال شده با استفاده از CSS را در نظر نمی‌گیرد.

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

صفحات وب اغلب به صورت مرحله ای بارگیری می شوند و در نتیجه بزرگترین عنصر صفحه ممکن است در حین بارگذاری تغییر کند.

برای مدیریت این پتانسیل تغییر، مرورگر یک PerformanceEntry از نوع largest-contentful-paint ارسال می کند که بزرگترین عنصر محتوایی را به محض اینکه مرورگر اولین فریم را نقاشی کرد، شناسایی می کند. پس از رندر کردن فریم‌های بعدی، هر زمان که بزرگترین عنصر محتوایی تغییر کند، PerformanceEntry دیگری را ارسال می‌کند.

به عنوان مثال، در صفحه‌ای با متن و تصویر قهرمان، مرورگر در ابتدا ممکن است فقط متن را ارائه کند و مرورگر یک ورودی largest-contentful-paint ارسال می‌کند که ویژگی element آن به <p> یا <h1> ارجاع می‌دهد. پس از اتمام بارگذاری تصویر قهرمان، دومین ورودی largest-contentful-paint ارسال می شود که یک ویژگی element به <img> ارجاع می دهد.

یک عنصر تنها پس از رندر شدن و قابل مشاهده شدن برای کاربر می تواند بزرگترین عنصر محتوایی در نظر گرفته شود. تصاویری که هنوز بارگذاری نشده اند، "رندر" در نظر گرفته نمی شوند. گره های متنی نیز در طول دوره بلوک فونت از فونت های وب استفاده نمی کنند. در چنین مواردی، ممکن است یک عنصر کوچکتر به عنوان بزرگترین عنصر محتوا گزارش شود، اما به محض اینکه عنصر بزرگتر رندر را به پایان برساند، یک PerformanceEntry دیگر ایجاد می شود.

علاوه بر تصاویر و فونت‌هایی که دیر بارگذاری می‌شوند، یک صفحه ممکن است با در دسترس قرار گرفتن محتوای جدید، عناصر جدیدی را به DOM اضافه کند. اگر هر یک از این عناصر جدید بزرگتر از بزرگترین عنصر محتوای قبلی باشد، یک PerformanceEntry جدید ایجاد می شود.

اگر بزرگ‌ترین عنصر محتوا از درگاه نمایش یا حتی از DOM حذف شود، بزرگترین عنصر محتوایی باقی می‌ماند مگر اینکه عنصر بزرگ‌تری ارائه شود.

مرورگر به محض تعامل کاربر با صفحه (از طریق ضربه زدن، پیمایش یا فشار دادن کلید)، گزارش ورودی های جدید را متوقف می کند، زیرا تعامل کاربر اغلب آنچه را که برای کاربر قابل مشاهده است تغییر می دهد (مخصوصاً هنگام پیمایش).

برای اهداف تجزیه و تحلیل، فقط آخرین PerformanceEntry ارسال شده را به سرویس تجزیه و تحلیل خود گزارش دهید.

زمان بارگذاری در مقابل زمان رندر

به دلایل امنیتی، مهر زمانی رندر تصاویر برای تصاویر متقاطع که فاقد سرصفحه Timing-Allow-Origin هستند، نمایش داده نمی شود. درعوض، فقط زمان بارگذاری آن‌ها، که سایر APIها قبلاً در معرض نمایش قرار داده‌اند، در دسترس است.

این می تواند منجر به وضعیت به ظاهر غیرممکن شود که در آن LCP توسط API های وب زودتر از FCP گزارش می شود. این فقط به دلیل این محدودیت امنیتی است و آنچه را واقعاً در حال وقوع است نشان نمی دهد.

در صورت امکان، همیشه توصیه می‌کنیم هدر Timing-Allow-Origin را برای دقیق‌تر کردن معیارهای خود تنظیم کنید.

چیدمان عناصر و تغییرات اندازه چگونه مدیریت می شوند؟

برای پایین نگه داشتن سربار عملکرد محاسبه و ارسال ورودی های عملکرد جدید، تغییرات در اندازه یا موقعیت یک عنصر، نامزدهای LCP جدیدی ایجاد نمی کند. فقط اندازه و موقعیت اولیه عنصر در نمای در نظر گرفته می شود.

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

مثال ها

در اینجا چند نمونه از زمانی که بزرگترین رنگ محتوایی در چند وب سایت محبوب رخ می دهد آورده شده است:

در هر دوی این خطوط زمانی، بزرگترین عنصر (با رنگ سبز برجسته شده) با بارگیری محتوا تغییر می کند. در مثال اول، محتوای جدیدی به DOM اضافه می‌شود و عنصری که بزرگترین است را تغییر می‌دهد. در مثال دوم، چیدمان تغییر می‌کند و بزرگترین عنصر محتوای قبلی را از viewport حذف می‌کند.

در حالی که محتوای دیربار اغلب بزرگتر از محتوای موجود در صفحه است، لزوماً اینطور نیست. دو مثال بعدی نشان می دهد که LCP قبل از بارگیری کامل صفحه اتفاق می افتد.

در مثال اول، لوگوی اینستاگرام نسبتاً زود بارگذاری می شود و حتی با اضافه شدن محتوای دیگر، بزرگترین عنصر باقی می ماند. در مثال صفحه نتایج جستجوی گوگل، بزرگترین عنصر پاراگراف متنی است که قبل از بارگیری هر یک از تصاویر یا لوگوی پایانی نمایش داده می شود. از آنجایی که هر تصویر جداگانه کوچکتر از این پاراگراف است، بزرگترین عنصر در طول فرآیند بارگذاری باقی می ماند.

نحوه اندازه گیری LCP

LCP را می توان در آزمایشگاه یا میدان اندازه گیری کرد و در ابزارهای زیر موجود است:

ابزارهای میدانی

• گزارش تجربه کاربر Chrome
• PageSpeed ​​Insights
• کنسول جستجو (گزارش Core Web Vitals)
• کتابخانه جاوا اسکریپت web-vitals

ابزار آزمایشگاهی

• Chrome DevTools
• فانوس دریایی
• PageSpeed ​​Insights
• WebPageTest

اندازه گیری LCP در جاوا اسکریپت

برای اندازه گیری LCP در جاوا اسکریپت، از Largest Contentful Paint API استفاده کنید. مثال زیر نحوه ایجاد یک PerformanceObserver را نشان می‌دهد که به ورودی‌های largest-contentful-paint گوش می‌دهد و آنها را در کنسول ثبت می‌کند.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

در مثال قبلی، هر ورودی ثبت شده largest-contentful-paint کاندید فعلی LCP را نشان می دهد. به طور کلی، مقدار startTime آخرین ورودی منتشر شده، مقدار LCP است. با این حال، همه ورودی‌های largest-contentful-paint برای اندازه‌گیری LCP معتبر نیستند.

بخش زیر تفاوت‌های بین آنچه API گزارش می‌کند و نحوه محاسبه متریک را فهرست می‌کند.

تفاوت بین متریک و API

• API largest-contentful-paint را برای صفحات بارگیری شده در یک برگه پس‌زمینه ارسال می‌کند، اما این صفحات باید هنگام محاسبه LCP نادیده گرفته شوند.
• API پس از پس‌زمینه‌سازی صفحه به ارسال largest-contentful-paint ادامه می‌دهد، اما این ورودی‌ها باید هنگام محاسبه LCP نادیده گرفته شوند. فقط در صورتی می توان عناصر را در نظر گرفت که صفحه در تمام مدت در پیش زمینه باشد.
• وقتی صفحه از حافظه پنهان عقب/ جلو بازیابی می‌شود، API ورودی‌های largest-contentful-paint را گزارش نمی‌کند، اما LCP باید در این موارد اندازه‌گیری شود، زیرا کاربران آن‌ها را به‌عنوان بازدیدهای مجزا از صفحه تجربه می‌کنند.
• API عناصر داخل iframe را در نظر نمی گیرد، اما معیارها به این دلیل هستند که بخشی از تجربه کاربر از صفحه هستند. در صفحات دارای LCP در iframe - برای مثال یک تصویر پوستر در یک ویدیوی جاسازی شده - این به عنوان تفاوت بین CrUX و RUM نشان داده می شود. برای اندازه‌گیری صحیح LCP، باید iframes را در نظر بگیرید. فریم‌های فرعی می‌توانند از API استفاده کنند تا largest-contentful-paint خود را برای جمع‌آوری به فریم اصلی گزارش دهند.
• API LCP را از شروع ناوبری اندازه گیری می کند. برای صفحات از قبل اجرا شده ، به جای آن LCP را از activationStart اندازه گیری کنید، زیرا با زمان LCP مطابق با تجربه کاربر مطابقت دارد.

به جای به خاطر سپردن همه این تفاوت های ظریف، توصیه می کنیم توسعه دهندگان از کتابخانه جاوا اسکریپت web-vitals برای اندازه گیری LCP استفاده کنند که اکثر این تفاوت ها را برای شما مدیریت می کند. (مسئله iframe را پوشش نمی دهد.)

import {onLCP} from 'web-vitals';

// Measure and log LCP as soon as it's available.
onLCP(console.log);

برای مثال کاملی از نحوه اندازه گیری LCP در جاوا اسکریپت به کد منبع onLCP() مراجعه کنید.

اگر بزرگترین عنصر مهم ترین نباشد چه؟

در برخی موارد مهم‌ترین عنصر (یا عناصر) در صفحه با بزرگترین عنصر یکسان نیست، و توسعه‌دهندگان ممکن است علاقه بیشتری به اندازه‌گیری زمان‌های رندر این عناصر دیگر داشته باشند. همانطور که در مقاله معیارهای سفارشی توضیح داده شده است، با استفاده از Element Timing API امکان پذیر است.

نحوه بهبود LCP

یک راهنمای کامل در مورد بهینه سازی LCP در دسترس است تا شما را در فرآیند شناسایی زمان بندی LCP در میدان و استفاده از داده های آزمایشگاهی برای بررسی و بهینه سازی آنها راهنمایی کند.

منابع اضافی

• درس های آموخته شده از نظارت بر عملکرد در Chrome توسط Annie Sullivan در performance.now() (2019)

تغییرات

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

برای کمک به شما در مدیریت این موضوع، همه تغییرات در پیاده سازی یا تعریف این معیارها در این تغییرات ظاهر می شود.

اگر بازخوردی برای این معیارها دارید، آن را در گروه web-vitals-feedback Google ارائه کنید.