معیار بزرگترین عنصر (LCP) چیست؟
از نظر تاریخی، اندازه‌گیری سرعت بارگیری و مشاهده محتوای اصلی یک صفحه وب برای کاربران یک چالش مهم برای توسعه‌دهندگان بوده است. معیار بزرگترین عنصر (LCP) کلید ماجراست!
معیارهای قدیمی مانند load یا DOMContentLoaded خوب نیستند، زیرا لزوماً با آنچه کاربر در صفحه خود می‌بیند مطابقت ندارند. معیارهای جدیدتر عملکرد کاربر محور مانند First Contentful Paint (FCP) نیز فقط ابتدای تجربه بارگیری را اندازه‌گیری می‌کنند. اگر صفحه‌ای نشانگر بارگیری را نشان می‌دهد، این لحظه برای کاربر چندان مناسب نیست.
معیارهای عملکردی مانند First Meaningful Paint (FMP) و Speed Speed (SI) (هر دو موجود در Lighthouse) نیز موجود هستند، اما توضیح این معیارها پیچیده است، و اغلب اشتباه است – به این معنی که آنها هنوز هم بارگذاری محتوای اصلی صفحه را تشخیص نمی‌دهند.
بعضی اوقات نگاه ساده‌تر، بهتر است. بر اساس بحث در کارگروه عملکرد وب W3C و تحقیقاتی که در Google انجام شده است، متوجه شده‌ایم که یک روش دقیق‌تر برای اندازه‌گیری زمان بارگیری محتوای اصلی یک صفحه، بررسی زمان ارائه بزرگترین عنصر است.
معیار بزرگترین عنصر (LCP) چیست؟
معیار Largest Contentful Paint (LCP) زمان رندر بزرگترین تصویر یا بلوک متنی را که در قسمت viewport قابل مشاهده است، نسبت به زمان بارگیری صفحه برای اولین بار، را گزارش می‌کند.
امتیاز خوب برای معیار بزرگترین عنصر (LCP) چیست؟
برای ایجاد یک تجربه کاربری خوب، سایت‌ها باید تلاش کنند تا بزرگترین عنصر 2.5 ثانیه یا کمتر بارگیری و نمایش داده شود. برای اطمینان از رسیدن به این هدف برای بیشتر کاربران، یک آستانه خوب برای اندازه‌گیری، رسیدن به این آستانه در ۷۵ درصد بار بارگیری صفحه است که در دستگاه‌های تلفن همراه و دسکتاپ اتفاق می‌افتد.
چه عناصری در این معیار در نظر گرفته می‌شوند؟
انواع عناصر در نظر گرفته شده برای بزرگترین محتوا عبارتند از:
- عناصر <img>.
- عناصر <image> داخل عنصر <svg>.
- عناصر <video> (از تصویر پوستر استفاده می‌شود).
- عنصری با تصویر پس‌زمینه که از طریق تابع url () بارگیری می‌شود (در مقابل گرادیان CSS).
- عناصر سطح بلوک حاوی گره‌های متنی یا سایر عناصر متن درون خطی فرزندان(children).
توجه داشته باشید، محدود کردن عناصر به این مجموعه محدود به منظور ساده نگه داشتن موارد در ابتدا بوده است. با انجام تحقیقات بیشتر ممکن است در آینده عناصر اضافی (به عنوان مثال <svg> و <video>) اضافه شوند.
اندازه یک عنصر چگونه تعیین می‌شود؟
اندازه عنصر گزارش شده برای بزرگترین محتوا معمولاً اندازه‌ای است که برای کاربر در داخل ویوپورت قابل‌مشاهده است. اگر عنصر خارج از ویوپورت گسترش یابد، یا اگر هر یک از عناصر قطع شده یا دارای سرریز غیرقابل مشاهده(non-visible overflow) باشد، آن قسمت‌ها در اندازه عنصر محاسبه نمی‌شوند.
برای عناصر تصویری که اندازه واقعی آنها تغییر کرده است، اندازه‌ای محاسبه خواهد شد که کوچکتر باشد، خواه اندازه قابل مشاهده خواه اندازه واقعی. به عنوان مثال، تصاویری که به مقدار بسیار کوچکتر از اندازه واقعی خود کوچک شده‌اند، فقط اندازه‌ای را که در آن نمایش داده می‌شوند محاسبه می‌شود، در حالی که تصاویری که در اندازه بزرگتر کشیده شده‌اند، فقط اندازه‌های واقعی آنها گزارش می‌شود.
برای عناصر متن، فقط اندازه گره‌های متنی آنها در نظر گرفته شده است (کوچکترین مستطیلی که همه گره‌های متنی را در بر می‌گیرد).
برای همه عناصر، هیچ حاشیه، padding یا حاشیه اعمال شده از طریق CSS در نظر گرفته نشده است.
چه زمانی بزرگترین محتوا گزارش می‌شود؟
صفحات وب معمولاً به صورت مرحله‌ای بارگیری می‌شوند و در نتیجه ممکن است بزرگترین عنصر صفحه تغییر کند.
برای مقابله با این مساله، مرورگر به محض اینکه اولین کادر را ارائه کرد، یک PerformanceEntry از بزرگترین محتوا را شناسایی می‌کند که بزرگترین عنصر محتوایی را مشخص می‌کند. اما سپس، پس از ارائه فریم‌های بعدی، هر زمان که بزرگترین عنصر محتوا تغییر کرد، PerformanceEntry دیگری ارسال می‌شود.
به عنوان مثال، در صفحه‌ای با متن و یک تصویر، مرورگر ممکن است در ابتدا متن را رندر کند – در آن زمان مرورگر یک ورودی با بزرگترین محتوا را ارسال می‌کند که ویژگی عنصر آن احتمالاً به یک <p> یا <h1> اشاره دارد. بعداً، پس از اتمام بارگذاری تصویر، دومین ورودی با محتوای بزرگتر ارسال می‌شود و ویژگی عنصر آن به <img> اشاره می‌کند.
توجه به این نکته مهم است که فقط می‌توان یک عنصر را بزرگترین عنصر محتوایی در نظر گرفت که برای کاربر قابل‌مشاهده است. تصاویری که هنوز بارگیری نشده‌اند “ارائه” محسوب نمی‌شوند. در چنین مواردی ممکن است عنصر کوچکتر به عنوان بزرگترین عنصر محتوا گزارش شود، اما به محض اتمام رندر، عنصر بزرگتر از طریق یک شی دیگر PerformanceEntry گزارش می‌شود.
علاوه بر تصاویر و قلم‌هایی که دیرهنگام بارگذاری می‌شوند، یک صفحه ممکن است با دسترسی به محتوای جدید عناصر جدیدی را به DOM اضافه کند. اگر هر یک از این عناصر جدید از بزرگترین عنصر محتوای قبلی بزرگتر باشند، عملکرد جدیدی نیز گزارش می‌شود.
اگر عنصری که در حال حاضر بزرگترین عنصر محتوایی است از قسمت view حذف شود (یا حتی از DOM حذف شود)، همچنان بزرگترین عنصر محتوایی در نظر گرفته خواهد شد مگر اینکه یک عنصر بزرگتر ارائه شود.
به محض تعامل کاربر با صفحه (از طریق ضربه زدن، اسکرول یا فشار دادن کلید)، مرورگر گزارش ورودی‌های جدید را متوقف می‌کند، زیرا تعامل کاربر اغلب، موارد قابل‌مشاهده برای کاربر را تغییر می‌دهد (به خصوص در مورد اسکرول این مطلب درست است).
برای تجزیه و تحلیل، شما فقط باید آخرین PerformanceEntry ارسال‌شده شده را به سرویس تجزیه و تحلیل خود گزارش دهید.
زمان بارگذاری در مقابل زمان ارائه
به دلایل امنیتی، مهر زمانی تصاویر cross-origin که فاقد هدر Timing-Allow-Origin هستند، قرار نمی‌گیرد. در عوض، فقط زمان بارگذاری آنها در معرض دید قرار دارد (زیرا این مورد از قبل از طریق بسیاری از APIهای وب دیگر نشان داده شده است).
نحوه تغییر عناصر و چیدمان عناصر چگونه انجام می شود؟
برای پایین نگه داشتن عملکرد در محاسبه و ارسال عملکردهای جدید، تغییرات در اندازه یا موقعیت یک عنصر باعث ایجاد نامزدهای جدید LCP نمی‌شود. فقط اندازه و موقعیت اولیه عنصر در ویوپورت در نظر گرفته می‌شود. یعنی، ممکن است تصاویری که در ابتدا خارج از صفحه ارائه می‌شوند و سپس به داخل صفحه انتقال داده می‌شوند، گزارش نمی‌شوند. همان‌طور که قبلاً اشاره شد، عناصری است که ابتدا در ویوپورت ارائه شده‌اند و سپس به پایین رانده می‌شوند، در گزارش به همان اندازه در ویوپورت گزارش خواهند شد.
مثال‌ها
در اینجا چند نمونه در چند وب سایت معروف مرور شده اند:
در هر دو جدول زمانی بالا، بزرگترین عنصر با بارگذاری محتوا تغییر می‌کند. در مثال اول، محتوای جدید به DOM اضافه می‌شود و این بزرگترین عنصر را تغییر می‌دهد. در مثال دوم، چیدمان تغییر می‌کند و محتوایی که قبلاً بیشترین مقدار را داشت، از ویوپورت حذف می‌شود.
گرچه غالباً چنین اتفاقی می‌افتد که محتوای بارگذاری دیررس نسبت به محتوای موجود در صفحه بزرگتر است، اما لزوماً اینگونه نیست. دو مثال بعدی بزرگترین محتوا را قبل از بارگیری کامل صفحه نشان می‌دهد.
در مثال اول، لوگوی اینستاگرام نسبتاً زود بارگیری می‌شود و حتی با نمایش تدریجی سایر مطالب، بزرگترین عنصر باقی می‌ماند. در مثال صفحه نتایج جستجوی Google، بزرگترین عنصر یک پاراگراف از متن است که قبل از پایان بارگیری تصاویر یا لوگو نمایش داده می‌شود. از آنجا که تمام تصاویر منفرد کوچکتر از این پاراگراف هستند، بزرگترین عنصر در طول فرآیند بارگذاری باقی می‌ماند.
بزرگترین عنصر (LCP) چگونه اندازه‌گیری می‌شود؟
LCP را می‌توان در آزمایشگاه یا به طور عملیاتی اندازه‌گیری کرد. ابزارهای زیر در دسترس هستند:
ابزار عملیاتی:
ابزار آزمایشگاهی:
اندازه‌گیری LCP در جاوااسکریپت
برای اندازه‌گیری LCP در JavaScript، می‌توانید از Largest Contentful Paint APIAPI استفاده کنید. مثال زیر نحوه ایجاد PerformanceObserver را نشان می‌دهد که ورودی‌های largest-contentful-paint را زیر نظر می‌گیرد و آنها را به کنسول وارد می‌کند.
|
1 2 3 4 5 |
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 بزرگترین محتوا را برای صفحات بارگیری شده در یک برگه پس زمینه ارسال می کند، اما هنگام محاسبه LCP این صفحات باید نادیده گرفته شوند.
- API پس از ایجاد پس زمینه در یک صفحه، به
largest-contentful-paintبیشتر ادامه می‌دهد، اما هنگام محاسبه LCP، باید این ورودی‌ها را نادیده گرفت (فقط در صورتی که صفحه در تمام زمان در پیش‌زمینه باشد، عناصر در نظر گرفته می‌شوند). - هنگام بازگرداندن صفحه از کش بک/ فرانت، API، ورودی‌های
largest-contentful-paintرا گزارش نمی‌کند، اما LCP باید در این موارد اندازه‌گیری شود زیرا کاربران آنها را به عنوان بازدیدهای صفحه تجربه می‌کنند. - API، ورودی‌هایی را که درون iframes رخ می‌دهند گزارش نمی‌کند، اما برای اندازه‌گیری صحیح LCP باید آنها را در نظر بگیرید. فریم‌های فرعی می‌توانند با استفاده از API ورودی‌های
largest-contentful-paintخود را برای تجمیع در فریم والد گزارش دهند.
توسعه‌دهندگان به جای اینکه همه این تفاوت‌های ظریف را بخاطر بسپارند، می‌توانند برای اندازه‌گیری LCP از کتابخانه جاوا اسکریپت web-vitals استفاده کنند که این اختلافات را برای شما کنترل می‌کند (در صورت امکان).
|
1 2 3 |
import {getLCP} from 'web-vitals'; // Measure and log LCP as soon as it's available. getLCP(console.log); |
اگر بزرگترین عنصر مهمترین عنصر نباشد چه می‌شود؟
در بعضی موارد مهمترین عنصر (یا عناصر) صفحه با بزرگترین عنصر یکی نیست و توسعه‌دهندگان ممکن است به جای آن علاقه بیشتری به اندازه‌گیری زمان رندر این عناصر دیگر را داشته باشند. همان‌طور که در مقاله معیارهای سفارشی شرح داده شده است، این مساله با استفاده از Element Timing API امکان‌پذیر است.
نحوه بهینه‌سازی معیار بزرگترین عنصر محتوا (LCP)
درمقاله جداگانه با جزییات تمام نحوه بهینه‌سازی LCP شرح داده شده است.
منبع: