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

مقدمه

بزرگترین ترسیم محتوایی 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 را نسبت به زمانی که صفحه برای اولین بار شروع به بارگیری کرده است ، گزارش می دهد.

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

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

چه عناصری به عنوان 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 با تکمیل بارگذاری صفحه تغییر می کند. در مثال اول ، محتوای جدید به DOM اضافه می شود و این باعث تغییر بزرگترین المان Viewport می‌شود. در مثال دوم نیز با تغییر طرح بندی محتوایی که قبلاً بزرگترین ترسیم را داشته از viewport حذف می شود.

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

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

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

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

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

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

• Chrome User Experience Report
• PageSpeed Insights
• Search Console (Core Web Vitals report)
• web-vitals JavaScript library

ابزارهای آزمایشگاهی اندازه‌گیری 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