دسته بندی ها

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

LCP زمان بارگذاری بزرگترین تصویر یا بلوک متنی قابل مشاهده در viewport است.

تاثیر تجاری web vitals بر کسب و کار

مقدمه

بزرگترین ترسیم محتوایی LCP یکی از مهمترین معیارهای web vitals یک پارامتر مهم و کاربر-محور برای اندازه گیری سرعت بارگذاری درک شده توسط کاربراست، Largest Contentful Paint نقطه ای را در جدول زمانی بارگذاری صفحه مشخص می کند که محتویات اصلی صفحه احتمالاً بارگذاری شده اند- LCP سریع در ذهن کاربر مفید بودن محتوا را تداعی می‌کند.

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

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

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

LCP چیست ؟

معیار Largest Contentful Paint (LCP) زمان نمایش بزرگترین بلوک تصویر یا متن قابل مشاهده در viewport را نسبت به زمانی که صفحه برای اولین بار شروع به بارگیری کرده است ، گزارش می دهد.

معیار Largest Contentful Paint (LCP) زمان نمایش بزرگترین بلوک تصویر یا متن قابل مشاهده در viewport
LCP زمان بارگذاری بزرگترین تصویر یا بلوک متنی قابل مشاهده در viewport

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

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

تفاوت FCP و LCP
تفاوت FCP و LCP (تفاوت تجربه کاربری در هر پارامتر)

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

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

  • <img> المان تصاویر.
  • <image> المان تصاویر موجود در SVG.
  • <video> المان ویدئو که دارای تصویر پوستر می‌باشند.
  • عناصری با تصویر پس زمینه از طریق تابع url() در CSS (گرادیانت را شامل نمی شود).
  • کلیه تگهایی که به صورت block رندر می شوند.

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

اندازه المان چگونه تعیین می شود؟

اندازه عنصری که برای Largest Contentful Paint گزارش می‌شود معمولاً اندازه ای است که برای کاربر در viewport قابل مشاهده است. اگر عنصر در خارج از viewport گسترش یابد آن قسمت ها در LCP لحاض نمی‌گردد.

برای تصاویری که اندازه نمایش داده شده آنها با اندازه ذاتی آنها فرق می کند تلاش می‌شود کمترین اندازه در نظر گرفته شود، برای مثال در تصویری که در محل نمایش خود کوچکتر شده است اندازه کوچک آن و برای تصویری که دچار کشیدگی و بزرگنمایی شده اندازه ذاتی در نظر گرفته می‌شود.

برای عناصر متن ، فقط اندازه گره های متنی آنها در نظر گرفته می شود (کوچکترین مستطیلی که همه گره های متن را در بر می گیرد). در واقع خاصیت های padding , margin و border آنها در نظر گرفته نمی‌شود.

بزرگترین ترسیم محتوایی چه زمانی اتفاق می‌افتد؟

بزرگترین ترسیم محتوایی چه زمانی اتفاق می‌افتد؟
بزرگترین ترسیم محتوایی چه زمانی اتفاق می‌افتد؟

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

تغییر المان ها و اندازه آنها چگونه مدیریت می‌شود؟

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

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

مثال هایی برای LCP

در اینجا چند مثال از نحوه اتفاق افتادن Largest Contentful Paint در چند وب سایت مطرح را بررسی می کنیم

بررسی lcp برای وب سایت CNN
بررسی lcp برای وب سایت CNN
بررسی lcp برای وب سایت techcrunch
بررسی lcp برای وب سایت techcrunch

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

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

بررسی lcp برای وب سایت instagram
بررسی lcp برای وب سایت instagram
بررسی lcp برای وب سایت GOOGLE
بررسی lcp برای وب سایت GOOGLE

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

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

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

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

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

ابزارهای آزمایشگاهی اندازه گیری LCP

  • Chrome DevTools
  • Lighthouse
  • WebPageTest

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

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

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

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

نحوه بهبود LCP

پارامترهای مختلفی بر LCP تاثیر گذار هستند اما عمدتا تحت تأثیر چهار عامل زیر قرار می گیرد:

  • زمان پاسخ سرور
  • رندر بلکینگ جاوا اسکریپت و CSS
  • زمان بارگذاری منابع
  • رندرکردن سمت کاربر

هرکدام از عوامل بالا خود می‌تواند چندین زیر شاخه داشته باشد و بسیار پیچیده ، برای درک عمیق تر در مورد نحوه بهبود LCP ،به زودی مقاله ای با این عنوان در اختیارتان قرار خواهیم داد . البته برای راهنمایی بیشتر می توانید روش های زیر را در نظر داشته باشید.

  • با استفاده از الگوی PRPL لود سریع را تجربه کنید
  • بهینه سازی رندر بحرانی
  • بهینه سازی CSS
  • بهینه سازی تصاویر
  • بهینه سازی فونت ها
  • بهینه سازی جاوا اسکریپت (برای طرف کاربر)

سوالات متداول در مورد LCP

این مقاله تشریح تقریبا کاملی بر Largest Contentful Paint (بزرگترین ترسیم محتوایی) است، امیدواریم بتوانیم این مقاله را به روز نگه داریم و اطلاعات بیشتری به آن بیفزایم منتظر نظرات و پیشنهادات شما هستیم.

‫2 نظر

  • علی رضا گفت:

    عالی واقعا خیلی کامل و جامع امیدوارم موفق باشید

    • محمد اصغری گفت:

      خواهش میکنم، خوشحالیم تونستید استفاده کنید

  • دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *