LCP چیست و چگونه آن را بهنیه کنیم؟
اگر با طراحی یا مدیریت سایت سر و کار داشته باشید یقینا با سوال LCP چیست مواجه شده اید. Largest Contentful Paint که به اختصار به آن LCP گفته می شود یک معیار مهم و کاربر محور برای اندازه گیری سرعت بارگیری محتوای یک صفحه است. در واقع LCP معیاری برای اندازه گیری زمان بارگیری بزرگترین عناصر یک صفحه است و زمان رندر یا نمایش کامل بزرگترین تصویر یا بلوک متنی را که در ویوپورت قابل مشاهده است را گزارش می کند. LCP یکی از مهم ترین فاکتورهای سئو سایت بوده و یکی از ارکان Core Vital Web است که در 4 May سال 2020 توسط گوگل معرفی شد.
در ادامه ی پاسخ به پرسش LCP چیست و چه اهمیتی دارد باید گفت یک LCP سریع به کاربر اطمینان می دهد که صفحه شما حاوی مطالب مفید و سایت شما یک سایت خوب و قابل اطمینان است. از نظر تاریخی تولیدکنندگان وب برای اندازه گیری سرعت بارگیری محتوای اصلی یک صفحه وب و قابل مشاهده بودن آن برای کاربران همواره دچار چالش بوده اند.
معیارهای قدیمی مانند بارگذاری یا DOMContentLoaded خوب نیستند زیرا لزوما با آنچه کاربر در صفحه خود می بیند مطابقت ندارند. البته معیارهای جدیدتر عملکرد کاربر محور مانند First Contentful Paint (FCP) فقط ابتدای تجربه بارگیری را ثبت می کنند. در گذشته ما معیارهای عملکردی مانند First Meaningful Paint (FMP) و Speed Speed (SI) را برای کمک به ثبت تجربه بارگیری بیشتر پس از LCP توصیه کرده ایم اما توضیح این معیارها پیچیده و اغلب اشتباه است، به این معنی که آنها هنوز طول زمان مورد نیاز برای بارگذاری محتوای اصلی صفحه را تشخیص نمی دهند.
با بررسی دقیق و تحقیقاتی که در گوگل انجام شده است متوجه شده ایم که یک روش دقیق تر برای اندازه گیری هنگام بارگیری محتوای اصلی یک صفحه بررسی زمان ارائه بزرگترین عنصر آن صفحه یا همان LCP است.
اندازه مناسب LCP چیست
برای اینکه پاسخ دقیقی به سوال LCP چیست بدهیم نیاز است میانگین زمان مورد نظر برای نمایش آن را نیز بررسی کنیم. برای ایجاد یک تجربه کاربری خوب سایت ها باید تلاش کنند که بزرگترین LCP در 2.5 ثانیه اول صفحه بارگیری شود. برای اطمینان از دستیابی به این هدف برای بیشتر کاربران یک آستانه مناسب برای اندازه گیری بارگیری وجود دارد و شما می توانید برای بیشتر کاربران، رسیدن به این زمان در ۷۵ لود از ۱۰۰ بار لود کردن صفحه در دستگاه های همراه و دسکتاپ را در نظر داشته باشید.
عناصر مهم در محاسبه LCP چیست
اگر همچنان در مورد LCP چیست دچار ابهام هستید اجازه دهید در مورد عناصر اصلی آن توضیحاتی بدهیم. انواع عناصری که ما در یک صفحه به عنوان LCP می شناسیم عبارتند از:
- عناصر <img>
- <image> عناصر داخل عنصر <svg>
- <video> عناصر (از تصویر پوستر استفاده می شود)
- عنصری با تصویر پس زمینه از طریق تابع url () بارگیری می شود (در مقابل گرادیان CSS)
- عناصر سطح بلوک شامل گره های متنی یا سایر عناصر متن درون خطی کوچک.
توجه داشته باشید محدود کردن عناصر به این مجموعه به منظور ساده نگه داشتن موارد در ابتدای کار است. با انجام تحقیقات بیشتر ممکن است در آینده عناصر اضافی (به عنوان مثال <svg> ، <video>) اضافه شود.
اندازه گیری یک عنصر LCP
بخش مهمی از پاسخ به پرسش LCP چیست معیار اندازه گیری آن است. اندازه عنصر گزارش شده برای LCP معمولا اندازه ای است که برای کاربر در داخل ویوپورت قابل مشاهده است. اگر عنصر خارج از ویوپورت گسترش یابد یا اگر هر یک از عناصر قطع شده یا دارای اضافات غیرقابل مشاهده باشد آن قسمت ها به عنوان اندازه واقعی عنصر حساب نمی شوند.
برای عناصر تصویری که از اندازه ذاتی خود متفاوت هستند اندازه ای قابل مشاهده است که کوچکتر باشد. به عنوان مثال تصاویری که به کوچکتر از اندازه ذاتی خود تبدیل می شوند فقط اندازه ای را که در آن نمایش داده می شوند گزارش می کنند، در حالی که تصاویر کشیده شده یا گسترش یافته در اندازه بزرگتر فقط اندازه های ذاتی خود را گزارش می دهند. البته بد نیست بدانید برای عناصر متن فقط اندازه گره های متنی آنها در نظر گرفته شده است.
برای همه عناصر هیچ حاشیه padding یا اضافات اعمال شده از طریق CSS در نظر گرفته نشده است.
بزرگ ترین LCP چیست و چه زمانی نمایش داده می شود؟
صفحات وب معمولا به صورت مرحله ای بارگیری می شوند و در نتیجه ممکن است بزرگترین LCP در پایان بارگیری نمایش داده شود. برای مقابله با این مشکل معمولا به محض اینکه مرورگر اولین کادر را رنگ آمیزی کرد یک PerformanceEntry بزرگترین LCP را شناسایی می کند و پس از فریم های بعدی هر زمان که بزرگترین LCP تغییر کرد یک PerformanceEntry دیگری ارسال می شود.
به عنوان مثال در صفحه ای با متن و یک تصویر از یک قهرمان ممکن است مرورگر در ابتدا متن را رندر کند یا نمایش دهد که احتمالا پسوند عنصر آن به یک <p> یا <h1> اشاره می کند. بعدا هنگامی که بارگذاری متن به پایان رسید دومین ورودی LCP ارسال می شود که احتمالا پسوند عنصر آن به <img> اشاره می کند.
در ادامه ی بررسی پاسخ به سوال LCP چیست توجه به این نکته مهم است که فقط می توان یک عنصر را بزرگترین عنصر محتوایی در نظر گرفت و در معرض دید کاربر قرار داد. همچنین گره های متنی در طول بارگیری فونت از هرفونتی استفاده نمی کنند. در چنین مواردی ممکن است عنصر کوچکتر به عنوان بزرگترین عنصر محتوایی گزارش شود، اما به محض اتمام رندر عنصر بزرگتر از طریق یک شی دیگر PerformanceEntry نمایش داده می شود. علاوه بر بارگیری دیرهنگام تصاویر و فونت ها با دسترسی به محتوای جدید یک صفحه می تواند عناصر جدیدی را به DOM اضافه کند. اگر هر یک از این عناصر جدید از بزرگترین عنصر محتوای قبلی بزرگتر باشد عملکرد جدیدی نیز گزارش می شود.
مرورگر گزارش ورودی های جدید را به محض تعامل کاربر با صفحه از طریق ضربه زدن، پیمایش یا کلیک کردن متوقف می کند زیرا تعامل کاربر اغلب آنچه را که برای کاربر قابل مشاهده است تغییر می دهد.
چگونگی نحوه تغییر اندازه عناصر LCP
در پایان برای اینکه توضیح کامل تری به سوال LCP چیست داده باشیم قصد داریم در مورد چگونگی نحوه تغییر اندازه عناصر LCP نیز صحبت کنیم. برای پایین نگه داشتن عملکرد در محاسبه و ارسال عملکردهای جدید تغییرات در اندازه یا موقعیت یک عنصر باعث ایجاد عناصر جدید LCP نمی شود. در واقع فقط اندازه و موقعیت اولیه عنصر در ویوپورت در نظر گرفته می شود. این قاعده به این معنی است که تصاویری که در ابتدا خارج از صفحه ارائه می شوند و سپس بر روی صفحه انتقال می یابند گزارش نمی شوند. علاوه بر این به معنای این است که عناصری که ابتدا در ویوپورت ارائه شده اند و سپس به پایین رانده می شوند از نظر دید همچنان با اندازه اولیه و در نمای ویوپورت آنها گزارش می شود.
مطالب کاربردی مرتبط:
نظرات کاربران