LCP چیست | تفاوت‌های بین Metric و API در LCP

در مقاله LCP چیست تفاوت‌های بین Metric و API به ادامه مقالات وب ویتال و سه بخش اصلی Core Web Vitals می پردازیم. که در مقالات  گذشته به طور کامل و جامع CLS  و FID را به شما آموزش دادیم. در این مقاله از سری مقالات تیک4 قصد داریم شما را تعریف LCP و تفاوت‌های بین Metric و API آشنا کنیم. باما همراه باشید.

Largest Contentful Paint (LCP) یا بزرگ‌ترین عنصر محتوی صفحه

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

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

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

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

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

LCP چیست؟

متریک LCP زمان ارائه بزرگ‌ترین بلوک تصویر یا متن قابل‌مشاهده در نقطه نمایش را گزارش می‌دهد.

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

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

چه المان‌هایی بررسی می‌شوند؟

طبق آنچه اخیراً در API بزرگ‌ترین عنصر محتوی صفحه مشخص‌شده است، انواع المان‌های موردبررسی برای LCP از قرار زیر است:

• المان‌های <img>
• المان‌های <image> در داخل یک المان <svg>
• المان‌های <video> (تصویر پوستر استفاده‌شده است)
• یک المان با بارگذاری تصویر پس‌زمینه از طریق عملکرد url (در مقایسه با گرادیان CSS)
• المان‌های block-level شامل گره‌های متنی یا دیگرزیر مجموعه‌های المان‌های inline- level متنی

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

چگونه سایز یک المان مشخص می‌گردد؟

سایز گزارش‌شده یک المان برای LCP معمولاً سایز قابل‌مشاهده آن برای کاربر در نقطه نمایش است. اگر المانی تا بیرون از نقطه نمایش گسترش یابد یا اگر هر المانی بریده‌بریده باشد یا overflow (سرریز) غیرقابل مشاهده داشته باشد، این قسمت‌ها در بحث سایز المان محاسبه نمی‌شوند.

برای المان‌های عکس از سایز واقعی خود تغییر سایز داده می‌شوند، سایز قابل‌مشاهده یا سایز واقعی، هرکدام که کوچک‌تر باشد، گزارش داده می‌شود. به‌عنوان‌مثال، عکس‌هایی که از اندازه واقعی خود خیلی کوچک‌تر شده باشند تنها سایزی که در آن نمایش داده‌شده‌اند، گزارش می‌شود و عکس‌هایی که کشیده یا پهن‌شده‌اند تنها با سایز واقعی‌شان گزارش می‌شوند.

برای المان‌های متنی تنها سایز گره‌های متنی بررسی می‌شود (کوچک‌ترین مستطیلی که تمام گره‌های متنی را در بردارد)

برای تمام المان‌ها حاشیه، لایی گذاری یا لبه ایجادشده از طریق CSS بررسی نمی‌شود.

برخی اوقات مشخص کردن اینکه کدام گره‌های متنی به کدام المان‌ها تعلق دارد می‌تواند مشکل باشد، به‌ویژه المان‌هایی که زیرمجموعه‌شان شامل المان‌های inline و گره‌های متنی ساده و همچنین المان‌های block-level است. نکته کلیدی این است که همه گره‌های متنی فقط و فقط به نزدیک‌ترین المان سرشاخه block-level خود تعلق دارند. در شرایط خاص: هر گره متنی به المانی تعلق دارد که بلوک حاوی آن را ایجاد کند.

چه زمانی LCP گزارش می‌شود؟

اغلب صفحه‌های اینترنت در چند مرحله بارگذاری می‌شوند و درنتیجه این امکان وجود دارد که بزرگ‌ترین المان در صفحه جابجا شود.

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

به‌عنوان‌مثال، در صفحه‌ای شامل متن و عکس یک قهرمان، ممکن است مرورگر در ابتدا فقط متن را در نقطه‌ای ارائه دهد که ویژگی المان اطلاعات LCP آن ارجاع به <p> یا <h1> است. سپس به‌محض اتمام بارگذاری عکس قهرمان، دومین اطلاعات LCP توزیع می‌شود که ویژگی المان آن ارجاع به <img> است.

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

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

اگر المانی که اخیراً به‌عنوان بزرگ‌ترین المان محتوی بوده از نقطه نمایش (یا حتی از DOM) حذف شود، بازهم بزرگ‌ترین المان محتوی باقی می‌ماند مگر اینکه یک المان بزرگ‌تر ارائه شود.

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

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

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

زمان بارگذاری در مقایسه با زمان ارائه

بنا به دلایل امنیتی، برچسب زمانی ارائه تصاویر برای تصاویر cross-origin‌ فاقد هدر timing-allow-origin نمایش داده نمی‌شود. در عوض، تنها زمان بارگذاری نشان داده می‌شود (زیرا این مورد همواره از طریق API های دیگر وب نشان داده می شود). مثال کاربردی زیر نشان می‌دهد المان‌هایی بازمان ارائه غیرقابل‌دسترس را چگونه مدیریت کنیم. اما همیشه توصیه می‌شود در صورت امکان سر صفحه timing-allow-origin تنظیم شود تا متریک‌های شما دقیق‌تر شوند.

چگونه تغییرات سایز و صفحه‌آرایی یک المان را مدیریت کنیم؟

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

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

