فهرست مطالب بستن

LCP یا Largest Contentful Paint یک معیار مهم و کاربر محور برای بررسی سرعت بارگذاری صفحه ست. LCP یعنی مدت زمانی که صرف میشه تا بزرگترین ترسیم محتوایی صفحه بارگذاری بشه و برای کاربر به نمایش دربیاد. یک LCP یا بزرگترین ترسیم محتوایی صفحه سریع میتونه به کاربر این اطمینان رو بده که این صفحه به درد بخوره و اونو ترغیب میکنه که توی صفحه بمونه.

در یکی از مقالات گذشته راجع به Core Web Vitals و معیارهای گوگل در سال ۲۰۲۰ صحبت کردیم. و گفتیم که که Core Web Vitals چند تا معیار هستند و هر کدوم یکی از جنبه های تجربه کاربری رو بررسی و اندازه گیری می کنن. یکی از اون جنبه ها LCP یا Largest Contentful Paint یا بزرگترین ترسیم

محتوایی صفحه است.

پیشنهاد برای مطالعه
Core Web Vitals یا وایتال های وب – معیارهای گوگل در سال ۲۰۲۰

اگه یه نگاه به عقب بندازیم، میبینیم که برای توسعه دهندگان وب، توانایی سنجدیدن سرعت بارگذاری محتوای اصلی یک صفحه وب، و به نمایش در اومدنش برای کاربر ها همیشه یک چالش بوده. معیار های قدیمی تر مثل Load یا DOMContentLoaded خوب نیستند، چون اونها با چیزی که کاربر در صفحه نمایش خودش میبینه مطابقت ندارند. و معیار های جدیدتر مثل FCP یا همون First Contentful Paint یا اولین ترسیم محتوایی صفحه فقط ابتدای تجربه بارگیری رو ضبط میکنه.

درگذشته معیار های عملکردی مانند: First meaningful Paint (FMP) و  Speed Index (SI) رو برای کمک به ضبط بیشتر تجربه بارگیری پس از رنگ اولیه توصیه می کردند. اما توضیح این پارامترها پیچیده، دشوار و غالباً اشتباهه.  و این یعنی هنوز نمیتونند تشخیص بدن که چه زمانی محتوای اصلی صفحه بارگذاری میشه.

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

LCP یا بزرگترین ترسیم محتوایی صفحه چیه؟

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

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

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

برای ارائه یک تجربه کاربری یا UX خوب، سایت ها باید تلاش کنند که در حداکثر ۲.۵ ثانیه ، صفحه بارگیری یا لود بشه، و بزرگترین ترسیم محتوایی LCP به نمایش در بیاد.

پس به این نتیجه میرسیم که اگر LCP کمتر از ۲.۵ ثانیه باشه، صفحه شما نمره خوبی از نظر سرعت نمایش محتوا میگیره. اگر این لود تایم بین ۲ تا ۴ قرار بگیره نیاز به بهبود داره و اگر زمان لودینگ بیشتر از ۴ ثانیه باشه، نشون  میده که صفحه تون وضع خوبی نداره.

ترسیم های LCP یا Largest Contentful Paint

انواع ترسیم های در نظر گرفته شده برای بزرگترین ترسیم محتوایی LCP عبارتند از:

  • ترسیم های تصویری یا عکس با تگ <img>
  • ترسیم های تصویری یا عکس با تگ <image> در کنار ترسیم <svg>
  • ترسیم های ویدئویی با تگ <video> (تصاویر پوستر هم در نظر گرفته میشه)
  • ترسیمی با بکگراند بارگذاری شده از طریق تگ url()
  • ترسیم های Block-level شامل گره های متنی
محدود کردن ترسیم ها به این مجموعه محدود به منظور ساده کردن موضوع در وهله اول بود

تعیین اندازه ترسیم LCP

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

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

برای ترسیم های بصری، که سایز اصلی شون تغییر کرده، اندازه کوچکتر به عنوان اندازه معیار لحاظ میشه. یعنی چی؟ مثلاً تصاویری که از اندازه اصلی شون کوچک تر شده باشن، اون تصویر سایز کوچیک شده به نمایش در میاد، نه تصویر با سایز اصلی. ولی اگه یه عکسی رو با کدها در سایت بزرگ کرده باشیم یا از عرض یا ارتفاع کشیده باشیمش، اون اندازه اصلیش که کوچیکتره گزارش میشه. یعنی سایز اصلیش.

برای ترسیم های متن، فقط اندازه گره های متن Text nodes اونها در نظر گرفته میشه (کوچکترین مستطیلی که تموم گره های متن رو در بر بگیره).

زمان گزارش دادن LCP

صفحات وب اغلب مرحله به مرحله لود میشن، و در نتیجه ممکنه LCP صفحه تغییر کنه. به منظور هندل کردن این احتمال تغییر، مرورگر یک PerformancEntry از نوع Largest-Contentful-Paint ارسال میکنه تا به محض این که مرورگر اولین قاب Frame رو به نمایش در آورد، بزرگترین ترسیم قابل قبول رو شناسایی کنه. اما پس از اون، پس از ارائه قاب های بعدی، هر زمان که بزرگترین ترسیم محتوایی تغییر کند، PerformanceEntry  دیگه ای ارسال میکنه.

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

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