بنابراین (همان‌طور که در قسمت بالا عنوان شد) اگر المانی از DOM حذف شود یا منبع تصویر مربوط به آن تغییر کند، بررسی نخواهد شد. با ادامه مقاله LCP چیست و تفاوت‌های بین Metric و API باما همراه باشید.

 مثال‌ها

در اینجا چند مثال از زمانی که LCP در برخی وب‌سایت‌های معروف رخ می‌دهد آورده‌ایم:

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

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

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

در فریم اول جدول زمانی اینستاگرام، شما ممکن است متوجه شوید که اطراف لوگوی دوربین کادر سبز ندارد. علت این امر این است که یک المان <svg> و المان‌های <svg> اخیراً کاندیدهای LCP را بررسی نکرده‌اند. اولین کاندیدای LCP متن در فریم دوم است.

چگونه LCP را اندازه‌گیری کنیم؟

LCP را می‌توان در آزمایشگاه یا در یک فیلد اندازه گرفت و در ابزارهای زیر موجود است:

ابزارهای فیلد

• گزارش تجربی کاربران کروم
• دیدگاه‌ها در مورد سرعت صفحه
• کنسول‌های جستجو (گزارش Core Web Vitals)
• آزمایشگاه جاوا اسکریپت web-vitals

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

• ابزارهای Dev کروم
• فانوس دریایی یا lighthouse گوگل
• تست صفحه اینترنتی

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

برای اندازه‌گیری LCP در جاوا اسکریپت شما می‌توانید از Layout Instability API یا رابط برنامه کاربردی ناپایداری چیدمان استفاده کنید. مثال زیر نشان می‌دهد که ناظر اجرا ایجاد کنید تا متوجه ورودی‌های تغییر چیدمان پیش‌بینی‌نشده شود، آن‌ها را جمع‌آوری کند و در کنسول ثبت کند. با ادامه مقاله LCP چیست و تفاوت‌های بین Metric و API باما همراه باشید.

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 است. بااین‌وجود همه اطلاعات LCP برای اندازه‌گیری آن باارزش نیستند.

بخش بعدی فهرستی است از تفاوت‌های بین آنچه API گزارش می‌دهد و چگونگی محاسبه متریک.

تفاوت‌های بین متریک و API

• API اطلاعات LCP برای صفحات بارگذاری شده در پس‌زمینه را توزیع می‌کند اما این صفحات هنگام محاسبه LCP نادیده گرفته می‌شوند.
• API به توزیع اطلاعات LCP بعدازاینکه صفحه پس‌زمینه شده، ادامه خواهد داد اما این اطلاعات باید هنگام محاسبه LCP نادیده گرفته شوند (فقط اگر صفحه در کل زمان پیش‌زمینه باشد، المان‌ها بررسی می‌شوند).
• API زمانی که صفحه در حافظه پنهانی قبل یا بعد (back/forward cache) مجدداً ذخیره‌شده باشد، اطلاعات LCP را گزارش نمی‌دهد اما LCP باید در این موارد اندازه‌گیری شود زیرا کاربران آن‌ها را به‌عنوان مشاهده صفحه مجزا تجربه می‌کنند.
• API المان‌های در آی فریم را بررسی نمی‌کند اما شما باید برای اندازه‌گیری صحیح LCP آن‌ها را بررسی کنید. ساب فریم‌ها می‌توانند از API برای جمع‌بندی اطلاعات LCP را به پرنت فریم گزارش دهند.

توسعه‌دهندگان به‌جای به خاطر سپردن تمام این تفاوت‌های ظریف، می‌توانند از آزمایشگاه جاوا اسکریپت web-vitals برای اندازه‌گیری LCP استفاده می‌کنند که تمامی این تفاوت‌ها را (در صورت امکان) برای شما مدیریت می‌کند.

شما می‌توانید به کد منبع برای دستیابی به LCP رجوع کنید که مثال کاملی است از چگونگی اندازه‌گیری LCP در جاوا اسکریپت.

در برخی موارد (مانند آی فریم‌های متقاطع) امکان اندازه‌گیری LCP در جاوا اسکریپت وجود ندارد. بخش محدودیت‌های آزمایشگاه web-vitals را با جزئیات مشاهده نمایید. با ادامه مقاله LCP چیست و تفاوت‌های بین Metric و API باما همراه باشید.

چه اتفاقی می‌افتد اگر بزرگ‌ترین المان مهم‌ترین نباشد؟

در برخی موارد مهم‌ترین المان (المان‌ها) در صفحه با بزرگ‌ترین المان یکی نیست و توسعه‌دهندگان ممکن است بیشتر علاقه‌مند باشند که زمان ارائه این المان‌های دیگر را اندازه‌گیری کنند. این امر با استفاده از API زمان‌بندی المان همان‌طور که مقاله متریک‌های مرسوم (custom metrics) تعریف‌شده، امکان‌پذیر است.

چگونه LCP را ارتقاء دهیم؟

اصولاً LCP تحت تأثیر چهار فاکتور است:

• زمان‌های پاسخ‌دهی آرام سرور
• جاوا اسکریپت بلوکه کردن ارائه یا Render-blocking و CSS
• زمان‌های بارگذاری منبع
• ارائه طرف سرویس‌گیرنده

گزارش تغییرات

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