اگر یک صفحه ترسیمی رو از DOM حذف کنه، اون ترسیم دیگه در نظر گرفته نمیشه.به طور مشابه، اگر منبع تصویر مرتبط با یک ترسیم تغییر کنه (به عنوان مثال تغییر img.src از طریق Javascript)، تا زمان بارگذاری تصویر جدید، اون ترسیم متوقف میشه.

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

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

نکته
از انجایی که کاربرها میتونند صفحات رو در یک بکگراند تَب Background tab یا همون تب پیش زمینه باز کنند، ممکنه تا زمانی که کاربر تَب رو متمرکز نکنه، LCP رخ نده، که میتونه خیلی دیر تر از زمان لودش یا Load time باشه.

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

به دلایل امنیتی، نشان گر زمان ارائه تصویر، برای تصاویری که منشاء متفاوت دارند و فاقد Timing-Allow-Origin هستند در معرض دید قرار نمیگیره، فقط زمان بارگذاری در معرض دید قرار میگیره (چون از طریق بسیاری  از API های وب دیگه در معرض دیده).

مثال کابردی که در ادامه میاد، نحوه کار با ترسیم هاییه که زمان ارائه اونها در دسترس نیست. اما همیشه توصیه شده که، در صورت امکان، عنوان Timing-Allow-Origin رو تنظیم کنید. در نتیجه اندازه گیری های شما دقیق تر خواهد بود.

کنترل چگونگی چیدمان و تغییر اندازه ترسیم ها

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

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

بااین حال ، (همونطور که بالا هم گفتم) اگر یک ترسیم از DOM حذف بشه یا این که منبع تصویر مرتبط با اون تغییر کنه، دیگه درنظر گرفته نمیشه.

بد نیست یکم از پیچیدگی موضوع کم کنیم. اینها چند تا مثال از وقوع LCP یا بزرگترین ترسیم محتوایی صفحه در چند تا سایت هستند.

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

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

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

نکته
در اولین قابِ جدول زمانی اینستاگرام ممکنه متوجه بشید که اطراف اون دوربین کادر سبز رنگ وجود نداره. دلیلش اینه که این ترسیم <svg> ست. و این ترسیم ها درحال حاضر کاندید های LCP یا بزرگترین ترسیم محتوایی صفحه در نظر گرفته نمیشن. اگه قاب دوم رو نگاه کنید میبینید که متن در این قاب اولین کاندیدای LCP در نظر گرفته شده.

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

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

حالا بیاین به استفاده از LCP یا بزرگترین ترسیم محتوایی صفحه برای  گوگل نیوز Google News نگاه کنیم.

در این عکس میبینید که تیتر برجسته کاندیدای LCP شده. همونطور که میبینید اینجا هم تیتر بیشترین ترافیک رو به خودش اختصاص میده و  افراد به خاطر اون تیتره میان به این سایت نه به خاطر آرم گوگل نیوز یا چیز دیگه 🙂

و این یعنی اغلب بزرگترین ترسیم برجسته ترین نقش رو بازی میکنه

اندازه گیری LCP یا بزرگترین ترسیم محتوایی صفحه

LCP رو میشه در آزمایشگاه Lab یا فیلد Field اندازه گیری کرد.

ابزار فیلد:

  • گزارش تجربه کاربری کروم  Chrome UX Report
  • کنسول جستجو (گزارش Core Web Vital)
  • Lighthouse

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

  • ابزار توسعه دهنده کروم Chrome DevTools
  • PageSpeed Insight
  • WebPageTest

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

ساده ترین روش برای اندازه گیری LCP (مثل تمام پارامتر های Web Vitals field) به وسیله کتابخانه Web-Vital جاوا اسکریپت ست. که اندازه گیری دستی و پیچیده  LCP رو به یک عملکرد واحد تبدیل میکنه.

پرسش
اگر بزرگترین ترسیم ، مهم ترین ترسیم نباشد چه؟

مقایسه LCP با FCP و FMP

اول بذارین یه دور دیگه این مفاهیم رو تعریف کنیم که خوب برامون جا بیفتن.

گفتیم که FCP یا First Contentful Paint همون اولین ترسیم محتوایی محسوب میشه. LCP یا Largest Contentful Paint به بزرگترین ترسیم محتوایی میگن و FMP یا First Meaningful Paint اولین ترسیم معنادار صفحه هست.

مزایا:

LCP بر روی سرعت ارائه محتوای اصلی متمرکز است، در حالی که FCP بر روی سرعت تحویل محتوای اول تمرکز دارد. به عنوان نماینده محتوای اصلی بزرگترین ترسیم همیشه محتوای اصلی رو مشخص نمیکنه. ولی در عمل نشون داده که این ابتکار ساده در اغلب موارد خوب کار میکنه.

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

در مقایسه با FMP که به کشفیات پیچیده متکی هست، LCP از ابتکاری ساده تر استفاده میکنه که در نتیجه تفسیر  و اجرای اونو برای فروشندگان مختلف مرورگر آسون تر میکنه.

محدودیت ها

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